CODEWITHSUNDEEP
jqueryjquery-selectors
guyfromfl
guyfromfl

Reputation: 1212

jQuery .next() not working when in table

I have a set of checkboxes that each have a drop down associated with it. When the user clicks the checkbox, the checkbox value and it's drop down is sent to the server.

I originally had each in a ul, but changed it to a table to keep the dropdowns lined up. After I did that, the next function stopped working. The var in the request even disappears. If I hard code a value, it shows back up.

Here is the function:

$(document).delegate('.cbxAmenity', 'click', function() {
    $("#dialogNotify").append(" Saving...").dialog();

    var thisAmenity = (this.id).replace("AmenityList_", "");

    $.ajax({
        url: 'ajax_url.php',
        dataType: 'json',
        data: {
            ResortId: $("#id").val(),
            action: 'save',
            amenity: thisAmenity,
            locality: $(this).next().val() // if i change to 'foo' it works
        },
        success: function() {
            $("#dialogNotify").dialog("close");
            ui.amenityDialog();
        },
        error: function() {
            $("#dialogNotify").html("There was an error saving amenity");
        }
    });

EDIT: Here is the table...its generated by another ajax call:

$("#dialogAmenity").html("<table id='amenityList'><tr><th>Amenity</th><th>Locality</th></tr>");
                for(var index=0; index<amenities.length; index++) {
                    $("#amenityList").append("<tr><td><input type='checkbox' name='AmenityList_"+
                                             amenities[index].AmenitiesID + "' id='AmenityList_"+
                                             amenities[index].AmenitiesID + "' class='cbxAmenity' /> "+
                                             amenities[index].Name +
                                             "</td><td><select id='locality' name='locality'>"+
                                             "<option value='RESORT'>Resort</option>" +
                                             "<option value='NEARBY'>Near by</option>" + 
                                             "</select></td></tr>");

                    if (amenities[index].link == true)
                        $("#AmenityList_"+amenities[index].AmenitiesID).prop('checked', true);

                }
                $("#dialogAmenity").append("</table>");

EDIT AGAIN: Here is the html from Firebug

<table id="amenityList">
  <tbody>
    <tr>
      <th>Amenity</th>
      <th>Locality</th>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_1" id="AmenityList_1" class="cbxAmenity" type="checkbox"> Indoor Pool
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_2" id="AmenityList_2" class="cbxAmenity" type="checkbox"> Fitness Gym
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_3" id="AmenityList_3" class="cbxAmenity" type="checkbox"> Beach Access
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_4" id="AmenityList_4" class="cbxAmenity" type="checkbox"> Laundry Room
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 1169

Answers (2)

fehays
fehays

Reputation: 3167

The element with class cbxAminity is the last element in the <td> tag. Therefore, it does not have a next() element. You need to do

$(this).parent().next().find('select').val();

in order to find the <select> element in the next <td>.

Upvotes: 3

Rob W
Rob W

Reputation: 349262

Your table-creating script contains a flaw. You cannot append closing tags in this way $(...).append("</table>").

  var html = "<table id='amenityList'><tr><th>Amenity</th><th>Locality</th></tr>");
  for(var index=0; index<amenities.length; index++) {
     html += "<tr><td><input type='checkbox' name='AmenityList_"+
             amenities[index].AmenitiesID + "' id='AmenityList_"+
             amenities[index].AmenitiesID + "' class='cbxAmenity'" +

             (amenities[index].link == true ? "checked='checked'" : "") + 

             "/> "+
             amenities[index].Name +
             "</td><td><select id='locality' name='locality'>"+
             "<option value='RESORT'>Resort</option>" +
             "<option value='NEARBY'>Near by</option>" + 
             "</select></td></tr>");

   }
   html += "</table>";
   $("#dialogAmenity").html(html);

Upvotes: 2

Related Questions