I am not sure if this question relates to Javascript or more to Jquery. And it seems really simple but I am stuck.
I am trying to assign a javascript variable to a jquery DataTables function.
[script]
//Not working
var counter = 0;
function testfunction(){
doSomething();
counter++;
}
$(function() {
var newId = "#table" + counter;
$(newId).live('dblclick', function () {
alert("test");
});
});
[/script]
$("#table") refers to a table id in my html. However, this does not work. The below version works instead.
[script]
//Working version
$(function() {
//var newId = "#table1"
$("#table1").live('dblclick', function () {
alert("test");
});
});
[/script]
How can I solve this problem? Thanks.
Its quite difficult to say, but here is my attempt at fixing it, try below
[script]
var counter = 1;
var newId = "#table" + counter;
$(function() {
$(newId).live('dblclick', function () {
alert("test");
});
});
[/script]
If that works then it's because your using variables locally, and 'live' can no longer access the variable. have you tried an alternative function, like $(newId).click().
You never call testfunction to increment the counter variable. Therefore, newId will have the value table0 instead of table1.
Your code should look something like this:
var counter = 0;
function testfunction(){
doSomething();
counter++;
}
$(function() {
testfunction(); //Call testfunction to increment the counter.
var newId = "#table" + counter;
$(newId).live('dblclick', function () {
alert("test");
});
});
Here is a working JsFiddle example.
Related
Will someone please tell me why the first snippet of code doesn't work and the second one does. Is it the issue of variable scoping or any other issue?
jQuery(document).ready(function($) {
var displayNo = $(".ue-show-success").css('display', 'none');
var displayYes = $(".ue-show-error").css('display', 'block');
$(".somebutton").on('click', function() {
displayNo;
displayYes.text('some text');
});
});
The above code doesn't work as expected. But below one does.
jQuery(document).ready(function($) {
$(".somebutton").on('click', function() {
$(".ue-show-success").css('display', 'none');
$(".ue-show-error").css('display', 'block').text('some text');
});
});
Thanks in advance
This statement creates an object:
var displayNo = $(".ue-show-success").css('display', 'none');
It is not a callable function. You'd have to do something like this:
var displayNo = function() {
return $(".ue-show-success").css('display', 'none');
}
You'd then call that function with parentheses, like so:
displayNo();
I defined an array in jQuery from which I want randomly select an item and display it on the website but also give the option to tweet this exact item. Have a look at my code which I defined within the <script> ... </script> element.
$(document).ready(function() {
$("#click").click(function() {
var quotPick = quotes[Math.floor(Math.random()*quotes.length)];
$("#text").text(quotPick);
});
$("#tweet").click(function() {
var quotPick = quotes[Math.floor(Math.random()*quotes.length)];
window.open('https://twitter.com/intent/tweet?hashtags= cali, hank&text=' + quotPick);
});
});
If I write the code like that the quotPick variable will always be differently tweeded than displayed. If I define it outside the $(#click)... or even before the $(document).ready ... I will only be able to click at the button once to generate an item selection.
Where or how do I have to define the quotPick so that my code works? Where was I making wrong assumptions? Thanks in advance, guys!
P.S. I tried the onclick() function for the button as well but didn't find a satisfying solution either.
Could try something like:
$(document).ready(function() {
var quotPick;
$("#click").click(function() {
quotPick = quotes[Math.floor(Math.random()*quotes.length)];
$("#text").text(quotPick);
});
$("#tweet").click(function() {
window.open('https://twitter.com/intent/tweet?hashtags= cali, hank&text=' + quotPick);
});
});
You can try this.
<script>
var quotPick; //Define it in the beginning of script. This will help you in using the same variable globally
<!--Other Code here can also use the same value-->
$(document).ready(function() {
$("#click").click(function() {
quotPick = quotes[Math.floor(Math.random()*quotes.length)];
$("#text").text(quotPick);
});
$("#tweet").click(function() {
window.open('https://twitter.com/intent/tweet?hashtags= cali, hank&text=' + quotPick);
});
});
</script>
This should work for you
let quotes = ["ds","sd"]
let quotPick;
$(document).ready(function() {
$("#click").click(function() {
quotPick = quotes[Math.floor(Math.random()*quotes.length)];
$("#text").text(quotPick);
});
$("#tweet").click(function() {
window.open('https://twitter.com/intent/tweet?hashtags= cali, hank&text=' + quotPick);
});
});
I'm trying to do a simple image swap, but when I add in my code for the swap, it doesn't work! I have a function toggling different classes which are animated using CSS which work fine without the image swap code, but once I add it in all of it breaks!
Could someone troubleshoot my code really quickly? I feel like my JQuery logic is a bit off.
jQuery(document).ready(function () {
var toggle = 0;
var toggleClass = function () {
toggle = !toggle;
$(".two").toggleClass("two-menu", toggle);
$(".four").toggleClass("four-menu", toggle);
$(".images").toggleClass("images-menu", toggle);
$(".home").toggleClass("home-menu", toggle);
$("#bottom-left").toggleClass("bottom-left", !toggle);
$("#bottom-right").toggleClass("bottom-right", !toggle);
$("#margin-zero").toggleClass("margin-zero", !toggle);
$(".left-container").toggleClass("left-container-show", toggle);
$(".right-container").toggleClass("right-container-show", toggle);
}
var imageSwap = function () {
this.src = '/wp-content/uploads/2013/11/Twitter.jpg';
}, function () {
this.src = '/wp-content/uploads/2013/11/Facebook.jpg';
}
jQuery(".home").click(function () {
toggleClass();
});
jQuery(".two").click(function () {
toggleClass();
imageSwap();
});
jQuery(".four").click(function () {
toggleClass();
});
});
I've created two JSFiddles.
1) The first does not work, and includes the imageSwap function. http://jsfiddle.net/MuQ2w/
2) The second does not have the imageSwap, and works perfectly. http://jsfiddle.net/E2Rzv/
The problem you are experiencing is because of the syntax of you jQuery imageSwap function, as you can't write two function seperated with a "comma".
I think a possible solution might be to remove the second function.
Also imageSwap function doesnot know about 'this' as it is out of it's scope. You'll need to pass 'this' as an argument to it.
So the final imageSwap function will look like:
var imageSwap = function ($this) {
$this.src = '/wp-content/uploads/2013/11/Facebook.jpg';
}
And your call to this function would be like:
jQuery(".two").click(function () {
imageSwap(this);
toggleClass();
});
I hope it will help.
P.S. Just to follow the tradition, here is a working fiddle:
jsfiddle.net/gKxLz
did you look in your console for the errors? `
var imageSwap = function () {
this.src = '/wp-content/uploads/2013/11/Twitter.jpg';
}, function () {
this.src = '/wp-content/uploads/2013/11/Facebook.jpg';
}
is not correct syntax: the second function has no variable name
It is hard to figure out what is happening without debugging the code.
I am guessing that perhaps the problem is due to the scope of "this" inside imageSwap function.
Try to pass this (for the handler) to imageSwap function as a parameter, like:
var imageSwap = function ($this) {
$this.src = '/wp-content/uploads/2013/11/Twitter.jpg';
}, function ($this) {
$this.src = '/wp-content/uploads/2013/11/Facebook.jpg';
}
jQuery(".two").click(function () {
toggleClass();
imageSwap(this, this);
});
Hope it will work
hey i have a setInterval function [see below] inside a an each function for all divs with class, my problem is to manage each divs differently
please help
var div_holder = $('div.products_each');
div_holder.each(function(i){
var vari= setInterval(function() {
//do something here
},1000/60)
});
and i could close this by
$(document).on("mouseenter", ".products_each_all",function(){
$(this).children('div._title').css('margin-left',"0px");
clearInterval(vari);
})
this Clear all setInterval call [effects all div action]
My question is how to manage each classes setinterval differently
thanks in advance
use .data() to store the interval reference of each element individually.
var div_holder = $('div.products_each');
div_holder.each(function (i) {
var vari = setInterval(function () {
//do something here
}, 1000 / 60)
$(this).data('vari', vari)
});
$(document).on("mouseenter", ".products_each_all", function () {
$(this).children('div._title').css('margin-left', "0px");
//each products_each element will have a data item called vari which holds the interval reference, you can use it to clear it later
var div_holder = $('div.products_each');
div_holder.each(function (i) {
clearInterval($(this).data('vari'));
});
})
you can achieve it like this:
$.each($(".products_each"), function (index, value) {
var vari = setInterval(function() {
// do what ever you want with value
// it is your div : $(value).hide();
}, 1000/60);
});
I want to call a function with a namespace based on its name.
Perhaps some background: What I want is, dynamically bind pages via $.mobile.loadPage(inStrUrl, { showLoadMsg: false }); and then, based on the current page, invoke a function within a loaded page. For example: each page has a showFilter function, the Event is attached to a main.html - page which should call the matching function in the current page.
I also tried some solutions, with jquery too, but nothing works for me.
This is my function code:
function namespace() { }
namespace.showFilter = function () {
alert("Test");
}
And want to "invoke" or "call" it via its name.
This is what i tried at least.
$(document).ready(function() {
var fn = window["namespace.showFilter"];
fn();
});
I get error TypeError: fn is not a function
Here is a fiddle http://jsfiddle.net/xBCes/1/
You can call it in the following way:
$(document).ready(function() {
window["namespace"]["showFilter"]();
});
or
$(document).ready(function() {
window["namespace"].showFilter();
});
or
$(document).ready(function() {
window.namespace.showFilter();
});
I found that I had to manually set it to window.
window.namespace = function() { }
window.namespace.showFilter = function () {
alert("Test");
};
$(document).ready(function() {
var fn = window["namespace"]["showFilter"];
fn();
});
http://jsfiddle.net/xBCes/4/
Like this:
$(function() {
window.namespace.showFilter();
});
P.S. I shortened the $(document).ready(...)
function namespace() {}
namespace.showFilter = function () {
alert("Test");
}
$(document).ready(function() {
var fn = namespace.showFilter();
fn();
});
http://jsfiddle.net/xBCes/3/