CODEWITHSUNDEEP
javascriptjquery
LiveEn
LiveEn

Reputation: 3253

jquery not grabing the value from <li>

I have a jQuery function which will add and remove products from a list.

$("#basketItemsWrap li img").live("click", function (event) {
    $("#notificationsLoader").html('<img src="http://images/loader.gif">');

    var oid = $("#thelist li").attr('id').split('_')[1];

    $.ajax({
        type: "POST",
        url: "http://index.php/action/delete",
        data: {
            officeID: oid,
            action: "delete"
        },
        success: function (theResponse) {

            $("#officeID_" + oid).hide("slow", function () {
                $(this).remove();
            });
            $("#notificationsLoader").empty();
        }
    });
});

My HTML code

<div id="basketItemsWrap">
<ul id="thelist">
<li></li>
<?php echo getBasket(); ?>
</ul>
</div>

The html output is 

<li id="officeID_15669">Office 1</li>
<li id="officeID_14903">Office</l 2i>

I want to get the id from the <li> split and get the number so I can pass the value to the database.

    var oid = $("#thelist li").attr('id').split('_')[1];

When i click, the oid is always undefined. What is the mistake in my code?

Upvotes: 0

Views: 92

Answers (4)

Matt Zeunert
Matt Zeunert

Reputation: 16561

$("#thelist li") selects all list elements in #thelist, and the first one is <li></li>. attr('id') is applied to the first one and is therefore undefined.

Use this inside the click handler:

var oid = $(this).parent("li").attr('id').split('_')[1];

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

When you use var oid = $("#thelist li").attr('id').split('_')[1]; it always get the id of the first li in the list instead of the id of li which was clicked.

You can get the clicked li using $(this).parent().

$("#basketItemsWrap").live("click", 'li img', function (event) {
    $("#notificationsLoader").html('<img src="http://images/loader.gif">');

    var oid = $(this).parent().attr('id').split('_')[1];

    $.ajax({
        type: "POST",
        url: "http://index.php/action/delete",
        data: {
            officeID: oid,
            action: "delete"
        },
        success: function (theResponse) {

            $("#officeID_" + oid).hide("slow", function () {
                $(this).remove();
            });
            $("#notificationsLoader").empty();
        }
    });
});

Upvotes: 1

Smartoop
Smartoop

Reputation: 725


i hope this help you :

$("#basketItemsWrap li img").on("click", function(event) { 

$("#notificationsLoader").html('<img src="http://images/loader.gif">');

     var attrid =  $(this).parent().attr('id'); 
    var oid = attrid.split('_')[1]);

    $.ajax({  
    type: "POST",  
    url: "http://index.php/action/delete",   
    data: {officeID: oid, action: "delete"},  
    success: function(theResponse) {

        $("#officeID_" + oid).hide("slow",  function() {$(this).remove();});
        $("#notificationsLoader").empty();

    }  
    });  

});


i create a live example for you (but without ajax function) :
http://jsbin.com/ozepoh/2/

Upvotes: 1

tariq
tariq

Reputation: 2258

its undefined because of the li in bold

<div id="basketItemsWrap">
<ul id="thelist">
**<li></li>**
<?php echo getBasket(); ?>
</ul>
</div>

as visible it has got no id attribute so $("#thelist li") selects this one and then $("#thelist li").attr('id') leads to undefined

Upvotes: 0

Related Questions