Using js to modify html div with message (help?)

[BobMCT]

I didn't know whether to ask here or in html so I'm starting here. I have an eCommerce prog that calls upon an external service to purchase something. The page consists of a form with fields and the "Purchase" button has an onClick event that call a js function to use innerHTML to place a simple-ish "please wait..." message in the div content.
While I get no errors and the purchase occurs I do not see any content changing indicating the please wait msg.

My question is:

What technique should I use to write the message over the web page form effectively replacing the form content with the message content?

I've tried a simple web page output but because there is no intervening input from the user the successful page appears below the please wait page which is NOT the desired action.

Ideas/suggesting to put me on the correct track greatly appreciated.

Thanks

 

[jpadie]

assuming the interaction is via ajax you could

1. before the ajax call - show a modal dialog that says please wait.
2. make the ajax call synchronous
3. once the response is received, dismiss the modal dialog

in jquery it would look something like this

$('#myElem').on('click', function(e){
  $(this).preventDefault();
  $('#myModalDialog').dialog('open');
  var f = $(this).closest('form');
  $.ajax({ 
     url: $(f).attr('action'),
     data: $(f).serialize(),
     type: $(f).attr('method'),
     dataType: 'json',
     complete: function(data){
       //do something with response
       $('#myModalDialog').dialog('close');
     }
  });
});

 

[vacunita]

You can change the content of a div to display whatever you want.

You can use the div's innerHTML property to change its contents. So the please wait message could be replaced by whatever you want to show.

Assuming your onclick event waits for a return value before showing the "successful" You can use that same moment to change the content of the Div holding the please wait message.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[BobMCT]

Alrighty then, I created a js function which is called by the onClick event which does replace the major section of my page with the please wait message and image. However, it seems to hang there without continuing. When the user clicks the submit button that has the onClick event, shouldn't the script get called (which it does) then control continues by returning the call to the program for further action?

Sorry if these are basic Q's but one had to learn from the experts.

 

[vacunita]

That depends entirely on what your Js function is doing. You Js function will execute all its code and end. unless you are doing something else there which tells it to wait for a response or something.

Without knowing what your function is doing its impossible to offer any suggestions.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[BobMCT]

Yep - I asked a blind question:

Here is my js function:

// function to Overlay "Please Wait" msg on checkout screen
function cnl_PleaseWait() {
var xMsg = '<center><br /><img src="pix/loader.gif" width=195" height=14" alt="please wait" ><br />Please wait while we process your purchase...<br /></center>';
document.getElementById('_ccWait').innerHTML = xMsg;
}

and the ONLY reference to it is on the submit button's onClick tag.

Without this tag when the submit button is clicked control returns to the program (PHP) which edits the fields and calls a remote process to process the purchase mechanism. Upon completion control returns to the program which then performs a complete refresh of the user's page indicating the purchase has been completed.

Following guidelines I created the js function, coded it in my file of js items that is included with the src of the page, then when the onClick even occurs the js replaced the content of the "_PleaseWait" div with the html code in the function.

The page section does get replaced but nothing else happens. I don't see anywhere with any mechanism to wait for a reply.

Ideas???

 

[vacunita]

You cannot wait for a reply in this scenario. You are basically submitting a form to a PHP script, and it executes and then displays whatever you tell it to display.

In this Scenario it should be PHP delivering a success message when its done processing the purchase server side.

Once the Page refreshes, whatever happened before with your JS is irrelevant. Its a new page load, and no actions have been taken on that page, and no JS is running, unless you have something set to run on the onLoad event of the body.

Basically, JS and PHP are separate entities that run at separate times and have no connection to each other. JS is not aware of when the PHP code finishes executing.

Once your PHP script is done, it needs to decide to not display the rest of the page and simply print out a message with the result.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech