Ajax post to same page and reload the page without destroying the post parameters

Question

Anyone knows how to preserve the post parameters after windows.location.reload(true) ?

function handler(event,ui)
{
  $(this).find(".thumb").remove();
  $(this).append('<img class="thumb" src="'+ui.draggable.attr('src')+'">');

  imageurl = ui.draggable.attr('src');

  $.ajax({
     type: "POST",
     url: 'www.check.com.sg/', 
     data: {name: imageurl}, 
     complete:function(){
        window.location.reload(true);
     } 
  });
}

If i do a reload on the page. the post parameters will be destroy

Answer 1

Yep you can do it. Just put all your post variables in a hidden form on the page like this :

<form action="" method="post" id="myform">
    <input type="hidden" name="my_var1" value="value_of_my_var1" />
    <!-- More inputs here.... -->
</form>

And then submit your form when your ajax call is done :

function handler(event,ui)
{
  $(this).find(".thumb").remove();
  $(this).append('<img class="thumb" src="'+ui.draggable.attr('src')+'">');

  imageurl = ui.draggable.attr('src');

  $.ajax({
     type: "POST",
     url: 'www.check.com.sg/', 
     data: {name: imageurl}, 
     complete:function(){
        $('#myform').submit();
     } 
  });
}

Answer 2

First your approach is wrong for AJAX; one shouldn't refresh the page after success instead use .html() or .load() method of jQuery.

Now if still you want to do the same then it can't be done using

window.location.reload(true);

instead use

window.location.href

So

function handler(event, ui) {
    $(this).find(".thumb").remove();
    $(this).append('<img class="thumb" src="' + ui.draggable.attr('src') + '">');
    imageurl = ui.draggable.attr('src');
    $.ajax({
        type: "POST",
        url: 'www.check.com.sg/',
        data: {
            name: imageurl
        },
        complete: function() {
            var currentURL = window.location.href + '?var1=' + var1 + '&var2=' + var2;
            window.location.href = currentURL;
        }
    });
}