php mysql not saving data when button clicked and run $.ajax function

Question

I have this

"fsField" is the class of all elements in the form. So whenever the user blurs to another field it submits the form using the function autosave() - given below. It saves data when the user blurs but when the user clicks the button with class "save_secL" to go to next page it does not save.

$('.fsField').bind('blur', function()
 {
autosave();
 }

 });

but when i use this code

$('.save_secL').click(function()
{
 var buttonid = this.id;
{

                    var answer = confirm("You have left some questions unanswered. Click OK if you are sure to leave this section? \\n Click CANCEL if you want stay in this section. ");
    if(!answer)
    {
    var spl_items = valid().split(',');
    $(spl_items[0]).focus();

return false;
  }
else
{
        $('#hidden_agree').append('<input id="secLuseragreed" name="secL_user_agreed" value="unanswered" type="hidden" />');
    autosave();
    window.location= buttonid+".php"
        }
    }
    else
    {
    $('#hidden_agree').append('<input id="secLuseragreed" name="secL_user_agreed" value="answered all" type="hidden" />');
    autosave();
    window.location= buttonid+".php"
    }
}
  });

**autosave_secL.php is the php source thats saving the data in the database. I ran it independently and it does save data okay. **

function autosave()
{
var secL_partA_ques_1_select = $('[name="secL_partA_ques_1_select"]').val();
var secL_partA_ques_1 = $('[name="secL_partA_ques_1"]:checked').val();
var secL_partA_ques_2_select = $('[name="secL_partA_ques_2_select"]').val();


$.ajax(
    {
    type: "POST",
    url: "autosave_secL.php",
    data: "secL_partA_ques_1_select=" + secL_partA_ques_1_select + "&secL_partA_ques_1=" + secL_partA_ques_1 + "&user_id=<?php echo $row_token[user_id]?>" + "&updated_by=<?php echo $member."-".$key;?>",
        cache: false,
    success: function()
    {    
    $("#timestamp").empty().append('Data Saved Successfully!');
    }

    });

}

**

valid() is a validation function that checks if any field is empty and returns a value if there is an empty field.**

 function valid()
{

    var items = '';
    $('.fsField').each(function() 
    {

        var thisname = $(this).attr('name')
        if($(this).is('select'))
        {
            if($(this).val()=='')
            {
                var thisid = $(this).attr('id')
                items += "#\"+thisid+\",";
                $('[name=\"'+thisname+'\"]').closest('td').css('background-color', '#B5EAAA');
            }
        }
        else
        {
            $('[name=\"'+thisname+'\"]').closest('td').css('background-color', '');
        }
    });

    return items;
}

Can anyone please help? i am stuck for a day now. Can't understand why it saves when the user goes field to field but does not save when button is clicked with validation. Tested with Firefox. this line appears in red with a Cross sign beside when the button(save_secL class) is clicked. I am using a ssl connection.

POST https://example.com/files/autosave_secL.php   x

Here is the modified code trying to implement the solution

$('#submit_survey_secL').click(function()
{

    if(valid() !='')
    {
         var answer = confirm("You have left some questions unanswered. Are you sure you want to Submit and go to Section B? ");
         if(!answer)
        {
               var spl_items = valid().split(',');
               $(spl_items[0]).focus();

               return false;
        }
          else
        {
            $('#hidden_agree').append('<input id=\"secLuseragreed\" name=\"secL_user_agreed\" value=\"unanswered\" type=\"hidden\" />');

            autosave(function(){
                window.location= "part1secM.php?token=1&id=4"
            });
        }
    }
    else
    {
        $('#hidden_agree').append('<input id=\"secLuseragreed\" name=\"secL_user_agreed\" value=\"unanswered\" type=\"hidden\" />');

        autosave(function(){
            window.location= "part1secM.php?token=1&id=6"
        });
    }
});


function autosave(callback)
{

    var secL_partL_ques_1_select = $('[name="secL_partL_ques_1_select"]').val();
    var secL_partL_ques_1 = $('[name="secL_partL_ques_1"]:checked').val();
    var secL_partL_ques_2_select = $('[name="secL_partL_ques_2_select"]').val();


    $.ajax(
    {

    type: "POST",
    url: "autosave_secL.php",
    data: "secL_partL_ques_1_select=" + secL_partL_ques_1_select + "&secL_partL_ques_1=" + secL_partL_ques_1 + "&user_id=<?php echo $row_token[user_id]?>" + "&updated_by=<?php echo $member."-".$key;?>",
        cache: false,
    success: function()
        {    
             $("#timestamp").empty().append('Data Saved Successfully!');

                     if($.isFunction(callback))
         {                  
            callback();
         }
        }

    });

}

I don't understand why this doesn't work as callback should totally work. Firebug does not show POST https://example.com/files/autosave_secL.php in red any more but it shows that it has posted but I think the callback is not triggering for some reason

you have some errors in your javascript (extra } in first code example). please make sure you copied it over correctly. — helloandre
– helloandre, Commented Sep 14, 2011 at 21:16

Maximilian Hils · Accepted Answer · 2011-09-14 21:18:32Z

1

$('.save_secL').click(function() {

//...

//start autosave. Note: Async, returns immediately
autosave();
//and now, before the POST request has been completed, we change location...
window.location= buttonid+".php?token=$row_token[survey_token]&$member=$key&agr=1"
//....and the POST request gets aborted :(

Solution:

function autosave(callback)
{
//...
$.ajax(
    {
//...
    success: function()
    {    
        $("#timestamp").empty().append('Data Saved Successfully!');
        if($.isFunction(callback)) 
            callback();
    }
    });
}

//and

autosave(function(){
    window.location= buttonid+".php?token=$row_token[survey_token]&$member=$key&agr=1"
});

By the way, your autosave function is pretty hard for your server. Did you consider using localStorage + a final POST request containing all data?

answered Sep 14, 2011 at 21:18

Maximilian Hils

6,9204 gold badges33 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Abu Over a year ago

Thanks for your answer. I did not try other techniques as I just learnt this one from online examples. Also the location changes depending on the user response. If the user says yes then an extra variable is added at the end of the url.

Maximilian Hils Over a year ago

Your key problem: You have to wait for your POST request to complete before changing page. If you don't wait, your request gets aborted.

Abu Over a year ago

Yeah, i think so too. I didnt know how to fix it. And your solution should work fine. let me try it.

Abu Over a year ago

I added the callback but it still does not complete doing autosaving. Any other solution you may have? And how do I do the localStorage + a final POST to make it better for the server? I appreciate much for your suggestion. Thank you.

Maximilian Hils Over a year ago

Could you post your modified source? If you just want to cache form input, I can recommend plugins.jquery.com/project/webStorage .

|

Abu · Accepted Answer · 2011-09-15 21:43:24Z

0

I got the solution.

It might be one of the several. scr4ve's solution definitely helped. So here are the points for which I think its working now.

Moved "cache: false, " and removed "async:false" before url: in the ajax autosave function. Before I was putting it after "data: "
Added a random variable after autosave_secL.php/?"+Match.random()
Added scr4ve's solution so that POST is completed before redirect

answered Sep 15, 2011 at 21:43

Abu

35 bronze badges

Collectives™ on Stack Overflow

php mysql not saving data when button clicked and run $.ajax function

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related