I am trying to load the spinner image during ajax data loading hower none of my codes seem to work. Here is my code :
$.ajax({
url: '/Observer/GetInfoProfileByProfileId',
type: 'POST',
data: {
ProfileId: profileId,
},
beforeSend: function() {
console.log('spinner shown');
$('#spinner').css('display', 'block');
},
complete: function() {
console.log('spinner hidden');
$('#spinner').css('display', 'none');
},
success: function(response) {
//..do something with response
}
});
What is wrong with the codes above ? Appreciate any help
It is working, the issue i misspelled the name of my id in the html
Related
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.
I have added jquery in head section and below code are in body section.
Problem is this isn't working.
Even alert is not showing. I am not getting any error in firebug.
I want to execute ajax on page load. I am not sure my approach is good.
Please advise. Below are the js code.
<script type="text/javascript">
$('document').ready(function(){
alert('Test');
$.ajax({
type: 'post',
url: 'profile_exec.php',
cache: false,
dataType: 'json',
data: uid,
beforeSend: function() {
$("#validation-errors").hide().empty();
},
success: function(data) {
var applied_counts = data.applied_count;
alert(applied_counts);
},
error: function(xhr, textStatus, thrownError) {
alert('Something went to wrong.Please Try again later...');
}
});
return false;
});
</script>
As you can see this should work fine:
$('document').ready(function(){
alert('ready');
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
method: 'GET',
}).then(function(data){
console.log(data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
since even the alert is not showing, check your html code. Maybe swap your jQuery with the google CDN served jQuery.
Maybe you have conflict or noConflict somewhere else. Check this out: jQuery.noConflict
Try this code:
jQuery(document).ready(function(){alert('test')})
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....
I need to show loading image while ajaz is called....
I did some work on this....
But it was not helpful
...It is not showing loading image....
And i want to block screen when image is loading...
my ajax is here below...
----ajax---
function checkEmail(value_email_mobile) {
// before the request, show the GIF
//$('#loader').show();
if (value_email_mobile !== '') {
//alert('te');
$.ajax({
type: "POST",
url: url_check_user_avail_status,
data: "value_email_mobile="+value_email_mobile,
success: function(msg) {
//alert(msg);
//$('#psid').html("<img src='images/spacer.gif'>");
$('#loader').hide();
$('#validation').html(msg);
//
//$('#sid').sSelect({ddMaxHeight: '300px'});
},
error: function() {
//alert('some error has occured...');
},
start: function() {
//alert('ajax has been started...');
$("#loader").show();
}
});
}
}
------html--
<div id="loader" style="display:none;"><img src="<wait.png" ></div>
For one thing, your image tag is invalid <img src="<wait.png" > should look like <img src="wait.png"/>
As for the loader, $.ajax has an option called beforeSend. You can use it like so:
$.ajax({
type: "POST",
url: url_check_user_avail_status,
data: "value_email_mobile="+value_email_mobile,
beforeSend: function () {
$("#loader").show();
},
success: function(msg) { // success code here
$("#loader").hide();
});
$.ajax doesn't have start method. Instead you can just show the spinner before calling $.ajax and it will work fine.
if (value_email_mobile !== '') {
$("#loader").show();
$.ajax({
type: "POST",
url: url_check_user_avail_status,
data: "value_email_mobile="+value_email_mobile,
success: function(msg) {
$("#loader").hide();
},
error: function() {}
})
// ...
write this code is working for all ajax request fire on your website.
$( document ).ajaxStart(function() {
$("#loader").show();
});
Then write ajax stop code.
$( document ).ajaxStop(function() {
$("#loader").hide();
});
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.