CODEWITHSUNDEEP
ajaxasp.net-mvctarget
Julian Dormon
Julian Dormon

Reputation: 1779

MVC 4 Ajax ActionLink overwriting target div

I have created an ajax.ActionLink in my MVC view and it is overwriting the target div with the response, instead of filling it with the response, which makes no sense. This article says that it is not supposed to override the parent, only the children, http://aspnet.codeplex.com/workitem/8767

Here is the link:

@Ajax.ActionLink(domain.Domain, "Edit_Partial", "DomainNames", new { id = domain.DomainNameId }, new AjaxOptions { HttpMethod = "get", OnSuccess = "doAsyncCallBack()", UpdateTargetId = "editDomainTarget" })

Here is the div before the load:

<div class="modal-body" id="editDomainModalBody">
<div id="editDomainTarget">Load body…</div>
</div>

Here is the Div after the load:

<div class="modal-body" id="editDomainModalBody">
<p>New Content</p>
</div>

This is bad by design. If I update the target and then want to do so again, the target is no longer in the DOM. jQuery ajax does not work like this. Does anyone have a fix for this? Thanks!

The plot thickens!

I decided since the ajax is loaded over top of the target div, then I would just wrap the same div around the content that my controller returns - so it would be returned to the DOM on the round-trip. ell take a look at what happens:

<div class="modal-body" id="editDomainModalBody">
    <div id="editDomainTarget">
        <div id="editDomainTarget">Load body…</div>
    </div>
</div>

Good greif! Anybody?

Upvotes: 2

Views: 1244

Answers (1)

Julian Dormon
Julian Dormon

Reputation: 1779

I solved the problem but do not truly understand the cause. In case you did not notice (or I did nto explain properly), the data was being loaded into a div which at the same time was being handled by twitter bootstrap code and displaying in a modal window. I was using the twitter data- (data dash) attributes to handle this. It would seem that there was a strange race condition going on between the jquery ajax and the twitter bootstrap code or some conflict with the data - attributes.

The fix is to load the ajax data into the same div but to launch the modal window from the onComplete or onSuccess callbacks provided.

Fortunately twitter bootstrap provides a simple javascript call to launch your modal window.

$('#yourModal').modal('show');

Upvotes: 1

Related Questions