jQuery hide box - javascript

The problem is quite simple. When I click on visible image all the boxes which were appeared should dissapear and on active field it should appear. The thing is when I click on the same field twice the box does not dissapear.
I hope my code will explain more what I want to do.
Code:
jquery:
<script type="text/javascript">
$(document).ready(function() {
var img = $('.users_table tr .user_gear').find('img');
//var dropdown = $('.users_table tr .user_gear').next('.user_arrow_box');
if((img).is(':visible') == true){
img.click(function(){
var all = $('.users_table tr .user_gear').find('.user_arrow_box');
var a = $(this).parent().find('.user_arrow_box');
a.toggle(function() {
all.removeClass('active');
a.addClass('active');
}, function() {
a.removeClass('active');
});
return false;
});
}
});
</script>


Try something like this:
img.click(function(){
var all = $('.users_table tr .user_gear').find('.user_arrow_box');
var a = $(this).parent().find('.user_arrow_box');
all.not($(a)).removeClass('active');
a.toggleClass('active');
return false;
});

Related

For Each on click when cloning elements

How to On each click when element is cloned remove and add classes on multiple elements?
$('.cc-form-control-switcher').each(function(){
$(".cc-form-control-switcher .btn-first, .cc-form-control-switcher .btn-second").on("click", function(e) {
e.preventDefault();
var $self = $(this);
var $siblingSelected = $self.parent().find(".btn-switch");
$siblingSelected.removeClass("btn-switch");
$self.addClass("btn-switch");
var hdnField = $self.parent().find("input[type=hidden]");
if (hdnField.length > 0) {
hdnField.val($self.data("value"));
}
});
});
Demo here https://jsfiddle.net/etgf979x/7/
On each click 'btn-switcher' is being activated, which works but when I have cloned element it doesn't... I tried using each on click, but seems like I need advice what else I should use.

Event binding on dynamically created elements?
$(document).on("click", ".cc-form-control-switcher .btn-first, .cc-form-control-switcher .btn-second" ,function(e) {
e.preventDefault();
var $self = $(this);
var $siblingSelected = $self.parent().find(".btn-switch");
$siblingSelected.removeClass("btn-switch");
$self.addClass("btn-switch");
var hdnField = $self.parent().find("input[type=hidden]");
if (hdnField.length > 0) {
hdnField.val($self.data("value"));
}
});

button continually only fire once

If keep clicking the same buttons then only fire once. sample: https://jsfiddle.net/h4wgxofh/, For example, if click1 clicked then 2nd time or more times clicks should stop firing, the same as click2 however, if I click the same button, it always fires. Also I want links only trigger once but becomes available if other buttons being clicked. (considering if more buttons) Thanks
HTML
<div class="wrap">
Click1
Click2
</div>
Script
var clicked = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
clicked = true;
if(clicked = true){
console.log($this.text());
clicked = false;
}
});

I'm probably missing something here, but why not just bind the event to every link in .wrap and unbind it on click like this :
$('.wrap a').on('click', function(){
console.log($(this).text());
$(this).unbind('click');
});
See this fiddle
Edit : after your comment on wanting one link to be rebound after cliking on another, even though it might not be the cleanest solution, this does the job :
var onclick = function(){
var $el = $(this);
console.log($el.text());
$('.wrap a').off('click', onclick);
$('.wrap a').each(function(id, link){
if($el.text() != $(link).text())
$(link).on('click', onclick);
});
}
$('.wrap a').on('click', onclick);
Fiddle again

See the following code
var clicked1 = false;
var clicked2 = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
var clickOrigin = $(this).text();
if(clickOrigin == 'Click1' && clicked1==false){
console.log("Click 1 clicked");
clicked1 = true;
}
if(clickOrigin == 'Click2' && clicked2==false){
console.log("Click 2 clicked");
clicked2 = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
Click1
Click2
</div>
Also you can find the jsFiddle.

You need to Distinguish between two links(i used text here you may put whatever scenario ) see this example it may help:-
var clicked1 = 0;
var clicked2 = 0;
$('.wrap').on('click', 'a', function() {
var $this = $(this);
var $text = $(this).text();
//Click2
if ($text == 'Click1') {
clicked1 += 1;
if (clicked1 == 1) {
console.log($text);
} else {
return;
}
}
//Click2
if ($text == 'Click2') {
clicked2 += 1;
if (clicked2 == 1) {
console.log($text);
} else {
return;
}
}
});
Full Demo

To disable both buttons after first click, try:
var clicked = false;
$('.wrap').on('click', 'a', function(){
let $this = $(this);
if( !clicked ){
console.log($this.text());
clicked = true;
};
});
To disable each button after first click, try:
$('.wrap a').each(function() {
let $this = $(this);
$this.disabled = false;
$this.on('click', function() {
if ( !$this.disabled ) {
console.log($this.text());
$this.disabled = true;
};
});
});

Every time someone clicks one of the buttons, your script is setting clicked from false to true, checking if the value is true, then setting it to false again. You need to format it like this if you only want the buttons to fire once (obviously you'd have to duplicate this specifically for each button with different IDs):
var clicked = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
if(clicked == false){
console.log($this.text());
clicked = true;
}
});

