replace div content using ajax and jquery

Question

I try following code to replace div content but its not working what i am doing wrong?

function MakeRequest()
{
    $("#page_num li").click(function() {
       var id=(this.id); 
       alert(id);
        $.ajax({
        url : 'display.php',
        data:{"id":id},
        type: 'GET',

        success: function(data){
            $('#ResponseDiv').html(data);
        }
    });
});
}

//list to get value

<ul id="page_num">
              <li id="5"  onclick='MakeRequest();' ><a href="#">5</a></li>
              <li id="10"  onclick='MakeRequest();' ><a href="#">10</a></li>
               <li id="15"  onclick='MakeRequest();' ><a href="#">15</a></li>
           </ul>

//div to replace

<div id='ResponseDiv'>
        This is a div to hold the response.
</div>

//my display.php

<?php 
   echo "This is a php response to your request!!!!!!";
?>

EDIT: how can i check its going or not to my display.php. i have try solution but not get success.

Why you have defined onclick='MakeRequest();' and also jquery click event for it. — Sridhar Narasimhan
– Sridhar Narasimhan, Commented Dec 12, 2012 at 4:45

Tim Withers · Accepted Answer · 2012-12-12 04:47:40Z

10

Your code has a function which defines an onclick action and doesn't make the call itself. I bet if you double clicked the link it would work, but you should do it like this:

function MakeRequest(id)
{
    $.ajax({
        url : 'display.php',
        data:{"id":id},
        type: 'GET',

        success: function(data){
            $('#ResponseDiv').html(data);
        }
    });
}

Finally, change the call to this:

onclick='MakeRequest(5);'

OR just do this, which binds the li element to the click function and no "onclick" is necessary:

$(document).ready(function()
{
    $("#page_num li").click(function() {
       var id=$(this).attr(id);
        $.ajax({
        url : 'display.php',
        data:{"id":id},
        success: function(data){
            $('#ResponseDiv').html(data);
        }
    });
});
});

answered Dec 12, 2012 at 4:47

Tim Withers

12.1k5 gold badges45 silver badges68 bronze badges

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

5 Comments

Arash Milani Over a year ago

what is point of onclick='MakeRequest(5);' if there is an id in the element

Tim Withers Over a year ago

@ArashMilani which is why I would just do the second example and bind directly instead of making the call in the onclick method.

Arash Milani Over a year ago

I think We better provide much pragmatic answers than just trying to do the things the way something has been asked.

Kango Over a year ago

how can i check its going or not to my display.php. i have try solution but not get success.i am trying to use makerequest fuction because i have another list on which will use same function.

Arash Milani Over a year ago

you can use firebug in firefox or developer tools in chrome to watch for ajax requests. you can also use console.info(var) as a handy tool to inspect variables.

Pragnesh Chauhan · Accepted Answer · 2012-12-12 04:47:53Z

3

remove MakeRequest() function just try using $("#page_num li").click otherwise it will call function twice

$(document).ready(function(){
    $("#page_num li").click(function() {
      var id=(this.id); 
      $.ajax({
         url : 'display.php',
         data:{"id":id},
         type: 'GET',
         success: function(data){
            $('#ResponseDiv').html(data);
         }
      });
   });
});

answered Dec 12, 2012 at 4:47

Pragnesh Chauhan

8,49410 gold badges46 silver badges58 bronze badges

Comments

Arash Milani · Accepted Answer · 2012-12-12 05:35:46Z

2

You have onclick events binded to that function called MakeRequest then in that function you again bind the lis to a click event.

You better take this approach:

$(function(){
    $("#page_num li").click(function() {
        $.ajax({
        url : 'display.php',
        data:{id: $(this).attr('id')},
        type: 'GET',
        success: function(data){
            $('#ResponseDiv').html(data);
        }
    }
});

and get rid of inline onclick events.

edited Dec 12, 2012 at 5:35

answered Dec 12, 2012 at 4:49

Arash Milani

6,3282 gold badges46 silver badges50 bronze badges

Comments

whastupduck · Accepted Answer · 2012-12-12 04:45:54Z

-1

move the onclick event to the tag so that:

<a href="#" onclick='MakeRequest();>

answered Dec 12, 2012 at 4:45

whastupduck

1,16611 silver badges25 bronze badges

Collectives™ on Stack Overflow

replace div content using ajax and jquery

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related