I create a button with append
var row = '<tr><td><button class="directly-follow btn" text="Follow">Follow</button></td></tr>';
$('.textWord_about> table > tbody').append(row);
I want to change the button text using jquery, by clicking on the button.
This is what am I doing:
$(document).on('click', '.directly-follow', function() {
event.preventDefault();
var $post = $(this);
if ($post.attr("text") == "Follow") {
$post.text('Unfollow');
//do something
}
else{
$post.text('Follow');
//do something
}
the problem is that the line $post.text('Unfollow') changes the button text but it does not change the defined text in the html tag(text="Follow"). As a result, the functionality does not toggle as I want.(the if is always true!).
How can change the text using jquery?
To change the value of a custom attribute you have to use attr method.
attr method can be used in order to get the attribute value, but also to set the attribute value.
The method gets the value of an attribute for the first element in the set of
matched elements or sets one or more attributes for every matched
element.
$(document).on('click', '.directly-follow', function() {
event.preventDefault();
var $post = $(this);
if ($post.attr("text") == "Follow") {
$post.text('Unfollow');
$post.attr('text','Unfollow');
}
else{
$post.text('Follow');
$post.attr('text','Follow');
}
Use attr instead of text.
http://api.jquery.com/attr/
var row = '<tr><td><button class="directly-follow btn" text="Follow">Follow</button></td></tr>';
$('.textWord_about> table > tbody').append(row);
$(document).on('click', '.directly-follow', function() {
event.preventDefault();
if ($(this).attr("text") == "Follow") {
$(this).text('Unfollow');
$(this).attr('text','Unfollow');
}
else{
$(this).text('Follow');
$(this).attr('text','Follow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textWord_about">
<table>
<tbody>
</tbody>
</table>
</div>
You should use .data() to retreive a custom attribute (which should begin with "data-").
Then, a button has no text()... But has html(), for the text displayed on it.
$(document).on('click', '.directly-follow', function() {
event.preventDefault();
var $post = $(this);
if ($post.data("text") == "Follow") {
$post.html('Unfollow');
$post.data("text","Unfollow");
//do something
}
else{
$post.html('Follow');
$post.data("text","Follow");
//do something
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="directly-follow btn" data-text="Follow">Follow</button>
</td>
</tr>
</table>
I think you want like this :
Fiddle
var row = '<tr><td><button class="directly-follow btn" text="Follow">Follow</button></td></tr>';
$('.textWord_about> table > tbody').append(row);
$(document).on('click', '.directly-follow', function(event) {
event.preventDefault();
var $post = $(this);
console.log($post.attr("text"))
if ($post.attr("text") == "Follow") {
$post.text('Unfollow');
$post.attr("text","Unfollow")
//do something
}
else{
$post.text('Follow');
$post.attr("text","Follow")
//do something
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='textWord_about'>
<table>
<tbody></tbody>
</table>
</div>
<div class='directly-follow'>
</div>
Related
I am trying to make a button which will change text from kilometres to miles upon click. So far after reading other answers this is my code:
$("#change").on('click', function(){
var elem = $(this);
if (elem.value == "Change to miles") {
elem.value = "Change to kilometres";
} else {
elem.value = "Change to miles";
}
However it does not work, the problem seems to be the line "var elem = $(this)".
I also tried with getElementById, with no success. Could anyone help me find the bug?
My HTML code is:
<input type = "button" id = "change" value = 'Change to miles'> </button>
$("#change").on('click', function() {
var elem = $(this);
if (elem.val() == "Change to miles") {
elem.val("Change to kilometres");
} else {
elem.val("Change to miles");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="change" value='Change to miles' />
Close html properly.
Use .val() to set and get data.
You have mixed javascript and jquery. $(this) is jQuery element so you need to use .val() method for getting/setting value. Not .value
If you want to use .value you need to pick the element instance using javascript. something like this :
$("#change").on('click', function() {
var elem = document.getElementById("change");
if (elem.value == "Change to miles") {
elem.value = "Change to kilometres";
} else {
elem.value = "Change to miles";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="change" value='Change to miles'/>
I generally use data attrib to identify the state of the element not the text on it, you can also use it this way :
$("#change").click(function(){
var elem = $(this);
if(elem.data("type") === "km"){
elem.val("Change to kilometers").data("type", "mil");
} else if(elem.data("type") === "mil"){
elem.val("Change to miles").data("type", "km");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type = "button" id = "change" value = 'Change to miles' data-type="km"/>
I need checkboxes + table rows that share attributes to be enabled once the first checkbox has been ticked. (id for the table row + class for checkbox).
This is only half working
My problem is that if you have multiple boxes selected and uncheck just one, all of the checkboxes and table rows lose the disabled attribute.
https://jsfiddle.net/a1p7an7o/
HTML
<tr id="IN-HOUSE">
<input onchange="check();" class="IN-HOUSE" name="bill[]" type="checkbox">
<label for="Bill?">Bill?</label>
</td>
</tr>
Javascript
<script>
function check(){
$('input[name*=bill]').change(function() {
$t = $(this);
var $th = $(this).attr('class');
$c = $("tr[id!='"+$th+"']");
if ($(this).is(':checked')) {
$('input[name*=bill]').each(function() {
if ($(this).attr('class') != $th) {
$(this).not($t).prop('disabled', true);
$c.not($t).addClass( "disable" );
}
});
} else {
$('input[name*=bill]').each(function() {
if ($(this).attr('class') != $th) {
$(this).not($t).prop('disabled', false);
$("tr[id!='"+$th+"']").removeClass("disable");
}
});
}
});
}
</script>
I am trying to delete clicked id to remove input value. For example i have this input <input type='hidden' id='uploadvalues' value="8,9"/> you can see the values 8,9 and the button is <div class="delete" id="9"></div> .
When i click the id="9" then the input value 9 should be remove . After clicked id="9" ==> <input type='hidden' id='uploadvalues' value="8"/>
How can i do that anyone can teach me?
Demo from CodeCanyon
<div class="container">
<div class="area">
<div class="image"><img src="https://s-media-cache-ak0.pinimg.com/736x/05/2f/1b/052f1b3a2361eb4f3c1385c1fd4f75ed.jpg"></div>
<div class="delete" id="8"></div>
</div>
<div class="area">
<div class="image"><img src="http://www.wallpapermade.com/images/wallpapers/originals/tip-and-oh-laugh-together-home-2015-movie-wallpaper-4612.jpg"></div>
<div class="delete" id="9"></div>
</div>
<input type='hidden' id='uploadvalues' value="8,9"/>
</div>
JS
$(document).ready(function(){
$("body").on("click", ".delete", function(){
// Remove clicked id from the input value
});
});
One way on the approach you want is
$("body").on("click", ".delete", function(){
var id = this.id, //extract the id from the clicked element
values = $('#uploadvalues').val().split(','), // get the existing values in the #uploadvalues element
remaining = values.filter(function(val){ // filter out the ones equal to the id of the clicked element
return val !== id;
});
$('#uploadvalues').val(remaining.join()); // update the changed values
});
make it
$(document).ready(function(){
$("body").on("click", ".delete", function(){
var val = $(this).attr("id");
var values = $( "#uploadvalues" ).val().split(",");
var valIndex = values.indexOf(val);
if (valIndex > -1)
{
values.splice(valIndex,1);
}
$( "#uploadvalues" ).val( values.join(",") )
});
});
Try to make use of regular expression at this context,
$(document).ready(function() {
$("body").on("click", ".delete", function(){
var id = this.id;
$("#uploadvalues").val(function(val){
return val.replace(new RegExp(id + "\,|\,"+ id +"$"),"")
});
});
});
when you click the delete button, in the callback function grab the id:
var valueToRemove = this.id;
// now you need to look to see if that value is inside the hidden input
var valueToRemove = this.id;
console.log(valueToRemove);
var values = $("#uploadvalues").val();
if(values.indexOf(valueToRemove) >= 0){
$("#uploadvalues").val(values.replace(valueToRemove,""));
}
also its best practice to cache the dom so you dont have to constantly query it.
Is this what you wanted? and this method does not get rid of the comma within the values.
In the table the first column is editable and after edit it/change it I want to show the alert as Changed. I am calling the check function after 5000ms.
Adding Code Snippet for My code
Something I missed or wrong somewhere. Please Help.
Here is the Code.
var table = $("table tbody");
table.find('tr').each(function (i) {
var $tds = $(this).find('td'),
id = $tds.eq(0).text(),
product = $tds.eq(1).text();
$check = function() {
if(($tds.eq(0).text() != id) && ($tds.eq(1).text() != product)){
alert("Changed");
}
else{
alert("Not changed");
}
}
setInterval(function() { $check(); }, 5000);
alert(id + ":" + product);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td contentEditable>63</td>
<td>Computer</td>
</tr>
</tbody>
</table>
if(($tds.eq(0).text() != id) && ($tds.eq(1).text() != product)){
This only triggers when both fields changed, change it to a "||"
Also check out this: https://developer.mozilla.org/en-US/docs/Web/Events/input for capturing contenteditable changes.
If i have a table:
<table id="myTable">
<tr>
<td>1</td><td>2</td><td>NoMatch</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>Match</td><td>4</td>
</tr>
</table>
I have been trying:
$(document).ready(function () {
$('input#myInput').keyup(function (val) {
// for each third td of each row, if this value does not contain: this.val() then hide it
});
});
Something like this:
var $cells = $('#myTable tr td:nth-child(3)'),
$hidden = $();
$('#myInput').keyup(function () {
var search = this.value;
var $to_hide = $cells.filter(function() {
return $(this).text() !== search;
}).parent();
$hidden.not($to_hide.get()).show();
$hidden = $to_hide.hide();
});
I assumed that when you say contains, you mean that the text has to be equal to the provided input (otherwise NoMatch and Match would not make sense). But if the content of cell just has to contain the search string as substring, you can use .indexOf() [docs].
DEMO
There are other things you have to consider, like what should happen when the search string is empty, but this is for you to play around ;)
Use "this" in your key up event handler to get the value of the input.
$(document).ready(function () {
$('input#myInput').keyup(function () {
//add if statement
alert($(this).val());
});
});
Not quite sure what you are trying to do with the table. There is not enough information.
Try this:
jsfiddle
HTML
<table id="myTable">
<tr>
<td>1</td><td>2</td><td>NoMatch</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>Match</td><td>4</td>
</tr>
</table>
<input id="myInput"/>
Javascript/Jquery
$('#myInput').keyup(function () {
var me = $(this);
var val = me.val();
$("#myTable tr").each(function() {
var tr = $(this);
var td = tr.find("td:eq(2)");
if(td.text().substring(0, val.length) === val) {
tr.show();
} else {
tr.hide();
}
});
});