CODEWITHSUNDEEP
phpjqueryhtmlajaxjson
trickpatty
trickpatty

Reputation: 433

use unique id in ajax without json

The ajax request functions where:

success: function(data) {
   $('#totalvotes1').text(data); 
}

and where <span id="totalvotes1">,

but I need it to work with unique id's where:

success: function(data) { 
    $('#total_' + $(this).attr("id")). text(data); 
}

and where <span id="total_vote_up_<?php echo $mes_id; ?>">

and <a id="vote_up_<?php echo $mes_id1; ?>">

I cannot figure out what is wrong with the following code. If anybody has an easy fix with json I would try that but I have no idea how json works. I would love it if somebody could just help me debug this code here

general.js:

$(".vote").click(function() 
{
    var id = $(this).attr("id");
    var name = $(this).attr("name");
    var eData = $(this).attr("data-options");
    var dataString = 'id='+ id + '&' + eData ;
    var parent = $(this);

    if(name=='up')
    {
        $(this).fadeIn(200).html('');
        $.ajax({
            type: "POST",
            url: "up.php",
            data: dataString,
            cache: false,

            success: function(data) { 
                $('#total_' + $(this).attr("id")).text(data); 
            }
        });
    }

});
});
});

index.php

<div id="main">
<div id="left">
    vote_up_<?php echo $mes_id1; ?>
<span class='up'><a id="vote_up_<?php echo $mes_id1; ?>" class="vote" name="up" data-options="key1=<?php echo $mes_id1;?>&key2=<?php echo $mes_id2;?>&key3=<?php echo $totalvotes1;?>&key4=<?php echo $totalvotes2;?>"> <img src="up.png" alt="Down" /></a></span><br />
<span id="total_vote_up_<?php echo $mes_id1; ?>"><?php echo $totalvotes1; ?></span><br />
</div>
<div id="message">
    <?php echo $message1; ?>
</div>
<div class="clearfix"></div>
 </div>

Upvotes: 0

Views: 270

Answers (3)

cernunnos
cernunnos

Reputation: 2806

Identation and enters are your friends.

Try doing something like this:

// Before $.ajax
var that = this;
// Inside success
$('#total_' + $(that).attr("id")).text(data);

Most jQuery functions change the context, so "this" inside the success function does not point to the ".vote" element. You have to save the reference to the element (usually with something like "var that = this") and use this reference inside the success function.

Edit:

As Matt Burland pointed out, you already have both the clicked element reference saved (parent) and the id saved, so this can be solved with something like:

$('#total_' + id).text(data);

Upvotes: 2

Matt Burland
Matt Burland

Reputation: 45155

Cleaned up and fixed. Note, instead of keep doing $(this), you can do it once, store it in a variable and use it again. This is much more efficient because it avoids the overhead of repeatedly creating jQuery objects (which is what $(...) does).

$(".vote").click(function() 
{
    var parent = $(this);   //Note: calling this parent is really confusing!
    var id = parent.attr("id");
    var name = parent.attr("name");
    var eData = parent.data("options");
    var dataString = 'id='+ id + '&' + eData ;

    if(name=='up')
    {

        parent.fadeIn(200).html('');
        $.ajax({
            type: "POST",
            url: "up.php",
            data: dataString,
            cache: false,

            success: function(data) { $('#total_' + id).text(data); }

        });

    }

});

Note: The reason your original didn't work is that the this in the context of the AJAX callback isn't the same this as in the context of the .click handler. When you callback is executed, this is your browser window, not the element that was originally clicked on.

So, how does this fix it? It makes use of closures. If you have a function (like you AJAX callback) nested inside another function, the inner function has access to all the variables defined in the outer function. So by caching your id in the id variable, you have access to it when the AJAX callback is called. Even better, even if you where to click on another .vote before the callback from the original click is called, it still remembers the correct value!

Upvotes: 1

Benjamin Toueg
Benjamin Toueg

Reputation: 10867

$(".vote").click(function() 
{

var id = $(this).attr("id");
var name = $(this).attr("name");
var eData = $(this).attr("data-options");
var dataString = 'id='+ id + '&' + eData ;
var parent = $(this);


if(name=='up')
{

$(this).fadeIn(200).html('');
$.ajax({
type: "POST",
url: "up.php",
data: dataString,
cache: false,

success: function(data) { $('#total_'+id).text(data); } // here is the change

});

}

});
});
});

Upvotes: 1

Related Questions