user5813072 user5813072 - 2 months ago 20
jQuery Question

jquery sortable function not working in view (mvc)

I am using jQuery UI sortable to make my table grid sortable. however my elements still do not reorder and no errors are being displayed. i never used this method in asp.net mvc.

would be nice to receive some guidance thank you.

<script type="text/javascript">

$('td, th', '#MenuItem').each(function () {
var cell = $(this);
cell.width(cell.width());
});

$('#MenuItem tbody').sortable().disableSelection();




<table id = "MenuItem" class="promo full-width alternate-rows" style="text-align: center;">
<tr>
<th>Prode Code
</th>
<th>ProdeTemplate
</th>
<th>Description <!-- JACK EDIT -->
</th>
<th>Action</th>
</tr>
<tbody>
@foreach (var item in Model.IndexListitem)
{


<tr>
<td class="center-text">
@Html.DisplayFor(modelItem => item.ProductCode)
</td>
<td>
@Html.DisplayFor(modelItem => item.ProdeTemplate.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>

<td class="center-text nowrap">
@Html.ActionLink(" ", "Edit", new { id = item.ProdeID }, new { title = "Edit", @class = "anchor-icon-no-text edit" })
@Html.ActionLink(" ", "Details", new { id = item.ProdeID }, new { title = "Details", @class = "anchor-icon-no-text details" })
@Html.ActionLink(" ", "Delete", new { id = item.ProdeID }, new { title = "Delete", @class = "anchor-icon-no-text delete" })
</td>
</tr>

}

</tbody>

</table>

Answer

I am not much familiar with @Html and @foreach annotations. However, I think these annotation are handled at server side. So essentially you are trying to select some html elements by jquery which are not yet generated.

One solution is to put whole block of following code in document.ready block

// A $( document ).ready() block.
$( document ).ready(function() {
$('td, th', '#MenuItem').each(function () {
var cell = $(this);
cell.width(cell.width());
});

$('#MenuItem tbody').sortable().disableSelection();

});
Comments