On ajax success set variable and use the variable in jquery outside ajax

Question

Aim is to set (change) html hidden input field value to 0 after successful execution of ajax.

At first decided on ajax success to define variable and latter to use outside ajax.

But read (JQuery - How to use the return value of an ajax call outside that ajax call) that it is impossible.

Need to find some solution.

Below is code

Ajax (as an example)

<script language="JavaScript" type="text/javascript">
function ajax_post(){
if (window.XMLHttpRequest)
{
var hr = new XMLHttpRequest();
}
else
{
var hr = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "_autosave.php";
var sabt = document.getElementById("date_day1").value;
var prao = document.getElementById("amount1").value;
var vars = "date_day1="+sabt+"&amount1="+prao;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;

Here I decided to define variable to use it outside ajax. As read this does not work because script runs over the variable and reaches outside ajax variable before the ajax variable is set.

var ajax_post_success = 1;

Remaining part of code

}
}
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>

Then latter (if ajax success set value to 0)

<input type="hidden" name="is_row_changed1" id="is_row_changed1" value="" >
<script>
$(document).ready(function() {
if(ajax_post_success == 1) {
document.getElementById('is_row_changed1').value = 0;
}
});
</script>

Aim of all this is following.

I plan to use table with 10 rows and 19 input fields in each row.

If user enters something in any of fields, value of hidden input field changes to 1 (this is ok).

Then with ajax insert/update user input.

After successful insert/update set hidden field value to 0.

On each php insert/update execution check if hidden field value is 1. If value is 1 insert/update the row. If value is 0 do nothing with the row. Insert/update only rows which hidden field value is 1.

That is the aim of the question.

What would be solution?

Since you're using jQuery, why aren't you using `$.ajax()` or `$.post()`? — Barmar, Apr 18 '13 at 07:13
Everything that depends on the AJAX call should be done in the `onreadystatechange` handler function. So change your hidden input field there. — Barmar, Apr 18 '13 at 07:15
I will change latter to $.ajax. But is using $.ajax is the solution? — user2232696, Apr 18 '13 at 07:18
No, it's just a simpler way to write your AJAX code. You still have to do everything in the callback function. — Barmar, Apr 18 '13 at 07:19
For hidden input I changed javascript to hr.onreadystatechange=function() { if(ajax_post_success == 1) { document.getElementById('is_row_changed1').value = 0; } }; But does not work...Possible I wrote incorrect code — user2232696, Apr 18 '13 at 07:32

Arun P Johny · Accepted Answer · 2013-04-18T07:43:49.860

I don't think you need to have that variable, you can change the value of the hidden field is_row_changed1 to zero in the onreadystatechange callback of the ajax method

hr.onreadystatechange = function() {
    if (hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;
        document.getElementById("status").innerHTML = return_data;
        document.getElementById('is_row_changed1').value = 0;
    }
}

I would suggest using jQuery ajax like

function ajax_post() {
    var sabt = $('#date_day1').val();
    var prao = $('#amount1').val();
    $.ajax({
        url : "_autosave.php",
        data : {
            date_day1 : sabt,
            amount1 : prao
        }
    }).done(function(html) {
        $('#status').html(html);
        $('#is_row_changed1').val(0);
    });
}

Thanks very good and simple solution. How can I get such way of thinking.... possibly it is based on knowledge — user2232696, Apr 18 '13 at 07:39

On ajax success set variable and use the variable in jquery outside ajax

1 Answers1