Array and while loop: make unique clickable

Question

I have an array (via ajax) that looks like this:

data[i].id: gives the id of user i
data[i].name: gives the name of user i

I want to output the array like this:

X Leonardo Da Vinci
X Albert Einstein
X William Shakespeare
...

The X is an image (x.gif) that must be clickable. On click, it must go to functiontwo(), passing the parameter data[i].id. Functiontwo will open a jquery dialog with the question "Delete id data[i].id"?

I know this can't be too hard to do, but I can't seem to figure it out... This is what I have so far:

function functionone() {


    $.ajax({
        type : 'POST',
        url : 'post.php',
        dataType : 'json',
        success : function(data){

            var message = "";
            var i = 0;


            while (i < (data.length - 1))
                            {
                 var myvar = data[i].id;
                 message = message + "<div class=" + data[i].id + "><img src=x.gif></div>" + data[i].name + "<br />";


                 $('#somediv').html(message).fadeIn('fast');
                  $("." + data[i].id + "").click(function () {
                  functiontwo(myvar);
                });
                i++;

            }



        }


    });

}

 function functiontwo(id) {
 ...}

I know why this isn't working. Var i gets populated again and again in the while loop. When the while loop stops, i is just a number (in this case the array length), and the jquery becomes (for example):

$("." + data[4].id + "").click(function () {
                  functiontwo(myvar);
                });

, making only the last X clickable.

How can I fix this? Thanks a lot!!!

EDIT:

This is my 2nd function:

 function functiontwo(id) {

  $("#dialogdelete").dialog("open");

     $('#submitbutton').click(function () {

        $('#submitbutton').hide();
        $('.loading').show();
                    $.ajax({
        type : 'POST',
        url : 'delete.php',
        dataType : 'json',
        data: {
            id : id
        },
        success : function(data){

            var mess = data;
            $('.loading').hide();
            $('#message').html(mess).fadeIn('fast');


        }
    });

    //cancel the submit button default behaviours
    return false;



        });


    }

In delete.php there's nothing special, I used $_POST['id'].

Step one is use bind, not click, to create the event-listener. — OptimusCrime
– OptimusCrime, Commented Oct 25, 2011 at 18:12
Could you be more specific? I tried $("." + data[id].id + "").bind('click',function() { make_event_handler(myvar)}); but that didn't work either... — binoculars
– binoculars, Commented Oct 25, 2011 at 18:23

OptimusCrime · Accepted Answer · 2011-10-25 18:21:50Z

1

As I pointed out in my comment. The problem is the .click part. Either use bind, or use a class for all the elements, and a click-event like this $('.classnamehere').live('click',function () { // stuff });

answered Oct 25, 2011 at 18:21

OptimusCrime

14.9k13 gold badges63 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

binoculars Over a year ago

I've changed the .click part to $("." + data[i].id + "").live('click',function () {functiontwo(myvar)});. This does make every X clickable, however, the parameter that gets passed to the function (in the case myvar) is always the same: the id of the last user.

OptimusCrime Over a year ago

You need to pass data[i].id as id, not class. And apply the same class for every object. And the live-listner can be created outside the function. See my new answer

BenMorel · Accepted Answer · 2013-12-06 16:27:30Z

1

function functionone() {

    $.ajax({
        type : 'POST',
        url : 'post.php',
        dataType : 'json',
        success : function(data){

            var message = "";
            var i = 0;

            while (i < (data.length - 1))
                            {
                 var myvar = data[i].id;
                 message = message + "<div class=\"clickable\" id=" + data[i].id + "><img src=x.gif></div>" + data[i].name + "<br />";

                 $('#somediv').html(message).fadeIn('fast');
                i++;
            }
        }
    });
}

$('.clickable').live('click',function () {
    alert($(this).attr('id') + ' this is your ID');
});

edited Dec 6, 2013 at 16:27

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Oct 25, 2011 at 18:49

OptimusCrime

14.9k13 gold badges63 silver badges98 bronze badges

4 Comments

binoculars Over a year ago

After a closer look, it appears it's not working as it should be. It's passing the parameter, but it "remembers" it too long:clicking X goes to functiontwo(id) which gives the user a jquerypopup with the message "delete this user?", and a submit button. When you click on the X next to user1,close the dialog(without pushing the submit button),click the X next to user3 and click on submit, not only user3 get's deleted (which is what it needs to do), but user1 gets deleted as well... this is off course not what I'm after... How can I fix this final issue? thx!

OptimusCrime Over a year ago

Well, that depends on how your 2nd function is working. The problem is not what is posted here. Have you checked your code that the IDs are unique?

binoculars Over a year ago

Yes, I'm sure the IDs are unique. I'll edit my first post and put my 2nd function there too.

OptimusCrime Over a year ago

I think your problem is that when you click the box, you don't reset the content of the dialog-box. Use Firebug (and FF), to check when the script (delete.php) is loaded.

hugomg · Accepted Answer · 2011-10-25 18:09:43Z

0

The usual trick is create a separate function to create the event handler. The separate function will receive i as a parameter and the generated event will be able to keep this variable for itself

make_event_handler(name){
    return function(){
        functiontwo(name);
    };
}

...

$("." + data[i].id + "").click( make_event_handler(myvar) );

answered Oct 25, 2011 at 18:09

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

2 Comments

binoculars Over a year ago

Thought this would have done the trick, but apparently, nothing's changed. The last X is clickable, the rest isn't...

hugomg Over a year ago

That should have done the trick. Can you provide a minimal functioning example (perhaps at JSFiddle)

Collectives™ on Stack Overflow

Array and while loop: make unique clickable

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related