Datepicker issue, trying to submit additional parameter besides date value

Question

I have a table with multiple rows in which one of the row's cell has a jquery datepicker object implemented, I need to submit to my php server class the date value (which I'm already able to) plus the row ID value (which I'm not able to obtain it).

For some reason, the line with: "row_id": $(this).closest('tr').attr(), is returning an undefined value.

This is the jquery script used:

$.editable.addInputType('datepicker', {
         element: function(settings, original) {
            var input = jQuery('<input size=8 />');
            settings.onblur = function(e) {};       
            input.datepicker({
                dateFormat: 'yy-mm-dd',
                onSelect: function(dateText, inst) {
                   $.ajax({
                        type:"POST",
                        url:"editRecordDateSelector.php",
                        data: {"value": dateText, 
                               "row_id": $(this).closest('tr').attr(),
                           },

                    });
                },
                onClose: function(dateText, inst) {
                 $.ajax({
                        type:"POST",
                        url:"editRecordDateSelector.php",
                         data: {"value": dateText, 
                              "row_id": $(this).closest('tr').attr(),
                           },

                    });
                }
            });
            input.datepicker('option', 'showAnim', 'slide');
            jQuery(this).append(input);
            return (input);
        }
    });


    $('.editabledatepicker').editable(function(value, settings) {
        return (value);
    }, {
        type: 'datepicker',
        onblur: 'submit',
        tooltip: "Click to edit...."
    });

This is the HTML code where datepicker class is contained in multiple rows:

<tbody>
    <tr id="1">
      <td id='rowId'>
        1
      </td>
      <td>
        <select name="custdrop" id="custdrop">
          <option value=2>
            Hemo
          </option>
          <option value=5>
            Lexpertise
          </option>
          <option value=7>
            MM
          </option>
          <option value=4>
            Patronato
          </option>
          <option value=6>
            Proovedora
          </option>
          <option value=8>
            RG
          </option>
          <option value=1>
            Rio
          </option>
          <option value=3>
            Servicios
          </option>
        </td>
        <td id='vals'>
          webosadfadsfadfadsf
      </td>
      <td id='vals'>
        yea
      </td>
      <td id ='datepickerval' class="editabledatepicker">
        2013-10-29
      </td>
        <td>
          <input type="checkbox" value ="sachk" id ="sachk">
      </td>
      <td>
        <input type="checkbox" value ="scpchk">
      </td>
      <td>
        <input type="checkbox" value ="mixchk">
      </td>
       <td>
          <input type="checkbox" value ="depsachk">
      </td>
      <td id='vals'>
        gfdgfdgfdgf
      </td>
      <td id='rowId' id = 'lineiteminactive'>
        Closed
      </td>
    </tr>
    <tr id="57">
      <td id='rowId'>
        2
      </td>
      <td>
        <select name="custdrop" id="custdrop">
          <option value=2>
            Hemo
          </option>
          <option value=5>
            Lexpertise
          </option>
          <option value=7>
            MM
          </option>
          <option value=4>
            Patronato
          </option>
          <option value=6>
            Proovedora
          </option>
          <option value=8>
            RG
          </option>
          <option value=1>
            Rio
          </option>
          <option value=3>
            Servicios
          </option>
        </td>
        <td id='vals'>

      </td>
      <td id='vals'>
        wqfasdfasdfo
      </td>
      <td id ='datepickerval' class="editabledatepicker">
        2013-10-10
      </td>
      <td>
          <input type="checkbox" value ="sachk" id ="sachk">
      </td>
      <td>
        <input type="checkbox" value ="scpchk">
      </td>
      <td>
        <input type="checkbox" value ="mixchk">
      </td>
      <td>
          <input type="checkbox" value ="depsachk">
      </td>
      <td>
        <input type="checkbox" value ="depscpchk">
      </td>
      <td id='rowId' id = 'lineitemactive' >
        Active
      </td>
    </tr>
  </tbody>
</table>

Can somebody please help me here? I will appreciate it.

Answer 1

Could it be because your .attr() didn't include which attribute you were looking for? Try

"row_id": $(this).closest('tr').attr('id')