Jump to content
Stef's Coding Community
williamrouse

Bad jQuery Post

Recommended Posts

I have a jQuery post problem. I am sending information from a form with a jQuery click function.

$("#donateButton").click(function (){
               $.post("creditCardAuthorize.php",
               {
                   amount: $('#amount').val(),
                   description: $('#donation').val()
               });
               $('#rightContent').html(ajax_load).load('content/creditCardAuthorize.php');
           });

The problem is that on some browser it goes to the correct page, but on others it goes to the home page, or I should say it does an ajax_load of the home page.

 

IE 8 works

Chrome goes to home page

FireFox works

Safari goes to home page

 

I am not sure of where to start looking for the problem. Any suggestions?

Thanks!

Share this post


Link to post
Share on other sites

if this "creditCardAuthorize.php" is echo-ing the results, then you should use the callback function of $.post like so

$("#donateButton").click(function (){
   $.post("creditCardAuthorize.php", { amount: $('#amount').val(), description: $('#donation').val() }, function(data){
       $('#rightContent').html(data);
   });
});

 

EDIT:

The callback function is just a normal function so you can do other stuff in there too, for example to show an error message if there's no data:

$("#donateButton").click(function (){
   $.post("creditCardAuthorize.php", { amount: $('#amount').val(), description: $('#donation').val() }, function(data){
       if(data.length > 0){ $('#rightContent').html(data); }else{ $('#rightContent').html("
Sorry, an error has occured, no data was returned");
   });
});

Edited by BeeDev

Share this post


Link to post
Share on other sites

I ended up with this since it is clearer to me:

    $("#donateButton").click(function () {
               $('#rightContent').html(ajax_load);
               $.ajax({
                   type: 'POST',
                   url: 'content/creditCardAuthorize.php',
                   data: {
                       amount: $('#amount').val(),
                       description: $('#donation').val()
                   },
                   success: function(html){
                       $('#rightContent').html(html);
                   },
                   dataType: 'html'
               });
           });

At the moment, this will load the page in a DIV called rightContent in IE and FF but in Chrome and Safari it creates a new page. This happens with both jQuery 1.4 and 1.3.2.

Share this post


Link to post
Share on other sites

make sure "creditCardAuthorize.php" doesn't set any "Header" options, and its only output shud be "echo" statements for it to work. If there's a "Header" set then the page is loaded as a new page in a browser, this might be happening in your case?

Share this post


Link to post
Share on other sites

Give me an example of what setting an header would be.

I gutted the page so there is only html and php there and it behaves the same in both sets of browsers. The php sets variables and echos out put. The HTML describes some text. Are you saying that the HTML should be echoed out?

 

I put up a test page at this address:

http://www.rouse.ws/furiTest/

 

Choose Donations and then continue. In the webkit browsers you'll notice the address bar has the page of the creditCardAuthorize.php page listed, but in IE and FF it is not listed.

I think this is a clue, but I don't know what it means.

 

Thanks for the comments!

Edited by williamrouse

Share this post


Link to post
Share on other sites

<?php

header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1

header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past

?>

 

Just for an example.

 

But your problem is related to something else I think.

 

Can you try change the code for the #donateButton from type="submit" to type="button" ?

Share this post


Link to post
Share on other sites

type=submit buttons:

When this type of button is wrapped by a

tag, the button submits the form automatically to the URL defined on the tag, and using the method defined on the tag (post/get) when clicked.

 

type=button buttons:

These buttons dont actually do ANYTHING without an event & javascript function attached to them, such as onclick, onfocus, onblur etc etc. (But using jQuery you dont really need to put an event i.e. "onclick" on the button code, you can just attach the events from jQuery code using the button ID or CSS Class selector, but you already know that right? :D )

Share this post


Link to post
Share on other sites

Hi William,

 

Chrome on Windows is still taking me to the page rather than ajaxing in the content. Here's why.

 

Using a 'submit' button

When you click the 'continue' button, the browser attempts to carry out the default action - in this case, posting your form variables to creditCardAuthorize.php. Although you've written a piece of javascript that listens out for the button click event, the click event is continuing to bubble up the DOM, and the form is being submitted. You can prevent this by intercepting the form submit event and halting it in place. Something like this should do the trick:

    // pass in the window.event object to the function
    $("form#formDonate").submit(function (event) {

               // this is critical!
               event.preventDefault();

               $('#rightContent').html(ajax_load);
               $.ajax({
                   type: 'POST',
                   url: 'content/creditCardAuthorize.php',
                   data: {
                       amount: $('#amount').val(),
                       description: $('#donation').val()
                   },
                   success: function(html){
                       $('#rightContent').html(html);
                   },
                   dataType: 'html'
               });
           });

 

Notice that I've passed in the event to the function, and I'm stopping it from continuing with event.preventDefault().

 

You can read more on stopping event propagation here.

 

Using a 'button' type button

Because there is no default action associated with an , there is no default action to stop; hence why this worked for you.

 

All the best.

Share this post


Link to post
Share on other sites

I thought I was done with this page but evidently I have introduced an error when I POST the request to what is the page to prelude the Authorization of the credit card payment. Whatever monetary choice of donation that is made, the POST does not work to send the values to the next page and the default value of $20.00 is registered. After looking at my code for a day I don?t see the error so I am hoping that someone else?s eyes can see it. Here is the code

FURI Donation
 






   Contributions are tax deductible for residents of the United States and Jamaica.





   Yes, I want to become a contributor. Please accept my donation as indicated below.
   (Contributions in $US only; please check one):







Donation Form 


   $10

   $20 

   $30 

   $40 

   $50 

   $75 

   $100

   Other Amount 




Amount $ 
 










Here is the test site.

http://www.rouse.ws/furiTest/

For this test all menu choices goes to the Donation page.

Thanks for any help.

WBR

Edited by williamrouse

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...