2013-03-27 96 views
-1

我有22個驅動程序的列表。我需要根據比賽結果命令他們。爲此,我想使用jQuery中的可排序函數。這看起來不錯。現在只有一個問題。當我準備好要將項目順序提交給PHP頁面時。我如何提交。如何使用jquery排序函數提交物品的順序

工作示例是這裏http://jsfiddle.net/UVeB6/

,使項目列表我這樣做

<ul id="sortableQual"> 
    <li id="qual_1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>S Vettel<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>M Webber<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>F Alonso<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>F Massa<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>J Button<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>S Perez<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>K Raikkonen<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_8" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>R Grosjean<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_9" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>N Rosberg<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_10" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>L Hamilton<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_11" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>N Hulkenberg<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_12" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>E Gutierrez<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_14" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>P di<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_15" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>A Sutil<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_16" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>P Maldonado<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_17" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>V Botta<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_18" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>J Vergne<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_19" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>D Ricciardo<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_20" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>C Pic<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_21" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>G van<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_22" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>M Chilton<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
    <li id="qual_23" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>J Bianchi<font size="1" style="float:right;"><sub>qual</sub></font> 

    </li> 
</ul> 

但我怎麼能提交<li>順序?有了警報,我可以看到訂單

stop: function (event, ui) { 
      alert($(this).sortable('serialize')); 
     } 

但不是提醒我需要它將其提交到PHP頁面。

+1

我會使用ajax發送它到PHP,或將其放置在一個隱藏的輸入在現有的形式並提交。 – 2013-03-27 15:23:59

+2

你已經明白了:序列化是關鍵字。使用'$ .post'或類似的東西(如果你想提交一個隱藏的輸入),然後把它到你的PHP站點 – kero 2013-03-27 15:24:46

+0

這與'sortable()'無關。在代碼中提交任何其他值沒有區別。 – Boaz 2013-03-27 15:28:19

回答

1

基本上你應該做這樣的事情。 (很普通的答案,不知道更多的細節)

stop: function (event, ui) { 
      $.get('some url', { someParam : $(this).sortable('serialize')}, function(){ 
       do something on callback complete 
      }); 
     }