Develop Reference

Auto Trigger DivMenu second li element

I am trying using trigger so many time but it won't work. I wish to auto trigger on menu of second li element. Help me out Please.
Here Is My Code Sample:
$("document").ready(function() {
setTimeout(function() {
$("ul.menuH li:nth-child(2) a").trigger('click');
},1000);
});
<div id="divMenu" class="drop">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="65px" valign="top">
<a href="http://domain1.com">
<img src="../Images/home.png" width="63px" height="32px">
</a>
</td>
<td height="36px" width="100%" style="border: 0px; padding: 0px">
<ul class="menuH">
<li id="liCustomerOrders"><a id="RDSub" href="yahoo.com','')">
NEW BOOKING</a>
</li>
<li>MY BOOKINGS</li>
<li>BANK ACCOUNT DETAILS</li>
<li>ORDER CANCELLATION</li>
<li>VALIDITY EXTENSION</li>
<li>
MY ACCOUNT
<ul>
<li>CHANGE PASSWORD</li>
<li>
<a id="lnkLogOut" href="javascript:__doPostBack('ctl00$lnkLogOut','')">LOG OUT</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>

Your code is working. you can also use .click();
http://api.jquery.com/trigger/
To trigger domain3.com create a click function to get the url.
<script>
$("document").ready(function() {
$("ul.menuH li:nth-child(3) a").on( "click", function() {
var href = $(this).attr('href');
location.href= href;
});
setTimeout(function() {
$("ul.menuH li:nth-child(3) a").trigger('click');
},1000);
});
</script>

