The checkbox on my page looks like this:
<td role="gridcell" style="width: 30px; padding:0;text-align: center;" class="ui-selection-column">
<div class="ui-chkbox ui-widget">
<div class="ui-helper-hidden-accessible"><input type="checkbox" name="dataTable_checkbox" aria-checked="false"></div>
<div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon ui-icon ui-c ui-icon-blank"></span></div>
</div>
</td>
It's contained in a tbody and tr data.
I'm trying to select it by using
.click('input[id="ui-chkbox ui-widget", type="checkbox"]')
And I already tried using .waitForElementVisible and still couldn't select it.
Thanks.
Per your code here:
.click('input[id="ui-chkbox ui-widget", type="checkbox"]')
You are mistakenly identifying the classes ui-chkbox ui-widget as an id. Find the specific id on the page for that checkbox, if there is one, and select it using that. IDs on a page are specific to that element.
.click('#youridhere')
Alternatively, use Xpath and select it by its path containing any text.
.click("//*[contains(text(), 'Checkbox text here')]")
You can't select it because you do not have an input field with id as ui-chkbox ui-widget:
As per your code below:
<td role="gridcell" style="width: 30px; padding:0;text-align: center;" class="ui-selection-column">
<div class="ui-chkbox ui-widget">
<div class="ui-helper-hidden-accessible">
<input type="checkbox" name="dataTable_checkbox" aria-checked="false">
</div>
<div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
<span class="ui-chkbox-icon ui-icon ui-c ui-icon-blank"></span>
</div>
</div>
</td>
You should use checkbox name in selector
input:checkbox[name='dataTable_checkbox']
OR
input[type='checkbox'][name='dataTable_checkbox']
OR
input[type='checkbox', name='dataTable_checkbox']
To anyone who's whondering on how to select a checkbox in a table, I found a method that works just fine: When you inspect an element, right click on it > copy > copy selector. Paste it with .click ('yourselectorhere') and it should run just fine. Worked for me.
Related
I have the following jsp
<div class="content" id="divContent">
<ul class="ul-content ui-sortable" id="content" style="padding-left: 10px; max-width: 920px;">
<li class="draggable freetext ui-draggable ui-draggable-handle content-element" style="width:; height:; overflow: auto;">
<div class="element-content">
<div class="questiontitle elementtitle" id="58f95b7f-c127-7e40-a3a7-5253ed32fc31">
<table>
<tbody>
<tr>
<td>
<span class="optional1">(Opcional )</span>
</td>
<td>New Freetext Question</td>
</tr>
</tbody>
</table>
</div>
<input class="freetext" type="text" readonly="readonly">
<div class="questionhelp">
</div>
</div>
</li>
</ul>
</div>
I want to find the table inside the div
<div class="questiontitle elementtitle" id="58f95b7f-c127-7e40-a3a7-5253ed32fc31">
I wrote the code:
var contentDivTable = $(contentDiv).find('tr');
var numerocontentDivTable = contentDivTable.length;
console.log('additem after addfreetext contenDiv number table ',numerocontentDivTable);
This is the trace in browser's console
additem after addfreetext contenDiv [object HTMLDivElement]
"additem after addfreetext contenDiv "
<div class="questiontitle elementtitle" id="146b750d-18e8-b8a5-a34d-082c9bd04e0d">New Freetext Question</div>
additem after addfreetext contenDiv number table 0
How can I get the element table?
If you want to select the table inside a div
Apply a css class on div like: <div class="content">
Then use $('.content table') to select table which is inside that div
If you want to check whether there is a table or not, you can do:
if($("#divContent").find('table').length) {
// table exists
} else {
// no table found
}
If divContent have single .questiontitle class div, then you can try as below
var tbl= $("#divContent .questiontitle").find('table');
// this will display full table html content
console.log(tbl.html());
Then if you want to loop over table row data try below code
$(tbl).find('tr').each(function(){
var currentRow=$(this);
var col1_value=currentRow.find("td:eq(0)").text();
var col2_value=currentRow.find("td:eq(1)").text();
});
I'm brand new to Javascript, and need some help. I have a table with 4 rows (3 displayed, and 1 display="none"). What I'm trying to do is display the 4th row via clicking on a link. Here's what my HTML looks like:
<table class="lessons">
<tr>
<td class="chapter">01</td>
<td class="title-desc"><h3 class="title">INTRODUCTION TO PROGRAM</h3>
<h3 class="desc">Program description....blah blah blah...</h3>
</tr>
<tr>
<td class="chapter">02</td>
<td class="title-desc"><h3 class="title">PARTNER WITH THE PROGRAM</h3>
<h3 class="desc">Description for chapter 2....blah blah...blah...</h3>
</tr>
<tr>
<td class="chapter">03</td>
<td class="title-desc"><h3 class="title">FOCUS ON THE PROGRAM</h3>
<h3 class="desc">Description for chapter 3...blah blah blah....</h3>
</tr>
<tr class="hiddenRow" style="display:none;">
<td class="chapter">04</td>
<td class="title-desc"><h3 class="title">THIS CHAPTER IS HIDDEN</h3>
<h3 class="desc">Chapter four description....blah blah...</h3>
</tr>
</table>
show hidden
And here's my javascript:
function showRows(){
var thisRow = document.getElementsByClassName('hiddenRow');
thisRow.style.display="";
}
Link to JSFiddle:
https://jsfiddle.net/99600cha/
I've tried doing the javascript function a few different ways with no success. Could someone show me what I'm doing wrong?
What I'm really trying to do is have the first and last rows displayed with the middle rows hidden and expandable, like this:
Chapter 1
(click to see all chapters)
Chapter 10
so if anyone can point me to something similar, please do!
Edit: Here is a link that shows the exact effect I'm trying to accomplish: https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting
if your are using jquery:
function showRows(){
$('.hiddenRow').hide();
}
In var thisRow = document.getElementsByClassName('hiddenRow'); thisRow returns an array of elements that have such class, you have to use thisRow[0] to select a first element.
However, a more elegant and cleaner solution would be making this layout:
<div class="lessons" id="lessons">
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson-hidden">
<div class="chapter">A hidden lesson.</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
</div>
By using this simple CSS rule you will be able to hide all elements by changing a single class:
.lessons .lesson-hidden { display: none; }
.lessons.full .lesson-hidden { display: block; }
To show hidden lessons, use this line:
document.getElementById("lessons").classList.add("full")
To revert, use this line: document.getElementById("lessons").classList.remove("full")
I am trying to add hidden class on two elements.
$("#grid").closest(".ui-jqgrid").addClass("hidden");
$("#grid").closest(".ui-jqgrid").prev("h3").addClass("hidden");
For the following markup,
<div class="col-sm-12">
<h3>Heading 1</h3>
<div class="ui-jqgrid hidden" id="" dir="rtl" style="width: 1035px;">
<div class="jqgrid-overlay ui-overlay" id=""></div>
<div class="loading row" id="" style="display: none;"></div>
<div class="ui-jqgrid-view" role="grid" id="">
<div class="ui-jqgrid-titlebar ui-jqgrid-caption-rtl" style="display: none;">
<a role="link" class="ui-jqgrid-titlebar-close HeaderButton " title="" style="left: 0px;">
<span class="ui-jqgrid-headlink glyphicon glyphicon-circle-arrow-up"></span></a>
<span class="ui-jqgrid-title"></span>
</div>
<div class="ui-jqgrid-bdiv">
<div style="position: relative;">
<div></div>
<table id="grid" class="ui-jqgrid-btable">
</table>
</div>
</div>
</div>
</div>
</div>
Can I do this in one line without finding the closest(".ui-jqgrid") twice? I don't want to add more classes to markup and also I don't want to use a JS variable here. Can anybody with strong selectors suggest a solution?
Just chain the methods. jQuery returns the manipulated object every time you call a method, so you can just call the next method on the returned object.
This is known as chaining
$("#grid").closest(".ui-jqgrid").addClass("hidden").prev("h3").addClass("hidden");
Explanation
$("#grid") // returns #grid
.closest(".ui-jqgrid") // returns .ui-jqgrid
.addClass("hidden") // returns .ui-jqgrid
.prev("h3") // returns the previous h3 element of .ui-jqgrid
.addClass("hidden"); // returns the h3
UPDATE (Chained and no need for new class)
// Select the closest '.ui-jqgrid', find its parent and hide it's direct children ('h3' and '.ui-jqgrid' div)
$('#grid').closest('.ui-jqgrid').parent().children().addClass('hidden');
You can do this:
$("#grid").closest('.col-sm-12').find(".ui-jqgrid, h3").addClass("hidden");
As you have the id of the grid #grid the traverse up at the wrapper element of all then use .find() method which can take multiple comma separated selectors then add the class on the found elements.
As per your comment you can change to this:
$("#grid").closest('[class^="col-sm"]')
I have few td in my code.
The scenario is when I click on a td,the content below the td which is hidden on load needs to be displayed .
I have few events to handle with the elements in the dropdown.
I have used the same structure for all the tds, the problem is when I click on the first td, the dropdown appears and when I click on the second td, the dropdown elements coded in the second td also appears.
My scenario is when I click on any td, the dropdowns present below that td alone should appear and the other dropdown should disappear if they are shown.
My code is as follows:
$("#timeofday p").bind('click',function(event){
$(this).parent().find(" > .dropdown").slideToggle();
$(this).text($(this).text() == 'CLOSE' ? 'AFTERNOON' : 'CLOSE');
});
my html is as follows:
<tr>
<td id="timeofday" class="avbltyltblue">
<p>AFTERNOON</p>
<div id="dropdown" class="dropdown">
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div>
<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>
<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>
<td id="timeofday" class="avbltyltblue">
<p>AFTERNOON</p>
<div id="dropdown" class="dropdown">
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div>
<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>
<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>
</tr>
Well, this seems to work:
$("#timeofday p").click(function(event){
$("#timeofday .dropdown").slideUp();
$("#timeofday p").text($("#timeofday p").text('CLOSE') );
$(this).parent().find(" > .dropdown").slideToggle();
$(this).text($(this).text('AFTERNOON') );
});
Here's an example http://jsfiddle.net/9LkDU/4/
onclick -- hide the element by making its visibility:hidden or display:none with JS..
var div = document.getElementById("idOfYourElementToBeHidden");
div.style.visibility="hidden"; // this preserves the space occupied by the div
div.style.display="none"; // this frees up the space occupied by tat div
how can I use jquery to get the text inside of a td?
I currently have:
<div id="divName">
<table id="tableName">
<tr>
<td id="g${req.Name}</">${req.Name}</td>
<td><input type="button" id="showName_${req.fName} rel="viewName_${allReq.requestId}
value="Show " title="Show customer ${req.fName}"
onclick="buttonToggle(this,'Hide ','Show ','nameDiv_${req.fName}', '${req.fName}')" />
</td>
</tr>
</table>
<div id="nameDiv_${req.fName}" style="display: none">
<p>test</p>
</div>
</div>
I would like to be able to have the title of the show/hide button say Show customer John and when the button is clikced to hide for the title to change to Hide customer John and then when the button is clicked again to go back to the title to say show customer John.
I was able to use something like this for the show/hide button:
$('ShowHide').click(function(){
if ( $('hide').css('display') == 'block' )
$('ShowHide').val("Hide");
else
$('ShowHide').val("Show");
});
but how can I get the name to append to show and hide when the button is toggled?
You can use the text method to get the value of your <td>:
$('#your-td-id').text();
Here's an example of it working.