php ajax refresh part of page on click

Question

I want to be able to click on a link lower down my PHP page, it send a variable and outputs the result in a <div> tag at the top half of the page.

I've linked to latest jquery, and so far I have this in my <head>:

<script type="text/javascript">
   $().ready(function() {
   $("#result").load("crimes_result.php");
   });
</script>

And in my <body>:

<div id="result"></div>

What I need though, is that the div to be shown and depending on the result of a variable sent by a link the user clicks lower down the page.

like crimes_result.php?id=4334 or crimes_result.php?id=54543

How can I finish my script so it does that?

NOTE: I'm useless in ajax/jquery/javascript

Jeff B · Accepted Answer · 2012-02-02 19:36:10Z

2

If I understand correctly, simply call .load() from a click event and pass it the href of the link:

HTML:

<a class="loadlink" href="crimes_result.php?id=4334">Click Me<a>

JS:

$(".loadlink").click( function(event) {
    event.preventDefault();
    $("#result").load($(this).attr("href"));
});

answered Feb 2, 2012 at 19:26

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

When I click the link in that, it's going to crimes_result.php instead of just refreshing the div with the result of crimes_result.php

Did you add event.preventDefault(); and make sure you have function(event){ ?

yeah i've now got what I posted in the question, plus added this code what you suggested.