call Jquery function from javascript using API - javascript

How can I call a jQuery function from JavaScript?
//jQuery
$(function() {
function my_func(){
/.. some operations ../
}
});
//JavaScript
function js_func () {
my_func(); //== call JQuery function
}

Extend your function to jquery, then use it with $
$.extend({
my_jsFunc: function() {
console.log('============ Hello ============');
}
});
$(function(){
$.my_jsFunc();
});

Not sure y do you need this anyway here's a simple example...
$(function(){
$('#my_button').click(function(){
alert("buttonClicked"); //Jquery
});
});
function my_func(){
$('#my_button').click(); //JavaScript
}
//HTML
<button id="my_button" onclick="my_func();"></button>

you are asking the wrong question but I think what you are searching for is:
$.my_func();

the my_func() is just normal function so should be kept outside jquery Dom ready function
$(function() {
my_func();
});
// This function should be outside from jquery function
function my_func(){
/.. some operations ../
}

$(function() {
function my_func(){
/.. some operations ../
}
})
runs the everything inside when the page is "ready".
You don't need that.
Just define the function list this
function my_func(){
/.. some operations ../
}
P.S. "How can i call a jQuery function from JavaScript?" is a bad question. jQuery is a library written using Javascript.

You can do it by actually changing the declaration to outside jQuery callback, but if you have some specific purpose following will work for you
$(function() {
window.my_func = function() {
/.. some operations ../
}
});
//JavaScript
function js_func () {
my_func(); //== call JQuery function
}

Related

Trigger function only on "onclick"

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

How to call function from another file with requireJS

I have two files - main, and events. I'm trying to call some function from one file to another.
So, this is how it looks:
events
require(['app/main'], function(call) {
// click event respond test
document.body.addEventListener("click", function(e) {
var target = e.target;
if (target.hasClass === "call"){
functionCall()();
}
});
});
main
define(["jquery"], function() {
// Call
var box = $('.box');
return function functionCall(){
box.addClass('visible');
}
});
What is wrong, can anyboyd help?
main:
define(["jquery"], function($) {
var main = {
functionCall: function(){
$('.box').addClass('visible');
}
}
return main;
});
events:
require(['jquery','app/main'], function($, main) {
$('body').on('click', function () {
if($(this).hasClass('call')){
main.functionCall();
}
});
});
One way is to add this code where you need to make call to function:
require('pathToModuleOrModuleName').functionYouWantToCall()
But if you have module defined or required in the beggining (as 'main' in the events), then in place where call to function needed just add:
call.functionName();
Unless my eyes deceive me the simplest change to make to your code would be to replace this:
functionCall()();
with this:
call();
since the function that the main module returns is imported as call in your events module, because that's how you name it in the callback passed to define.
Firstly your code has some basic problems
In the following code
define(["jquery"], function() {
Where are you referring the query inside the function definition.
I think you should first map the jquery defined into the function declaration like below
define(["jquery"], function($) {
Secondly, what is the () doing after the calling function?
if (target.hasClass === "call"){
functionCall()();
}
Remove the trailing () from that call. It should just be functionCall();

Call A Function On ScrollExtend - jQuery

How to call a function on scrollExtend. I need the code like below but its not working fine. How to make it work?
$(document).ready(
function() {
$('#scrollBox').scrollExtend(function() {
//alert('scroll extend working');
//functionCall();
});
}
);
But the actual code of scrollExtend is like below in which i dont know how to call a function on it,
jQuery('.scroll_container').scrollExtend({
'target': 'div#scroll_items',
'url': 'more_content.html',
'newElementClass': 'list_item more_content'
});
I would use the built in function onScrollBeyond in JQuery.
Else there is a setting in scrollExtend that is called beforestart and onSuccess which both are callback variables which means you could put functions there like
$('#scrollBox').scrollExtend({
'target': 'div#scroll_items',
'beforeStart': myFunction,
'onSuccess': mySecondFunction
});
Regards
As BeadFist said, you can simply use onScrollBeyond:
$('.scroll_container').onScrollBeyond(functionCall);//if the function exists already, just pass a reference too it
$('.scroll_container').onScrollBeyond(function()
{
//your function
});
Mind you, for both scrollExtend and onScrollBeyond, you need the plugin, of course.
Try using onScrollBeyond:
$(document).ready(
function() {
$('#scrollBox').onScrollBeyond(function() {
//alert('scroll extend working');
//functionCall();
});
}
);
Try:
$('#scrollBox').scroll(function() {
if($('#scrollBox').scrollTop() + $('#scrollBox').height() == $(parentElm).height()) {
alert("bottom!");
}
});

How do i create a method/function in Jquery

How do i create a method in Jquery
For example
function dosomething()
{
// do something
}
dosomething();// i can call the function this way
How can i define function like dosomething() and call them in jquery?
Thanks
In exactly the same way. jQuery is JavaScript.
function doSomething() {
// do something
}
$(function () {
doSomething(); // call doSomething on document ready.
});
You can create a basic jQuery function:
(function($)
{
$.fn.myFunc = function()
{
return this.each(function()
{
alert("do something for each element return by JQuery object");
});
};
})(jQuery);
Doing the above allows me to $("#myElement").myFunc();
Don't forget that jQuery is javascript. Javascript is not jQuery.
You can read up on jQuery plugin authoring here

calling Jquery function from javascript

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!

Categories