doujianglin6704
2014-11-20 07:52
浏览 53
已采纳

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.

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongxin991209 2014-11-20 09:16
    已采纳

    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++;
    }
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题