Question

I’m using a jQuery modal dialog box like this:

<div class="dialog-form" id="dialog-form1" title="Edit Invoice">
<form>
.... inputs & selects
</form>
</div>              
<button class="dialog-button">Edit</button>

The function for the button looks like this:

$(".dialog-button").button().click(function() {
alert ($(this).prev("div").attr("id"));
});

All I’m trying to do now is get the ID of the previous div (I changed the button to a class instead of an ID because I’m putting several different popup forms on the same page). So it should return “dialog-form1”. But whatever I try it cannot find the ID of the previous div, it just returns “undefined”…

Any ideas? Thanks for your help!

Answer 1

The jQuery UI Dialog widget changes and moves your div with the form in it to a separate place in the DOM — causing your “prev” logic to not find it.

Here is the HTML that got written to my DOM when I tried your example:

<div class="dialog-form ui-dialog-content ui-widget-content" id="dialog-form1" style="width: auto; min-height: 103.03333330154419px; height: auto;" scrolltop="0" scrollleft="0">
<form>
<!-- .... inputs & selects  -->
</form>
</div> 

To prove it, don’t instantiate the Dialog widget on your “dialog-form1” ID and run your script. It will find it then.

I would try slapping a class on your DIV that you want to find and select by class (instead of using “prev”). Something like this…

<div class="dialog-form" id="dialog-form1" class="my-dialog-i-want" title="Edit Invoice">
<form>
<!-- .... inputs & selects  -->
</form>
</div>              

$(".dialog-button").on("click", function(e) {
  var myDiv = $("div.my-dialog-i-want");
  alert (myDiv.attr("id"));
});

Hope this helped.