Luis Luis - 1 month ago 19
Javascript Question

Change DIV content using ajax, php and jQuery

I have a div which contains some text for the database:

<div id="summary">Here is summary of movie</div>


And list of links:

<a href="?id=1" class="movie">Name of movie</a>
<a href="?id=2" class="movie">Name of movie</a>
..


The process should be something like this:


  1. Click on the link

  2. Ajax using the url of the link to pass data via GET to php file / same page

  3. PHP returns string

  4. The div is changed to this string


Answer
<script>

function getSummary(id)
{
   $.ajax({

     type: "GET",
     url: 'Your URL',
     data: "id=" + id, // appears as $_GET['id'] @ your backend side
     success: function(data) {
           // data is ur summary
          $('#summary').html(data);
     }

   });

}
</script>

And add onclick event in your lists

<a onclick="getSummary('1')">View Text</a>
<div id="#summary">This text will be replaced when the onclick event (link is clicked) is triggered.</div>
Comments