Simple ajax onclick question

Question

Hi,

I'm having difficulty setting up a simple menu that displays results on a div box:

I have a list of 10 links which link to php files on my server that return data. I would like it so that when the viewer clicks on one of the links, the data from the php file will display on a div box on the screen, and then when he clicks on another link, it will display the data from that php file in the div box (replacing the previous text).

I know this is pretty simple, but I can't get it to work. I'm using jQuery, and would like to know if any of you have any quick solutions.

Thanks!!

UPDATE: I've been pretty much failing javascript code-wise. But here is the basic idea for the framework:

 <div class="tabs">
        <ul class="tabNavigation" style="float:left; padding:1px;">
            <li><a href="#displayphpfile">Load phpfile1</a></li>
            <li><a href="#displayphpfile">Load phpfile2</a></li>
            <li><a href="#displayphpfile">Load phpfile3</a></li>
        </ul>
        <div id="displayphpfile">
            <p>Load phpfile1</p>
        </div>
    </div>

Answer 1

I haven't tested this, but is this close to what you want?

<script type="text/javascript">
    $(document).ready(function() {
     $('a').click(function() {
      var file = $(this).text().toLowerCase() + '.php';
      $.ajax({
       url:file,
       cache:false,
       success: function(response) {
        $('#data_goes_here').html(response);
       }
      });
      return false;
     });
    });
</script>
<ol>
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a>
    <li><a href="#">Baz</a></li>
</ol>

<div id="data_goes_here"></div>

Answer 2

jQuery has a specific method for doing that: load().

I would change your example a little though, so the hrefs of the links point to the php file:

<div class="tabs">
    <ul class="tabNavigation" style="float:left; padding:1px;">
        <li><a href="phpfile1.php">Load phpfile1</a></li>
        <li><a href="phpfile2.php">Load phpfile2</a></li>
        <li><a href="phpfile3.php">Load phpfile3</a></li>
    </ul>
    <div id="displayphpfile">
        <p>Load phpfile1</p>
    </div>
</div>

Then the code is very simple:

$(document).ready(function() {
   $(".tabNavigation a").click(function() {
      $("#displayphpfile").load($(this).attr("href"));

      return false;
   });
});

Answer 3

Bipedal Shark is calling a document.ready inside a click element!

It should be:

<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var file = $(this).text().toLowerCase() + '.php';
            $.ajax({
                    url:file,
                    cache:false,
                    success: function(response) {
                            $('#data_goes_here').html(response);
                    }
                });
            return false;
            });
        });
</script>

But the load method is much cleaner code.