Trying to use json to return multiple values

[davidannis]

It may be my lack of ability to think straight because I have a cold and couldn't sleep but this makes no sense to me.

 

I got an up/down voting script from here: http://www.9lessons.info/2009/08/vote-with-jquery-ajax-and-php.html

 

I wanted to integrate it into a project that allows logged in users to vote. Each user gets one vote (up or down) per item being voted on but can change their vote. To do so I keep a table with user_id, item_id, up_vote (bool), and down_vote( bool). If a voter votes the yes or no that they voted for is incremented. If they later change their vote, the prior vote counter (up or down) is decremented and the new vote is incremented. A new vote that duplicates the users existing vote is ignored.

 

Here's the client side code:

$(function() {

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

var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);

if(name=='up')
{

$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
   type: "POST",
   url: "updown/up_vote.php",
   data: dataString,
   cache: false,


   success: function(html)
   {
    parent.html(html);
  
  }  });
  
}
else
{

$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
   type: "POST",
   url: "updown/down_vote.php",
   data: dataString,
   cache: false,

   success: function(html)
   {
       parent.html(html);
  }
   
 });


}
return false;
	});

});
</script>

 

I got that all to work, but the code that returns the up or down vote counter only returns the counter for the current vote (up or down) so I needed change the code server side to return two values in case the opposite vote was decremented and the client side code to display both. I changed the server side so that I get back data as json - for example now in my working Up_vote script I get: {"upvalue":"13","downvalue":"38"} instead of just a 13.

 

So, now comes the hard part. I want to display 13 in the up box and 38 in the down box. I go to look at how to get the equivalent down box my up box and find that both boxes have the same id="1" (which is not legal) so I can't use getElementbyID one has name="up", the other name="down", but I can't use that because I have ids 2, 3, 4,... each with its own up and down. Both have the same class "vote". So, I decide to fix the non-unique IDs so I make the IDs 1 into 1-up and 1-down. Now, I need to trim the -up off before my AJAX call to up_vote and have my script know that 1-down is where it needs to put the down value. So I try this:

            $(function() {
                $(".vote").click(function() 
                {
                    var id = $(this).attr("id");
                    var name = $(this).attr("name");
                    var parent = $(this);
                    if(name=='up')
                    {
                        var idtrim = id.replace('-up','');
                        var dataString = 'id='+ idtrim ;
                        var oppid = idtrim + '-down';
                        var opposite = getElementbyid(oppid);
                        $(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
                        $.ajax({
                            type: "POST",
                            url: "updown/up_vote.php",
                            data: dataString,
                            cache: false,
                            success: function(html)
                            {
                                parent.html(html);
                                //    opposite.html(html.down_votes)
                            }  });
                        alert (html);
  
                    }
                    else
                    {
                        var idtrim = id.replace('-down','');
                        var dataString = 'id='+ idtrim ;

                        $(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
                        $.ajax({
                            type: "POST",
                            url: "updown/down_vote.php",
                            data: dataString,
                            cache: false,

                            success: function(html)
                            {
                                parent.html(html);
                            }
   
                        });

                    }

                    return false;
                });

            });

and I get nothing back. The alert (html) never shows. using alerts to debug dataString is: "id=1" oppid is: "1-down"

I updated from jquery 1.2.6 to 1.8.1. I can run the server side script directly and it works.

If I change the last lines of the server side code to just echo WOW it works in the first javascript but not the second. What obvious stupidity am I missing?

 

 

[davidannis]

Still banging my head against a wall. I added a couple of alerts and I'm not making it to the second one even though the first shows %up%

            $(function() {
                $(".vote").click(function() 
                {
                    var id = $(this).attr("id");
                    var name = $(this).attr("name");
                    alert ('%'+name+'%');
                    var parent = $(this);
                    if(name=='up')
                    {
                        var idtrim = id.replace('-up','');
                        var dataString = 'id='+ idtrim ;
                        var oppid = idtrim + '-down';
                        var opposite = getElementbyid(oppid);
                        $(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
                        alert (dataString);
 $.ajax({
                            type: "POST",
                            url: "updown/up_vote.php",
                            data: dataString,
                            cache: false,
                            success: function(html)
                            {
                                parent.html(html);
                            }  });
  

[davidannis]

Sorry after a night's sleep I looked at it again.

getElementbyid(oppid);

needed to be

document.getElementById(oppid);