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
Related
which I use to clear the text. This x box always appear. I want this x box to appear only when input has focus and hide after word. Currently it appears all the time.
<div class="input-group">
<div class="btn-group has-feedback has-clear">
#Html.TextBoxFor(m => m.Amount)
<a id="searchclear3"
class=" a glyphicon glyphicon-remove-circle form-control-
feedback form-control-clear"
style="pointer-events:auto; text-decoration:none;
cursor:pointer;"
onclick="$(this).prev('input').val('');return false;">
</a>
</div>
</div>
You can use some fancy CSS to hide the “searchclear3" element when the text box isn’t focused. The trick is to use the CSS “Adjacent Sibling Selector”, +. (Ref: MDN)
HTML
<div class="input-group">
<div class="btn-group has-feedback has-clear">
<input id="txtInput" type="text"/>
<a id="searchclear3"
class=" a glyphicon glyphicon-remove-circle form-control-
feedback form-control-clear"
style="pointer-events:auto; text-decoration:none;
cursor:pointer;"
onclick="alert('click'); return false;">X
</a>
</div>
</div>
Notice that for convenience, I hard-coded the markup for the text box, put an “X” in the a element and fudged the onclick handler. You’ll have to figure out an appropriate selector for the text box and get rid of the other stuff.
CSS
input#txtInput + a#searchclear3 {
visibility: hidden;
}
input#txtInput:focus + a#searchclear3 {
visibility: visible;
}
Those rules say that an a element with id “searchclear3” that is a sibling of an input whose id is “txtInput” should be visible when the input has focus, and hidden otherwise.
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.
HTML
<form class="data-table">
<div class="row">...</div>
<div class="row">...</div>
<div class="row>
<div class="col-lg-3">...</div>
<div class="col-lg-3">...</div>
<div class="col-lg-3">
<div class="has-box">
<input ...>
<button> ...</button>
<div class="modal">...</div>
<ul class="panel_toolbox">
<li>
<a class="close-link">
<i class="fa fa-close"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</form>
Inside <form>, there are multiple <div class="row">. Except for the first row, all the other rows have <i class="fa fa-close"> inside themselves. The purpose of my code is to allow users to remove a row by clicking 'x' icon. But in order to do that, I first need to know which row the user clicked.
JavaScript
$('.close-link').click(function () {
// if statement makes sure that the user doesn't remove the first row
if ($('form.data-table').children().length > 2) {
var $ROW = $(this).closest('.row');
$ROW.remove();
}
});
The above Javascript code works only for the second row, and from the third row, the remove icon won't work (first row is never to be removed, because it's a title row).
Here's how it looks like.
How can I edit my jQuery code so that I can detect which row the user clicked, and remove only that row?
++ Additional information
There is an "Add" button at the bottom, and new rows are added when I click the button. So, initially there are only two rows, title row and the input row. If I click add button, a new input row is added, and click is not recognized on the newly-added rows
Try this: You can use closest() function to find the parent div and then remove it. Use index to find the position of row so that first row will not be removed. Please check below code.
$(document).ready(function() {
$(document).on("click", ".close-link", function() {
var parent = $(this).closest(".row");
var index = parent.index();
if (index > 0) {
parent.remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="data-table">
<div class="row">...</div>
<div class="row">...</div>
<div class="row">
<div class="col-lg-3">...</div>
<div class="col-lg-3">...</div>
<div class="col-lg-3">
<div class="has-box">
<input value="This is value">
<button>Button</button>
<div class="modal"></div>
<ul class="panel_toolbox">
<li>
<a class="close-link">Close
<i class="fa fa-close"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</form>
Use closest('div.row').
Also change the length to 1
Example:
$('.close-link').click(function() {
// if statement makes sure that the user doesn't remove the first row
if ($('form.data-table').children().length > 1) {
var $ROW = $(this).closest('div.row');
$ROW.remove();
}
});
Update:(As per question update)
Use the following type click event for dynamically added rows also to work.
$("form.data-table").on("click", ".close-link", function() {
// if statement makes sure that the user doesn't remove the first row
if ($('form.data-table').children().length > 1) {
var $ROW = $(this).closest('div.row');
$ROW.remove();
}
});
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();
});
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.