Dialog: load() updates all items on document.parent()

Dialog: load() updates all items on document.parent()

Hey, not sure if I should post this to the UI or the general forums, but hopefully someone can help me out.

I have a php form with mutliple dropdown menus referencing other tables such as State, Community, Township, etc.  Also, next to those dropdowns I have a button that when clicked will open a Dialog containing a form to insert a new State, Community, Township, etc. based upon which button was clicked.   Once the Dialog is submitted, it closes and kicks off a load() function to refresh the corresponding dropdown with the new record.

The Problem:

When the Dialog is submitted and the load() is executed, it will successfully refresh the dropdown menu showing the new record added, but it will also refresh every other dropdown on the page as well.  Unfortunately I use a php loop when creating these dropdown menus and therefore they all contain "class='addItem'" which is why the load() function updates all of them.  I have tried setting the class equal to the corresponding dropdown name and updating the load() to dynamically update the corresponding class, but no luck.  I have included a basic example of what I am trying to do below, so does anyone see any problems or know of a better way to pull this off?

Thanks,

Michael Lynch

The Main Insert Form (just an example)

  1. <form method="POST" name="insert">
  2. <?php
  3. foreach ($columns as $value)
  4. {
  5.     if ($value == "State" || $value == "Community" ... etc. )
  6.     {
  7.         $query = "SELECT * FROM $value";
  8.         $result = mysql_query($query, $conn);

  10.         echo "<select name='$value' class='$value'>";

  12.         while ($row = mysql_select_row($result))
  13.         {
  14.             echo "<option value='$row[0]'>$row[1]</option>";
  15.         }
  16.         echo "</select><a href='#' title='$value' class='addNew'>Add New</a>";
  17.     }
  18.     else
  19.     {
  20.         echo "$value: <input type='text' name='$value' />";
  21.     }
  22. }
  23. ?>
  24. <input type="submit" />
  25. </form>

The Javascript:

  1. $(document).ready(function() {
  2. $(".addNew").button().click(function () {
  3.                     var $url = $(this).attr('title');
  4.                    
  5.                     $("#dialog").load('includes/Insert.php?table=' + $url,
  6.                         function(response, status, xhr) {                                  
  7.                             if (status == "error") {
  8.                                 var msg = "Dialog failed to load: ";
  9.                                 $("#error").html(msg + xhr.status + " " + xhr.statusText); }
  10.                             else {
  11.                                 $("#dialog").dialog("open"); }
  12.                             }).dialog({
  13.                                         modal: true,
  14.                                         autoOpen: false,
  15.                                         show: "slide",
  16.                                         title: "Add New " + $url,
  17.                                         buttons: { Cancel: function() { $(this).dialog("close"); }}
  18.                     });
  19.             });
  20. });

Insert.php

  1. <?php
  2. $table = $_GET['table'];
  3. $query = "SHOW COLUMNS FROM $table";
  4. $result = mysql_query($query, $conn);
  5. ?>
  6. <h2>Add New</h2>
  7. <form action="includes/formSubmit.php" method="POST" id="form1">
  8. <?php
  9. while ($row = mysql_select_row($result))
  10. {
  11.     echo "$row[0]: <input type='text' name='$row[0]' />";
  12. }
  13. ?>
  14. <input type="hidden" name="table" value="<?php echo "$table"; ?>" />
  15. <input type="submit" />
  16. </form>
  17. <script type="text/javascript">
  18. <!--
  19. $(function() {
  20.           
  21.     $('#form1').ajaxForm(function() {
  22.         window.parent.$('#dialog').dialog("close");
  23.         window.parent.$(".<?php echo $table; ?>").load('includes/getDropDown.php?table=<?php echo $table; ?>');
  24.     });
  25. });
  26. -->
  27. </script>