AJAX function inside $.extend not working in jQuery 3 - javascript

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.

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.

Related

Executing javascript function on AJAX success in WP

I have a function in my Wordpress that regenerate Google Map.
What I want to achieve is to get some markers from my WP, then add them to DIV and generate from them map again.
For regenerating I'm using simple function with magic name "regenerate_map()" :) .
jQuery(".gmaps-button").click(function(){
jQuery.ajax({
type: "POST",
//contentType: "application/json; charset=utf-8",
dataType: "text",
url: myAjax.ajaxurl,
data : {action: "jv_get_map_data", ids : 1},
//data: dataString,
action: 'jv_get_map_data',
beforeSend: function() {
//jQuery('#contact-form #err2').html('').hide();
//jQuery(".submit").html("proszę czekać").addClass('loading');
},
success: function(text) {
jQuery('#gmaps-markers').html(text);
console.log(text);
regenerate_map();
}
});
return false;
});
The main problem is that function regenerate_map() is not working.
I get "ReferenceError: regenerate_map is not defined".
This is not true, because, I have other button, which is a trigger for click() and it uses this function also and it works.
I think that is something wrong with executing other function in AJAX request, but console.log and alert() works.
I thought that problem can be with what I get as "text" but I have checked that even if I get nothing, problem exists too.
Maybe some security issue?
Can somebody tell me why and what to do to achieve what I need?
your regenerate_map() function should be like this.
<script>
jQuery(document).ready(function() {
jQuery("#p_button").click ( function () {
console.log("button got clicked");
var donor_data= [ "12","13","14" ];
var damount = 1234;
var donor_obj = {
id : donor_data,
amnt : damount,
};
jQuery.ajax({
type:"POST",
//dataType : "json",
url: "<?php echo admin_url( 'admin-ajax.php' );?>",
data: { action : "ajx_add_donations",
'donors' : JSON.stringify(donor_obj),
},
success:function(response){
console.log("success " ,response);
//console.log("success " + JSON.parse(response));
//jQuery("#d_amount").val(donor_data[0]);
//jQuery("#p_button").text("brrr");
regenerate_map();
},
error: function(response) {
console.log("error" + response);
},
});
});
});
function regenerate_map(){
alert("test");
}
</script>

How to use Notify js?

I'm trying to give a success notification from my jQuery to the client...... this is how my script looks like.....
$('#submit').click(function () {
$.ajax({
type: "POST",
url: "../Home/Index",
data: $('#form').serialize(),
success: function(data){
$('#message').notify("Access Granted");
},
error:function(){
alert("Error!!!!");
}
});
return false;
});
But the notify part wont work in this..... it wont even give me an error... nothing happens.........
I have included the jQuery and Notifyjs scripts as well in my page....

IE 9, 10, 11 - Ajax calls not returning

I am having an issue with IE related to jQuery and ajax. Chrome and Firefox work just fine, but my ajax calls are disappearing in IE.
After making the ajax call, neither the success nor the fail functions are being called. I can see the response in the IE console, and I know my controller action is being hit.
$.ajax({
url: controllerUrl
type: 'POST',
dataType: 'json',
cache: false,
data: {
id: customerId
},
success: function () {
alert('success!');
},
error: function () {
alert('failed!');
}
});
Has anyone else seen this issue?
fail: function () {
alert('failed!');
}
fail is not a valid jQuery ajax setting. I believe you are looking for error.
Also, cache: false, does nothing with POST requests.
Note, jQuery does not append the time stamp with POST requests.
The source code clearly demonstrates this. (summarized from https://github.com/jquery/jquery/blob/master/src/ajax.js)
var rnoContent = /^(?:GET|HEAD)$/;
s.hasContent = !rnoContent.test( s.type );
if ( !s.hasContent ) {
/* code to append time stamp */
}
You are missing a comma , after your URL parameter:
$.ajax({
url: controllerUrl, // <--- you were missing this comma!
type: 'POST',
dataType: 'json',
cache: false,
data: {
id: customerId
},
success: function () {
alert('success!');
},
error: function () {
alert('failed!');
}
});

Cannot use alert() in a jQuery method

When using jQuery to make an AJAX call, for the time being I want to just want to have a popup box (using alert()) showing me the response text.
$(document).ready(function() {
$(".jeobutton").mouseup(function() {
var $button = $(this);
$.ajax({ url: 'getdata.php',
data: // <parameters>
type: 'get',
dataType: 'json',
success: function(output) {
// do something
},
error: function(xhr) {
alert("<some error>");
console.error(xhr.responseText);
}
});
});
});
The response text prints out fine. However, the alert() dialog is nowhere to be found.
Please help this poor noob.
Here is a jsfiddle with something very close to your code, working, the alert box pops up.
http://jsfiddle.net/pN869/
$(document).ready(function() {
$(".jeobutton").mouseup(function() {
console.log("clicked");
var $button = $(this);
$.ajax({ url: 'getdata.php',
type: 'get',
dataType: 'json',
success: function(output) {
console.log("success");
},
error: function(xhr) {
alert("<some error>");
console.error(xhr.responseText);
}
});
});
});
Clean the browser cache. There will likely be branded the option of not showing more alert.
Testing in different browsers.
I hope that is helpful.

how to get an alert to fire in an unload function in chrome

I see that Chrome doesn't allow alerts in an unload function
$(window).on('unload', function(){
alert("ciao");
});
But then how does JSFIDDLE do it?
In dev tools I can see I can tick a box that will stop execution on EventListener Breakpoints --> Load --> Unload
But I cannot see what's really going on. How do they do it?
EDIT: code
$(window).on('unload', function(){
//delete files
$.ajax({
type: "post",
url: "delete_files.php",
data: {
test: $("body").data("test_name");
prod: $("body").data("prod_name");
prodAd: $("body").data("prodAd_name");
},
dataType: "html",
success: function(returnedData){
console.log(returnedData);
}
});
});
Your AJAX call works just fine, after you changed a few things. The data you are sending is an Object. Yours contains ; which will give an error. That is probably why it is not working.
$(window).bind('unload', function(){
//delete files
$.ajax({
type: "post",
url: "test.php",
data: {
test: $("body").data("test_name"),
prod: $("body").data("prod_name"),
prodAd: $("body").data("prodAd_name")
},
dataType: "html",
success: function(returnedData){
console.log(returnedData);
}
});
});
I grappled with this for awhile about a year ago.
I ended up using this solution:
$(window).on('beforeunload', function() {
$.get('http://some-page.php');
});
In our case, some-page.php is a JSP that cleans up a user's session.
Further reading about the beforeunload event.

Categories