0

I am using the jQuery boilerplate and am trying to call one function from within another function and thought that Proxy might be the way to achieve that. Unfortunately I can't seem to get this to work.

Below is a heavily stripped down version of the code I am using, but you should be able to get the idea. Inside the ajax success method, I am trying to call the function customSelect so that I can reapply my select styling on elements created when the ajax is run. Unfortunately I'm unable to get this to work:

;( function( $, window, document, undefined ) {
    "use strict";

    var pluginName = "serviceFinder",
        defaults = {
            propertyName: "value"
        };


    // The actual plugin constructor
    function Plugin ( element, options ) {
        this._name = pluginName;
        this.init();
    }


    // Avoid Plugin.prototype conflicts
    $.extend(Plugin.prototype, {
        init: function() {
            this.customSelect("lm-service-finder__field--select");
        },


        /**
         * When a user selects a product
         */
        selectProduct: function(e){
            // Send the ID of the selected product so that we can get the variations for that product.
            $.ajax({
                type: 'POST',
                url: themeVars.ajax,
                dataType: 'json',
                data: {
                    'product_id': selectedProductId,
                    action: 'servicefinder_get_product_attributes' //this is the name of the AJAX method called in WordPress
                }, success: function (result) {
                    $.proxy(Plugin.customSelect);
                },
                error: function () {
                    console.log("error");
                }
            });
        },


        /**
         * Custom select field styling
         */
        customSelect: function(selector) {
            console.log("Apply select field styling");
        },
    });


    $.fn[ pluginName ] = function( options ) {
        return this.each( function() {
            if ( !$.data( this, "plugin_" + pluginName ) ) {
                $.data( this, "plugin_" +
                    pluginName, new Plugin( this, options ) );
            }
        } );
    };

} )( jQuery, window, document );

I have seen a couple of other similar questions here, but with no answer. Hope someone can assist?

wickywills
  • 4,024
  • 2
  • 38
  • 54
  • What if you call it, e.g. `$.proxy(Plugin.customSelect)()`. – alex Dec 17 '18 at 14:57
  • @alex I thought I was already, but I added the `()` to the end, and I now receive "Is not a function" – wickywills Dec 17 '18 at 14:59
  • `$.proxy` is an old utility that seem to have been added before `Function.prototype.bind` existed. You should try using this instead. – adz5A Dec 17 '18 at 15:03
  • @adz5A I don't understand how to apply `Function.prototype.bind` here. I tried `Plugin.bind(customSelect);` but receive "customSelect is not defined" – wickywills Dec 17 '18 at 15:10
  • Perhaps it is my misuse of the plugin boilerplate structure that is the problem and not the proxy? I'm not completely familiar with either unfortunately! – wickywills Dec 17 '18 at 15:11
  • There are several issues with your code, but I will mainly point one: `customSelect` is an instance method and not a class method. Thus using `$.proxy` on `Plugin.customSelect` is most certainly not correct and should be `Plugin.prototype.customSelect`. That said it is still probably not what you want as `$.proxy` only creates a new function without calling it. If you only correct `$.proxy(...)` you will only have created a new function with the context of `$.proxy` bound to it. If you explain what the callback in the ajax call should do maybe I can help a bit more. – adz5A Dec 17 '18 at 15:35
  • @adz5A Thank you for that information. The website (Wordpress/Woocommerce) this is used on enables a customer to enter the name of their mobile device, this then searches all products and returns a series of select fields where they can select what exactly is wrong with their device. The problem is that these select fields need to be generated through ajax, since each product has different attributes that appear in the select fields. Since the select fields need custom styling applied after they are generated, this is why I am trying to do this in the callback by calling `customSelect`. – wickywills Dec 18 '18 at 07:14

0 Answers0