This topic is locked
[SOLVED]

 Show Loading... message when user clicks custom button

8/3/2017 12:33:24 PM
ASPRunner.NET General questions
M
Molasar author

Using ASPRunner NET 9.8
Is there a way to show a/or Loading... message when a user clicks a custom button?
I know you can select Display "Loading..." box on the list page from the Misc page. But that's not what I want.
Suppose I have a datagrid button which invokes a webservice to update a customer's credit amount. This takes some time to fetch.

In the meantime, I would like to display "Loading..." the whole time the server is working. The standard ASPRunner functionality kicks in when the datagrid is refreshed.
Is there a way to invoke the ASPRunner "Loading..." functionality on-demand or create a custom one?
I tried
Runner.runLoading('');
on the Click Before javascript button event but no joy.
Any thoughts welcome.

jadachDevClub member 8/3/2017

Try adding

ctrl.setMessage("Sending request to server...");



to the client before of the button code. By default it is already there.

M
Molasar author 8/3/2017



Try adding

ctrl.setMessage("Sending request to server...");



to the client before of the button code. By default it is already there.


Yes, I see what you mean; however, this places a message below the button.
What I want is something more like the "Loading..." message used by ASPRunner itself, where the datagrid "blocks" with a darkened overlay until refreshed.
A central, popup style message would also do, so long as the user doesn't have to click Ok to dismiss, etc.

jadachDevClub member 8/3/2017
H
heilmanmd 9/5/2017

here's how I do it
First I put a spinner into the HTML ( design mode ) in Visual Editor on the page that has the custom button

I normally put this just before the ($footer} way at the bottom ...
i.e. <DIV class="loading" id="mark">

<IMG id="spinner" src="images/Loadingspinner.gif" border="0">

</DIV>
you can find web sites that you can generate your own spinner...
and here's the custom CSS you put in your custom CSS in the style

this puts the spinner dead center of the web page... etc...
.loading{

width:75px;

height:75px;

position:fixed;

top:50%;

left:50%;

margin-top:-150px;

margin-left:-150px;

}
Now say you wish to have the a button that you wish to have the loading spinner appear when pressed....
not to interfere with the aSP runner gen'd ID's for a button
I put the ubiquitous <span id="somebuttonid"> around the <button>.... </button> html </span> with my own ID
then in the ONLOAD Javascript event for the page I use the JQIUERY event trigger to show / hide the spinner
jQuery comes with asp runner... so below works out of the box... no problems...
$("#spinner").hide(); // this hides the spinner when page is first loaded....
$( "#somebuttonid" ).mouseup(function() { // I use mouseup so as to not interfere with the mouse click action of the button

// alert( "Handler for mouseup called." );

$("#spinner").show(); // and here show the button

});
works great!!
hope it helps...

jadachDevClub member 9/5/2017

Thanks for sharing. I will definitely try this out.

M
Molasar author 9/5/2017



here's how I do it
First I put a spinner into the HTML ( design mode ) in Visual Editor on the page that has the custom button

I normally put this just before the ($footer} way at the bottom ...
i.e. <DIV class="loading" id="mark">

<IMG id="spinner" src="images/Loadingspinner.gif" border="0">

</DIV>
you can find web sites that you can generate your own spinner...
and here's the custom CSS you put in your custom CSS in the style

this puts the spinner dead center of the web page... etc...
.loading{

width:75px;

height:75px;

position:fixed;

top:50%;

left:50%;

margin-top:-150px;

margin-left:-150px;

}
Now say you wish to have the a button that you wish to have the loading spinner appear when pressed....
not to interfere with the aSP runner gen'd ID's for a button
I put the ubiquitous <span id="somebuttonid"> around the <button>.... </button> html </span> with my own ID
then in the ONLOAD Javascript event for the page I use the JQIUERY event trigger to show / hide the spinner
jQuery comes with asp runner... so below works out of the box... no problems...
$("#spinner").hide(); // this hides the spinner when page is first loaded....
$( "#somebuttonid" ).mouseup(function() { // I use mouseup so as to not interfere with the mouse click action of the button

// alert( "Handler for mouseup called." );

$("#spinner").show(); // and here show the button

});
works great!!
hope it helps...


Thanks!!!
What I did was this:
In List form:
<DIV title="SAEM" id="wsdialog" style="display: none;">

<TABLE style="margin-top: 8px;">

<TBODY>

<TR>

<TD style="vertical-align: top;" rowspan="2">

<DIV id="wsdialogimg">

<IMG src="">

</DIV>

</TD>

<TD style="padding: 0px 0px 10px 10px;">

<DIV id="wsdialogtxt1">

</DIV>

</TD>

</TR>

<TR>

<TD style="padding: 3px 0px 3px 10px;">

<DIV id="wsdialogtxt2">

</DIV>

</TD>

</TR>

</TBODY>

</TABLE>

</DIV>
In button:
Client Before:

var id = "Act__Saldo";

var button = $("[id^=" + id + "]");

Runner.addDisabledClass(button);

$("#wsdialog").dialog({

autoOpen: false,

modal: true

});

$("#wsdialog").dialog("option", "width", 240);

$("#wsdialog").dialog("option", "height", 120);

$("#wsdialog").dialog("option", "resizable", false);

$("#wsdialog").css("background-color", "palegreen");

$("#wsdialogimg").children('img').attr('src','/images/hourglass-go-icon.png');

$("#wsdialogtxt1").text("Consultando web service.");

$("#wsdialogtxt2").text("Por favor espere...");

$("#wsdialog").dialog("open");
Server:

string sql = "DECLARE @returnstatus int EXEC @returnstatus = usp_ActualizaSaldo '" + keys["contractId"].ToString() + "' select @returnstatus";

XVar returnstatus = tDAL.DBLookup(sql);

result["exitcode"] = returnstatus.ToString();
Client After:

if (result["exitcode"] !=0) {

$('#wsdialog').dialog('close');
$("#wsdialog").dialog({

autoOpen: false,

modal: true,

'buttons': {

'Aceptar': function(){

// here is the modification of the button

// opacity set to 25%, all events unbound

location.reload();

}

}

});

$("#wsdialog").dialog("option", "width", 275);

$("#wsdialog").dialog("option", "height", 175);

$("#wsdialog").dialog("option", "resizable", false);

$("#wsdialog").css("background-color", "orange");

$("#wsdialogimg").children('img').attr('src','/images/alert-icon.png');

$("#wsdialogtxt1").text("Error al consultar el webservice.");

$("#wsdialogtxt2").text("Favor de reintentar más tarde.");

$("#wsdialog").dialog("open");

}

else {

location.reload();

};
This seems to work nicely.