How to select an element within a jquery dialog

Question

let me start by qualifying that I am very new to jquery. I've been using it for a month or so now with moderate success. I'm hoping my question is easily answered.

Basically, I have a dialog on a page that contains content that is generated within a DWR Ajax call. What I want to do is define a couple of divs in my content such that when a header div is clicked, the second div tag referenced by the first needs to be hidden / shown via the jquery slideToggle function on the referenced div. Try though I might however, I am unable to get this method to be called.

Here is the javascript method I am calling, please note that for testing purposes I have omitted the dwr ajax call and am manually setting the html in the showdialog method.

The dialog opens fine and displays my content as expected. However clicking the div containing the expansion-header class does not toggle the view of the referenced 'ELEMENT_ONE' div.

Any thoughts or comments would be most appreciated. I am sure I am doing something silly, but for the life of me I can't work it out.

Javascript

function showdialog() { var data = '<DIV class="expansion-header" reference="ELEMENT_ONE">' + '<B>Click to Toggle Element One<B></DIV>' + '<DIV id="ELEMENT_ONE" name="ELEMENT_ONE">' + 'This is element ones text it contains a<BR>few lines of gibberish.<BR><BR>' + 'This is the second paragraph to be hidden when the header is clicked</DIV>'; $("#StatusDialog").html(data); $("#StatusDialog").dialog("open"); } $(document).ready(function() { $(".expansion-header").click(function () { var reference = $(this).attr('reference'); $("#" + reference).slideToggle(400); }); $("body").append('<div id="StatusDialog" title="Dialog Title"></div>'); $("#StatusDialog").dialog({ autoOpen: false, resizable: true, width: 750, modal: false }); });

HTML

<div id="status" class="status" style="cursor: pointer; cursor: hand;" onclick="showdialog()">Click Me</div>

Rick Su · Accepted Answer · 2011-06-03 00:05:13Z

1

You have defined the click event for .expansion-header before it exists!

should attach the click event in showdialog()

or consider binding it using .live()

answered Jun 3, 2011 at 0:05

Rick Su

16.5k3 gold badges35 silver badges51 bronze badges

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

3 Comments

Jason Child Over a year ago

You sir... are a star. I told you it was something silly I was doing! I changed the click code to use the live() function and viola! Thank you so much :)

GregL Over a year ago

@Jason, make sure to accept this answer if it solved the problem.

Jason Child Over a year ago

@GregL, thanks for the tip, new to stack overflow so wasn't sure of the requirements. Have accepted this answer as suggested. Cheers, Jason.

BentOnCoding · Accepted Answer · 2011-06-03 00:04:49Z

I believe that when you display a dialog the html you are seeing is actually part of the page you are viewing. So you should be able to browse elements in the DOM just like any other jquery selector. For example you should be able to say:

$('#ELEMENT_ONE').Html('<p>New Content</p>');

ingo · Accepted Answer · 2011-06-03 00:15:46Z

this here works

$(document).ready(function() {

$(".expansion-header").live( 'click', function () {
var reference = $(this).attr('reference'); $("#" + reference).slideToggle(400); 
});

$('#status').click(function(){

var data = '' + 'Click to Toggle Element One' + '' + 'This is element ones text it contains a
few lines of gibberish.

' + 'This is the second paragraph to be hidden when the header is clicked';
$("#StatusDialog").html(data); $("#StatusDialog").dialog("open"); 
});

$("body").append(''); $("#StatusDialog").dialog({
autoOpen: false,
resizable: true, width: 750, modal: false
});
});

Thank you, as neverever suggested above the .live() method worked a treat. My page is now functioning as I expect. Thanks for your efforts :)

Collectives™ on Stack Overflow

How to select an element within a jquery dialog

3 Answers 3

3 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Related