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

Question

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>

I read that $ might be used for different purposes depending on what libraries you're using - so to be on the safe side, I just write it out. As I understand it, $ and jQuery is one and the same (unless overloaded by other libraries). — Anders Juul, May 12 '10 at 08:20

Jan Willem B · Answer 1 · 2010-05-12T07:12:25.417

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() [...]

edited May 12 '10 at 07:12

answered May 12 '10 at 07:06

Jan Willem B

3,787
1
25
39

Hi Jan, I tried to add the # but now it just doesn't run at all?! I also changed to .load (I've been copying from the wrong places ;-) ) but that also didn't make it run. Any clues? – Anders Juul May 12 '10 at 08:19
maybe you should wrap the whole thing in a jQuery(document).ready() call anyway to make sure the DOM is loaded. You could also try "each" instead of "load", because it only fires once. – Jan Willem B May 12 '10 at 08:32

score 1 · Accepted Answer · answered May 12 '10 at 07:10

1

Just an idea:

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

Will run once for each #divStatContents

answered May 12 '10 at 07:10

Fabian

13,603
6
31
53

I ended up with a combo - .each wrapped in .ready, thanks all! – Anders Juul May 17 '10 at 07:41

aorlando · Answer 3 · 2013-02-05T16:26:07.743

0

//declare event to run when div is visible
function doFunction(){
   //do something

}

//hookup the event
$('#divId').bind('isVisible', doFunction);

//show div and trigger custom event in callback when div is visible
$('#divId').show('slow', function(){
    $(this).trigger('isVisible');
});

edited Feb 05 '13 at 16:26

answered Feb 05 '13 at 16:17

aorlando

668
5
21

score 0 · Answer 4 · answered May 12 '10 at 07:08

0

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")

answered May 12 '10 at 07:08

GlenCrawford

3,359
3
26
34

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

4 Answers4

Linked