Jquery dialog not working if there are multiple buttons on the page

Question

there is something weird happening on my webpage.

I want to add a confirmation jquery dialog when I click a button. The problem is....I have that button multiple times on my page, each one having its "id" and is created by php (so there can be 2,3,4,5 buttons on a page).

The button looks like this:

            <a href="#" id="confirm" onclick="addlist(<?php echo $v['id'];?>);return false;"><img src="img/item_add.png" alt="add" width="100" height="46" /></a>

And this is my jquery

  $(document).ready( function(){

$('#dialog').dialog({
    autoOpen: false,
    width: 600,
    buttons: {
        "Ok": function() {
            $(this).dialog("close");
        },
    }
});

$('#confirm').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});

The problem is that, my jquery code is working just fine, but only for the first button, the second, third...etc not

you have here my example: http://jsfiddle.net/S4vSU/1/

I want to have that dialog working for every button. Where is the problem ?

Thank you in advance !

Saurabh Bayani · Accepted Answer · 2012-05-21 11:31:06Z

5

"id" of particular element must be unique on whole page....
if not then only one(first) element will be treated....

solution: give some class to all buttons and instead of id process by class name

e.g:

<a class="temp" href="#" id="confirm" onclick="addlist(<?php echo $v['id'];?>);return false;">
    <img src="img/item_add.png" alt="add" width="100" height="46" />
</a>

and other code will be

$(document).ready( function(){

$('#dialog').dialog({
    autoOpen: false,
    width: 600,
    buttons: {
        "Ok": function() {
            $(this).dialog("close");
        },
    }
});

$('.temp').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});

edited May 21, 2012 at 11:31

answered May 21, 2012 at 11:25

Saurabh Bayani

3,5802 gold badges27 silver badges44 bronze badges

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

1 Comment

demlasjr Over a year ago

Thanks ! Working as charm. Point for you, but to be fair, I will accept as answer the one who posted the solution first :)

Sudhir Bastakoti · Accepted Answer · 2012-05-21 11:23:32Z

1

Either use class or use different id's like:

$('#confirm1, #confirm2').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});

OR using class: jsFiddle

answered May 21, 2012 at 11:23

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

1 Comment

demlasjr Over a year ago

Thanks ! Working as charm. You was the first one with the class idea, so you're the winner. Thank you so much !

Elen · Accepted Answer · 2012-05-21 11:24:37Z

1

id should be unique for each item.. but you could try to get away using on() although it's not recommended:

http://jsfiddle.net/S4vSU/7/

$(document).on('click','#confirm', function() {
    $('#dialog').dialog('open');
    return false;
    });
});

answered May 21, 2012 at 11:24

Elen

2,3433 gold badges24 silver badges47 bronze badges

1 Comment

demlasjr Over a year ago

Working in your example, but not on my page :| Weird. However, changing the id for the class is much easier and better. Thank you anyway ;) Point for you.

Ankur Verma · Accepted Answer · 2012-05-21 11:27:41Z

1

this is because all your buttons have same id.Id of an element in html should be unique.

You can keep all having same class as I do here

edited May 21, 2012 at 11:27

answered May 21, 2012 at 11:22

Ankur Verma

5,93316 gold badges62 silver badges95 bronze badges

1 Comment

demlasjr Over a year ago

Thanks ! As you said, I could use the class instead the id. Point for you, but to be fair, I will accept as answer the one who posted the solution first :)

BornToDrink · Accepted Answer · 2012-05-21 11:27:56Z

1

You can use class instead of ID for the element and in click function too.

<a class="confirm" href="javascript:;">Confirm 1</a>
<a class="confirm" href="javascript:;">Confirm 2</a>
...
$('.confirm').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});

answered May 21, 2012 at 11:27

BornToDrink

3984 silver badges10 bronze badges

1 Comment

demlasjr Over a year ago

Thanks ! That was the solution :) Point to you !

Collectives™ on Stack Overflow

Jquery dialog not working if there are multiple buttons on the page

5 Answers 5

1 Comment

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related