calling Jquery function from javascript

Question

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 
 }

Answer 1

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
}

Answer 2

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!
}

Answer 3

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/

Answer 4

    <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>

Answer 5

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();

Answer 6

I made it...

I just write

 jQuery('#container').append(html) 

instead

 document.getElementById('container').innerHTML += html;

Answer 7

<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!

Answer 8

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++;
}

Answer 9

//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);