JQuery GetJSON called twice for ASP.NET MVC partial view

asp.net-mvcjquerypartial-views

I have a page which contains a html.RenderPartial, that renders an ASP.NET MVC partial view.

The partial view is used as a jQuery dialog and is opend from the page where it is rendered.

The problem is that inside the partial view I want to load and store a variable when the dialog is displayed. This data is used for some lookup while working inside the dialog.
But when the page with the partial view loads, the jQuery getJson inside the partialview gets called twice. Why?

The code inside the partial view looks like this:

<script type="text/javascript">
$(function() {
    var groups = null;    

    $.getJSON("/RessourceGroup/List", null, function(data) {
        groups = data;
    });

In Firebug I can see the page (view) is loaded once, but the script above in the partial view is still called twice. Why?

Best Answer

This looks like it will get loaded when the page loads. Are you also reloading the partial via AJAX when the dialog pops up? If so, then it will probably run again then.

EDIT: Based on your update, I suspect that the script tag is inside the DIV and that the DIV is being cloned when the dialog widget is invoked. Moving the script outside the DIV that the dialog is using, should solve your problem.

Related Solutions

Javascript – n “exists” function for jQuery

In JavaScript, everything is 'truthy' or 'falsy', and for numbers 0 means false, everything else true. So you could write:

if ($(selector).length)

You don't need that >0 part.

Javascript – How to change the href attribute for a hyperlink using jQuery

Using

$("a").attr("href", "http://www.google.com/")

will modify the href of all hyperlinks to point to Google. You probably want a somewhat more refined selector though. For instance, if you have a mix of link source (hyperlink) and link target (a.k.a. "anchor") anchor tags:

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

...Then you probably don't want to accidentally add href attributes to them. For safety then, we can specify that our selector will only match <a> tags with an existing href attribute:

$("a[href]") //...

Of course, you'll probably have something more interesting in mind. If you want to match an anchor with a specific existing href, you might use something like this:

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

This will find links where the href exactly matches the string http://www.google.com/. A more involved task might be matching, then updating only part of the href:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

The first part selects only links where the href starts with http://stackoverflow.com. Then, a function is defined that uses a simple regular expression to replace this part of the URL with a new one. Note the flexibility this gives you - any sort of modification to the link could be done here.

Best Answer

Related Solutions

Javascript – n “exists” function for jQuery

Javascript – How to change the href attribute for a hyperlink using jQuery

Related Topic