We Keep Coding

Conditionally handle ajax request

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/

JQuery creating button but not clickable

I have code that creates the body of a html-file.
I create it with JQuery.
The code is as followed:
SCRIPT JS
$(document).ready(function(){
homePage();
});
function homePage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
success: function (response) {
var data = response;
var html = $("<h1></h1>").text(data.title);
var br = $("<br>");
var eventbtn = $('<input />', {
type : 'button',
id : 'eventbutton',
value : 'Events',
on : {
click: getevents(data.events)
}
});
html.append(br,eventbtn).appendTo($("body"));
},
error: function(error){
console.log("the page was not loaded", error);
},
});
}
function getevents(url){
console.log(url);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="script.js"></script>
</head>
</body>
</html>
The function homePage is directly called when you open the index.html.
It does work, I see a header and a button, however the code is automatically triggers, it prints the url in the console. But when I click on it, it doesn't print it in the console.
How do I need to change my code in order to get a button that only prints the given url when I click on the button?

Try setting data-url attribute and then access it using $(this):
function homePage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
success: function (response) {
var data = response;
var html = $("<h1></h1>").text(data.title);
var br = $("<br>");
var eventbtn = $('<input />', {
type : 'button',
id : 'eventbutton',
value : 'Events',
});
eventBtn.addClass('dynamic-btn');
eventbtn.data('url', data.events);
html.append(br,eventbtn).appendTo($("body"));
},
error: function(error){
console.log("the page was not loaded", error);
}
});
}
$(document).on('click', '.dynamic-btn',
function (e) {
console.log($(this).data('url'));
});

Add click function to the button after it has already been appended to the body:
function homePage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
success: function (response) {
var data = response;
var html = $("<h1></h1>").text(data.title);
var br = $("<br>");
var eventbtn = $('<input />', {
type : 'button',
id : 'eventbutton',
value : 'Events',
on : {
click: getevents(data.events)
}
});
html.append(br,eventbtn).appendTo($("body"));
eventbtn.click(getevents(data.events));
},
error: function(error){
console.log("the page was not loaded", error);
}
});
}

$(document).ready(function(){
homePage();
});
function homePage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
success: function (response) {
var data = response;
var html = "<h1>"+data.title+"</h1>";
html += "<br>";
html += '<input type="button" id="eventbutton" value="Events"/> ';
$("body").append(html);
$('input').click(function(){
getevents(data.events);
});
},
error: function(error){
console.log("the page was not loaded", error);
},
});
}
function getevents(url){
console.log(url);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

TypeError: ui is undefined with jQuery

I a have a Bootstrap Typeahead function, what I want to customize a little bit. If the user clicks on any of the items in the result dropdown list, the user would be redirected to one subpage. The typeahead function is working great, the dropdown list is populated without any error, this is one example what is return from the php file:
[{"name":"TEXT-ONE","url":"\/textone-postfix"},{"name":"TEXT-TWO","url":"\/texttwo-postfix"},{"name":"TEXT-THREE"
,"url":"\/textthree-postfix"}]
The idea is, that the "name" attribute is displayed to the user and after click, it's redirects to the "url" attribute.
The problem is that right now after I click on ANY of the items I get this error (Firefox Firebug console output):
TypeError: ui is undefined
This is my jQuery function and before that the .js imports:
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/bootstrap/js/ie10-viewport-bug-workaround.js"></script>
<script src="/bootstrap/js/bootstrap3-typeahead.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$('#namesearch').typeahead({
source: function(request, response) {
$.ajax({
url: '/functions/search-autocomplete.php',
type: 'POST',
dataType: 'JSON',
data: 'query=' + request,
success: function(data) {
response($.map(data, function(item) {
return {
url: item.url,
value: item.name
}
}))
}
})
},
displayText: function(item) {
return item.value
},
select: function( event, ui ) {
window.location.href = ui.item.url;
}
});
});
});
</script>
</body>
Can someone help me please, what's the problem here?
Thank you very much!

updater function was the solution:
$(document).ready(function() {
$(function() {
$('#namesearch').typeahead({
source: function(request, response) {
$.ajax({
url: '/functions/search-autocomplete.php',
type: 'POST',
dataType: 'JSON',
data: 'query=' + request,
success: function(data) {
response($.map(data, function(item) {
return {
url: item.url,
value: item.name
}
}))
}
})
},
displayText: function(item) {
return item.value
},
updater: function (item) {
window.location.href = item.url
},
});
});
});

