CODEWITHSUNDEEP
javascriptphpjquery
user3281883
user3281883

Reputation: 27

How avoid sending back datas after a reload

I try to avoid an alert from the navigator. I use Ajax for my submit form, then I post to another page without refreshing the submit form. I delete an SQL row as a result.

So my First page is a form table with some messages (by ids) I want to delete. If I click on delete button, my form send a POST to the php page to delete the SQL row then I make a reload to update my form table and others elements in my menu.If I click the delete button on the first TR on my table everything works fine. (The Post is sent, datas are received on my second PHP page, the SQL request are executed and my page is reloaded. The Problem : It works only with the first row on my table, if I click the others one, I have an alert from the navigator asking me "This page cannot be refreshed without resending information...) Why the first works and not the others ?

A part of the code for the form :

$sql="SELECT * FROM messages ORDER BY username";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)) { 
echo '<form name="'.$form_id_name.'" id="'.$form_id_name.'"  action="'.$action.'" method="POST">';
 echo'<tr>
 <td><center>'.$row[messageid].'</center></td>             
 <td><center>'.addslashes(utf8_decode($row[username])).'</center></td>
 <td><center>'.addslashes(utf8_decode($row[dest])).'</center></td>
 <td><center>'.utf8_decode($row[message]).'</center></td>
 <td><center>'.$row[titre].'</center></td>
 <td><center>'.$row[date].'</center></td>
 <td><center>'.$row[heure].'</center></td>
 <td><center>'.$row[langue].'</center></td>
 <td><center><input type="hidden" name="id"  value="'.$row[messageid].'"/><input type="submit" id="'.$id_button.'" value="X"/></center></td>
 </tr>';
 echo '</form>';
 }



 include('ajax.php');

The php page :

// some stuffs
$sql = "DELETE FROM messages WHERE messageid = '$messageid'";
$delete=mysqli_query($con,$sql);
echo '<script>location.reload();</script>';

JavaScript example I'm using ...

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">   </script>
 </head>
 <body>
 <form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST">
First Name: <input type="text" name="fname" value ="Ravi"/> <br/>
Last Name: <input type="text" name="lname" value ="Shanker" /> <br/>
Email : <input type="text" name="email" value="[email protected]"/> <br/>
 </form>
 <input type="button"  id="simple-post" value="Run Code" />
 <div id="simple-msg"></div>




 <script>
 $(document).ready(function()
 {


 $("#simple-post").click(function()
 {
$("#ajaxform").submit(function(e)
{
    $("#simple-msg").html("<img src='loading.gif'/>");
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) 
        {
            $("#simple-msg").html('<pre><code class="prettyprint">'+data+'</code></pre>');

        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            $("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>');
        }
    });
    e.preventDefault(); //STOP default action
    e.unbind();
});

$("#ajaxform").submit(); //SUBMIT FORM
 });

 });
 </script>

I don't understand...

Upvotes: 1

Views: 595

Answers (2)

Yanick Rochon
Yanick Rochon

Reputation: 53526

The error is here :

$("#ajaxform").submit(); //SUBMIT FORM

Because if you check, all your forms have the same id. Therefore, executing the line above always, and only, submit the first one. Clicking any other form's submit button do not trigger your JavaScript code, but proceed "normally" to perform the post.

From the HTML specification, each element must have a unique id attribute.

** Update (from the comments) **

You don't even need a submit button. These buttons are only triggers to submit the form. Check this HTML :

<form id="standardForm" action="/path/to/script.php" method="post">
   <input type="hidden" name="secret" value="secretValue" />
   <input type="text" name="userInput" />
</form>

<span class="form-trigger" owns="standardForm">Submit form!</span>

and the associated jQuery :

$(function() {

    $('span.form-trigger').on('click', function(e) {
        // change 'a,b' into '#a,#b'. We need to do this to convert the HTML
        // attribute value into a jQuery compatible selector.
        var idList = $.map($(this).attr('owns').split(','), function(item) { return '#' + item; }).join(',');

        // submit all the forms associated through the element's 'owns' attribute
        $(idList).submit();

        // do not bubble this event any further.
        e.stopPropagation();
        e.preventDefault();
    });

});

As you can see, I haven't even used an <a> element to act as a trigger. Any element may be used, as it is unnecessary for submitting a form. The <form> element, however, is required, as this is how the browser can send the input values to the server... through a "form submission".

I hope this clarify things a little.

** Edit **

You can remove the <form> elements altogether if you use pure Ajax requests (or XmlHttpRequests) to communicate with the server. The HTML forms simply does it for you, along with the submit button. But using JavaScript, you can do all this manually :

$.post('path/to/script.php', { 
    secret: 'secretValue', 
    userInput: 'something'
}).done(function() {
    // optional function called when the request is successful
}).fail(function() {
    // optional function called when the request fails
});

The code above does the same thing as the previous example; it submits a form through an HTTP POST to the script path/to/script.php. The upside is that it will not refresh your page at all.

Upvotes: 1

jeroen
jeroen

Reputation: 91734

Not a direct answer, but you should not reload the page. The whole idea of using ajax is that you can update sections of your page without having to reload the whole page.

What you should do, is check the return value of your ajax request. If the request was fulfilled successfully, you simply remove the row using javascript.

That saves you a request to the server and makes your system a lot more responsive.

By the way, you might run into unforeseen problems because your html is not valid by the look of your php; you should put the form in the last table cell instead of spanning the whole row.

Upvotes: 3

Related Questions