From jQuery doc:
.trigger(): Execute all handlers and behaviors attached to the matched elements for the given event type
In order to solve your issue you need to change from:
$("ul.menuH li:nth-child(2) a").trigger('click');
to native .click():
$("ul.menuH li:eq(2) a").get(0).click();
setTimeout(function() {
$("ul.menuH li:eq(2) a").get(0).click();
},1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divMenu" class="drop">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="65px" valign="top">
<a href="http://domain1.com">
<img src="../Images/home.png" width="63px" height="32px">
</a>
</td>
<td height="36px" width="100%" style="border: 0px; padding: 0px">
<ul class="menuH">
<li id="liCustomerOrders"><a id="RDSub" href="yahoo.com','')">
NEW BOOKING</a>
</li>
<li>MY BOOKINGS</li>
<li>BANK ACCOUNT DETAILS</li>
<li>ORDER CANCELLATION</li>
<li>VALIDITY EXTENSION</li>
<li>
MY ACCOUNT
<ul>
<li>CHANGE PASSWORD</li>
<li>
<a id="lnkLogOut" href="javascript:__doPostBack('ctl00$lnkLogOut','')">LOG OUT</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>

Td inner elements

I'm very new at jQuery/Javascript.
I'm trying to know if to td element has more than one li element with text..
I have the follow td if has more than one li element with text.
Code sample:
<td class="tdClass"/>
<div id="div1Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
<li id="" class="rtLI rtLast">
<div class="rtMid">
<div>Text2</div>
</div>
</li>
</ul>
</div>
</td>
And the follow if i have only one li element without text:
<td class="tdClass"/>
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"> </div>
</li>
</ul>
</div>
</td>
How i can know at the simple way (jQuery/javascript) if to my td has "inner elements"?
I see thats if has element the first li item have only rtLI rtFirst class and if not rtLI rtFirst reLast but how can i know that from my code?
Thanks

I'm basing this answer on your comment
i want to know if i have only one 'li' with inner div element with empty text.
As the wording of your actual question is less clear.
There appears to be a number of ways to achieve what you're after, they all begin with having a reference to your div element. In jQuery, you select an element by Id using a # selector
var $div = $('#divId');
(Note, as a common convention you can prefix variables which relate to a jQuery object with $ to distinguish them from other variables. Not essential, but a useful convention)
From there, your element with only blank text seems to have both classes rtFirst and rtLast. So you can count the number of children with both of these classes. If that count is equal to 1, then you have that element.
if($divId.find('.rtFirst.rtLast').length === 1){
// you only have the one element with both rtFirst _and_ rtLast
}
Another way would be to count the number of children of the ul within your div
var numberofLis = $divId.children('ul').children().length;
if(numberofLis === 1){
// you only have the one element
}
And there are countless other ways to achieve the same.

Full example code with finding only those tds with more then one li:
//function search for all tds with more then one li element inside
function getAllTdsWithLiMoreThenOne(rootSelector){
return $(rootSelector).find("td").has("li").filter(function(){
return $(this).find("li").length>1;
});
}
//after document is loaded
$(function(){
//here in getAllTdsWithLiMoreThenOne("table") you get list of tds
console.log("Tds with more than one li : "+getAllTdsWithLiMoreThenOne("table").length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="td1" class="tdClass"/>
<div id="div1Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
<li id="" class="rtLI rtLast">
<div class="rtMid">
<div>Text2</div>
</div>
</li>
</ul>
</div>
</td>
<td id="td2">
<div id="div2Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
</ul>
</div>
</td>
</tr>
</table>
Function getAllTdsWithLiMoreThenOne(selector) returns collection of Jquery objects, so You have on plate all tds with more then one li inside.
PS. inserting divs in tables is not good practice.

** Please note that you can not have this <td class="tdClass"/>, it should be <td class="tdClass"> instead, without / in it because this means it's a "self-closing" tag and td tag could not be a self-closing tag, you have </td> to close it.
// loop through the tds with tdClass class
$('#theTable .tdClass').each(function() {
var $this = $(this),
matched = $this.find('.rtMid');
// if we find only one .rtMid in the td..
if (matched.length === 1) {
// and its trimmed text is empty, then we have a match
if (matched.text().trim() === '') {
//match found, your code here
$this.css({'outline': '2px solid red'});
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="theTable">
<tr>
<!-- two divs with text in them, No Match -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClass">
<li id="" class="rtLI rtFirst">
<div class="rtMid">
<div>Text1</div>
</div>
</li>
<li id="" class="rtLI rtLast">
<div class="rtMid">
<div>Text2</div>
</div>
</li>
</ul>
</div>
</td>
<!-- one div with no text in it, MATCH -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"> </div>
</li>
</ul>
</div>
</td>
<!-- two divs without text in them, No Match -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"></div>
</li>
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid"></div>
</li>
</ul>
</div>
</td>
<!-- one div with text in it, No Match -->
<td class="tdClass">
<div id="div1Id" class="div1Class">
<ul class="ulClas">
<li id="" class="rtLI rtFirst rtLast">
<div class="rtMid">abc</div>
</li>
</ul>
</div>
</td>
</tr>
</table>

placing ng-table pagination after <div id="test1">

I have created an angularjs application using ng-table with customized pagination template. The application is working fine but the issue is that I want the pagination to be appeared after a <div id="test1">.
My code is as given below, can anyone please tell me some solution for this
Working JSFiddle
html
<div ng-app="main" ng-controller="DemoCtrl">
<table class="table" ng-table="tableParams" template-pagination="custom/pager" border="1">
<thead>
<tr>
<th sortable="'name'">NUMBER</th>
<th sortable="'age'">STATUS</th>
<th sortable="'role'">LOB</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in $data| filter:searchPolicies">
<td><span ng-bind="user.name"></span>
</td>
<td><span ng-bind="user.age"></span>
</td>
<td><span ng-bind="user.role"></span>
</td>
</tr>
</tbody>
</table>
<div id="test1">some data</div>
<script type="text/ng-template" id="custom/pager">
<div class="ng-cloak ng-table-pager" ng-if="params.data.length">
<div ng-if="params.settings().counts.length"
class="ng-table-counts btn-group pull-right">
<button ng-repeat="count in params.settings().counts" type="button"
ng-class="{'active':params.count()==count}"
ng-click="params.count(count)" class="btn btn-default">
<span ng-bind="count"></span>
</button>
</div>
<ul ng-if="pages.length" class="pagination ng-table-pagination">
<li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
<a ng-switch-when="prev" ng-click="params.page(page.number)" href="">Prev</a>
<a ng-switch-when="first" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="page" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="more" ng-click="params.page(page.number)" href="">…</a>
<a ng-switch-when="last" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next</a>
</li>
</ul>
</div>
</script>
</div>
script
$scope.tableParams = new ngTableParams({
page: 1,
count: 5, // count per page
sorting: {
name: "asc"
}
}, {
counts: [],
getData: function ($defer, params) {
var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
params.total(data.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});

Assuming the div you want between the table and pagination isn't too large, you could just add it to the beginning of the pagination script.
i.e.
<script type="text/ng-template" id="custom/pager">
<div id="test1">some data</div>
<div class="ng-cloak ng-table-pager" ng-if="params.data.length">
<div ng-if="params.settings().counts.length"
class="ng-table-counts btn-group pull-right">
<button ng-repeat="count in params.settings().counts" type="button"
ng-class="{'active':params.count()==count}"
ng-click="params.count(count)" class="btn btn-default">
<span ng-bind="count"></span>
</button>
</div>
<ul ng-if="pages.length" class="pagination ng-table-pagination">
<li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
<a ng-switch-when="prev" ng-click="params.page(page.number)" href="">Prev</a>
<a ng-switch-when="first" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="page" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="more" ng-click="params.page(page.number)" href="">…</a>
<a ng-switch-when="last" ng-click="params.page(page.number)" href="">
<span ng-bind="page.number"></span>
</a>
<a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next</a>
</li>
</ul>
</div>
</script>
Updated JSFiddle

how to display different DIV part on clicking different <li> links in same JSP?

I want to display a different image in JSP on clicking a different links in the same JSP.
Can any one please help me in displaying image with respect to the DIV id.
here are my links bellow
<table class="contentTable" cellspacing=1 cellpadding=0 border=0 >
<tr class="altRow1">
<th class="fieldName" nowrap="nowrap" align="center" colspan="<%=metricCols %>">Business statistics </th>
</tr>
<tr>
<div class="greyBorderBox bottomSpacer10">
<ul class="noBullet" >
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app1(this.id);" id="id_1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app2(this.id);" id="id_2">link2</a></li>
</ul></td></tr>
below are the two DIV parts to be displayed
<tr class="altRow1">
<!-- if link1 is clicked this part should be displayed -->
<%if(bus.exists())){ %>
<div id="id1"> <td class="fieldName" style="vertical-align:top;" id="id1">
<img height="240px" src= "C:\Users\Desktop\graph.GIF" style="align:'center';" ></img>
</td></div>
<!-- if link2 is clicked this part should be displayed -->
<% }else { %>
<div id="id2"><td class="fieldName" style="vertical-align:top;">
<img height="240px" src= "C:\Users\Desktop\Capture.GIF" style="align:'center';" ></img>
</td>
<%
}
</div> </tr>

Put user defined attribute inside link and send only this param as a references like so :
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_1" data-target="id1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#" onClick="show_app(this);" id="id_2" data-target="id2">link2</a></li>
One more thing, id should be unique(remove id="id1" inside img tag), change into this :
<div id="id1" style="display:none">
<td class="fieldName" style="vertical-align:top;" >
<a href="C:\Users\Desktop\graph.GIF" target="_blank"><img height="240px" src= "C:\Users\Desktop\graph.GIF" style="align:'center';" ></img>
</a>
</td>
</div>
For initial state, just hidden those two div using style="display:none", see above code. Same applied for second div.
And JS would be :
<script>
function show_app(e){
var target = $(e).data('target');
$('#'+target).toggle();
// ... another rest of code
}
</script>

In HTML, you can try like this: Demo
Added #id1, #id2 in href of <a> and used those id's for <div>
<ul class="noBullet" >
<li class="nav-off" ><a class="headerNav-myworkspace" href="#id1">link1</a></li>
<li class="nav-off" ><a class="headerNav-myworkspace" href="#id2">link2</a></li>
</ul>
<div id="id1">test 1 </div>
<div id="id2">test 2 </div>

JQuery. Send ajax query for each row in table

I have found many answers about my problem, but problem not resolved
I have table, with data, example:
<table>
<tr>
<td class="editable"> <a id="query" href="#"> Data 1 </a> </td>
<td class="editable"> <a id="text" href="#"> Data 2 </a> </td>
<td class="editable"> <a id="foo" href="#"> Data 3 </a> </td>
<td class="editable"> <a id="bar" href="#"> Data 4 </a> </td>
</tr>
<tr>
<td class="editable"> <a id="query" href="#"> Data 1 </a> </td>
<td class="editable"> <a id="text" href="#"> Data 2 </a> </td>
<td class="editable"> <a id="foo" href="#"> Data 3 </a> </td>
<td class="editable"> <a id="bar" href="#"> Data 4 </a> </td>
</tr>
</table>
I need:
For each row in this table, get values of links with id="query" and id="foo" in current row and send ajax query
I try to do this:
$("#detect_rel").click(function(){
$('tr').each(function() {
// ajax to: ajax.php?query=xxxx&data=&xxxxx
});
});
But i cant get inner text of <a id="query"... and <a id="foo"... both, for current row
I tried something like this:
$('tr').each(function() {
var cols = $('.1, .2', this);
// do something with cols
});
But it doens't help, because i cant (mb not enough js knowledges) get inner text of <a id="query"... and <a id="foo"... both, for current row
Pseudocode:
get row
get value of link in column_one and column_two
send ajax query
get next row
etc
NOTE: <a href... at each cell, needed for 'bootstrap x editable', and cuz of it, i need use id at each link
PROBLEM RESOLVED, thanks guys

In HTML ID's must be unique whereas classes can occur multiple times in the page. To do what you ask, your HTML should look like this:
<table>
<tr>
<td class="editable"> <a class="query" href="#"> Data 1 </a> </td>
<td class="editable"> <a class="text" href="#"> Data 2 </a> </td>
<td class="editable"> <a class="foo" href="#"> Data 3 </a> </td>
<td class="editable"> <a class="bar" href="#"> Data 4 </a> </td>
</tr>
<tr>
<td class="editable"> <a class="query" href="#"> Data 1 </a> </td>
<td class="editable"> <a class="text" href="#"> Data 2 </a> </td>
<td class="editable"> <a class="foo" href="#"> Data 3 </a> </td>
<td class="editable"> <a class="bar" href="#"> Data 4 </a> </td>
</tr>
</table>
And your jQuery code should do something like this:
$('#detect_rel').click(function() {
$('tr').each(function(i, el) {
var query = $(el).children('td').children('.query').text();
var text = $(el).children('td').children('.text').text();
//$.ajax (do your AJAX call here using values of query and text
});
});
I tested this code on JSFiddle just now and it works.
Demo: http://jsfiddle.net/Pt2Vd/