0

I want to be able to implement drag and drop on this page meaning I should be able to rearrange the rows as I want. This is not working for me. I am not able to drag the rows around. This is an ASP.NET MVC partial view.

What am I doing wrong?

@model Search.Models.CustomParentModel

<div class="row">
    <div class="col">
        <table id="table-1" class="table table-hover table-sm">
            <thead>
                <tr>
                    <th>Pso</th>
                    <th>Rank</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody style="cursor:pointer;">
                @foreach (var m in Model.CustomGroupPso)
                {
                    <tr>
                        <td>@m.Name</td>
                        <td>1</td>
                        <td>
                        @using (Ajax.BeginForm("RemoveCustomMapping", new AjaxOptions
                        {
                            HttpMethod = "POST",
                            UpdateTargetId = "mappings-modal-body",
                            OnBegin = "showLoading",
                            OnComplete = "hideLoading"
                        }))
                        {
                            @*<input type="hidden" name="mappingId" value="@m.PsoId" />*@
                            <input type="hidden" name="psoId" value="@m.PsoId" />
                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                <i class="fas fa-times"></i>
                            </button>
                        }
                        </td>
                    </tr>
                }
            </tbody>
        </table>

        <button id="saveButton" class="btn btn-primary mt-3">Save Changes</button> <!-- Save button to trigger save -->
    </div>
</div>

@section scripts {
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#table-1 tbody").sortable();
        })
    </script>
}
6
  • Code, as provided after extrapolating HTML from the Razor, works fine: jsfiddle.net/zbfL7oth What is it doing? See idownvotedbecau.se/itsnotworking Commented Sep 5, 2024 at 15:09
  • When i try to drag the rows, it does not drag. The page is a popup. Can something be blocking it? Commented Sep 5, 2024 at 15:30
  • "The page is a popup" - so you're not using return View(..) but rather return PartialView(...) - partial views don't generally have @sections so it probably isn't running your js. Move the link/scripts to the main View or layout, then, in the code that opens the dialog, listen for the load/loaded event and then run the .sortable() Commented Sep 5, 2024 at 16:28
  • Yes I am returning a PartialView and the page above is a partial view. When you say listen for the load/loaded event then run .sortable() what does that mean? Commented Sep 5, 2024 at 16:41
  • How do you load the dialog/popup? If it's a 3rd-party library (eg jquery-ui) then they'll be an event when the dialog has loaded. Commented Sep 5, 2024 at 19:00

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.