jquery сортируемый, после сортировки изменить имя атрибута - PullRequest
Новая
       1

jquery сортируемый, после сортировки изменить имя атрибута

0 голосов
/ 11 июля 2011

У меня есть два сортируемых списка ul, после того, как вы перетаскиваете элемент из одного списка в другой, я хочу изменить атрибут имени этого элемента, поэтому у меня есть две группы для отправки в мой сервер asp.

Единственная проблема в том, что я не знаю, как изменить этот атрибут. 

   <script type="text/javascript">
    $('form').submit(function () {
        console.info($(this).serialize());
        return false;
    });

    $(document).ready(function () {
        $("#groep1").sortable({
            connectWith: ["#groep2"]

        });
        $("#groep2").sortable({
            connectWith: ["#groep1"]
        });
    });
</script>

<h2>Wijzig klasgroep</h2>
<% using (Html.BeginForm()) {%>
    <%: Html.ValidationSummary(true) %>

<div class="groep1">
<h3><%: Model.titleGroep1 %></h3>
    <ul id="groep1" name="blabla" class="dragndrop">
    <% foreach ( var item in Model.groep1) { %>
        <li id="<%: item.id %>"><%: item.naam %> <%: item.voornaam %><%: Html.Hidden("groep1", item.id) %></li>

    <% } %>
    </ul>
</div>

<div class="groep2">
<h3><%: Model.titleGroep2 %></h3>
    <ul id="groep2" class="dragndrop">
    <% foreach ( var item in Model.groep2) { %>
        <li id="<%: item.id %>"><%: item.naam %> <%: item.voornaam %><%: Html.Hidden("groep2", item.id) %></li>
    <% } %>
    </ul>
</div>

РЕДАКТИРОВАТЬ

Так что теперь у меня есть это как jquery: 

    <script type="text/javascript">
    $(document).ready(function () {
        jQuery.ajaxSettings.traditional = true;
        $("#groep1").sortable({
            connectWith: ["#groep2"],
            accept: 'sortitem',
            receive: function (sorted) {
                var serial = $('#groep1').sortable('serialize');
                serial = serial.replace(/\[\]/gi, "");
                alert(serial);
                $.ajax({
                    url: "WijzigKlasgroep/WijzigKlasgroep?vakId=1&klasgroepId1=1&klasgroepId2=2",
                    type: "POST",
                    data: serial,
                    //wordt een partial view hieronder
                    success: function (feedback) { $('#feedback').html("Klasgroepen geupdated!"); },
                    error: function (feedback) { $('#feedback').html("some weird error"); }
                });
            }
        });
        $("#groep2").sortable({
            connectWith: ["#groep1"]
        });
    });
</script>

<h2>Wijzig klasgroep</h2>
<div id="feedback"></div>
<div class="groep1">
<h3><%: Model.titleGroep1 %></h3>
    <ul id="groep1" class="dragndrop">
    <% foreach ( var item in Model.groep1) { %>
        <li class="sortitem" id="groep_<%: item.id %>"><%: item.naam %> <%: item.voornaam %></li>

    <% } %>
    </ul>
</div>

<div class="groep2">
<h3><%: Model.titleGroep2 %></h3>
    <ul id="groep2" class="dragndrop">
    <% foreach ( var item in Model.groep2) { %>
        <li class="sortitem" id="groep_<%: item.id %>"><%: item.naam %> <%: item.voornaam %></li>
    <% } %>
    </ul>
</div>

<br style="clear: both;" />

Но, функция контроллера становится неприятной: 

        [HttpPost, Authorize]
    public ActionResult WijzigKlasgroep(Docent docent, int vakId, int klasgroepId1, int? klasgroepId2)
    {
        if (Request.IsAjaxRequest())
        {
           String test2 = Request.Form["groep"]; // this holds all the data, but, the data is just a plain string which means i have to cut it myself.. not really neat code :)
        }

        return View();
    }

Спасибо, ребята!:)

Ответы [ 2 ]

1 голос
/ 11 июля 2011

Вы можете использовать сортируемый метод получения. Этот метод принимает аргумент 'ui', к которому вы можете получить доступ к ui.item для получения отсортированного элемента.

что-то вроде 

$("#groep1").sortable({
    receive: function (event, ui) {
        var element = ui.item;
        //change name on element here
    }
});
0 голосов
/ 11 июля 2011

Вы можете изменить атрибут имени элемента следующим образом: 

        $MyDiv = $("#MyDiv");
        $MyDiv.attr("name", "Sue");
...