在MVC的部分视图中加载JQuery

Question

I have an ASP.NET MVC C# web application.

In my layout file I have the following ajax call

  <li class="PriceModal">
                        @Ajax.ImageActionLink("/InternalDB/Content/downloadCSV.png", "Pareto", "35px", "35px", "PartialViewPriceCalculator",
                        "PriceCalculator", new {@Pareto = "active" }, new AjaxOptions
                        { UpdateTargetId = "PriceCalculator", InsertionMode = InsertionMode.Replace, HttpMethod = "GET"}, new { @style = "padding-top:30px" })
  </li>  

When this Ajax link is clicked a bootstrap Modal is loaded and a partial view is load inside the Bootstrap Modal. At this point the Bootstrap modal and the partial view inside are sitting on top of my existing page.

My problems start when I place jQuery code inside the partial View. I have found a way to append the jQuery code (partial) to the DOM with the following code

 $('body').on('jQuery event to be placed here(focus,change,mouseenter)', 'class/ID to be Placed here', function (e) {       
    // jQuery events 
});

This will allow me to append to the DOM loaded by my page on the background. However this has a lot of issues as well. How do I append a jQuery plug in called Chosen to a dropdownlist which is sitting inside my partial view.

I have experimented by putting the jQuery inside the Ajax Options and using the Onsuccess property but this seems to have problems as well.

 <li class="PriceModal">
                        @Ajax.ImageActionLink("/InternalDB/Content/downloadCSV.png", "Pareto", "35px", "35px", "PartialViewPriceCalculator",
                        "PriceCalculator", new {@Pareto = "active" }, new AjaxOptions
                        { UpdateTargetId = "PriceCalculator", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", OnSuccess = "$('.chosen2').chosen({ allow_single_deselect : true })"}, new { @style = "padding-top:30px" })
  </li>  

Is there a general approach to loading all of the needed jQuery inside a popup partial view or i just need to find hacks for each specific situation?

Answer 1

You can just use the document.ready event to execute JavaScript when your PartialView finishes loading:

<div id="partialViewHere">
</div>

<script type="application/javascript">
    $(function() {
        // load whatever you need here
    };
</script>

I use this on an application to add events to buttons loaded through different PartialView s and it works perfectly.