CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-dialog
Dejan.S
Dejan.S

Reputation: 19118

find a element in jQuery dialog after it opens

I'm creating a dialog on the fly. What I'm trying to do next is to bind some of the inputs with .datepicker(), but I can't seem to find the inputs at all. What I'm I missing here?

JSFIDDLE

function createDialog(top, dialog_width, data) {
        $('<div></div>')
            .addClass('add-dialog')
            .appendTo('body')
            .dialog({
                title: 'test',
                closeText: '<i class="fa fa-times"></i>',
                close: function () {
                    $(this).remove();
                },
                open: function (event, ui) {
                    //has the full html with the inputs
                    console.log(this);

                    //trying to get them
                    var inputs = $(this).find('input');
                    console.log(inputs.length);

                    //also tried this, no luck
                    //$(this).parent().promise().done(function() {
                    //    var t = $(this).find('input');
                    //});

                },
                modal: true,
                width: dialog_width,
                position: ['center', (top - 12)],
                draggable: false,
                resizable: false
            }).html(data);
    }

Upvotes: 0

Views: 9132

Answers (4)

Alexander
Alexander

Reputation: 1263

You need to save reference to the jquery object after it has been inserted into DOM, then get reference to jquery UI dialog instance. And this instance has many useful properties. Example:

$('form').append($body); // I've appended dialog as last element inside form in my document, $body is markup, received from AJAX

$body.dialog({...}); // I've turned markup into jquery UI dialog

var dialogInstance = $body.dialog('instance'); // I receive reference to jquery UI dialog instance in any place, for instance, button click event

dialogInstance.uiDialogButtonPane.hide(); // I can access button pane in the dialog and many other objects, like caption area, etc.

Upvotes: 0

ramby
ramby

Reputation: 96

try this add html after appendTo()

function createDialog(top, dialog_width, data) {
        $('<div></div>')
            .addClass('add-dialog')
            .html(data)// added html here
            .appendTo('body')
            .dialog({
                title: 'test',
                closeText: '<i class="fa fa-times"></i>',
                close: function () {
                    $(this).remove();
                },
                open: function (event, ui) {
                    //has the full html with the inputs
                    console.log(this);

                    //trying to get them
                    var inputs = $(this).find('input');
                    console.log(inputs.length);

                    //also tried this, no luck
                    //$(this).parent().promise().done(function() {
                    //    var t = $(this).find('input');
                    //});

                },
                modal: true,
                width: dialog_width,
                position: ['center', (top - 12)],
                draggable: false,
                resizable: false
            });
    }

Upvotes: -1

charlietfl
charlietfl

Reputation: 171679

Simply change the initialization order.... add the html, then initialize the dialog

$('<div></div>').html(data).dialog({ /*opts*/})

You are adding the html after the dialog is initialized so the open event has already occurred and there is no element yet to be found

DEMO

Upvotes: 2

CristinaKity
CristinaKity

Reputation: 9

You can asign a class to each element you need, something like:

<input type='text' class='needIt'/>

and then use: 

$(this).find('.needIt')

Upvotes: 0

Related Questions