defining jquery ready event in Partial View

Question

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 ...

Refrain

did you use ajax to load these partial views? – Adne

yup i m using ajax.beginform or ajax.actionlink when calling/updating partial view ... – Refrain

Answer 1

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>

Mraz

this doesn't work if there are multiple partial views. the first partial view in the order will get its document ready triggered but not the second one. – Fendig

@PinakinShah That shouldn't be true unless something in the first one is (a) failing or (b) prevents the other ones from running. You can have as many as you need. This should be true even if they are loaded via AJAX. I have a couple of pages that are very similar where I've split the code into two sections that are included independently based on whether some model property is present or not. Works like a charm. – Mraz

Answer 2

yes you are allowed to have multiple $(document).ready() in a page just make sure you have included jquery file before calling this function. Functions invoked inside $(document).ready() called in the order they are requested.

jQuery - multiple $(document).ready ...?

Frodeen

can you provide me wth any example, as i said i tried but the ready event in partial view is not firing up ... – Refrain

@dvlpr: i think tvanfosson has written it, if that doesnt solve ur problem, let us know!! – Frodeen

Answer 3

Yep, that's right, as long as previous partial view does not have any error you can have as many $(document).ready() as you want and it will fire for all.

Misread