How to reload page under one condition when using Jquery Connected Sortables

[alconebay]

I am using jquery connected sortable to sort pages in my website (pages.php) and everything is working great. 95% of the time the page does not need to be refreshed and ajax does it's thing. But, there is one container (#buttonmaker) that the sortables can be dropped into that requires that the page be refreshed.

 

The sorting code (sorting.php) is setup so it loops through all the dividers that the sortables can be dropped into (#draft, #trash, #buttonmaker, #other, etc.). But whenever someone drops a sortable inside the #buttonmaker container, the processing page turns that page into a menu button. At that point I need the page to refresh so the user can see the new button they just created.

 

But I don't know how to make the parent page refresh from within the sortables jquery (or from within the an ajax sorting.php page... wherever it would work the best).

 

This is what my jquery on the pages.php page looks like:

 

$(function() {
$("#draft, #trash, #a_bunch_of_other_ids, #buttonmaker").sortable({
	connectWith: '.connectedSortable',
	placeholder: 'ui-state-highlight',
	opacity: 0.6,
	scroll: true,
	update : function () 
	{ 
		$.ajax(
		{
			type: "POST",
			url: "sorting.php",
			data: 
			{
				draft_sort:$("#draft").sortable('serialize'), other_sort:$("#a_bunch_of_other_ids").sortable('serialize') , trash_sort:$("#trash").sortable('serialize'), buttonmaker_sort:$("#buttonmaker").sortable('serialize')
			}
		});
	} 
}).disableSelection();
});

 

Here is what my sorting.php looks like:

$cat_id = 0;
parse_str($_REQUEST["draft_sort"], $draft_sort);
if ($draft_sort) {
foreach($draft_sort['Z'] as $key=>$value)
{
$key = $key + 1;
$sql = "UPDATE pages SET pages_order='$key', pages_button_id='$cat_id' WHERE ID='$value'";
if (!mysql_query($sql,$dbhandle))
{die('Error: ' . mysql_error());}
}
}

//
//more sorting happening here for the rest of the containers....
//
//now the buttonmaker sorting:

parse_str($_REQUEST["buttonmaker_sort"], $buttonmaker_sort);
if ($buttonmaker_sort) {
foreach($buttonmaker_sort['Z'] as $key=>$value)
{
//... sql goes here for updating the menu buttons

//At this point I would like the pages.php page to refresh so the new button that was just created will be shown
}
}

 

Hope this makes sense. My sql for creating the button works fine. If I F5 after dropping a page into the buttonmaker container, the new button appears and everything works great. But I need an automatic refresh... but only if a sortable is dropped in the #buttonmaker container.

[alconebay]

Thanks to DarthJDG for the answer:

 

<script type="text/javascript">
$(function() {
var refreshNeeded = false;
$("#draft, #buttonmaker, #trash").sortable({
	connectWith: '.connectedSortable',
	placeholder: 'ui-state-highlight',
	opacity: 0.6,
	scroll: true,
	update : function (event, ui) 
	{ 
		var $sortable = $(this);
		if(ui.item.parent()[0] != this) return;
		$.ajax(
		{
			type: "POST",
			url: "sorting.php",
			data: 
			{
				draft_sort:$("#draft").sortable('serialize'), buttonmaker_sort:$("#buttonmaker").sortable('serialize'), trash_sort:$("#trash").sortable('serialize') 
			},
			success: function() {
				if(($sortable.attr('id') == "buttonmaker")) refreshNeeded = true;
				/*window.location.reload(true);*/
			}
		});
	}
}).disableSelection();
$(document).ajaxStop(function(){
        // All requests have completed, check if we need to refresh
        if(refreshNeeded){
            // Refresh the page (just a simple reload for now)
            window.location.reload();
        }
    });
});