try this ,much simpler and this will be more useful if you have multiple click buttons
if you had implemented some other way ,this will worth a try
<div class="wrap">
Click1
Click2
</div>
$('.wrap').on('click', 'a', function(){
var $this = $(this);
if($this.attr("data-value") == ""){
console.log($this.text());
$this.attr("data-value","clicked")
}
else{
console.log("Already clicked")
}
});
Fiddle

Instead of putting code on click just on first click disable anchor tag this serve the same thing you wants just find below snippet for more information using this we can reduces round trips to the click functions as well
$('.wrap').on('click', 'a', function(){
$(this).addClass("disableClick");
});
.disableClick{
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
Click1
Click2
</div>

I think you can disable anchor link after one click like this
<div class="wrap">
Click1
Click2
</div>
I think you can disable anchor link after one click like this
<div class="wrap">
Click1
Click2
</div>
$(function () {
$('#click1').on("click", function (e) {
$('#click1').on("click", function (e){
e.preventDefault();
e.preventDefault();
});
});
I think its help you.

Just use $(".wrap").one('click', ....
Read the jquery API documentation.

tr won't be appended

I have an empty table which i want to fill with tds when i press a button.I want to create a new tr after every 3 tds.
I have the following code:
var ruler=0;
var start=false;
$(document).ready(function(){
$("button").on("click",function(){
if (start === false){$("table").append("<tr>"); start = true;}
if(ruler === 3){
$("table").append("</tr><tr>");
ruler = 0;
}
$("table tr").append("<td>mama</td>");
ruler++;
});
});
html
<table>
</table>
The problem is that even after changing row it will continue adding tds in the first line.Any ideas?

As Teemu stated you are selecting all <tr>. So I added a :last selector.
var ruler = 0;
var start = false;
$(document).ready(function() {
$("button").on("click", function() {
if (start === false) {
$("table").append("<tr>");
start = true;
}
if (ruler === 3) {
$("table").append("</tr><tr>");
ruler = 0;
}
$("table tr:last").append("<td>mama</td>");
ruler++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Click me</button>
<table></table>

Use table tr:last as a selector to make sure for the application to append the content to the last row.

filter by checkbox value javascript not working

I'm trying to filter my page by a checkbox value. That way whenever the value exist in a specific row it will filter that row. The problem with my code is the if checked isn't even firing. I know this because the console log message test is not showing up. I don't get any syntax errors in the console but its not seeing that the check box has been checked. I'm a noob at JavaScript. When the checkbox is checked shouldn't the following code fire?
var $row = $("#data tr"),
$filter_poweron = $("#poweron");
if($filter_poweron.checked) {
console.log('test');
var filterText_poweron = $filter_poweron.val().toLowerCase();
$row.each(function () {
var $row_d = $(this);
$row_d.toggle($row_d.text().toLowerCase().indexOf(filterText_poweron) > -1);
});
}
<br><input type="checkbox" id="poweron" value="1O">PoweredOn <input type="checkbox" id='poweroff' value="0F"> PoweredOff

$filter_poweron is a jQuery object. jQuery objects don't have the checked property.
You can get the checked property of the DOM element using .prop():
var $row = $("#data tr"),
$filter_poweron = $("#poweron");
if ($filter_poweron.prop('checked')) {
console.log('test');
var filterText_poweron = $filter_poweron.val().toLowerCase();
$row.each(function () {
var $row_d = $(this);
$row_d.toggle($row_d.text().toLowerCase().indexOf(filterText_poweron) > -1);
});
}
There are other ways to see if a checkbox element is checked:
$filter_poweron[0].checked;
$filter_poweron.is(':checked');
$filter_poweron.filter(':checked').length;

if($(filter_poweron).is(':checked') {
console.log('test');
var filterText_poweron = $filter_poweron.val().toLowerCase();
$row.each(function () {
var $row_d = $(this);
$row_d.toggle($row_d.text().toLowerCase().indexOf(filterText_poweron) > -1);
});
}

use the jquery change event and check if its checked or not
$(filter_poweron).change(function() {
if(this.checked) {
//Do stuff
}
});

How to use zIndex on textField, so i can move to other textField when i press next in Titanium?

does anyone know how to do that? i have this code :
var txtOne = Titanium.UI.createTextField({
top:50,
zIndex:1
});
var txtTwo = Titanium.UI.createTextField({
top:100
});
var txtThree = Titanium.UI.createTextField({
top:150,
zIndex:2
});
all i want is to jump from txtOne to txtThree without go to txtTwo..
I try to use zIndex but it not works for me..
any idea?? thanks

you could put them into an array, and assign them event handlers for their return functions like this:
var textFields = [txtOne, txtTwo, txtThree];
for(vat i=0; i < textFields.length; i++)
{
//make the last text field jump to the first one when returning
if(i == textFields.length-1)
{
textFields [i].addEventListener('return', function(e)
{
textFields[0].focus();
});
}
else
{
//jump to the next text fields when returning
textFields [i].addEventListener('return', function(e)
{
textFields[i+1].focus();
});
}
}

Categories

Resources