Jump to content

Ajax submit without refreshing


pakiman
 Share

Recommended Posts

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;
?>
Link to comment
Share on other sites

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();
 
?>
Link to comment
Share on other sites

 

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?

Link to comment
Share on other sites

<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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Psycho
Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.