AJAX function inside $.extend not working in jQuery 3

Question

I need to extends jQuery (as a plugin). Problem is, $.ajax is not working inside the $.extend scope but outside the scope it is working fine. I am using jQuery 3.4.1 in my project.

My code:

(function($) {
  jQuery.extend({
    mmw: function(options) {

      var settings = $.extend({
        mtarget: "#cnapp-mmw",
        imgSize: "square",
        imgRestricted: true,
        imgtype: ["gif", "png", "jpg", "jpeg", "pdf"]
      }, options);

      $.ajax({
        type: "GET",
        url: "http://example.com/public/get-media",
        dataType: "html",
        success: function(data) {
          alert(data);
        },
        error: function(e) {
          alert(e); // Showing this as outout [object Object]
        }
      });
    }
  })
})

But this is showing the proper output:

(function($) {

  $.ajax({
    type: "GET",
    url: "http://example.com/public/get-media",
    dataType: "html",
    success: function(data) {
      alert(data); // This is showing the proper output
    },
    error: function(e) {
      alert(e);
    }
  });

  jQuery.extend({
    mmw: function(options) {

      var settings = $.extend({
        mtarget: "#cnapp-mmw",
        imgSize: "square",
        imgRestricted: true,
        imgtype: ["gif", "png", "jpg", "jpeg", "pdf"]
      }, options);
    }
  })
})

What is wrong in my first code? Is there anything different in jQuery 3?

Please note, I need to call this plugin without selector like

    $(".trigger").on('click', function(){
        $.mmw();
    });

Is the $.extend is a must required function to do so? Any advice on the best practice for this would be gratefully received.

UPDATE

After debugging many times I have found that, the AJAX request is not working inside any block or event. I am using this with Codeigniter 4 (beta 4).

This is showing error

    $(".trigger").on('click', function(){
        $.ajax({
            type: "GET",
            url: "http://example.com/public/get-media",
            dataType: "html",
            success: function(data){ alert("Ok"); },
            error: function(e){ alert(JSON.stringify(e)); } // Showing error message {"readyState":0,"status":0,"statusText":"TypeError: Cannot read property 'open' of undefined"}
        });
    });

But this showing the correct data

    $.ajax({
        type: "GET",
        url: "<?=base_url('test/'.session_id())?>",
        dataType: "html",
        success: function(data){ alert(data); }, // Showing the Data
        error: function(e){ alert(JSON.stringify(e)); }
    });

    $(".trigger").on('click', function(){

    });

Means Ajax function is only working outside the scope. Really confused about it.

What do you mean by not working? Since the AJAX call is in the `mmw` function, it won't be called until you use `$.mmw()`. — Barmar, Aug 29 '19 at 00:17
@Barmar, please take a look at the **last snippet** of my code. After calling the plugin on click event, it is showing the error `alert(e);` which I have commented out in my first snippet. — M B Parvez, Aug 29 '19 at 00:23
Are there any errors in the console? Use the Network tab to see how the AJAX request is being made, and what the response is. — Barmar, Aug 29 '19 at 00:26
I can't think of any reason why it would work differently in the two cases. — Barmar, Aug 29 '19 at 00:27
You don't have to use `$.extend`, you can do `$.mmw = function() { ... }`. But the two snippets are very different. The first one makes the AJAX call after the click, the second one makes the AJAX call only when the page is first loaded. — Barmar, Aug 29 '19 at 00:29
There's nothing special about `jQuery.extend()`. It's just an ordinary function, it has no effect on variable scope. All it does is merge objects. — Barmar, Aug 29 '19 at 00:30
@Barmar, no error in the console. Second snippet is just a part of debugging the issue showing there is no problem in the backend. But if I move the code inside $.extend then the error occurs. — M B Parvez, Aug 29 '19 at 00:38
@Barmar After using `alert(JSON.stringify(e));` I have found this: `{"readyState":0,"status":0,"statusText":"TypeError: Cannot read property 'open' of undefined"}` — M B Parvez, Aug 29 '19 at 00:39
I suspect something else in your code is breaking `$.ajax`. The reason it works outside the `mmw` function is because that's running before the offending code runs. — Barmar, Aug 29 '19 at 00:43
Hanging with this from last 2 days, This code is working fine if I write it as simple JS code (non-plugin style) but not working as a plugin. BTW, thanks for your effort. — M B Parvez, Aug 29 '19 at 00:55

score 0 · Accepted Answer · answered Sep 01 '19 at 21:44

As I am working with CI 4 (beta 4), there was a conflict between above code and the Javascript that has been used by CI 4 for debugging tools. The error is only generated in "development" environment. In "production" environment, everything on working fine.

AJAX function inside $.extend not working in jQuery 3

1 Answers1