jQueryUI.Sortable更新，不使用Ajax作为普通表单提交给PHP

问题描述：

I would like to sort a table with data row from MySQL then change the order and submit it.
I used jQueryUI.sortable to make those tr tag (row) draggable.
But when I submitting the form, some of them didn't changed order.

Why? I tried to figure it out, I var_dump the data I submitted and I found a problem: The tr tag (row) I moved from the original order, won't pass to PHP so var_dump will not show the row ID.

To make it easier to understand, I post my code here:

HTML Code

<table>
    <thead>
        <tr>
            <th>Subject</th>
            <th>Content</th>
        </tr>
    </thead>
    <tbody id="sortable">
        <tr>
            <td>
                Hello World
                <input name="displayorder[]" type="hidden" value="1" />
            </td>
            <td>I come from Mars!</td>
        </tr>
        <tr>
            <td>
                Hello Mars
                <input name="displayorder[]" type="hidden" value="2" />
            </td>
            <td>I come from Jupiter!</td>
        </tr>
        <tr>
            <td>
                Hello StackOverflow
                <input name="displayorder[]" type="hidden" value="3" />
            </td>
            <td>I come from North Korea ...</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan="2"><input type="submit" value="Submit!" />
        </tr>
    </tbody>
</table>

I omitted the form content cause it is not important

JavaScript (Sortable Library loaded)

$(document).ready(function() {
    $('#sortable').sortable({
        helper: fixHelper,
        axis: 'y',
        opacity: 0.6,
    }).disableSelection();
});

var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};

PHP

$displayorder = $_POST["displayorder"];
if($displayorder != "") {
    $order = 1;
    foreach($displayorder as $value) {
        mysql_query("UPDATE message SET displayorder=$order WHERE announcementid=$value");
        $order++;
    }
}

I will prefer not using Ajax to do this because I have dozens of similar page to do the same task.
Thanks in advance.

答

Well I decided to code it every page.
The code now:

JavaScript

$(document).ready(function() {
    $('#sortable').sortable({
        helper: fixHelper,
        axis: 'y',
        opacity: 0.4,
        update: function(event, ui){
            var data = $(this).sortable('serialize');

            $.ajax({
                data: data,
                type: 'POST',
                url:  '/update.php?action=displayorder'
            });         
        },
    }).disableSelection();
});

var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};

PHP

foreach($_POST["displayorder"] as $i => $value) {
    mysql_query("UPDATE message SET displayorder=$i WHERE announcementid=$value");
    $i++;
}

jQueryUI.Sortable更新，不使用Ajax作为普通表单提交给PHP

相关推荐