jquery not displaying chart in ajax div

Question

Hello. I have a little page I've been working on. It's at: http://nait.jtlnet.com/~fpkj5v0r/programmer.php - and as you can see, a jquery chart shows up, like it's supposed to.

Now here's the problem.. which has ended up taking up 6+ hours of my time... when I click a link (which uses ajax to load up a new page in the same div), and then I try to go back to the chart by clicking the correct link, nothing loads up.

• The steps to see this take place is. Load up page and see the chart.
• Then go under the "Water Plant" heading and click "test". This will load up a new page into the div.
• Now, click on the link, "View Stats". This will load back up the exact same page that contains the chart.. except no chart show up. The jquery doesn't seem to work here. I've heard about jquery having an AJAX problem, since it's only a div loading up and not the whole page, but I've never had any luck with the .live() jquery stuff.

Please, any help would be appreciated. I've tried different charts, all using jquery, thinking my jquery was just messed up, but it seems to be something else.

I can post the code.. but it's just your regular jquery code in the header, and div opening in the corresponding page.

Thanks!

Marcus

Answer 1

Ok, so you return the placeholder div from ajax.

The problem I'm seeing now is that there's nothing telling javascript to write in the graph.

My suggestion is to take your current document.ready and change it:

CURRENTLY:

$(document).ready(function() {
  // stuff that happens
});

TRY CHANGING TO:

function documentOnReady() {

var json =  
[ 
    {"dates":"24 feb","visitors":"5"}, 
    {"dates":"25 feb","visitors":"21"}, 
    {"dates":"26 feb","visitors":"14"}, 
    {"dates":"27 feb","visitors":"45"}, 
    {"dates":"28 feb","visitors":"20"}, 
    {"dates":"29 feb","visitors":"18"}, 
    {"dates":"01 mar","visitors":"9"}, 
    {"dates":"02 mar","visitors":"7"}, 
    {"dates":"03 mar","visitors":"42"}, 
    {"dates":"04 mar","visitors":"17"}, 
    {"dates":"05 mar","visitors":"15"}, 
    {"dates":"06 mar","visitors":"9"}, 
    {"dates":"07 mar","visitors":"15"}, 
    {"dates":"08 mar","visitors":"3"}, 
    {"dates":"09 mar","visitors":"3"}, 
    {"dates":"10 mar","visitors":"19"}, 
    {"dates":"11 mar","visitors":"15"}, 
    {"dates":"12 mar","visitors":"11"} 
] ;

    var plot_data = new Array(); 
    var plot_ticks = new Array(); 

    for (var i in json) { 
        i = parseInt(i); 
        plot_data.push([i, json[i].visitors]); 
        plot_ticks.push([i+0.5, json[i].dates]); 
    } 

    $.plot($("#placeholder"),  
         [ 
            {"data": [[0, 0]]},  
            {"data": [[0, 0]]},  
            {"data": [[0, 0]]},  
            {"data": [[0, 0]]},  
            {"data": [[0, 0]]},  
             { 
                 label: "Last 20 days visits", 
                 bars: {"show": "true"}, 
                 data: plot_data 
             } 
         ], 
        { 
             xaxis: { 
               ticks: plot_ticks 
            } 
         } 
     ); 
}
$(document).ready(documentOnReady);

THEN in the callback of the ajax, you need to call documentOnReady() again to re-run the graph rendering code.