CODEWITHSUNDEEP
javascriptjquery
Nuñito Calzada
Nuñito Calzada

Reputation: 1718

JQuery Click on Table

I have an application (Spring 4 MVC+Hibernate 4+MySQL+Maven integration example using annotations) , and JQuery, I want to call a function whenever the user clicks on a row using Official jQuery user interface library , but it does not work

<script type="text/javascript">
$('#productResultTable').delegate("tr", "click", function() {
    alert ('productResultTable');
    var id = $(this).attr("id");
    if (id != undefined) {
        document.getElementById('itemId').value=id;         
        showItem (id);
    }           
} );
</script>


  <table cellspacing="0" cellpadding="0" border="0" id="productResultTable" class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th width="10%">
                                                    Licence No.&nbsp;<span class="ui-icon-triangle-1-n"></span>
                                                    <input class="form-control" type="text" />
                                                </th>
                                                <th width="25%">
                                                    Product name&nbsp;<span class="ui-icon-triangle-1-n"></span>
                                                    <input class="form-control" type="text" />
                                                </th>
                                                <th class="notinmobile">
                                                    Category&nbsp;<span class="ui-icon-triangle-1-n"></span>
                                                    <input class="form-control" type="text" />
                                                </th>
                                                <th class="notinmobile">
                                                    Manufacturer&nbsp;<span class="ui-icon-triangle-1-n"></span>
                                                    <input class="form-control" type="text" />
                                                </th>
                                                <th class="notinmobile">
                                                    Country(ies)&nbsp;<span class="ui-icon-triangle-1-n"></span>
                                                    <input class="form-control" type="text" />
                                                </th>
                                                <th class="notinmobile">
                                                    Retailer(s)&nbsp;<span class="ui-icon-triangle-1-n"></span>
                                                    <input class="form-control" type="text" />
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>                                         

                                                <tr id="915447" class="odd">
                                                <td>ES-LR-017-001</td>
                                                <td><img src="images/bedmattress1.jpg"/>3-delt Rejse Helsemadras 60*120, varenummer 691738</td>
                                                <td class="notinmobile">bed mattresses</td>
                                                <td class="notinmobile">Carpenter ApS</td>
                                                <td class="notinmobile">Denmark </td>
                                                <td class="notinmobile">Carpenter aps</td>
                                            </tr>




                                        </tbody>
                                        <tfoot>
                                            <tr style="border-top:1px solid #336699;">
                                                <th>
                                                    License No.
                                                </th>
                                                <th>
                                                    Product name
                                                </th>
                                                <th class="notinmobile">
                                                    Category
                                                </th>
                                                <th class="notinmobile">
                                                    Manufacturer
                                                </th>
                                                <th class="notinmobile">
                                                    Country(ies)
                                                </th>
                                                <th class="notinmobile">
                                                    Retailer(s)
                                                </th>
                                            </tr>
                                        </tfoot>
                                    </table>

Upvotes: 1

Views: 60

Answers (3)

superui
superui

Reputation: 672

You have to change HTML and Script order.

Script code move to bottom of your code.

<table>
  <tr>
    <td>
    ....
    </td>
  </tr>
</table>


  <script>
    $('#productResultTable').delegate("tr", "click", function() {
      alert ('productResultTable');
      var id = $(this).attr("id");
      if (id != undefined) {
        document.getElementById('itemId').value=id;         
        showItem (id);
      }           
    } );
  </script>

or you can use onload event.

window.onload = function() {
  $('#productResultTable').delegate("tr", "click", function() {
  alert ('productResultTable');
  var id = $(this).attr("id");
  if (id != undefined) {
    document.getElementById('itemId').value=id;         
    showItem (id);
  }           
});
}

Upvotes: 1

Farhad Rakib
Farhad Rakib

Reputation: 162

First Rearrange your HTML And JavaScript code block Order.

Place the JavaScript under the html code. Check the jQuery you are using is loaded properly from the browser console. As you are using jQuery then put your Js code into the $(document).ready(function(){}).

Example is given below

<script type="text/javascript">
$(document).ready(function() {
   $('#productResultTable').delegate("tr", "click", function() {
      alert ('productResultTable');
      var id = $(this).attr("id");

      if (id != undefined) {
        document.getElementById('itemId').value=id;         
        showItem (id);
      }           
    });
});
</script>

Upvotes: 0

Hari Prakash
Hari Prakash

Reputation: 31

Make sure the function showItem is available in scope.(you load it properly). Check alert(typeof showItem); before you call, it should alert as 'function', if it alerts as 'undefined' then the function is not available in scope.

Upvotes: 0

Related Questions