javascriptjqueryajaxjquery-pluginsjquery-3

AJAX function inside $.extend not working in jQuery 3


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.


Solution

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