jquery reload function on dynamically scripts

Wednesday, November 4, 2015

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