JQuery UI Dialog with Repeater

JQuery UI Dialog with Repeater

Hi,

I really wanted to get the JQuery UI Dialog working with repeated items so i didnt have to use the ajaxconroltoolkit for a modal popup.

I can get individual examples to work, but when i have multiple popups on the same page i get in to trouble.

I want to have a repeater of records on the page, then use the UI Dialog to edit. so popup the individual edit div and then be able to save the changes.

My problem is trying to popup the correct div.

I created a demo file to show my problem.Test.htm

I thought i would be able to find the "Next" div ie the correct popup for the record choosen and then popup the dialog, but this doesnt seem to want to work.

It seems as soon as a bind a dialog to the div, it cannot be found by traversing.

Has anyone got any ideas on how to get this to work?

Thanks In advance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Test Jquery Dialog</title>
             <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" ></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
     <script type="text/javascript">
  $(document).ready(function() {
         
      $("a.edit").click(function() {
            var entryDialog = $(this).next();
           
            alert(entryDialog.attr('id'));
           
            entryDialog.dialog('open');
       });
      
        $('.editDialog').dialog({
         bgiframe: true,
         height: 300,
         modal: true,
         autoOpen:false,
         title: 'Edit'
      });
      
      $("a.edit2").click(function() {
            $('.editDialog2').dialog('open');
       });
         
         $('.editDialog2').dialog({
         bgiframe: true,
         height: 300,
         modal: true,
         autoOpen:false,
         title: 'Edit'
      });
      
   });
   
     </script>
</head>
<body>
    <div id="test1" style="background-color:Aqua;">
    TEST 1
        <div class="container">
            <a href="#" class="edit">edit 1</a>
            <div class="editDialog" id="editDialog1">
                Hello From Test 1 - Edit 1
            </div>
        </div>
        <div class="container">
            <a href="#" class="edit">edit 2</a>
            <div class="editDialog" id="editDialog2">
                Hello from test 1  edit 2
            </div>
        </div>
    </div>
    <div id="test2" style="background-color:Lime;">
    TEST 2
        <div class="container">
            <a href="#" class="edit2">edit 1</a>
            <div class="editDialog2" id="Div2">
                Hello from test 2 - edit 1
            </div>
        </div>
        <div class="container">
            <a href="#" class="edit2">edit 2</a>
            <div class="editDialog2" id="Div3">
                Hello from test 2 - edit 2
            </div>
        </div>
    </div>
</body>
</html>