CODEWITHSUNDEEP
phpjquery-mobile
Ricky Mason
Ricky Mason

Reputation: 1828

Performing update query then change page in Jquery Mobile

I have a confirmation dialog that leads to an update query when the user clicks a link.

<div class="ui-bar">
    <a id="confirm" href="#" data-strid="<?php echo $str_info['str_id'] ?>">Confirm</a>
</div>

What I am looking to do is run an update query, then reload the previous page with the updated information on it.

I thought I accomplished this, but some sort of error keeps popping up in firebug and the ajax doesnt seem to be successful. The error only comes when I reload the page...and when I put a delay on it, there is no error, so I can't even read what it is.

<script>
        $('#confirm').click(function (){
        var str_id = $("#confirm").data("strid");
        $.ajax({
            type: "POST",
            async: true,
            url: '../../ajax/add_land',
            dataType: 'json', 
            data: { str_id: str_id },
            success: function(){

            }
        });
        $('.ui-dialog').dialog('close')
        setTimeout(
            function() 
            {
                location.reload()
            }, 750);
        return false;
    });
</script>

Is there any good way of accomplishing this? Again, in summary, I am looking to perform an update query, then reload the last viewed page (not the dialog) so that the changed info is displayed. ../../ajax/add_land is in PHP.

Upvotes: 1

Views: 182

Answers (1)

Gajotres
Gajotres

Reputation: 57309

There are few better ways of achieving this but that is beyond the point, in your case you should do this:

<script>
        $('#confirm').click(function (){
        var str_id = $("#confirm").data("strid");
        $.ajax({
            type: "POST",
            async: true,
            url: '../../ajax/add_land',
            dataType: 'json', 
            data: { str_id: str_id },
            success: function(){
              $('.ui-dialog').dialog('close');            
              location.reload();
            }
        });
        return false;
    });
</script>

When ajax call is successfully executed it will call code inside a success callback. Ajax call is asynchronous action, that means rest of the code is not going to wait for it to finish. Because of this success callback is used. So there's need for the timeout.

One more thing, there's also an error callback, use it to debug ajax problems:

error: function (request,error) {
    alert('Network error has occurred please try again!');
},

Upvotes: 1

Related Questions