CODEWITHSUNDEEP
asp.net-mvc-3twitter-bootstraprazor
Sebastian
Sebastian

Reputation: 4811

Twitter bootstrap modal popup not opening

I am showing the partial view (_AddExp) as modal popup content for adding a new item. After closing the modalpopup, i tried to show the Modalpopup again for adding a new item but modalpopup is not opening. I am getting error TypeError: $(...).modal is not a function on the line $('#AddExpModal').modal('show');

 <p>
<button onclick="AddExperience()" class="btn btn-primary">Add experience</button>
</p>

function AddExperience(){
   $('#AddExpModal').modal('show');
   $("#AddExpInfo").load("/Account/ExperienceAdd/"+ @ViewBag.AccountId); //Loads the Partial view.
}

<div id="AddExpModal" class="modal hide fade">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Add experience detail</h3>
</div>
<div class="modal-body" id="AddExpInfo">
 
</div>
<div class="modal-footer">
   <button onclick="ClosePopup();" class="btn btn-primary">Close window</button>
</div>

//Code used after closing popup.
function ClosePopup(){
 $('#AddExpModal').modal('hide');
 $("#AddExpInfo").html("");
  $("#ExperienceList").load("/Account/ExperienceList/"+ @ViewBag.AccountId);
 }

In my partial view for adding new experience(_Addexp.cshtml) I used Document.Ready event and some other functions to POST the FORM data, is that a reason for not showing popup from the second time? How can I solve this kind of problems?

Upvotes: 1

Views: 1587

Answers (3)

Sebastian
Sebastian

Reputation: 4811

Finds the reason finally. Inside partial view i am loading jquery library sing code

And in the main page as well i am loading the jquery library ,This makes the problems Once i removed the jquery lib from partial view all seems to works perfectly.

Upvotes: 2

Judah Gabriel Himango
Judah Gabriel Himango

Reputation: 60001

The modal functionality requires bootstrap.js to be loaded. For some reason, it's not loaded after you close the modal.

I suspect it's due to the HTML you're loading and inserting into the DOM as part of the .load call. Is it using an iframe perhaps? Or perhaps it loads a partial view that doesn't load the bootstrap.js?

Verify that when .load finishes, bootstrap.js is still loaded for the view containing your button.

Upvotes: 1

Jean-R&#233;mi Larcelet
Jean-R&#233;mi Larcelet

Reputation: 1

If your #ExperienceList is in your modal, it is remove when you use :

$("#AddExpInfo").html("");

jQuery can't load on a #ExperienceList does not exist.

Is that ok ?

Upvotes: 0

Related Questions