Link to home
Start Free TrialLog in
Avatar of capturetheflag
capturetheflag

asked on

JQuery/Datatables

How do you get all of the values from the drop down boxes in a datatable?
Avatar of Meir Rivkin
Meir Rivkin
Flag of Israel image

what drop down boxes?
which datatable?
is that a general question?
Avatar of capturetheflag
capturetheflag

ASKER

Hello sedgwick,

I have a jQuery datatable with drop down boxes for route and sub-route for each record in the datatable.  The route values are approved or not approved.  If approved take sub-route one or two. If route value is not approved take sub-route three or four.
As an example record one could have a route of approved and a sub-route of two and,
record two could have a route of not-approved and sub-route of four.

How do I get(store/retrieve/display) all the values for these two records?

Thanks for your help.
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hello,

Thank you for your help.  Here is the code I am working with.

                <div class="contentBorder">
                  <div>
                    <table id="processEligibilityTable" class="dataDisplayTable">
                      <thead>
                        <tr class="sortable">
                          <th id="Category"     >Category</th>
                          <th id="Eligibility"  >Eligibility</th>
                          <th id="Amount"    >Amount</th>
                          <th id="Elig Date"    >Elig Date</th>
                                                                                                <th id="Route"        >Route</th>
                                                                                                <th id="SubQueue"     >Subqueue</th>
                          <th id="Asst Type"    >Asst Type</th>h
                          <th id="Award Level"  >Award Level</th>h
                          <th id="Schedule Date">Schedule Date</th>
                          <th id="Assistance Id">Astn Id</th>h
                          <th id="Program"      >Program</th>h
                          <th id="Approved"     >Approved</th>h
                          <th id="Workpacket Id">Workpacket Id</th>
                          <th id="Rejection Rsn Tx">Rejection Rsn Tx</th>
                        </tr>
                      </thead>
                      <tbody>
                            <tr>
                <td headers="Category"><a id="worksheetEditViewLinkId" href="">Dental</a></td>
                              <td headers="Eligibility">APVP - Appeal Partial Approval</td>
                              <td headers="Amount">0</td>
                              <td headers="Elig Date">05/29/2013</td>
                              <td header="Route">
                                <select id="routeSel">
                                  <option value="1">Approval</option>
                                  <option value="2">Ineligible</option>
                                </select>
                              </td>
                              <td header="Subqueue">
                                <select id="subqueueSel">
                                  <option value="1">Approval</option>
                                  <option value="2">Ineligible</option>
                                  <option value="3">Supervisor - Resolution</option>
                                </select>
                              </td>
                              <td headers="Asst Type">Initial</td>
                              <td headers="Award Level">First</td>
                              <td headers="Schedule Date">&nbsp;</td>
                              <td headers="Assistance Id">5</td>
                              <td headers="Program">      OTH</td>
                              <td headers="Approved">     &nbsp;</td>
                              <td headers="Workpacket Id">4</td>
                            </tr>
                            <tr>
                              <td headers="Category"><a id="worksheetEditViewLinkId" href="">Expedited Assistance Category C</a></td>
                              <td headers="Eligibility">EA- Expedited Assistance Category C</td>
                              <td headers="Amount">$2,631.00</td>
                              <td headers="Elig Date">07/06/2011</td>
                              <td header="Route">
                                <select id="routeSel">
                                  <option value="1">Approval</option>
                                  <option value="2">Ineligible</option>
                                </select>
                              </td>
                              <td header="Subqueue">
                                <select id="subqueueSel">
                                  <option value="1">Approval</option>
                                  <option value="2">Ineligible</option>
                                  <option value="3">Supervisor - Resolution</option>
                                </select>
                              </td>
                              <td headers="Asst Type">Initial</td>
                              <td headers="Award Level">First</td>
                              <td headers="Schedule Date">03/13/2013</td>
                              <td headers="Assistance Id">3</td>
                              <td headers="Program">      HA</td>
                              <td headers="Approved">     Y</td>
                            </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

SCRIPT>>>
  var processEligibilityDataTable;

$(document).ready(function()
{
                processEligibilityDataTable = $('#processEligibilityTable').dataTable(
                                                {
                                                                "bAutoWidth"   : false,   // Disable automatic column width calculation
                                                                "bPaginate"                        : false,   // Disable pagination
                                                                "bLengthChange"            : false,   // Disable selecting length of table
                                                                "bInfo"                                 : false,   // Disable table information display
                                                                "bFilter"                               : false,   // Disable the filter search box
                                                                "oLanguage"                      :                                               // Default empty table message
                                                                                {"sEmptyTable": "&nbsp;"},
                                                                "aaSorting"                         : [[1,"desc"], [3,"desc"]], //Default sorting by Elig Start Date, then Check in Date
                                                                "asStripClasses":              ['','blueBG']        // Alternate row highlighting
                                                });
                                                processEligibilityDataTable.fnSetColumnVis( 6, false );
                                                processEligibilityDataTable.fnSetColumnVis( 7, false );
                                                processEligibilityDataTable.fnSetColumnVis( 8, false );
                                                processEligibilityDataTable.fnSetColumnVis( 9, false );
                                                processEligibilityDataTable.fnSetColumnVis(10, false );
                                                processEligibilityDataTable.fnSetColumnVis(11, false );
                                                processEligibilityDataTable.fnSetColumnVis(12, false );
                                                processEligibilityDataTable.fnSetColumnVis(13, false );
});

function checkProcessEligibility() {
                oTableLocal = processEligibilityDataTable;
                var rowsArray = oTableLocal.fnGetNodes();
                for (var i = 0; i < rowsArray.length; i++){
                                var route = oTableLocal.fnGetData(rowsArray[i],4 );
                                var routeSelect = $('select', rowsArray[i]);
                                var test = routeSelect[0].selectedIndex //gets the selected index
                                var name = "";
                                var value = "";
    if (test != 0) {  //has a selection
      // This is where I am lost.   I don't know the syntax for geting these attributes (thanks for your help))
                                  name = routeSelect[0][test].name; // don't know how to get the selectes name
                                  value = routeSelect[0][test].value; // don't know how to get the selectes v  alue
                                }
                                if (route == null || route == "") {
                                                processEligibilityRouteNotSet = true;
                                                return;
                                }
                                summaryElgy += oTableLocal.fnGetData(rowsArray[i],13 ) + (rowsArray.length > 1 ?" ," : "" );
                                elgyList += oTableLocal.fnGetData(rowsArray[i],10 ) + "=" + oTableLocal.fnGetData(rowsArray[i],13 ) + crlf;
                }
}

Open in new window

ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I don’t care about having unique ID on the select boxes in a table, the table is generated using JSP so for all purposes in this example you can remove the id

By selecting input elements in a datatable by ID runs the risk of getting an element from a different row, were a mistake made in the ID assignment, surely there is a more accurate way of getting row input elements.

Thanks for your help.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for your help