I'm trying to have a dropdown menu be blocked while the ajax function populates the list, and then unblocking itself once it's done. Any idea why it's not working?
<script src="/Common/jquery.blockUI.js"></script>
function handleMoreResults (responseObj) {
$("#dimensionId").html(responseObj.DimensionValueListItem.map(function(item) {
return $('<option>').text(item.dimensionValueDisplayName)[0];
}));
}
function getMoreData()
{
jQuery.ajax({
url: GetDimensionValues,
type: "GET",
dataType: "json",
beforeSend: function () {
$.blockUI();
},
success: function (data) {
object = data;
handleMoreResults (data);
},
complete: function () {
$.unblockUI();
}
});
}
try this
$('select').block({
message: '<h1>Processing</h1>',
css: { border: '3px solid #a00' }
});
and place the block and unblock call in the global ajax methods
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
for more info see the docs here http://malsup.com/jquery/block/#element
Related
Im am using Microsoft Edge in the scenario.
I as able to successfully do a single function with a ajax syntax with this code:
<script>
document.getElementById("inputEventID").onchange = function () { myFunction() };
function myFunction() {
$.ajax({
type: 'post',
url: 'webFetchMax.php',
data: {
eventID: form.eventID.value
},
success: function (response) {
$('#divSlots').html(response);
}
});
}
</script>
However when I insert addition functions with their on ajax inside the function I am receiving $ is not defined error function monitorOccupy() as shown below:
<script>
document.getElementById("inputEventID").onchange = function () { myFunction() };
monitorOccupy();
monitorAvail();
function monitorOccupy() {
$.ajax({
type: 'post',
url: 'webFetchMax.php',
data: {
eventID: form.eventID.value
},
success: function (response) {
$('#oSlots').html(response);
},
complete: function() {
setTimeout(monitorOccupy,1000);
}
});
}
function monitorAvail() {
}
function myFunction() {
$.ajax({
type: 'post',
url: 'webFetchMax.php',
data: {
eventID: form.eventID.value
},
success: function (response) {
$('#divSlots').html(response);
}
});
}
</script>
I have no idea my is this error is showing up on my console.
Call these functions as below
$(document).ready(function(){
monitorOccupy();
MonitorAvail();
});
Before posting this question the only jQuery file in my html file was jquery.min.js
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
After inserting another jquery.min.js file my problem is solved. This is what it looks now:
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
I have a full screen loading animation whenever Ajax start (most of them are action by the user) and hide on completion. At the same time I also have Ajax call to check server status using setInterval.
How do I separate the Ajax call to check server status because it is annoying if it appear as full screen. A small loading icon beside the status is fine.
May refer to the snippet below:
$(document).ajaxStart(function() {
$.LoadingOverlay("show");
});
$(document).ajaxComplete(function() {
$.LoadingOverlay("hide");
});
$(document).ready(function() {
setInterval(ajaxCall, 3000);
function ajaxCall() {
$.ajax({
url: "action.php",
type: "POST",
data: {
'action': 'checkstatus'
},
dataType: "json",
success: function(data) {
console.log('online');
$('.serverStatus').removeClass('ssOffline');
$('.serverStatus').addClass('ssOnline').text('Online');
},
error: function(xhr, ajaxOptions, thrownError) {
console.log('offline');
$('.serverStatus').removeClass('ssOnline');
$('.serverStatus').addClass('ssOffline').text('Offline');
}
});
}
});
.ssOffline {
color: red;
}
.ssOnline {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay#1.5.4/src/loadingoverlay.min.js"></script>
<p>Server status: <label class="serverStatus">-</label></p>
You can use the global which is default true.This option can be use control global handlers like ajaxStart and ajaxStop.This will prevent the full screen loading icon from appearance.
If you want to show any other icon specific to this call you can use beforeSend handler
$(document).ajaxStart(function(event) {
console.log(event)
$.LoadingOverlay("show");
});
$(document).ajaxComplete(function() {
$.LoadingOverlay("hide");
});
$(document).ready(function() {
setInterval(ajaxCall, 3000);
function ajaxCall() {
$.ajax({
url: "action.php",
type: "POST",
data: {
'action': 'checkstatus'
},
dataType: "json",
global: false, // changed here
success: function(data) {
console.log('online');
$('.serverStatus').removeClass('ssOffline');
$('.serverStatus').addClass('ssOnline').text('Online');
},
error: function(xhr, ajaxOptions, thrownError) {
console.log('offline');
$('.serverStatus').removeClass('ssOnline');
$('.serverStatus').addClass('ssOffline').text('Offline');
}
});
}
});
.ssOffline {
color: red;
}
.ssOnline {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay#1.5.4/src/loadingoverlay.min.js"></script>
<p>Server status: <label class="serverStatus">-</label></p>
You can set a property at jQuery.ajax() settings object, substitute using beforeSend at $.ajaxSetup() for .ajaxStart(), check if the current settings have the property set
function log(message) {
$("pre").text(function(_, text) {
return text + message + "\n"
})
}
// does not provide `settings` or `jqxhr` as argument
// we do not perform logic evaluation of current `$.ajax()` call here
$(document).ajaxStart(function() {
log("ajax start");
});
$(document)
.ajaxComplete(function(e, jqxhr, settings) {
if (!settings.pollRequest) {
log("not poll request complete\n");
// $.LoadingOverlay("hide");
} else {
log("poll request complete\n");
}
});
$.ajaxSetup({
beforeSend: function(jqxhr, settings) {
if (settings.pollRequest) {
log("poll request beforeSend");
// $.LoadingOverlay("show");
} else {
log("not poll request beforeSend");
}
}
});
$(document).ready(function() {
setInterval(ajaxCall, 3000);
function ajaxCall() {
"ajaxCall";
$.ajax({
url: "data:text/plain,",
pollRequest: true
});
}
$("button").on("click", function() {
$.ajax("data:text/plain,")
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<button>
click
</button>
<pre></pre>
jsfiddle https://jsfiddle.net/5hfty5mc/
I have 1 POST ajax and 1 GET ajax, and I have this:
$(document).ready(function () {
$(document).ajaxStart(function () {
$("#div28").show();
});
$(document).ajaxStop(function () {
$("#div28").hide();
});
});
It is for showing the LoadingGif, at this point it is showing for both Ajax requests, so what should I do to make the LoadingGif show only when the POST type ajax is working?
EDIT:
Here are my ajax functions:
$(document).ready(function () {
$.ajax({
contentType: "application/json; charset=utf-8",
type: 'GET',
url: 'api/Appointments/',
dataType: 'json',
success: function (result) {
if ((result.AppTime = "9:00") && (result.AppWithYritys = "Laakkonen")) {
document.getElementById("A9").style.background = "red";
}
else {
alert("error1");
}
},
error: function (error) {
alert("error");
},
});
});
and the POST ajax:
var request = $.ajax({
type: "POST",
data: JSON.stringify(app),
url: "/api/Appointments",
contentType: "application/json",
dataType: "html"
});
request.done(function (data) {
if (data != -1) {
alert("You Have successfully made an appointment");
location.assign("http://tid.fi");
}
else {
alert("There has been an error!");
}
});
request.fail(function (gr) {
location.assign("http://google.com");
});
};
POST ajax is in a custom function which is trigger on a button-click. Just an info.
using ajaxSend and ajaxComplete you can see what the "type" of request is
However, you'll need to keep a count of active requests too - possibly not required for your simple page - but it's good to have
$(document).ready(function () {
var started = 0;
$(document).ajaxSend(function (event, jqXHR, settings) {
if (settings.type == 'POST') {
if(!(started++)) { // only need to show on the first simultaneous POST
$("#div28").show();
}
}
});
$(document).ajaxComplete(function (event, jqXHR, settings) {
if (settings.type == 'POST') {
if(!(--started)) { // only hide once all simultaneous POST have completed
$("#div28").hide();
}
}
});
});
Solution without counters
$(document).ready(function () {
$(document).ajaxSend(function (event, jqXHR, settings) {
if (settings.type == 'POST') {
$("#div28").show();
}
});
$(document).ajaxStop(function () {
$("#div28").hide();
});
});
This will show on POST, and hide once all ajax has stopped - a little less obvious, but it's probably just as valid a solution
I think the easiest option is to create a tiny functions that you can use:
function showLoading(isLoading){
if(isLoading){
$("#div28").show();
}
else{
$("#div28").hide();
}
};
Then use as documented here Ajax events
just use the function either using the global events for your specific post or call the function directly on the beforeSend and complete event hooks.
As title, I tried load data from ajax to zabuto calendar, but seem it's not working, ref of zabuto calendar http://zabuto.com/dev/calendar/examples/show_data.html. And i want to use this function load data when click nav prev month or next month. (use two action action and action_nav). This is snipped code
<script>
$(document).ready(function () {
function load_data() {
var list = '';
$.ajax({
type: "POST",
url: "../BUS/WebService.asmx/LOAD_DATA",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {
list = $.parseJSON(data.d);
console.log(list);
}
});
return list;
}
function myNavFunction(id) {
//code in here
}
function myDateFunction(id) {
//code in here
}
$("#my_calendar").zabuto_calendar({
data: load_data(),
action: function () {
return myDateFunction(this.id);
},
action_nav: function () {
return myNavFunction(this.id);
}
});
});
</script>
When i test this, data not show, the data from ajax as
{ "date": "2016-06-01", "title": 2, "badge": true },{ "date": "2016-06-04", "title": 1, "badge": true },{ "date": "2016-06-10", "title": 1, "badge": true }
Thank you so much.
Try the following: you need to place the calendar function in the success function of the ajax call because ajax is asynchronous
$(document).ready(function () {
function load_data() {
$.ajax({
type: "POST",
url: "../BUS/WebService.asmx/LOAD_DATA",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {
var list = $.parseJSON(data.d);
$("#my_calendar").zabuto_calendar({
data: list;
});
},
error: function (data) {
console.log(data.d);
}
});
}
load_data();
});
I solved the issue by the code as below. It works well in window's browser but not in a mobile browser.
function initZabuto(id, events, month){
$('#zabuto_parent').empty().append("<div id='"+id+"'></div>");
$("#"+id).zabuto_calendar({
year:moment(month).format("YYYY"),
month:moment(month).format("MM"),
language:"cn",
data: events,
action: function () {
zabutoDayClick(this.id);
},
action_nav: function () {
zabutoMonthChange(this.id);
}
});
}
This is the code I used to refresh Zabuto calendar after a modal. The problem with other options is that upon refresh, Zabuto would create a new batch of modals appended to the current body. This solutions clears all those "old" modals and opens room for the new. Key area is the success section of the modal update ajax.
$(document).ready(function () {
$("#date-popover").popover({html: true, trigger: "manual"});
$("#date-popover").hide();
$("#date-popover").click(function (e) {
$(this).hide();
});
load_calendar();
});
function load_calendar() {
$("#my-calendar").zabuto_calendar({
show_next: 1,
action: function () {
return myDateFunction(this.id, false);
},
ajax: {
url: "calendar-info.php",
modal: true
},
});
}
function myDateFunction(id, fromModal) {
$("#date-popover").hide();
if (fromModal) {
$("#" + id + "_modal").modal("hide");
var date = $("#" + id).data("date");
var optradio = $("#" + id + "_modal").find("input[name='optradio']:checked").val();
$.ajax("calendar-update.php?status="+optradio+"&date="+date, {
success: function(data) {
$(".modal").remove();
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
$("#my-calendar").empty();
load_calendar();
},
error: function() {
alert("Problem!");
}
});
}
var hasEvent = $("#" + id).data("hasEvent");
if (hasEvent && !fromModal) {
return false;
}
return true;
}
I have the following js code:
$("#add_station").on('click', function () {
$(this).closest('form').submit(function () {
alert("working!");
$.ajax({
url: advoke.base_url + "/new-vendor-user/station/ajax",
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: new FormData(this),
beforeSend: function () {
$('.info').hide().find('ul').empty();
$('.success_message').hide().find('ul').empty();
$('.db_error').hide().find('ul').empty();
},
success: function (data) {
if (!data.success) {
$.each(data.error, function (index, val) {
$('.info').find('ul').append('<li>' + val + '</li>');
});
$('.info').slideDown();
setTimeout(function () {
$(".info").hide();
}, 5000);
} else {
$('.success_message').slideDown();
$('#add_station').remove();
$("#station").append(data.new_station);
setTimeout(function () {
$(".success_message").hide();
}, 5000);
} //success
},
error: function () {
//db error
$('.db_error').append('<li>Something went wrong, please try again!</li>');
$('.db_error').slideDown();
//Hide error message after 5 seconds
setTimeout(function () {
$(".db_error").hide();
}, 5000);
} //error
});
});
return false;
});
When I click the button with the id add_station it alerts on click function after $($this).closest('form').submit(function(){...) it doesn't work as you can see I've put an alert 'works' after submit function.I get no errors on the console and I can't figure what the problem is. Also, the button that is clicked is inside a form.
I need to use $($this).closest('form').submit(function(){...) inside because after ajax success a new form will be generated with add station button that will use this code.
You should block the default submit trigger by using
e.preventDefault();
$(this).closest('form').submit(function (e) {
e.preventDefault();
<!--rest of the code-->
})
add a separately submit handler
$("#add_station").on('click', function () {
$(this).closest('form').submit();
});
$("form").on("submit", function (e) {
e.preventDefault();
alert("working!");
$.ajax({
url: advoke.base_url + "/new-vendor-user/station/ajax",
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: new FormData(this),
beforeSend: function () {
$('.info').hide().find('ul').empty();
$('.success_message').hide().find('ul').empty();
$('.db_error').hide().find('ul').empty();
},
success: function (data) {
if (!data.success) {
$.each(data.error, function (index, val) {
$('.info').find('ul').append('<li>' + val + '</li>');
});
$('.info').slideDown();
setTimeout(function () {
$(".info").hide();
}, 5000);
} else {
$('.success_message').slideDown();
$('#add_station').remove();
$("#station").append(data.new_station);
setTimeout(function () {
$(".success_message").hide();
}, 5000);
} //success
},
error: function () {
//db error
$('.db_error').append('<li>Something went wrong, please try again!</li>');
$('.db_error').slideDown();
//Hide error message after 5 seconds
setTimeout(function () {
$(".db_error").hide();
}, 5000);
} //error
});
});
after ajax success a new form will be generated with add station
button that will use this code
If you generate a new button you have to bind the click again after it is placed to the dom.