call to nested function in javascript using object

Question

I have this javascript function called wire_quick_search in a file1.js

function wire_quick_search()
{
    console.log('hits wire_quick_search');
    empty_count=0;
    var load_search_result=function(payload,id,class_name,max_empty_count){
        console.log('hits load_search_result');
    };
}

Now I am trying to access the load_search_result() from a php method but for some reason I keep getting undefined function. Here is the sample code from the php method.

private static function _return_order_search_only($text,$count_flag=1)
    {
        $html="
        <div class='level_1_container'>
            ".self::_render_order_search_container()."
        </div>
        ";
        $js="
        jQuery(document).ready(function(){
            var key='key=".self::get_key()."';
            payload=key+'&event=".self::ACTION_GLOBAL_ORDER_SEARCH."&text=$text';
            var obj1=new wire_quick_search();
            obj1.load_search_result(payload,'order_search_id','order_search_class',$count_flag);
        });
        ";
        return array($html,$js);
    }

Here is the screen shot of my console.

so how do I access the load_search_result function?

Answer 1

I am a little confused by the example, maybe I am just reading it out of context but from what I can see your internal function load_search_result is a private function.

When you create the new instance of your object you cannot access it in the manner you are trying without using this in your original object to make it public.

function wire_quick_search() {
    console.log('hits wire_quick_search');
    empty_count=0;
    this.load_search_result=function(payload,id,class_name,max_empty_count){
        console.log('hits load_search_result');
    };
}

Answer 2

Try this:

function wire_quick_search()
{
    console.log('hits wire_quick_search');
    empty_count=0;
    this.load_search_result=function(payload,id,class_name,max_empty_count){
        console.log('hits load_search_result');
    };
}

Note the this.load_search_result instead of var .

A variable defined with var by definition must not be visible outside the block it is designed in. With this you add a public visible object member.

Answer 3

Important caveat!

Regarding the use of the keyword 'this' in the examples above. That happens to work, because the context of 'this' at the time of invocation happened to be a global invocation context. Howerver, there is an important caveat that you might want to be aware of going forward:

Consider:

(And before you test this, be sure you refresh your browser, otherwise load_search_result will still remain in memory in the global context and my example will seem meaningless).

function wire_quick_search() {
    console.log('hits wire_quick_search');
    empty_count=0;
    this.load_search_result=function(payload,id,class_name,max_empty_count){
        console.log('hits load_search_result');
    };
}

var notGlobal = {
    wire_quick_search: wire_quick_search
};

notGlobal.wire_quick_search(); // => 'hits wire_quick_search'
load_search_result(); // => ReferenceError: load_search_result is not defined

The reason load_search_result is undefined in the global context is due to the fact that at the time of invocation , the keyword 'this' referred to notGlobal, and remains bound to that.

To further illustrate my point:

notGlobal // => { wire_quick_search: [Function: wire_quick_search], load_search_result: [Function] }
notGlobal.load_search_result() // hits load_search_result
load_search_result(); // => ReferenceError: load_search_result is not defined