jQuery - .Ready fires on div tag not in the page

Question

Dear all,

I have implemented below function in a separate .js script file which I load in my main page (Asp.net mvc).

The call back to server is rather costly but ok if specifically requested on the sub-page / content page on which my div tag needs to be filled.

My problem is that the code runs on every page, including pages where the div tag is not present.

How can I remedy my code?

Any comments welcome, Thanks, Anders, Denmark

jQuery("divStatWrapper").ready(function()
    { 
    jQuery.getJSON("/Statistics/GetPointsDevelopment", 
        function(json)
        {
            jQuery("#divStatWrapper #divStatLoading").fadeOut(1000);

           var jsonPoints = new Array();

            jQuery.each(json.Points, function(i, item)
            {
                jsonPoints.push(item.PlayerPoints );
            });

            jsonPoints.reverse();

           var api = new jGCharts.Api();
            jQuery('<img>') 
            .attr('src', api.make({
                data : jsonPoints,
                type : "lc",
                size : "600x250"
                })) 
            .appendTo("#divStatContents"); 

            jQuery("#divStatWrapper #divStatContents").fadeIn(1000);

        });
    });

html:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

    <%@ Import Namespace="AJF.Op.Web.MVC.SpilMerePool.Helpers" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <center>
            <table id="statisticsTable" classname="statisticsTable">
                <tr valign="top" align="center">
                    <td>
                        <%Html.RenderPartial(SMPControls.QueueStatus.ToString(), null); %>
                    </td>
                    <td>
                        <h2>
                            Statistik - udvikling i point over tid</h2>
                        <h3>
                            (Alle resultater frem til løbende dato)</h3>
                        <div id="divStatWrapper">
                            <div id="divStatLoading">
                                <img src="../../Images/ajax-loader.gif" />
                                <span>Loading</span>
                            </div>
                            <div id="divStatContents">
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </center>
    </asp:Content>

Answer 1

Are you missing a #?

jQuery("#divStatWrapper").ready(function() [...]
       ___

Apart from that, the ready function fires when the DOM is ready, not when the element is loaded. From the docs:

The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted.

You probably should bind to the load event of the div instead of the ready event:

jQuery('#divStatWrapper').load(function() [...]

Answer 2

It could possibly be because your initial selector is wrong. I assume that you don't have any <divStatWrapper> elements in your HTML, which means you want to reference a <div> with an ID, like this (note the #):

jQuery("#divStatWrapper")

Answer 3

Just an idea:

$("#divStatContents").each(function(){
   // your code here
});

Will run once for each #divStatContents