CODEWITHSUNDEEP
javascriptjquery
vjk
vjk

Reputation: 2283

how to get the element Id from which jquery dialog is called

I am using jquery dialog for opening popup windows on button clicks. 

    <script>
        $(document).ready(function(){
            $("#dialog-form").dialog({
                autoOpen : false,
                height : 300,
                width : 350,
                modal : true,
                buttons : {
                    "Add" : function() {

                        $(this).dialog("close");
                    },
                    Cancel : function() {
                        $(this).dialog("close");
                    }
                },
                close : function() {
                    //if button1 is clicked 
                    alert("hello");
                   //if button2 is clicked
                   alert("bye");
                }
            });

        });
        function openWindow(){
            $("#dialog-form").dialog("open");
            }

    </script>
<button id="nameButton" onclick="openWindow()">click</button>
<button id="titleButton" onclick="openWindow()">click</button>

how to get the id of the button in the close method in jquery dialog?

Upvotes: 0

Views: 4024

Answers (2)

Kevin B
Kevin B

Reputation: 95022

If you're going to use onclick attributes, you need to pass some information in to the function so that you can access the element that triggered the event.

<button id="nameButton" onclick="openWindow(this)">click</button>
<button id="titleButton" onclick="openWindow(this)">click</button>

function openWindow(button){
    alert(button.id);
    $("#dialog-form").dialog("open");
}

Though, it would be "better" if you instead gave the buttons a class and bound the event with jQuery.

<button class="open-window" id="nameButton">click</button>
<button class="open-window" id="titleButton">click</button>

$(document).ready(function(){
    //... your existing code ...
    $(".open-window").click(function(){
        alert(this.id)
        $("#dialog-form").dialog("open");
    });
});

Next, regardless of which of the two methods you used, you would need to store that data on the dialog.

$("#dialog-form").dialog("open").data("opener",this.id);

now you can access it with

$("#dialog-form").data("opener")

Upvotes: 1

Chen Reuven
Chen Reuven

Reputation: 79

or u can use the on or bind or click event like:

$(#nameButton).bind('click', function(event){});
$(#nameButton).on('click', function(event){});
$(#nameButton).click(function(event){});

on event parameters u get all information that u need...

Upvotes: 0

Related Questions