배열을 채우는 JS/Jquery 배열을 AJAX를 통해 전송합니다.

Question

나는 각 요소를 원하는 순서로 드래그하여 목록을 정렬하기 위해 JQuery UI의 정렬 가능을 사용하고 있습니다. #sortable

나는 liid 속성 (I이가 잘못 알고)에있는 항목의 id 및 rel 속성의 요소의 order를 저장하고있다. 그래서 예를 들면

: 나는 드래그 앤 li 요소를 삭제할 때

는

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

내 코드가 성공적으로 rel 업데이트 -이 괜찮습니다.

이제 제출 버튼을 클릭하면 AJAX를 통해 데이터의 배열을 내 스크립트로 보내고 싶습니다. 그러면 업데이트 쿼리가 수행됩니다. 이상적으로 id은 key이고 rel 값은 '값'입니다. 사람이 무엇을 설명해주십시오 수

$('#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을 많이 받고 있어요,하지만 난 그것을 확장하는 경우, 모든 값이 있습니다 : 여기

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

내 지금까지 코드 잘못된? 적어도 나에게 의미가있다.

데이터 배열을 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);  
       } 
}); 

감사합니다.

Answer 1

나는 코드를 직접 작성하지 않을 것입니다. jQuery UI Sortable에서 상속 기능을 사용하기 만하면됩니다.

stop 이벤트 함수를 연결하고 .sortable ('serialize')을 사용하면 새 순서로 Ajax를 통해 쉽게 전달되는 형식으로 목록을 가져올 수 있습니다. 당신이 jQuery를 UI의 정렬에 대한 문서를 보면

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

Answer 2

, 그것은 목적을위한 ID의 뒷면의 배열을 얻기 위해 두 가지 방법을 보여줍니다. 나는 당신이 원하는 것에 더 가까워지면서 serialize 메소드를 특별히 보았습니다. 특히 rel 속성을 무시하고 밑줄 친 ID로 이동하면됩니다.

Answer 3

이 fiddle

자바 스크립트

$(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'); 
}}); 
}