Web Connection
How to call toastr to display a message
Gravatar is a globally recognized avatar based on your email address. How to call toastr to display a message
  Chris Jewell
  All
  Mar 19, 2019 @ 07:26am

Hi,

I have a dynamic page generated within my WebAppTestProcess.prg that uses the HtmlDataGrid function to list some data, one of the columns is defined as a button and when clicked it recalls the same page but with an additional querystring, in this condition a VFP function is called and the page renders with the new data. This all works well, but I'd like to use toastr to show the resulting message from the VFP function (i.e. "Data updated successfully" or not)

I have added the following to the PageHeader: <link href="~/bower/components/toastr/toastr.min.css" rel="stylesheet"/>

And the following to the footer: <script src="~/bower-components/toastr/toastr.min.js"></script>

But I'm not sure how to add the necessary call to toastr within my WebAppTestProcess.prg function? I've included my function below if it helps.

Thanks, Chris

***********************************
FUNCTION UserProdList()
******************
Local cUPLEmployee, cUPLJobKey
cUPLEmployee = ALLTRIM(UPPER(Request.QueryString("name")))
cUPLJobKey = ALLTRIM(UPPER(Request.QueryString("Job")))
IF VARTYPE(cUPLJobKey)<>"C"
	cUPLJobKey = ""
ENDIF

IF !EMPTY(cUPLJobKey)
	&& Update the live table
	cUPLJob = ExtractFirstWord(cUPLJobKey,";")
	cUPLGrpNo = ExtractLastWord(cUPLJobKey,";")
	TryCmd([completeprint(cUPLJob,cUPLGrpNo,"Printed")],gcWebDataRoot)
	&& Display alert to say table updated
	
	## This is where I want to call toastr ##
	
ENDIF

SELECT Job, schfixed as Scheduled, Qty, Pro as Process_Code, Des as Print_Description, GrpNo FROM sjob_alloc WHERE ALLTRIM(UPPER(employee)) = cUPLEmployee AND !del INTO CURSOR CurUserAlloc
lnCount = _Tally

Response.WriteLn( this.PageHeaderTemplate("Job List for " + PROPER(cUPLEmployee) ))
Response.WriteLn([<div class="page-header-text"><a href="PrintersList.wc"><i class="fas fa-list"></i> ]+PROPER(cUPLEmployee)+[ - ] + TRANSFORM(lnCount) + [ Job(s)</a></div>])

loConfig = CREATEOBJECT("HtmlDataGridConfig")
loConfig.PageSize = 0
loConfig.CssClass = "table table-striped small"

loColumn = loConfig.AddColumn([HtmlLink("ShowJob.wc?job=" + TRANSFORM(CurUserAlloc.job),Job)],"Job")
loColumn.Sortable = .T.
loColumn.SortExpression ="Job"

loColumn = loConfig.AddColumn("Scheduled","Scheduled")
loColumn.FieldType = "D"
loColumn.Sortable = .T.
loColumn.SortExpression ="Scheduled"

loColumn = loConfig.AddColumn("Qty","Qty")
loColumn.FieldType = "N"
loColumn.Sortable = .T.
loColumn.SortExpression ="Qty"

loColumn = loConfig.AddColumn("Process_Code","Process Code")
loColumn.Sortable = .T.
loColumn.SortExpression ="Upper(Process_Code)"

loColumn = loConfig.AddColumn("Print_Description","Print Description")
loColumn.Sortable = .T.
loColumn.SortExpression ="Upper(Print_Description)"

loConfig.AddColumn("HtmlCheckBox([chkIsActive_] + TRANSFORM(Job) ,[],Scheduled < DATE())","Overdue")

TEXT TO cHtmlBtn noshow
HtmlButton("btnPrint3","Print Done",[class='btn btn-default' onclick="location.href='UserProdList.wc?name=]+Trans(cUPLEmployee)+[&job=] + TRANS(CurUserAlloc.job) + [;] + TRANS(CurUserAlloc.grpno) + ['"])
ENDTEXT
loConfig.AddColumn(cHtmlBtn,"Action")

lcHtml = HtmlDataGrid("CurUserAlloc",loConfig)
Response.Write(lcHtml)
Response.Write( this.PageFooterTemplate() )   

ENDFUNC
Gravatar is a globally recognized avatar based on your email address. re: How to call toastr to display a message
  Harvey Mushman
  Chris Jewell
  Mar 19, 2019 @ 07:53am

You need to add in your JavaScript code for this page when you want to fire a Toastr popup message. This action can occur at any point you choose but it must be tied to some user or server enabled event.

For example, you have a button id=btnPrint3 with an onclick method that fires when a user clicks on it. Assuming you want to display a toastr on the click, you might add JavaScript code to the onclick event. And inline example might threrefore look as follows:

onclick="toastr.info('whats up doc'); location.href='UserProdList.wc?name=]+Trans(cUPLEmployee)+[&job=] + TRANS(CurUserAlloc.job) + [;] + TRANS(CurUserAlloc.grpno) + ['"]

I can't test this solution because I don't have your application running here, but the idea is simple, Toastr gets invoked by JavaScript code running on the page that is in the browser memory. What the event is that causes it to occur is in your control. If you have an onPageLoad snippet of JavaScript code and the server sent a message (please fill out this form...), the toastr message could be fired within the onPageLoad code.

Handling what to do with the Toastr after it is displayed, like looking for a confirmation to delete something will also take adding JavaScript to the page.

Gravatar is a globally recognized avatar based on your email address. re: How to call toastr to display a message
  Chris Jewell
  Harvey Mushman
  Mar 19, 2019 @ 09:04am

Thank you Harvey, much appreciated. I'll post back my results for future ref 😉

© 1996-2019