defining jquery ready event in Partial View

Safran Ali picture Safran Ali · Aug 6, 2011 · Viewed 34.9k times · Source

I have defined a $(document).ready() event in Site.Master page and I also want to define another $(document).ready() in one of my partial view (which is use to display msgs and error msgs), and I am calling this partial view in all pages and all partial view ...

the partial views are displayed in the page and also using modal popup ... so I tried to this but the ready event in partial view is not firing

I have few things to ask:

  • first, is it possible to do what i am trying to do ...
  • there are pages which have partial view and because of it a page has two $(document).ready() events so when the page is loaded, is there be any clashes between these two events ...

and if some body can provide wth some example ...

Answer

tvanfosson picture tvanfosson · Aug 6, 2011

Yes, you can include multiple ready event handlers on the page. You can put them in the site master, partial views, and view page itself -- as many as you need. They must all be enclosed in script tags. They will fire in the order that they are included in the final, rendered page. Note, you want to be careful to make sure that the partial is included only once on the page or that it doesn't matter if that handler is called multiple times.

Example (not complete):

Master:

 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jqueryui.js"></script>
 <script type="text/javascript">
      $(function() {
           // do something for whole page
      });
 </script>

 @Html.Partial( "ErrorDialog" )

Partial (ErrorDialog)

 <div id="errorDialog" style="display: none;" title="Error">
     <p>An error occurred</p>
 </div>
 <script type="text/javascript">
      $(function() {
          $('#errorDialog').dialog({
             modal: true,
             autoOpen: false,
             // more options
          });
      });

      function showError(msg) {
          $('#errorDialog').find('p').html(msg)
                           .stop()
                           .dialog('open');
      }
 </script>