Question

I am creating a facebook app an am struggling on some jquery. In its simplest terms I have a left hand column with the pictures and names of all the facebook friends in a list. When I click on them the face moves to a right hand column and I hide the face with css display:none on the left hand column. So the jquery is dynamically adding an list to the right hand column.

Also when I click on a face on the left hand column, before it moves over to the right hand column a pop up appears saying you have selected that person.

So far all working good (bear with me). When I have a face on the right hand column I have an option to remove them from the right hand column. When I click on this it removes a face and a pop up appears saying you have removed that person. Everything works apart from the fact that the pop up cannot find the persons name in the list and it just says undefined. This is the code that adds the person to the right hand column (this works perfect)

$(".list").live("click", function () {
    var id = $(this).attr("id");
    var PersonName = $(this).children('.listcontent').children('.pname').html();
    var hiddenid = $("#HiddenField1").val() + '|' + id;
    $("#HiddenField1").val(hiddenid);

    var hiddenperson = $("HiddenField3").val() + '|' + PersonName;
    $("#HiddenField3").val(hiddenperson);

    var url = "http://graph.facebook.com/" + id + "/picture?type=large";
    $("#personimage").attr('src', url);

    var src = "http://graph.facebook.com/" + id + "/picture?type=square";
    var lightboxmessage = "<h2>You have selected " + PersonName + "</h2>";
    $("#lightboxcontentright").html(lightboxmessage);

    $("#lightbox, #lightbox-panel").fadeIn(300)

    var personexists = findimage(id);
    if (personexists == "false") {
        var newperson = "<li class='list1' id='" + id + "A'><div class='listcontent'><img src=" + src + "><label css='pname'>" + PersonName + "</label></div><div class='selectme'><Label>Delete</Label></div></li>";
        $("#selectedlist").append(newperson);
        $(this).css("display", "none");

    }
});

This is the code to remove the face from the right hand column

$(".list1").live("click", function () {
    var id1 = $(this).attr("id");
    var id = id1.substring(0, id1.length - 1);

    <! -- THIS IS THE BIT THAT DOES NOT WORK
    var PersonName = $(this).children(".listcontent").children(".pname").html();
    alert(PersonName);
    <!-- END -->

    var hiddenid = $("#HiddenField1").val();
    hiddenid = hiddenid.replace('|' + id, '');
    $("#HiddenField1").val(hiddenid);

    var hiddenperson = $("#HiddenField3").val();
    hiddenperson = hiddenperson.replace('|' + PersonName, '');
    $("#HiddenField3").val(hiddenperson);

    var url = "http://graph.facebook.com/" + id + "/picture?type=large";
    $("#personimage").attr('src', url);

    var lightboxmessage = "<h2>You have de-selected " + PersonName + "</h2>";
    $("#lightboxcontentright").html(lightboxmessage);
    $("#lightbox, #lightbox-panel").fadeIn(300);

    $(this).css("display", "none");

    $("#" + id + "").css("display", "inherit");
});

I thought it might have something to do with the .live function or dynamically creating lists. As you can see there is not much difference in the code

thanks in advance

Answer 1

In this line in the first code block you have misspelled ‘class’ as ‘css’ in the label. The label would never have the class property set.

var newperson = "<li class='list1' id='" + id + "A'><div class='listcontent'><img src=" + src + "><label css='pname'>" + PersonName + "</label></div><div class='selectme'><Label>Delete</Label></div></li>";

Change it to:

var newperson = "<li class='list1' id='" + id + "A'><div class='listcontent'><img src=" + src + "><label class='pname'>" + PersonName + "</label></div><div class='selectme'><Label>Delete</Label></div></li>";