如何使用jquery可排序函数提交项目的顺序

时间:2013-03-27 15:23:10

标签: php javascript jquery jquery-ui-sortable

我有22个驱动程序列表。我需要根据比赛的结果来订购它们。为此,我想使用jQuery中的可排序函数。这看起来不错。现在只有一个问题。当我准备好项目的顺序时,我想将它提交到PHP页面。我该怎么提交呢。

这里有一个工作示例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 个答案:

答案 0 :(得分:1)

基本上你应该做这样的事情。 (非常通用的答案,不知道更多细节)

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