partial view with jquery ajax will not render

Question

I am having 2 problems rendering a partial view on a modal dialog.

1) I use an ajax post, it calls the action, returns partial view with a list of contacts, I update the div, but it doesn't display. If I close and reload the dialog, it then displays.

2) there are textbox elements on the partial view dialog that the jquery selector finds but the val() is empty.

Debugged it all the way through and is fine...just doesn't render.

modal:

@model CRM.Model.Shared.ContactSearchModel

<div id="divSearchContactModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="contactSearchForm" class="form-horizontal">
                <div class="modal-header">
                    <h4 class="modal-title">Search / Add Contact</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="col-md-4">
                                    @Html.LabelFor(model => model.FirstName, new { @class = "control-label" })
                                    @Html.EditorFor(model => model.FirstName)
                                </div>
                                <div class="col-md-4">
                                    @Html.LabelFor(model => model.LastName)
                                    @Html.EditorFor(model => model.LastName)
                                </div>
                                <div class="col-md-2">
                                        <button id="contact-search-button" type="button" onclick="Search();" class="btn btn-mercury-modal-search" style="vertical-align: middle">Search</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="divSearchResultsContent">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Ajax in Search function :

function Search() {

    //these return empty text for val()  !!!
    var firstName = $("#FirstName").val();
    var lastName = $("#LastName").val();

    $.ajax({
        type: "POST",
        url: "/ContactSearch/Search/",
        data: { FirstName: firstName, LastName: lastName },
        success: function (data) {
            $('#divSearchResultsContent').html(data);
        },
        error: function (jqXhr, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
    return true;
}

Controller:

    [HttpPost]
    [OutputCache(Duration = 0)]
    public ActionResult Search(ContactSearchModel model)
    {
            model.FirstName = "Daffy";
            model.LastName = "Duck";

            var response = _contactManager.SearchContacts(new SearchContactsRequest
            {
                FirstName = model.FirstName,
                LastName = model.LastName
            });

            if (!response.IsSuccess)
            {
                throw new Exception(response.ErrorMessage);
            }

            model.SearchFinished = true;
            model.ContactList = response.ContactList;
            model.SearchCount = response.ContactList.Count;

            return PartialView("_ContactSearchResults", model);

    }

Partial View for _ContactSearchResults

    @using CRM.Entities.Common
@model CRM.Model.Shared.ContactSearchModel
<table class="table table-responsive">
    <thead>
        <tr>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                DBA Name
            </th>
            <th>
                Address
            </th>
            <th>
                City
            </th>
            <th>
                State
            </th>
            <th>
                Zip
            </th>
            <th>
                Phone
            </th>
            <th>
            </th>
    </thead>
    <tbody>
        @if (Model.SearchFinished)
        {
            if (Model.SearchCount > 0)
            {
                foreach (Contact contact in Model.ContactList)
                {
                    <tr>
                        <th>
                            @Html.Label(contact.FirstName)
                        </th>
                        <th>
                            @Html.Label(contact.LastName)
                        </th>
                        <th>
                            @Html.Label(contact.DbaName)
                        </th>
                        <th>
                            @Html.Label(contact.ContactAddress)
                        </th>
                        <th>
                            @Html.Label(contact.ContactCity)
                        </th>
                        <th>
                            @Html.Label(contact.ContactState)
                        </th>
                        <th>
                            @Html.Label(contact.ContactZipCode)
                        </th>
                        <th>
                            @Html.Label(contact.PhoneNumber)
                        </th>
                        <th>
                            @*@Html.ActionLink("Select", "Select", "ContactSearch", new { EntityId = Model.EntityId, ContactEntityId = @contact.ContactId, RoleId = Model.RoleId }, null)*@
                        </th>
                    </tr>
                }
            }
            else
            {
                <tr>
                    <th>
                        "No contacts found."
                    </th>
                </tr>
            }
        }
    </tbody>
</table>

Any help would be appreciated.

Thanks!

could you replicate the same on jsfiddle,http://jsfiddle.net with generated html (dont use asp.net code in jsfiddle) — dreamweiver, Aug 27 '15 at 11:10

score 0 · Answer 1 · answered Aug 27 '15 at 11:06

0

1) It does render but problem is that jquery modal size doesn't increase (that's why you can see it on reopening the dialog). See this: Make JQuery UI Dialog automatically grow or shrink to fit its contents

2) Could it be that you have multiple controls with FirstName, LastName id on same page?

answered Aug 27 '15 at 11:06

Martin Vich

1,062
1
7
22

Thanks for the reply. I inspected the returned html that was rendered and the html is not in the dialog even though the size is too small. – dmurphy Aug 27 '15 at 16:31
double checked that we don't have the same ID on 2 controls for FirstName. Even changed the name to doubly sure but no dice. – dmurphy Aug 27 '15 at 16:31

score 0 · Answer 2 · answered Aug 27 '15 at 16:37

I am suspecting this is all related and has to do with the fact that my dialog is a partial view being rendered by ajax after the dom is built.

When I take this same dialog and move it to my view and Use HTML.RenderPartial, then show the dialog on click, it all starts working as expected.

score 0 · Answer 3 · answered Sep 21 '19 at 11:23

Could you please consider adding dataType: "html" property to your ajax call, this indicates the type of data you're expecting from the server and will be formatted accordingly. If you don't explicitly indicate the data-type, then jQuery will revert to default MIME type of XML.

partial view with jquery ajax will not render

3 Answers3