Okay let's see if i can explain this correctly.
I have a sortable script being used on dynamically loaded elements.
The elements is being loaded with ajax from a controller php wich is including a another php file, and putting in the html like this:
function editPage(pageType, itemId) {
$.ajax({
type: 'POST',
// TO DO
url: 'controller.php',
data: 'editPage=' + pageType + '&itemId=' + itemId,
dataType: 'html',
success: function(data) {
$('#editpanel').html(data);
$('#editpanel').fadeIn(700);
$('body').addClass('activeEditor');
}
});
}
And in this php file there a call to a function like this:
menuSortPlugin(<?php echo $_POST["itemId"] ?>);
with function looking like this:
function menuSortPlugin(menuId) {
var group = $("ol.rowSort").sortable({
group: 'rowSort',
handle: 'i.icon-move',
delay: 500,
onDrop: function (item, container, _super) {
var data = group.sortable("serialize").get();
var jsonString = JSON.stringify(data, null, ' ');
var menuId = $('#editpanel').find('ol.rowSort').attr('data-menuid');
$('').appendTo('#editpanel').fadeIn();
_super(item, container);
$.ajax({
type: 'POST',
// TO DO
url: 'controller.php',
data: 'sortRows=' + jsonString,
dataType: 'html',
success: function(data) {
$('.updating').fadeOut(function() {
$(this).remove();
});
alert(jsonString);
/* ditPage('blocks', menuId); */
}
})
}
});
}
this is working great, and every time i drag a element the script is runned getting a alert looking like this.
[
[
{
"moduleid": 171,
"ordering": 2
},
{
"moduleid": 170,
"ordering": 1
}
]
]
But when im clicking to load i new page, wich is loading the same php file but diffrent loaded content, the whole sortable function breaks and when draged the alert now look like this:
[
{
"sizzle1446644220102": {
"parentNode": [
9,
0,
true
]
}
}
]
0 comments:
Post a Comment