Question

I have a table where rows are dynamically added.

In one of the cells I would like to toggle between a dropdown and an input box.

The dropdown is a PHP file loaded via AJAX. The issue is the dropdown only renders once.
First time you click the toggle button, the dropdown appears, as it should.
Second click switches it to the input field, as it should.
Third click does nothing, it just stays on the input box and does not toggle back to the dropdown.

If I comment out the AJAX call and put in a simple dropdown, it toggles back and forth just fine. So I believe the issue is with the AJAX portion.

Link to http://jsfiddle.net/6h5BD/1/
NOTE: the AJAX is currently commented out in jsfiddle and replaced with a temp dropdown so you can see what results I am looking for.

The portion of JS in question:

  $('input[name="button"]').toggle(function() {
      $.ajax({
            url: 'http://localhost/brandDropdown.php',
            type:'POST',
            dataType: 'html',
            success: function(output_string){
            $('#brand').html(output_string);
             } 
      }); 
   }, function() {
       $(this).closest('td').prev().html("<input type=\"text\" name=\"itemBrand[]\" id=\"itemBrand\" size=\"10\" placeholder=\"New Brand\" style=\"text-transform: uppercase\"/>");
 });

The PHP:

  $sqlbrand = "SELECT BRD_Name FROM Brands ORDER BY BRD_Name asc";
  $resultbrand = odbc_exec($conn, $sqlbrand);
  ECHO "<select name='itemBrand[]' style='width:120px' size='1'>";
  while ($rowbrand = odbc_fetch_array($resultbrand)) {
      echo "<option value='".$rowbrand['BRD_Name']."'>".$rowbrand['BRD_Name']."</option>";
  }
  echo "</select></td>";

I am very open to handling this in a different manner. I have tried several different approaches, but to no avail.

Thank you in advanced for any assistance with this issue.

Answer 1

I cant completely help you debug if I can’t see the PHP file.

But from the HTML/JS I can see a potential problem. You are selecting $(“#brand”) and changing the html to the output_string. But when you are cloning your rows, you are making multiple divs with id of #brand and ids are supposed to be unique, you should use class instead.

Can you try if this works?

$('input[name="button"]').toggle(function() {
      var $this = $(this);
      $.ajax({
            url: 'http://localhost/brandDropdown.php',
            type:'POST',
            dataType: 'html',
            success: function(output_string){
                 $this.closest('td').prev().html(output_string);
            } 
      }); 
   }, function() {
       $(this).closest('td').prev().html("<input type=\"text\" name=\"itemBrand[]\" id=\"itemBrand\" size=\"10\" placeholder=\"New Brand\" style=\"text-transform: uppercase\"/>");
 });