Question

//Html - page containing link to open dialog

<input type="text" value="something" id="inputbox_id" />
<a href="#" class="opendialog">Open</a>

//Javascript

.opendialog.click function 
{
$('.modaldialog').click(function(event) {
    $('<div id="dialogContainer"> </div>').appendTo('body');

   //ajax call to page.php, if successful then add output of page.php to 
   //dialogContainer div created above
   //page.php has a button and some javascript as below
}


//Html - content of page.php
<input type="button" id="button" value="I am button" />

//Javascript on page.php
// On click "#button" 
// $('#inputbox_id').val("Something New");

but it didn’t work instead I got an error “inputbox_id is not defined” ….

so I changed the code to

$('#input_box_id', 'body').val(); // didn't work

$('body').find('#input_box_id').val("some value"); //Worked

My questions are –

Why did the $(selector, context) selector not work in this case? Is this ok to use select body and then find required element? Would you suggest anything better?

How do I close this dialog after click #button ?

I appreciate your help!

UPDATE

Dialog closing issue is resolved – Just need to call $(“#IdOfDialogContainer”).remove();

Answer 1

$('#input_box_id', 'body').val(); 

This usage is wrong, you have to give DOM element in second argument. Like this:

$('#input_box_id', document.getElementsByTagName('body')).val(); 

The other way is -what you mentioned in your post,

$(body).find('#input_box_id').val(); 

That’s already mentioned in JQuery official webpage:

Internally, selector context is implemented with the .find() method,
*so $(‘span’, this) is equivalent to $(this).find(‘span’).*

Source: http://api.jquery.com/jQuery/

So, you do not need to implement in the first way I said, there will not be performance issue.