JQuery Passing Variable From href to load()

Question

I am trying to pass an href id to load() in JQuery, I can see from the alert the returned id# 960, so I know the id value is getting past I just don't know how to append the load url, well the $("#refreshme_"+add_id) is the important part, I use that to refresh the unique div id in the page assigned by the database pull, so it would be looking for id="refreshme_960". My simple example that is obviously not working. I want to refresh the db select part of the page showing the new list of cars. Any ideas?

$(document).ready(function() 
{
    $(".add_to_favorites").livequery("click", function(event) 
    {
        var add_id = this.id.replace("add_", ""); //taken from a.href tag
        alert (id);
        $.get(this.href, function(data) 
        {
            $("#refreshme_"+add_id).load("http://www.example.com/car_list/"+add_id);

---

<a class="add_to_cars" href="/car-add/960/add'}" id="add_960">Add Car</a>

Answer 1

The 'var add_id' line looks a bit odd to me.

what happens when you alert(add_id)? And why not just use id, whats with this add_id?

Answer 2

Sorry about that it's actually alert(add_id), I was going to use ID but I have delete function to and wondered if that would get crisscrossed. Can you tell I am a n00b trying make the pieces work.

Answer 3

This is a bit confusing, are you have 'add_to_favorites' as your trigger, and then add_to_cars in the html element.

too keep your replace id all jqueryish, i think you would use

$(this).attr('id', 'add_');

I think what you are trying to do is that when a user clicks the 'add_to_cars' link, that it adds that from an ajax response into the favorites? Though i could be wrong.

I would question why use add_960 as your id instead of just 960 (I know you aren't supposed to use numbers as id's by I do it all the time and haven't had an issue yet).

So you could do

$('.add_to_cars')livequery('click', function(event){
     var request=$(this).attr('id');
  $.ajax({
           type: GET,
           url: "http://www.example.com/car_list/"+request,
           success: function(response){
                $('.add_to_favorites').append(response)


      }
});
});

or something like that. again, not entirely sure what you are trying to do.

Answer 4

That is correct, trying to add the cars to a favorites. How it's suppose to work is the visitor add to favorites from the list of viewed cars, it gets added to the list on their side panel of the site. Then the add to favorites button goes away an is replaced by delete favorites.

I guess I could use numbers for the id and that would make life more straight forward.

In your example I plugged that in and when I clicked the add to favorites button the jquery did not do it's magic and I spilled out onto the /car-add/ function page. Here is what I have so far including your example. Maybe you can see where I am going wrong.

$(document).ready(function()
 {
  $('.add_to_cars')livequery('click', function(event)
     {
     var request=$(this).attr('id');
  $.ajax({
           type: GET,
           url: "http://www.example.com/features/car_list/"+request,
           success: function(response){
                $('.add_to_favorites').append(response)
      }
  });
   });
    });

Answer 5

Alright I corrected the above code and things are at least processing but the thing is now the list is appending strange, I'll explain but first my working code thus far, I changed the names for the DOMs to make more sense but other then that everything is the same..

$(document).ready(function() 
   {
$('.add_to_favorites').livequery('click', function(event)
    {
     var request=$(this).attr('id');
  $.ajax({
           type: "GET",
           url: "http://www.example.com/features/favorite-add/"+request+"/add",
           success: function(response){
                $('#favorite-listings').append(response);
      }
  });
return false;
    })
  });

Ok like I said things are working out but the list appends odd for example.

first saved shows their saved car.

Your saved cars: -Pontiac 2005 Sunburst

second favorite saved this happens and so on.

Your saved cars: -Pontiac 2005 Sunburst

Your saved cars: -Pontiac 2005 Sunburst -Ford 2006 Thunderbird

It's duplicating instead of just adding. Not sure what I am doing wrong?

Answer 6

What is happening is the database call is pulling in the new results with the old results above those, another favorite and a new set of db results below that. When I do a hard refresh everything looks fine and the list is correct. Now my question is how do I stop that from happening? I want refreshed the list to replace the old, I could separate out the database insert and results and just hit the append (db insert) to /add-favorite.php/ then send a call to the actual queried list at /list-favorites.php/ with a load(), is this the best way to work this?

Answer 7

You are using append() in this line

$('#favorite-listings').append(response);

Which is why you get new results added after the old ones. Change that line to

$('#favorite-listings').html(response);

Answer 8

That worked just perfect, thanks and thanks to everyone that helped out thus far! What I am trying to do next is update the button section, there is a "if favorite save then show remove button" and the opposite for remove. Plus a notice to say things are "Updating..." I have tried a few things and they work but are they efficient, that's the thing. My JQuery code to remove and add favorites. Any tips on how to incorporate or stream line, please let me know.

//Remove Favorite    
$(document).ready(function() 
               {
            $('.remove_from_favorites').livequery('click', function(event)
                 {
             var request=$(this).attr('id');
             var url = $(this).attr('href');
                $('li:has(a[href="'+url+'"])').remove();
                $('a[href="#fav-places"] > span').text('('+$('ul#favorite-listings > li').length+')');
    //updating message                           
            $('#loading_'+request).show(100);

    //refresh DOM that holds if then statement for add/remove buttons   

            $('#refreshme_'+request).load("http://www.example.com/global/favorites_add_remove_buttons/"+request);
            return false;
        })
    });

//Add Favorite        
    $(document).ready(function()
           {
    $('.add_to_favorites').livequery('click', function(event)
             {
         var request=$(this).attr('id');
      $.ajax({
               type: "GET",
               url: "http://www.example.com/features/favorite-add/"+request+"/add",
               success: function(response){
                    $('#favorite-listings').html(response);
          }
    });

    //updating message
            $('#loading_'+request).show(100); 

   //refresh DOM that holds if then statement for add/remove buttons
            $('#refreshme_'+request).load("http://www.example.com/global/favorites_add_remove_buttons/"+request);
      return false;
    })
 });