HTML page with ajax, can't seem to implement RGraph

Question

I'm building a basic webpage with a static header and footer. On the left side, I have a menu. When I press a menu button an ajax request is made and on the right side DIV I update my text.

menu01 - menu01.php contains php code with some Mysql results, this works fine. I think this works fine, because it's all textual output.

menu02 - Menu02.php contains html code to display RGraph, some text is being displayed OK in the right DIV, but the graph doesn't display. The menu02.php file displays fine when I call this file directly.

I figured out, an RGraph output from a php file isn't xml data that I can use to update my right-side DIV of the page. ajax only suspect to receive some text, right? So I must find another way to dynamicaly update my page and show different kinds of things on the right DIV, without reloading my whole page. With this information I think I know why it doesn't work, but I don't know how to get the result I'm looking for. Does anyone have a clue where to look for?

Pieces of code:

index.html :

    <script src="./js/ajax.js"></script>

 <section id="sidebar">
     <nav>
      <ul>
        <li>  <button onclick="goto_menu1()">Menu 1</button> </li>
        <li>  <button onclick="goto_menu2()">Menu 2</button> </li>
      </ul>
     </nav>
 </section>

ajax.js :

 function goto_menu1()
    {
      var xmlHttp = getXMLHttp();
      xmlHttp.onreadystatechange = function()
      {
        if(xmlHttp.readyState == 4)
        {
          HandleResponse(xmlHttp.responseText);
        }
      }
      xmlHttp.open("GET", "./menu01/menu01.php", true);
      xmlHttp.send(null);
    }

 function goto_menu2()
    {
      var xmlHttp = getXMLHttp();
      xmlHttp.onreadystatechange = function()
      {
        if(xmlHttp.readyState == 4)
        {
          HandleResponse(xmlHttp.responseText);
        }
      }
      xmlHttp.open("GET", "./menu02/menu02.php", true);
      xmlHttp.send(null);
    }

I think I've found my missing piece. I should use an iframe to load the right side of my page, right? I've got it working, but I'm not sure this is the best solution — Gaston, Mar 24 '13 at 23:04
Hmm, An iframe is a quick fix for my problem right now, but I don't think it's the best choice. — Gaston, Mar 24 '13 at 23:11

score 0 · Answer 1 · answered Mar 25 '13 at 01:18

In the end it was all a matter of loading the right js on the right pages. And calling the right jquery code for rgraph.

As I had a doubt on getting an RGraph (or other js module) loaded in a dynamic created div, I've now made it working. How?

index.html :
load js rgraph module
call a js function for updating div

js function:
open a php page, generate data and set up the html layout
next, check-document-ready, run jquery rgraph call

I hope it gives some hope to those who have the same search :)

HTML page with ajax, can't seem to implement RGraph

1 Answers1