How to load data from ajax to zabuto calendar plugin?

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;
}

How to get a short snippet of text and the main image of Wikipedia articles by API?

I'm trying to create a simple clone of Wikipedia that allows the user to search for a subject, and then display 10 results that contain the article's image and a short snippet of text. I've been able to pass the user supplied search field to my .ajax() call with no problem. But now I'm unable to retrieve the images, I've read all the other posts on StackOverflow regarding this problem, but have no success.
$(document).ready(function() {
var input = $('input');
var button = $('button');
//Create varialbe to store search field
var toSearch = '';
//Api data:
var searchUrl = 'https://en.wikipedia.org/w/api.php';
//.ajax() to get articles
var ajaxArticle = function() {
$.ajax({
url: searchUrl,
dataType: 'jsonp',
data: {
action: 'query',
format: 'json',
prop: 'extracts',
exchars: '200',
exlimit: 'max',
explaintext: '',
exintro: '',
rawcontinue: '',
generator: 'search',
gsrsearch: toSearch,
gsrnamespace: '0',
gsrlimit: '10'
}, //End data:
success: function(json1) {
console.log(json1);
}
}); //End .ajax()
}
//.ajax() to get images
var ajaxImage = function() {
$.ajax({
url: searchUrl,
dataType: 'jsonp',
data: {
'action': 'query',
'titles': toSearch,
'prop': 'pageimages',
'format': 'json'
}, //End data:
success: function(json2) {
console.log(json2)
}
}); //End .ajax()
}
//Auto complete search bar
input.autocomplete({
source: function(request, response) {
$.ajax({
url: searchUrl,
dataType: 'jsonp',
data: {
'action': "opensearch",
'format': "json",
'search': request.term
},
success: function(data) {
response(data[1]);
}
});
}
}); //End auto compelete
//Listen for click on button to store search field
button.click(function() {
toSearch = input.val();
ajaxArticle();
ajaxImage();
}); //End click handler
})
<html>
<body>
<head>
<title>My Wikipedia Viewer</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
</head>
<section>
<input type='text' value='' placeholder='Search for...'>
<button>Make it so</button>
</section>
<section class='articles'></section>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type='application/javascript' src='js/script.js'></script>
</html>
I appreciate any help that may be provided.

You can retrieve the text and the images in one request, try this:
$(document).ready(function () {
var articles = $('.articles');
var input = $('input');
var button = $('button');
var toSearch = '';
var searchUrl = 'https://en.wikipedia.org/w/api.php';
var ajaxArticleData = function () {
$.ajax({
url: searchUrl,
dataType: 'jsonp',
data: {
//main parameters
action: 'query',
format: 'json',
generator: 'search',
//parameters for generator
gsrsearch: toSearch,
gsrnamespace: 0,
gsrlimit: 10,
prop: 'extracts|pageimages',
//parameters for extracts
exchars: 200,
exlimit: 'max',
explaintext: true,
exintro: true,
//parameters for pageimages
piprop: 'thumbnail',
pilimit: 'max',
pithumbsize: 200
},
success: function (json) {
var pages = json.query.pages;
$.map(pages, function (page) {
var pageElement = $('<div>');
//get the article title
pageElement.append($('<h2>').append($('<a>').attr('href', 'http://en.wikipedia.org/wiki/' + page.title).text(page.title)));
//get the article image (if exists)
if (page.thumbnail) pageElement.append($('<img>').attr('width', 150).attr('src', page.thumbnail.source));
//get the article text
pageElement.append($('<p>').text(page.extract));
pageElement.append($('<hr>'));
articles.append(pageElement);
});
}
});
};
input.autocomplete({
source: function (request, response) {
$.ajax({
url: searchUrl,
dataType: 'jsonp',
data: {
'action': "opensearch",
'format': "json",
'search': request.term
},
success: function (data) {
response(data[1]);
}
});
}
});
button.click(function () {
articles.empty();
toSearch = input.val();
ajaxArticleData();
});
});
<!DOCTYPE html>
<html>
<head>
<title>My Wikipedia Viewer</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
</head>
<body>
<section>
<input type='text' value='' placeholder='Search for...'>
<button>Search</button>
</section>
<section class='articles'></section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</body>
</html>