Hello I need a function to run when an a tag is clicked. I am using the onclick="" but it seems that the function runs on page load, instead of waiting to run when the a tag is clicked on. How do I make it so the function only runs when the a tag is clicked?
Here is my code.
HTML:
<a class="req_btn" onclick="conversionOne()">text</a>
<script type='text/javascript'>
(function conversionOne() {
alert("something");
})();
</script>
Thanks!
You are invoking the function when the script loads using an IIFE. Instead of this:
(function conversionOne() {
alert("something");
})();
Do this:
function conversionOne() {
alert("something");
}
You are using a self-executing function.
Declare the function in the global scope without executing it.
function conversionOne() {
alert("something");
}
Doing this
(function(){
/** code **/
})();
Means the code will be executed imediatelly.
in your case you want to create a function so you need this :
function conversionOne() {
/** code **/
}
or
var conversionOne = function () {
/** code **/
}
(function conversionOne() {
alert("something");
})();
calling function like this will work onload
Change this to
function conversionOne() {
alert("something");
};
More info
Related
I have below code in my html file
<a onclick="getRestaurantTiming({{ $afternoonTiming[$j]->id}});">Hi</a>
I have anonymous function in restaurant.js file
var Restaurant = (function ($) {
function getRestaurantTiming(id) {
alert('hi');
}
})(jQuery)
I want to call anonymous function in onclick method. Something like
<a onclick="Restaurant.getRestaurantTiming({{$afternoonTiming[$j]->id}});">Hi</a>
Please help.
You should return this cause you not instantiate object by new. Also function inside getRestaurantTiming should be binded to this.
var Restaurant = (function($) {
function getRestaurantTiming(id) {
alert('hi');
}
this.getRestaurantTiming = getRestaurantTiming;
return this;
})(jQuery);
Restaurant.getRestaurantTiming(1);
Try use it without the curly brackets.
I have the following javascript code:
<script type="text/javascript" language="javascript">
$(document).ready(
function () {
// THIS IS FOR HIDE ALL DETAILS ROW
$(".SUBDIV table tr:not(:first-child)").not("tr tr").hide();
$(".SUBDIV .btncolexp").click(function () {
$(this).closest('tr').next('tr').toggle();
//this is for change img of btncolexp button
if ($(this).attr('class').toString() == "btncolexp collapse") {
$(this).addClass('expand');
$(this).removeClass('collapse');
}
else {
$(this).removeClass('expand');
$(this).addClass('collapse');
}
});
function expand_all() {
$(this).closest('tr').next('tr').toggle();
};
});
</script>
I want to call expand_all function via code-behind .
I know I can use something like this, but it does not work and I don't understand used parameters:
ScriptManager.RegisterStartupScript(Me, GetType(String), "Error", "expand_all();", True)
Can you help me?
Because you have your expand_all function defined within anonymous $.ready event context. Put your code outside and it should work.
function expand_all(){
alert('test B');
}
$(document).ready(
function () {
// this won't work
function expand_all() {
alert('test A');
};
});
// will show test B
expand_all();
check this:
http://jsfiddle.net/jrrymg0g/
Your method expand_all only exists within the scope of the function inside $(document).ready(...), in order for you to call it from ScriptManager.RegisterStartupScript it needs to be at the window level, simply move that function outside the $(document).ready(...)
<script type="text/javascript" language="javascript">
$(document).ready(
function () {
....
});
function expand_all() {
$(this).closest('tr').next('tr').toggle();
};
</script>
I'm having a problem with my function that is showing type error. In summary I've the code like below:
function myFunc(){
alert('test');
}
//if I run myFunc() here then it runs
myFunc();//alerts test
$('.selector').click(function(){
myFunc();//type error:: how to call the function?
});
Sorry, if this is a stupid question.
Update
I've just reproduced my key problem:
demo
window.onload = function(){
function myFunc(){
alert('test');
}
}
$('.test').click(function(){
myFunc();//doesn't alert test
});
myFunc is scoped to the function it is declared inside.
Move it outside or move the event handler assignment inside.
// Define this in a script element after the element you are trying to select
function myFunc(){
alert('test');
}
$('.test').click(function(){
myFunc();
});
// or use this anywhere
window.onload = function(){
function myFunc(){
alert('test');
}
$('.test').click(function(){
myFunc();
});
}
// but if you are going to use jQuery, you might as well go the whole hog
// and also just wait for the DOM to be ready instead of allowing time for images
// and other external resources to load too.
$(function(){
function myFunc(){
alert('test');
}
$('.test').click(function(){
myFunc();
});
});
Your function is defined in the scope of another function and is unreachable. You should put it in the scope of the calling function, e.g.:
function myFunc() {
alert('test');
}
$(function() {
$('.test').click(function() {
myFunc();
});
});
I have two JQuery funciont and i need to start one of them in one function. This is my example:
<script type="text/javascript">
$(document).ready(function aa() {...... })
</script>
And i want to call this function in another:
<script type="text/javascript">
function hello(){
aa();
}
</script>
Need a tiny bit of restructuring to move aa out of $(document).ready at top of your code so you can use it elsewhere also
/* call aa as ready handler*/
$(document).ready(aa);
/* aa now global*/
function aa() {
$('#catAssociate tbody tr').contextMenu('myMenu2', {
bindings: {
'open': function (t) {
console.log("chiamo ioooo");
DeleteAction(t, "Open");
},
}
});
}
aa is unaccessible because you defined it within $(document).ready, try putting it in global scope
function aa() {
...
}
$(document).ready(aa);
and in your other script you can call it as such
function hello(){
aa();
}
How can i call a jQuery function from javascript?
//jquery
$(function() {
function my_fun(){
/.. some operations ../
}
});
//just js
function js_fun () {
my_fun(); //== call jquery function
}
Yes you can (this is how I understand the original question).
Here is how I did it. Just tie it into outside context.
For example:
//javascript
my_function = null;
//jquery
$(function() {
function my_fun(){
/.. some operations ../
}
my_function = my_fun;
})
//just js
function js_fun () {
my_function(); //== call jquery function - just Reference is globally defined not function itself
}
I encountered this same problem when trying to access methods of the object, that was instantiated
on DOM object ready only. Works. My example:
MyControl.prototype = {
init: function {
// init something
}
update: function () {
// something useful, like updating the list items of control or etc.
}
}
MyCtrl = null;
// create jquery plug-in
$.fn.aControl = function () {
var control = new MyControl(this);
control.init();
MyCtrl = control; // here is the trick
return control;
}
now you can use something simple like:
function() = {
MyCtrl.update(); // yes!
}
You can't.
function(){
function my_fun(){
/.. some operations ../
}
}
That is a closure. my_fun() is defined only inside of that anonymous function. You can only call my_fun() if you declare it at the correct level of scope, i.e., globally.
$(function () {/* something */}) is an IIFE, meaning it executes immediately when the DOM is ready. By declaring my_fun() inside of that anonymous function, you prevent the rest of the script from "seeing" it.
Of course, if you want to run this function when the DOM has fully loaded, you should do the following:
function my_fun(){
/* some operations */
}
$(function(){
my_fun(); //run my_fun() ondomready
});
// just js
function js_fun(){
my_fun(); //== call my_fun() again
}
var jqueryFunction;
$().ready(function(){
//jQuery function
jqueryFunction = function( _msg )
{
alert( _msg );
}
})
//javascript function
function jsFunction()
{
//Invoke jQuery Function
jqueryFunction("Call from js to jQuery");
}
http://www.designscripting.com/2012/08/call-jquery-function-from-javascript/
<script>
// Instantiate your javascript function
niceJavascriptRoutine = null;
// Begin jQuery
$(document).ready(function() {
// Your jQuery function
function niceJqueryRoutine() {
// some code
}
// Point the javascript function to the jQuery function
niceJavaScriptRoutine = niceJueryRoutine;
});
</script>
jQuery functions are called just like JavaScript functions.
For example, to dynamically add the class "red" to the document element with the id "orderedlist" using the jQuery addClass function:
$("#orderedlist").addClass("red");
As opposed to a regular line of JavaScript calling a regular function:
var x = document.getElementById("orderedlist");
addClass() is a jQuery function, getElementById() is a JavaScript function.
The dollar sign function makes the jQuery addClass function available.
The only difference is the jQuery example is calling the addclass function of the jQuery object $("#orderedlist") and the regular example is calling a function of the document object.
In your code
$(function() {
// code to execute when the DOM is ready
});
Is used to specify code to run when the DOM is ready.
It does not differentiate (as you may think) what is "jQuery code" from regular JavaScript code.
So, to answer your question, just call functions you defined as you normally would.
//create a function
function my_fun(){
// call a jQuery function:
$("#orderedlist").addClass("red");
}
//call the function you defined:
myfun();
I made it...
I just write
jQuery('#container').append(html)
instead
document.getElementById('container').innerHTML += html;
//javascript function calling an jquery function
//In javascript part
function js_show_score()
{
//we use so many javascript library, So please use 'jQuery' avoid '$'
jQuery(function(){
//Call any jquery function
show_score(); //jquery function
});(jQuery);
}
//In Jquery part
jQuery(function(){
//Jq Score function
function show_score()
{
$('#score').val("10");
}
});(jQuery);
My problem was that I was looking at it from the long angle:
function new_line() {
var html= '<div><br><input type="text" value="" id="dateP_'+ i +'"></div>';
document.getElementById("container").innerHTML += html;
$('#dateP_'+i).datepicker({
showOn: 'button',
buttonImage: 'calendar.gif',
buttonImageOnly: true
});
i++;
}
<script>
$.myjQuery = function() {
alert("jQuery");
};
$(document).ready(function() {
alert("Welcome!");
});
function display() {
$.myjQuery();
};
</script>
<input type="button" value="submit" onclick=" display();">
Hope this will work for you!