pakiman Posted December 27, 2016 Share Posted December 27, 2016 So I am trying to run ajax to submit without refreshing with mid as the mapID and random as the string to see if the user refreshed. But when I press the button it does nothing. I have my <div id=summary></div> but nothing comes up. Can someone help <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js"> <script type="text/javascript"> function getData() { $.ajax({ url : "/map_data.php?mid=1&random=2040187", type : "post", success : function(data) { $('#summary').html(data); } }); } </script> <form method="POST"> <button name="data" type="button" onclick="getData()">Click</button> </form> <?php $order=$_Get['mid']; echo $order; ?> Quote Link to comment https://forums.phpfreaks.com/topic/302822-ajax-submit-without-refreshing/ Share on other sites More sharing options...
Barand Posted December 27, 2016 Share Posted December 27, 2016 You are using POST method but attempting to access $_GET variables (and it's not $_Get) Quote Link to comment https://forums.phpfreaks.com/topic/302822-ajax-submit-without-refreshing/#findComment-1540777 Share on other sites More sharing options...
pakiman Posted December 27, 2016 Author Share Posted December 27, 2016 You are using POST method but attempting to access $_GET variables (and it's not $_Get) Still hasnt fixed it. Quote Link to comment https://forums.phpfreaks.com/topic/302822-ajax-submit-without-refreshing/#findComment-1540778 Share on other sites More sharing options...
Psycho Posted December 27, 2016 Share Posted December 27, 2016 Either you didn't make all the changes Barand mentioned or you are not testing on an actual web server. If you have an HTML page that you are opening through your file system, the AJAX will fail (at least I know it does in Chrome) - for security reasons. You need both the user page and the server page to be on a web server. Or, the URL for the request is not correct. You can also simplify things with the $.get method Client page <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function() { $("button[name=data]").on( "click", function() { $.get("http://localhost/test.php?mid=1&random=2040187", function(data, status){ $('#summary').html(data); }); } ); }); </script> </head> <body> <form method="get"> <button name="data" type="button" onclick="getData()">Click</button> </form> <div id="summary"></div> </body> </html> Server page <?php $order = $_GET['mid']; echo $order; exit(); ?> Quote Link to comment https://forums.phpfreaks.com/topic/302822-ajax-submit-without-refreshing/#findComment-1540779 Share on other sites More sharing options...
pakiman Posted December 28, 2016 Author Share Posted December 28, 2016 Either you didn't make all the changes Barand mentioned or you are not testing on an actual web server. If you have an HTML page that you are opening through your file system, the AJAX will fail (at least I know it does in Chrome) - for security reasons. You need both the user page and the server page to be on a web server. Or, the URL for the request is not correct. You can also simplify things with the $.get method Client page <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function() { $("button[name=data]").on( "click", function() { $.get("http://localhost/test.php?mid=1&random=2040187", function(data, status){ $('#summary').html(data); }); } ); }); </script> </head> <body> <form method="get"> <button name="data" type="button" onclick="getData()">Click</button> </form> <div id="summary"></div> </body> </html> Server page <?php $order = $_GET['mid']; echo $order; exit(); ?> This works perfectly. I am just wondering is it possible to have the random number change with each submit? Quote Link to comment https://forums.phpfreaks.com/topic/302822-ajax-submit-without-refreshing/#findComment-1540785 Share on other sites More sharing options...
Barand Posted December 28, 2016 Share Posted December 28, 2016 rand Quote Link to comment https://forums.phpfreaks.com/topic/302822-ajax-submit-without-refreshing/#findComment-1540786 Share on other sites More sharing options...
pakiman Posted December 28, 2016 Author Share Posted December 28, 2016 <table width="400px" align="center"> <tr> <?php if ($rand ==1) { ?> <td width="33%"> <form method="get"> <button name="data" type="button" onclick="getData()">Click</button> </form> </td> <td width="33%"> </td> <td width="33%"> </td> <?php } if ($rand ==2) { ?> <td width="33%"> </td> <td width="33%"> <form method="get"> <button name="data" type="button" onclick="getData()">Click</button> </form> </td> <td width="33%"> </td> <?php } if ($rand ==3) { ?> <td width="33%"> </td> <td width="33%"> </td> <td width="33%"> <form method="get"> <button name="data" type="button" onclick="getData()">Click</button> </form> </td> <?php } ?> </tr> </table> This is on the server page for the data. It's not allowing me to change where the submit button will be. Quote Link to comment https://forums.phpfreaks.com/topic/302822-ajax-submit-without-refreshing/#findComment-1540788 Share on other sites More sharing options...
Jacques1 Posted December 28, 2016 Share Posted December 28, 2016 The code doesn't make any sense to me. It's not even clear what you're trying to do. What is the point of the random number? What is the matter with all that browser refresh stuff? Quote Link to comment https://forums.phpfreaks.com/topic/302822-ajax-submit-without-refreshing/#findComment-1540800 Share on other sites More sharing options...
codefossa Posted December 28, 2016 Share Posted December 28, 2016 To get a new number each time without some sort of bad luck, I would usually suggest using a timestamp. It's in milliseconds in JS, so unless you go way overboard on a couple submits ... To skip the whole need of using random numbers to avoid caching, you could just use a post instead of get. $.post('/map_data.php', { 'mid': 1 }, function(data) { $('#summary').html(data); }); Then you need to use $_POST instead of $_GET, but caching won't be an issue. If you really did want a random number, PHP could generate that with rand(). Quote Link to comment https://forums.phpfreaks.com/topic/302822-ajax-submit-without-refreshing/#findComment-1540803 Share on other sites More sharing options...
Psycho Posted December 28, 2016 Share Posted December 28, 2016 (edited) This is on the server page for the data. It's not allowing me to change where the submit button will be. What I see in that code is that it appears to be creating three TD elements and changing which one in which the one containing the button element will exist based on the value of $rand. So, what is your problem? Since the other two TDs are empty it's difficult to know how the page would look without knowing the rest of the definition of the table. But, my guess is that the value of $rand is not what you think it is. Plus, that code is poorly written. Never copy/paste code when you want the same general results with a small variation (i.e. the button in a diff position). You could very easily have a typo in one scenario and not see it unless you adequately test every possible scenario. But, all that code does is change the position of the button in the table - it won't function any differently. EDIT: It was my understanding that the JQuery AJAX components were built to prevent the issues with caching and the need to pass a new parameter. I may be wrong though. EDIT #2: From the JQuery documentation for ajax() cache (default: true, false for dataType 'script' and 'jsonp')Type: Boolean If set to false, it will force requested pages not to be cached by the browser. Note: Setting cacheto false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET. However, it looks like that parameter is not supported in the $.get() method for JQuery, so you should go back to the $.ajax() method and use this parameter instead of creating your own method to prevent caching. Edited December 28, 2016 by Psycho Quote Link to comment https://forums.phpfreaks.com/topic/302822-ajax-submit-without-refreshing/#findComment-1540805 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.