use query string in ajax function

Question

I am trying to do a simple AJAX function to send data from query string, and the append the DIV. .I have tried a variety of different methods, but none that will updat the div. If it updates, it returns NULL, otherwise it just goes to the request.php page. If I move the prevent default function under the click event, it does nothing. Any help would be appreciated!! TIA

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function()
{
    $("#link").click(function(e)
    {

        $.ajax(
                {
                    type    : "GET",
                    url     : "request.php",
                    data    : { id: link.attr('id') },
                    success : function(response)
                    {
                        $("#ajaxresponse    div").fadeOut("fast", function()
                        {
                            $("#ajaxresponse div").remove();
                            $("#ajaxresponse").append($(response).hide().fadeIn());
                        });

                    }
                });

        e.preventDefault();
    });
});

</script>
</head><body>
<h1>
    AJAX with PHP
</h1>
<div class="content">

<a href="request.php?id=1" id="link" data-id="1" >Submit Link</a>

</div>
<div id="ajaxresponse">
    <div>please submit the form</div>
</div>

The request.php is as follows:

<?php
$username = $_GET['id'];


echo getTemplate($username);

function getTemplate($username)
{
return '<div class="box">
    <h1>The ID is</h1>
    <div class="meta">username: '.$username.'</div>
</div>';

}

?>

What is the data if you access the url directly, and what is in response — Rene Pot
– Rene Pot, Commented Jun 18, 2012 at 13:43
I am just trying to send the "1" at the end of the url: request.php?id=1 — Jjames
– Jjames, Commented Jun 18, 2012 at 14:13

Shyju · Accepted Answer · 2012-06-18 14:23:09Z

1

I guess you are trying to read the id value of the link being clicked in a wrong way. This should work.

$(function()
{
    $("#link").click(function(e)
    {
       var link=$(this);
       e.preventDefault();
        $.ajax(
                {
                    type    : "GET",
                    url     : "request.php",
                    data    : { id: link.attr('id') },
                    success : function(response)
                    {
                        $("#ajaxresponse div").fadeOut("fast", function()
                        {
                            $("#ajaxresponse div").html(response).fadeIn();
                        });

                    }
                });   

    });
});

You can even use the get method which is a short version of jQuery ajax call with method type as GET.

$(function()
{
    $("#link").click(function(e)
    {
       var link=$(this);
       e.preventDefault();
       $.get("request.php?id="+link.attr('id'),function(response){
               $("#ajaxresponse div").fadeOut("fast", function()
               {
                     $("#ajaxresponse div").html(response).fadeIn();
               });   
       });             
    });
});

edited Jun 18, 2012 at 14:23

answered Jun 18, 2012 at 13:44

Shyju

220k106 gold badges420 silver badges499 bronze badges

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

4 Comments

Jjames Over a year ago

I am just trying to send the "1" at the end of the url: request.php?id=1...there is prob a better way, Im just new :)

Shyju Over a year ago

@Jjames: There is no problem in that.

Jjames Over a year ago

When I run it, I get back "link", the ID of the anchor tag, instead of the 1 on the query string

Jjames Over a year ago

I got it...just had to change the link.attr to link.data....probably my crappy question phrasing :)...thanks a bunch!!!

Collectives™ on Stack Overflow

use query string in ajax function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related