Showing a partial view in a modal popup not Working

Question

User-434639980 posted

I have a partial view called JobList.vbhtml that I display in /personel/jobList. In this file, There is a table showing a number of rows of job information. I want to display those results in the modal popup div that is in the Search view.

In fact, when the user clicks the Select JOB button in the search view, the modal form must be opened.This process is called through AJAX.

But the problem is that the JobList View does not open in modal form.

To make sure that the code works correctly, I put some alert in the Ajax code.
When I click the select JOB button, alert 1 and alert2 runs, but the rest does not work
Please pay attention to the code at the end of the search view:

Please guide me where my work is wrong

This is Search View:

@ModelType Machinary.Personel
@Code
    ViewData("Title") = "person"
End Code

@Using (Html.BeginForm())
    @Html.AntiForgeryToken()

    @<div Class="panel">

        @Html.ValidationSummary(True, "", New With {.class = "text-danger"})

        <div class="input-group m-bot15">
            <span class="input-group-btn">
                <a href="#" class="btn btn-white" onclick="showJobs()">Select Job</a>
            </span>
        </div>
    </div>

End Using


<!--Modal form-->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="mymodallabel">Modal title</h4>
            </div>
            <div class="modal-body" id="bodymodal">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->


@section MyScripts
    <script>
        function showJobs() {
            alert('1')
            $.ajax({
                url: "/personel/JobList",
                contentType: "application/json; charset=utf-8",
                type: "Get",
                data: {}
            }).done(alert('2'), function (jdata) {
                alert('3')
                $('#myModal').modal('show');
                $('#mymodallabel').html('Select Job');
                $('#bodymodal').html(jdata);
                alert('4');
            });
        }
    </script>

End Section

This is JobList PartialView:

@ModelType IEnumerable(Of Machinary.Jobs)

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(Function(model) model.Code)
        </th>
        <th>
            @Html.DisplayNameFor(Function(model) model.Title)
        </th>
        <th></th>
    </tr>

@For Each item In Model
    @<tr>
        <td>
            @Html.DisplayFor(Function(modelItem) item.Code)
        </td>
        <td>
            @Html.DisplayFor(Function(modelItem) item.Title)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", New With {.id = item.Id }) |
            @Html.ActionLink("Details", "Details", New With {.id = item.Id }) |
            @Html.ActionLink("Delete", "Delete", New With {.id = item.Id })
        </td>
    </tr>
Next

</table>

This is Action:

  Function JobList() As ActionResult
            Dim qjob = db.Jobs.Take(2).ToList()
            Return PartialView(qjob)
 End Function

Answer 1

User475983607 posted

Your AJAX function is configured for JSON...

contentType: "application/json; charset=utf-8",

...but the action returns HTML.

Return PartialView(qjob)

You should see errors in the browser's dev tools (F12).  

Simplify the AJAX  function.

$.ajax({
	url: "/personel/JobList",
	type: "Get"

Answer 2

User-474980206 posted
As alert 2 runs before the Ajax call (it’s not a lambda), I assume the Ajax call is failing. Add an error handler, or use the browsers debugger to see the network response.

Answer 3

User1520731567 posted

Hi Ashkan209,

When I click the select JOB button, alert 1 and alert2 runs, but the rest does not work

I try to reproduce your issue based on your code,but i work well in my project,

look the picture:

What your error message in your project?

I suggest you could open F12 developer tool to check your error message and add breakpoints in your code.

Best Regards.

Yuki Tao