INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

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

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

(OP)
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 ponder

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

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

CODE

$('#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');
     }
  });
}); 

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

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

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

(OP)
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.

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

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

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

(OP)
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???

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

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close