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>

Answer 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()