jQuery.proxy() Function not being called in Chrome

Question

I am facing an issue where a jQuery function is not being called even though the proxy has successfully loaded (from what I can tell). The call we are making works fine on first load, but when we try to load this script in via AJAX it calls the required $.proxy() to the Initialise function, but then doesn't actually call that function.

The dynamic loaded in code is:

       <script language="JavaScript"><!--
         var ctrl = new VideoControl({"Id":"bc1093c8290a4037846c2052695a7d3a"}, "...");
//-->
   </script>

And the javascript to create the object is:

function VideoControl(controlIds, videoMarkUp) {
    this.controlIds = controlIds;
    this.videoMarkUp = videoMarkUp;

    var thisControl = this;

    $(function () { $.proxy(thisControl.Initialise(), thisControl); });
}

VideoControl.prototype.Initialise = function () {
// do stuff
}

So the main function is called, but the Initialise() is not called when this is loaded in via AJAX controls in Chrome or IE...this does however work in firefox.

There is a stackoverflow answer which explains why $function is not being called but how do I get it to a point it will call (similar to how firefox deals with it)

Is anyone aware of something that firefox does differently when working with jQuery vs the other browsers?

There are no errors showing on the chrome developer tools, is there anywhere else that could be looked at in order to diagnose this?

Thank you in advance.

The structure of your code is a little odd - you have a document.ready handler inside your `VideoControl` function and are assigning the *result* of calling the `thisControl.Initialise()` function to the `$.proxy`, instead of giving the proxy *a reference* to the function and calling that. I'm not sure how this code is working in any state given those issues. — Rory McCrossan, Jan 05 '16 at 17:07
@RoryMcCrossan more information has been added to the question — SymbioticKaos, Jan 06 '16 at 09:09

guest271314 · Accepted Answer · 2016-01-05T17:32:49.210

So the main function is called, but the Initialise() is not called when this is loaded in via AJAX

$(function() {}) is alias for .ready() ; handlers for .ready() should be called at most once . AJAX appear to occur after document is loaded ? , where .ready() has previously called , $.isReady set to true preventing handlers within subsequent .ready() or $(function(){}) from being called.

Try removing $(function() {}) wrapper surrounding

function VideoControl(controlIds, videoMarkUp) {
    this.controlIds = controlIds;
    this.videoMarkUp = videoMarkUp;

    var thisControl = this;

    $.proxy(thisControl.Initialise, thisControl);
}

use

$(document).ready(VideoControl)

Though , not certain why $.proxy is used here ? , as the context of thisControl.Initialise not appear to be changed to a different context : this ?

Note also that js at Question thisControl.Initialise() called function; where function should be referenced jQuery.proxy( function, context [, additionalArguments ] )

jQuery.proxy() Function not being called in Chrome

1 Answers1