[Fiddle]
In the example, I'm trying to make each pair of buttons toggle the text by matching data attributes. I can change the text from "Add" to "Remove on click. But I can't toggle it back to "Add" on second click. Can anyone tell me what's the problem?
HTML:
<div class="yellow"><button class="my_choice" data-term="A">Remove</button>
<button class="my_choice" data-term="A">Remove</button>
</div>
<div class="black">
<button class="my_choice" data-term="B">Add</button>
<button class="my_choice" data-term="B">Add</button>
</div>
jQuery:
$('.my_choice').click(function(){
var dataterm = $(this).data('term'),
my_choice = $('.my_choice[data-term='+dataterm+']')
if (my_choice.text() == "Remove")
{
my_choice.text("Add")
}
else
{
my_choice.text("Remove")
}
});
Just change the conditional to reference the clicked item, not the all the matching buttons
if (my_choice.text() == "Remove")
to:
if ($(this).text() == "Remove")
FIDDLE
As you have it, you're trying to read the text() from multiple buttons, which is why it's not working. You need to limit the text() to read from just one button.
Edit:
Updated my answer to reference the fiddle.
you are getting text using class selector so its returning text of all elements with class my_choice which is in this case addadd instead of add and for remove case removeremove instead of remove so use $(this).text() to get current clicked one text.
so you have to do like this:
$('.my_choice').click(function(){
var text= $(this).text();
var dataterm = $(this).data('term'),
my_choice = $('.my_choice[data-term='+dataterm+']')
console.log(my_choice.text())
if (text == "Remove")
{
my_choice.text("Add")
}
else
{
my_choice.text("Remove")
}
});
FIDDLE DEMO
Demo
As i earlier pointed out your code always entered else case
$('.my_choice').click(function(){
var dataterm = $(this).data('term'),
if ($(this).text() === "Remove")//change only applied in your code and added some semi colon
{
my_choice.text("Add");
}
else
{
my_choice.text("Remove");
}
});
Related
I am creating a calendar event app where you can save people's birthday dates and edit people's names or dates whenever you want.
To display stored events I am using a forEach loop in JSP. I have a span named ld-option-okay-edit in each div. You can edit previous data after you click on that span and save your data.
But before clicking on the save button I am checking whether any field in a particular div is empty or not, using a jQuery hover function.
If any field is empty then I am disabling the span element so that it can't forward request to the servlet, but the problem is I am not able to disable it.
??????
THE PROBLEM
???????
My question is how can I disable a span through jQuery, or how can I prevent the onclick event of a span using jQuery?
Here is my code:
<c:forEach items="${relativeUser}" var="user">
<div class="elementsdiv">
<form action="<c:url value=" ******">" method="post">
<div class="cld-option-okay" >
<span class="glyphicon glyphicon-ok cld-option-okay-edit" name="cld-option-okay-edit" ></span>
</div>
<div class="cld-option-name" >
<input class="cld-name-input" value="${user.name}" placeholder="Name of the person" type="text" name="name">
</div>
</form>
</div>
</c:forEach>
What I have tried until now in jQuery is:
$(".elementsdiv").each(function (i, data) {
$($(data).find('.cld-option-okay')).hover(function (e) {
e.preventDefault();
if ($($(data).find('input[name="name"]')).val() === "") {
$($(data).find('span[name="cld-option-okay-edit"]')).addClass('disabled');//in this line i am getting trouble
}
}
});
For that line I even tried:
1)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","true");//with single quote also
2)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","disabled");//with single quote also
3).prop("disabled", true );
4).attr('disabled', '');
5).attr("disabled", "disabled");
6).off( "click", "**" );
7).unbind( "click", handler );
but when I apply:
`$($(data).find('span[name="cld-option-okay-edit"]')).hide()`;//it is applying
**********************
`$($(data).find('span[name="cld-option-okay-edit"]'))`till here code is working fine my problem is in applying disable.
previously i applied disable like below
$('.cld-option-okay-edit').addClass('disabled');
but it disables okay span in all divs
*************************
For enable or disable a span, you could do it like this:
var isEmpty = false;
$('#myDiv > input').keyup(function(){
isEmpty = false;
$('#myDiv > input').each(function(i,obj){
if(this.value == ""){
isEmpty = true;
return false;
}
});
// Styles for the span.
if( ! isEmpty){
$('#myDiv > span').removeClass('disabled');
} else {
$('#myDiv > span').addClass('disabled');
}
});
$('#myDiv > span').click(function(){
if(isEmpty){
alert("disabled");
} else {
alert("enabled");
}
});
I think this is what your code should look like based on what you have written, but I am not sure it is actually what you want to happen. If you want to disable it, you need to use prop()
$(".elementsdiv").each(function() {
var elem = $(this);
elem.find('.cld-option-okay').hover(function(e) {
if (elem.find('input[name="name"]').val() === "") {
elem.find('span[name="cld-option-okay-edit"]').addClass('disabled'); /*.prop("disabled",true); */
}
});
});
I'm struggling with a jQuery selection: I have a table that contains these columns (more or less)
Name (input field)
Surname (input field)
Note (textarea)
Button (a button to submit the relative note)
I would like to hide all buttons whose textarea is empty (to avoid the submission). This is the table:
The DOM structure of the single row is quite simple (I think):
So, I would like to select something like "all buttons contained in a td that is a brother of a td that cointains an empty textarea"...anf anf...can I do that with a single jQuery selection or not? Thank you in advance.
Of course!
$("tr td textarea").each(function() {
if (this.value == "") {
$(this).closest("td").next("td").find("button").prop("disabled", true);
}
});
You could hide buttons onLoad with the next selector:
$('textarea:empty').parent().next('td').find('button').hide();
Or if you want to disable the buttons:
$('textarea:empty').parent().next('td').find('button').prop("disabled", true);
It would be useful to check if user has type something in the textarea while on the page, and enable or not the button:
$( $('textarea') ).blur(function() {
var button = $(this).parent().next('td').find('button');
if($(this).val() === ''){
button.prop("disabled", true);
}else{
button.prop("disabled", false);
}
});
You can check this fiddle with your table included:
http://jsfiddle.net/6B9XA/4/
try this
$('table textarea').change(function()
{
var thisval=$.trim($(this).html())
if(thisval=='')
{
$(this).parent().next().children('button').attr('disabled')
}
})
I think you should use it this way:
$("#yourtableid").find("textarea").each(function() {
if (this.value == "") {
$(this).closest("tr").find("button").prop("disabled", true);
}
});
"#yourtableid" this should be changed to your table id.
Selectors optimization for performance boost.
You can use filter() to get only the buttons who contains an empty textarea within that row
$('tr button').filter(function(){ // get all buttons
return $(this).closest('tr').find('textarea').val() == ''; // only return those that are empty
}).prop('disabled',true); // disable the buttons
What I'm trying to do! Rank your top 10 movies in order from 1-10.
When a link is clicked it should add the text value to the input and a button that removes the value. The process should be repeated until all inputs have a value.
My horrible code!
When I click a link, it adds the value to all inputs. How do I click a link add the value to input1, click another link add the value to input2, etc.
HTML
<div class="movies">
Titanic
Rainman
Forrest Gump
</div>
<ol>
<li>
<input type="text">
<button class="remove">X</button>
</li>
<li>
<input type="text">
<button class="remove">X</button>
</li>
<li>
<input type="text">
<button class="remove">X</button>
</li>
</ol>
jQuery
$('.movies a').click(function() {
var value = $(this).text();
var input = $('input')
input.val(value);
$('button').show();
});
$('button').click(function() {
$('input').val("");
$(this).hide();
});
See Demo on Fiddle
You can use .filter() to select the next input with no current value.
$('.movies a').click(function() {
var value = $(this).text();
var input = $('input').filter(function () {
return this.value === ''
}).eq(0);
input.val(value);
input.next().show();
});
Here is a demo: http://jsfiddle.net/yp2ee/3/
The above code will only select input elements where the value is blank and then it only selects the first one returned by the .filter() function. This way you only change the value of a single input and only the first blank one.
I also updated the show/hide code for the buttons by showing and hiding the element relatively to the input element or button element clicked:
input.next().show();
UPDATE
You can use .data() to store the state of the links so you can only add a movie once:
$('.movies a').data('clicked', false).click(function() {
if ($(this).data('clicked') === false) {
$(this).data('clicked', true);
...
}
});
Then in your "X" button click event handler you can change the data regarding that value before removing the value:
$('button').click(function() {
var val = $(this).prev().val();
$('.movies a').filter(function () {
return $(this).text() === val
}).data('clicked', false);
$(this).prev().val("");
$(this).hide();
});
Here is a demo of my update: http://jsfiddle.net/yp2ee/7/
Another way: not upto standards, but readable
Modified the HTML a bit by adding classes and ids
http://jsfiddle.net/yp2ee/5/
$('.movies a').click(function() {
var value = $(this).text();
var id = $(this).attr('id');
$('.'+id).val(value).show();
$('.'+id).next('button').show();
});
$('button').click(function() {
$(this).prev('input').val("");
$(this).hide();
});
You are simply selecting the elements with its tag name. It will return collection of elements. So we don't need that. Right.? so what should we do is we have to filter the required element by using .filter() function by supplying the necessary condition[empty] to it.
Ok now we are having chances to get more than one empty text boxes, so in that situation we have to use .first() to select the first element from that collection.
Try,
$('.movies a').click(function() {
var value = $(this).text();
var input = $('input')
.filter(function(){ return $.trim($(this).val()) == ""; })
.first();
input.val(value);
input.next('button').show();
});
$('button').click(function() {
$(this).prev('input').val("");
$(this).hide();
});
The above explanations would have given a minimum understanding about the mechanism. Ok now come to the point .next() and .prev(). Again you are selecting those buttons using the tag name. So actually what we need at this situation is to select the button next to the input box and vice versa. So we could use that both to accomplish what we needed.
DEMO
I have an HTML button created and I want to toggle the text that is displayed in the button between two text using Javascript/JQuery. How do I do this?
Currently, I have:
<button onclick="showAll();" class="collapse-classes">
<span class="button-text">Show</span>
</button>
The button starts off by displaying "Show" and then switch to "Hide" when clicked and then switch to "Show" when clicked again and onward. I tried changing the value of the tag but it doesn't change the text displayed. Can anyone help with the script? thanks
Don't use onclick. Just bind an event handler.
Here's something you can work with:
$('.collapse-classes').click(function() {
var $this = $(this);
$this.toggleClass('show');
if ($this.hasClass('show')) {
$this.text('Show');
} else {
$this.text('Hide');
}
});
Following your DOM tree
$('.collapse-classes').click(function() {
var span = $(this).find('span');
if(span.text() == "Show"){
span.text("Hide");
} else {
span.text("Show");
}
});
Dynamically created form contains input elements. First elements may be disabled or readonly.
I tired code below to set focus to first elemnt which accepts data to enable fast data enttry form keyboard.
However if form fist element is disable or readonly, focus is not set.
How to set focus to first element which accepts data ?
<form style='margin: 30px' id="Form" class='form-fields' method='post' target='_blank'
action='Report/Render'>
...
<input id='_submit' type='submit' value='Show report' class='button blue bigrounded' />
</form>
<script type="text/javascript">
$(function () {
var elements = $('#Form').find(':text,:radio,:checkbox,select,textarea');
elements[0].focus();
elements[0].select();
});
</script>
Update
There are also hidden input fields, sorry. Answers provided set focus to hidden element. Answr containing function does not find any element.ˇ
Here is the update testcase:
$(function () {
$("#form :input:not([readonly='readonly']):not([disabled='disabled'])").first()
.focus();
});
How to set focus to vist visible, enabled and not readonly element ?
Update 3
I tried Row W code where input element was added.
Now it sets focus to second element. Testcase is shown at Revision 5 of Rob W's answer
Use the following code:
var elements = $('#Form').find(':text,:radio,:checkbox,select,textarea').filter(function(){
return !this.readOnly &&
!this.disabled &&
$(this).parentsUntil('form', 'div').css('display') != "none";
});
elements.focus().select();
If you only want to select the first element, the following code is more efficient:
$('#Form').find(':text,:radio,:checkbox,select,textarea').each(function(){
if(!this.readOnly && !this.disabled &&
$(this).parentsUntil('form', 'div').css('display') != "none") {
this.focus(); //Dom method
this.select(); //Dom method
return false;
}
});
Update: if you want to have the elements in the same order, use:
var elements = $("#form").find("*").filter(function(){
if(/^select|textarea|input$/i.test(this.tagName)) { //not-null
//Optionally, filter the same elements as above
if(/^input$/i.test(this.tagName) && !/^checkbox|radio|text$/i.test(this.type)){
// Not the right input element
return false;
}
return !this.readOnly &&
!this.disabled &&
$(this).parentsUntil('form', 'div').css('display') != "none";
}
return false;
});
Use jQuery's :not() selector:
$("#myForm :input:not([readonly='readonly']):not([disabled='disabled']):reallyvisible").first()
.focus();
Here's a working fiddle.
EDIT:
To meet the new requirement you posted in the comments, you'll have to extend the :visible selector to check for parent visibility (untested):
jQuery.extend(
jQuery.expr[ ":" ],
{ reallyvisible : function (a) { return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); }}
);