Заполнение массива JS / Jquery с последующей отправкой через AJAX - PullRequest
Новая
       2

Заполнение массива JS / Jquery с последующей отправкой через AJAX

1 голос
/ 27 апреля 2011

Я использую сортировку JQuery UI для сортировки списка #sortable, перетаскивая каждый элемент в нужном порядке.

Я храню id элемента в атрибуте li id (я знаю, что это недопустимо) и order элемента в атрибуте rel.

Так, например: 

<li id="23" rel="1">First</li>
<li id="20" rel="2">Second</li>
<li id="24" rel="3">Third</li>

Мой код успешно обновляет rel, когда я перетаскиваю элемент li - это нормально.

Теперь, когда я нажимаю кнопку отправки, я хочу отправить массив данных через AJAX в мой скрипт, который будет выполнять запросы на обновление. В идеале id будет key, а значение rel будет `значением. 

array(
       23 => 1
       20 => 2
       24 => 3
)

Вот мой код: 

$('#submit').click(function(e) {
   e.preventDefault();

   //array
   var the_data = [];

   $('#sortable li').each(function() {

        the_data[$(this).attr('id')] = $(this).attr('rel');

   });

   console.log(the_data);         
});

Я получаю undefined много раз в FireBug, но если я разверну его, все значения есть, может кто-нибудь объяснить, что не так? Это имеет смысл для меня, по крайней мере.

Как лучше всего отправить массив данных в AJAX? Я читал о Jquery .param(), а также serialize

Есть ли лучшие практики для этого?

Мой Аякс: 

myData=Jquery.param(the_data); //serialize the array?
$.ajax({
                type: "POST",
                url: "<?php echo base_url(); ?>admin/update_order/",
                data: myData,
                success: function(msg) {
                alert('Updated'); 
                },
                error: function(msg) {
                  alert(msg);       
                }
});

Спасибо.

Ответы [ 3 ]

1 голос
/ 27 апреля 2011

Я бы сам не написал код.Просто используйте функциональность наследовать в jQuery UI Sortable.

Свяжите функцию события остановки и используйте .sortable ('serialize'), чтобы получить список в новом порядке в формате, легко передаваемом через Ajax.

http://jqueryui.com/demos/sortable/#method-serialize

0 голосов
/ 13 ноября 2014

Пожалуйста, следуйте этой ссылке правильно, чтобы работать с jquery sortable для содержания ajax и привязки к функции обновления, см. fiddle

Javascript 

$(function () {
$( '.contentLeft' ).sortable({ opacity: 0.6, cursor: 'move', update: function() {
$("#log").html('update called');   }
});  });



$("#search").click(function() {
               loadDrop();               
           });

function loadDrop()
        {$.ajax({
                url:'/echo/html',
                success:function(){ 
                $("#trig").html('<div><ul id="sortable" class="contentLeft"><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li></div>');
                test();
$(".contentLeft").sortable({opacity: 0.6, cursor: 'move'});

                }
            });
        }
function test(){
$( '.contentLeft' ).sortable({ opacity: 0.6, cursor: 'move', 
update: function() {
 $("#log2").html('update called via ajax');
}});
}
0 голосов
/ 27 апреля 2011

Если вы посмотрите документы для сортировки пользовательского интерфейса jQuery, он показывает 2 способа вернуть массив идентификаторов для вашей цели.Я бы специально посмотрел на метод serialize , так как он приближается к тому, что вы хотите.Особенно, если вы можете отказаться от атрибута rel и просто перейти к подчеркнутому идентификатору.

...