jquery: passing parameter to modal

Question

I have the following in a table, repeated for each row:

<a <?php echo 'id="'.$id.'"'; ?> class="custom-dialog-btn btn btn-small">
   <i class="icon-trash"></i>
</a>

where id is different for each line, because it is taken from a table in database where it is the primary key.

Then, I used th following jQuery code:

$(".custom-dialog-btn").bind("click", function (event) {
                $("#mws-jui-dialog").dialog("option", {
                    modal: false
                }).dialog("open");
                event.preventDefault();
            });

      $("#mws-jui-dialog").dialog({
        autoOpen: false,
        title: "Alert",
        modal: true,
        width: "640",
        buttons: [{
            text: "NO",
        id: "cancel_button",
            click: function () {
                $(this).dialog("close");
            }
        },
     {
        text: "OK",
        id: "confirm_button",
            click: function () {
                myremovefuntion(id); // I need the id
        }}
    ]
    });

that refers to the dialog:

<div id="mws-jui-dialog">
    <div class="mws-dialog-inner">
    <h2>Are you sure you want to delete?</h2>
    </div>
</div>

How can I pass the id to the modal?

Subliminal Hash · Accepted Answer · 2013-07-06T15:12:14.123

3

You can append a data attribute to your dialog div as follows;

$('a').click(function (e) {
    e.preventDefault();
    $("#your_dialog").data('mycustomdata', $(this).prop('id')).dialog('open');
});

And retreive it like this

    $("#your_dialog").dialog({
        autoOpen: false,
        resizable: false,
        height:200,
        modal: true,
        buttons: {
            Cancel: function() {
                $(this).dialog('close');
            },
            'Delete': function() {
                $(this).dialog('close');
                var mydata = $(this).data('mycustomdata'); // = gives you the id of anchor element
// some delete logic
            }
        }
    });

edited Jul 06 '13 at 15:12

answered Jul 06 '13 at 15:06

Subliminal Hash

13,614
20
73
104

Thank you, @Emin. Now it works :) Only one question: I usally use $(this).attr('id'), while you use $(this).prop('id'). Which is the difference? – GVillani82 Jul 06 '13 at 15:14
very good question: see this: http://stackoverflow.com/questions/5874652/prop-vs-attr – Subliminal Hash Jul 06 '13 at 15:14
a summary from one of the answers there: "$.fn.prop() grabs the specified DOM property, while $.fn.attr() grabs the specified HTML attribute" – Subliminal Hash Jul 06 '13 at 15:16
"this" is the DOM element in the handler you're currently on.. $(this) on the other hand is the jQuery wrapped element that gives you access to all of its properties – Subliminal Hash Jul 06 '13 at 15:19
for example, try using this.id in the 'Delete' function and see what happens.. you can always use console.log(this) to see what it refers to.. – Subliminal Hash Jul 06 '13 at 15:20
_console.logging `$(this).prop('id') === this.id`..._ – depoulo Jul 06 '13 at 15:27
@PaoloPriotto here is more information on that: http://jquerybyexample.blogspot.com/2010/08/difference-between-this-and-this-in.html – Subliminal Hash Jul 06 '13 at 15:29
thank you @Emin. I still prefer the "power and beauty" of [VanillaJS](http://vanilla-js.com/) – depoulo Jul 06 '13 at 15:32
I don't remember trying to turn you away from it.. You are free to use whatever you want... E.g. build your own dialog with VanillaJS :) – Subliminal Hash Jul 06 '13 at 15:34

Code Lღver · Answer 2 · 2013-07-06T15:16:21.247

0

Use the following code to get the id:

var id = $(this).prop("id");

And you will get the id of that which element you have clicked.

edited Jul 06 '13 at 15:16

answered Jul 06 '13 at 15:06

Code Lღver

15,573
16
56
75

score 0 · Answer 3 · answered Jul 06 '13 at 15:14

While Emin's answer certainly works, I wonder if this fabuolus jQuery UI library perhaps has a dialogue flavour analogue to JavaScript's native confirm() method? Or perhaps a possibility to pass in callback functions? This would remove the need from the dialogue code containing business logic.

jquery: passing parameter to modal

3 Answers3