williamrouse Posted January 15, 2010 Report Share Posted January 15, 2010 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! Quote Link to comment Share on other sites More sharing options...
BeeDev Posted January 15, 2010 Report Share Posted January 15, 2010 (edited) 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 January 15, 2010 by BeeDev Quote Link to comment Share on other sites More sharing options...
williamrouse Posted January 16, 2010 Author Report Share Posted January 16, 2010 Thanks for the ideas but it seems to be something else. I will play with this for a few hours and see. Quote Link to comment Share on other sites More sharing options...
williamrouse Posted January 16, 2010 Author Report Share Posted January 16, 2010 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. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted January 18, 2010 Report Share Posted January 18, 2010 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? Quote Link to comment Share on other sites More sharing options...
williamrouse Posted January 18, 2010 Author Report Share Posted January 18, 2010 (edited) 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 January 18, 2010 by williamrouse Quote Link to comment Share on other sites More sharing options...
williamrouse Posted January 18, 2010 Author Report Share Posted January 18, 2010 I echoed out the entire HTML on my development system and it still behaves the same. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted January 18, 2010 Report Share Posted January 18, 2010 <?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" ? Quote Link to comment Share on other sites More sharing options...
williamrouse Posted January 18, 2010 Author Report Share Posted January 18, 2010 The button is the thing that makes a web kit browser sing. That did it on my development system. Thanks! Quote Link to comment Share on other sites More sharing options...
williamrouse Posted January 18, 2010 Author Report Share Posted January 18, 2010 I was looking at W3 for a explanation of the difference between button and submit but did not see a definition, can you give me one and why your choice worked. Thanks! WBR Quote Link to comment Share on other sites More sharing options...
BeeDev Posted January 18, 2010 Report Share Posted January 18, 2010 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? ) Quote Link to comment Share on other sites More sharing options...
williamrouse Posted January 18, 2010 Author Report Share Posted January 18, 2010 Ahhhh, Yeah, thats the ticket. Quote Link to comment Share on other sites More sharing options...
monkeysaurus Posted January 18, 2010 Report Share Posted January 18, 2010 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. Quote Link to comment Share on other sites More sharing options...
williamrouse Posted January 19, 2010 Author Report Share Posted January 19, 2010 monkeysaurus and BeeDev: Thanks for your help. I have read the articles and your notes and gained some understanding of this is working. WBR Quote Link to comment Share on other sites More sharing options...
williamrouse Posted March 4, 2010 Author Report Share Posted March 4, 2010 (edited) 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 March 4, 2010 by williamrouse Quote Link to comment Share on other sites More sharing options...
williamrouse Posted March 6, 2010 Author Report Share Posted March 6, 2010 This is line caused the problem and is not need in my POST $('#rightContent').html(ajax_load); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.