I would like to use single a href link to call different functions .
On first click it should call first_function() and on second click it should call second_function. Like toggling between two functions using same link. Suggest the best way to be done.
Jquery Code :
$(function() {
var IntervalId;
function first_function() {
//code goes here
};
function second_function(){
//code goes here
}
$("#link2").click((function(){
second_function();
}));
$("#link1").click((function(){
first_function();
}));
});
Html Code :
Call function2
Call function1
"Like toggling between two functions using same link."
$("#link1").toggle(
function first_function() {
// Code goes here
},
function second_function(){
// Code goes here
}
);
From the jQuery docs on toggle(fn1, fn2, [fn3, [fn4, [...]]]):
Toggle among two or more function calls every other click.
Javascript:
$(document).ready(function() {
function first_function() {
// Code goes here
};
function second_function(){
// Code goes here
}
$("#link").toggle(first_function, second_function);
});
HTML:
<!-- I'm pretty sure that <a> isn't the right tag for this. -->
<button id="link">Toggle between the two functions.</button>
the easiest way would be
var performFirstAction = true;
$(function() {
function first_function() {
// Code goes here
}
function second_function(){
// Code goes here
}
$("#link1").click(function(){
if(performFirstAction) {
first_function(); performFirstAction = false; }
else {
second_function(); performFirstAction = true; }
});
});
or using toggle as Tomalak mention and well,
$(function() {
function first_function() {
// Code goes here
}
function second_function(){
// Code goes here
}
$("#link1").toggle(
first_function,
second_function
);
});
Related
$(this).click(function() {
clicked($(this));
});
How do I minimize this code to one line?
Tried this - doesn't work:
$(this).click(clicked(this));
It will be used then like this:
function clicked(element) {
element.css('...');
// some other code
}
You can pass the clicked function directly:
$(this).click(clicked);
but you'll need to change your clicked function to wrap the element.
function clicked() {
$(this).do("whatever")
}
Regarding your updated question, you can have clicked return a function if you want.
function clicked(element) {
return function() {
element.css('...');
// some other code
}
}
So then you can do this:
$(this).click(clicked($(this)));
But I'd personally change your clicked function to work like the first version.
I have a block of code like so:
function doSomething() {
someVar.on("event_name", function() {
$('#elementId').click(function(e) {
doSomething();
});
});
}
// and on document ready
$(function () {
$('#anotherElemId').click(function () {
doSomething();
});
});
The problem that I'm encountering is that when I call doSomething() from anotherElemId click event(that is binded on document ready) it works as expected, but calling it recursively from elementId click doesn't work.
Any ideas? Thinking is something trivial that I'm missing.
Is someVar an actual jQuery reference to a dom element? (e.g. $('#someitem'))
The second problem is you cant put a .click event inside a function that you would like to instantiate later on. If you are trying to only allow #elementId to have a click event AFTER some previous event, try testing if a tester variable is true:
var activated = false;
$(function () {
$('#anotherElemId').click(function () {
activated = true;
});
$('#secondElemId').on("event_name", function() {
if (activated) {
// code that happens only after #anotherElemId was clicked.
}
});
});
I have 2 functions. First contains Jquery-UI dialog and called from the Second function. Something like :
function First() {
$('div').dialog({
buttons: {
"Ok": function () { /* code */
}
}
});
}
function Second() {
First();
/* rest of this function code is depend upon the "Ok button"
function code */
}
Now my problem is that after calling function First the execution of script doesn't wait for dialog's Ok button press. Whats should i do, so that only after pressing the Ok button, the control return from the function First?
Move from the function Second the part after calling First into a 2nd function (here called SecondOkHandler). Call First with a new parameter (this callback function) and in the function First on 'ok' call this:
function First(okCallback) {
$('div').dialog({
buttons : {
"Ok" : okCallback
}
});
}
function Second () {
First(SecondOkHandler);
}
function SecondOkHandler() {
/* rest of this function code is depend upon the "Ok button" function code */
}
Also see this example.
=== UPDATE ===
To make it more complex, here a link to an example with more callbacks.
This is because you have given a parenthesis First() this will make a call to that function as soon as the parser encounter that line.
You can make use of the one of the 2 Javascript methods of calling the function apply or call. By using this your function will not execute as soon it is encounter.
Check out this reference http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx
Try using this and let me know if it is not working.
function First(waitTillOk) {
$('div').dialog({
buttons: {
"Ok": function () {
/* code */
if(typeof waitTillOk == "function"){
waitTillOk();
}
}
}
});
}
function Second() {
var waitTillOk = function(){
/* rest of this function code is depend upon the "Ok button"
function code */
}
First(waitTilOk);
}
I have some code in the - $(document).ready(function(){ - that shuffles stuff around, the code is fired when the page is loaded but what I want to do is add a button so this function runs every time I press the button, how could I achieve this, thanks??
function shuffleStuffAround() {
// truffle shuffle
}
$(function($) { // DOM ready
shuffleStuffAround();
$("#some-button").click(function() {
shuffleStuffAround();
return false; // you probably want this
});
});
You can save you "shuffle stuff around" code as a function and call it from other parts of your codebase.
var foo = function() {
// code that shuffles stuff around
};
$(document).ready(function() {
foo();
// other stuff
});
$('#mybutton').click(foo);
//or
$('#mybutton').click(function() {
foo();
// other stuff.
});
You could simple refactor the code that you run on the ready function into its own function and call that in your button's click event:
$(document).ready(function(){
codeToRun();
$('.button').click(function(){codeToRun()});
});
function codeToRun(){
// do work
}
I am trying to pass the elements "event" into a JavaScript function click using jQuery.
INLINE:
This is easy when doing it directly (inline).
Click Me
USING JQUERY:
But how do you do it using jQuery?
<script type="text/javascript">
<!--
function ToggleMinimize(title, e)
{
// ...various execution code would be here ... //
}
jQuery(window).load(function() {
// How do I "get at" the "event" object for the element & pass it into the function definition?
jQuery(".chatDialog-toggle-button").bind('click', ToggleMinimize);
})
-->
</script>
Thanking you ahead of time!
Following on from what a lot of the other guys have shown regarding passing data to an event function, there is a specific method for this, you can pass a full object map this way per bind.
Also bare in mind that jQuery normalises the event object before you receive it, so it is a little different, see: http://api.jquery.com/category/events/event-object/
function ToggleMinimize(e) {
// ...various execution code would be here ... //
// e.data contains the data object map
// e.data.msg == "Hello World"
}
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").bind('click', {'msg': "Hello World"}, ToggleMinimize);
});
You don't have to, it's already the first agument, like this:
function ToggleMinimize(e) {
// ...various execution code would be here ... //
}
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").bind('click', ToggleMinimize);
});
If you want to also pass a title, then use an anonymous function, like this:
function ToggleMinimize(title, e) {
// ...various execution code would be here ... //
}
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").click(function(e) {
ToggleMinimize("some title", e);
});
});
Personally I'd use a data attribute, like this:
Click Me
Then access it like this:
function ToggleMinimize(e) {
var title = jQuery(this).data("title");
}
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").click(ToggleMinimize);
});
You can send an anonymous function which executs ToggleMinimize():
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").bind('click', function(e) {
ToggleMinimize( "Hello World", e);
});
})
or you can have ToggleMinimize return a function, so you can pass Hello World into it.
function ToggleMinimize(title) {
return function(e){ alert(title); alert(e.target); }
}
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").bind('click', ToggleMinimize( "Hello World") );
})
You can do it this way:
$(document).ready(function() {
$('.chatDialog-toggle-button').bind('click', function(event) {
ToggleMinimize(event);
});
});