We Keep Coding

How can I check if there are changes in my database

What I want is a technique to refresh my div if there are changes in my database. Here is the point,
What i want: How can i condition to know if the first value from my database is lesser than the upcomming value.
In my situation, i put my ajax function to be run every 5secs here is it:
lastcountQueue is declared as global in javascript
function check_getqueue() {
$.ajax({
url: siteurl+"sec_myclinic/checkingUpdates/"+clinicID+"/"+userID,
type: "POST",
dataType: "JSON",
success: function(data) {
lastcountQueue = data[0]['count'];
}
});
}
Q:where would i put the condition something if lastcountQueue < data[0]['count]; condition means something if the data is lesser than lastcountQueue it means there was a change in my database portion.
Another Clear Situation for my question:
I want to make a function like these: the ajax will run every 5 seconds where it query a value to count my no. of queues in database. If my first query is giving me 5 value, and the second is giving me again another 5, then there must be nothing change happens, then if my third value gives me 4, where it is not equal to the last query, then i would do something

Probably something like this:
function check_getqueue() {
$.ajax({
url: siteurl+"sec_myclinic/checkingUpdates/"+clinicID+"/"+userID,
type: "POST",
dataType: "JSON",
success: function(data) {
var tmpCountQ = data[0]['count'];
if (tmpCountQ < lastcountQueue) {
// Process the change
}
lastcountQueue = tmpCountQ;
}
});
}

Here is the updated answer:
function check_getqueue() {
$.ajax({
url: siteurl + "sec_myclinic/checkingUpdates/" + clinicID + "/" + userID,
type: "POST",
dataType: "JSON",
success: function(data) {
if (data[0]['count'] != lastcountQueue) {
//Your logic here
lastcountQueue = data[0]['count'];
}
}
});
}

How to disable dates in jQuery UI Datepicker after onChangeMonthYear

I've seen solutions using the onBeforeShowDay but that is not what I need. What I need is when changing the either Month or Year I need to get a list of dates via AJAX and then use that list to disable the days in the current month.
Example
$('#date_input').datepicker( "option", "onChangeMonthYear", function(year,month,inst) {
// Perform AJAX call and get the list
$.ajax({
url: ajaxUrl,
type: "post",
data: serializedData,
async: false,
success: function (data) {
// Here is where I want to update the display
// and use the returned data as the basis for the disabled list
// of the current month.
// Let's say:
// data = ['2015-10-15','2015-10-25','2015-10-13'];
}
});
});
EDIT
Thanks for the solution. To be specific, I was using the dynamic approach by adding the callback dynamically. Also it is important that AJAX call need to have async: false in order to get the correct data set on the array.
$('#date_input').datepicker( "option", "onChangeMonthYear", function(year,month,inst) {
// The ajax call.
});
So I just followed the answer and added:
$('#date_input').datepicker( "option", "beforeShowDay", function(date) {
// Update the list.
});
Again, much thanks!

you can still use the onBeforeShowDay, since it will get called before the datepicker is displayed, because changing months will make the datepicker to render again.
You can use an array that stores the list of dates and change this based on the result from your ajax call. e.g
//at first only september dates will be disabled.
var array = ["2015-09-23","2015-09-24","2013-09-16"];
$('input').datepicker({
onChangeMonthYear: function(year, month, inst) {
// Perform AJAX call and get the list
//override the array, and now the october dates will be disabled.
$.ajax({
url: ajaxUrl,
type: "post",
data: serializedData,
async: false,
success: function (data) {
array = data; //["2015-10-23","2015-10-24","2013-10-16"];
}
});
},
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('yyyy-mm-dd', date);
return [array.indexOf(string) == -1 ]
}
});
here is the working fiddle

Javascript autocomplete with ajax call order

I have simple autocomplete input field with Javascript like this:
$('#search').on('keyup', function () {
var query = $(this).val();
$.ajax({
type: "GET",
url: "/search",
data: { query: query }
}).done(function (results) {
showSearchResults(results);
});
});
Sometimes first call takes more time then second or third and results are overridden.
How can I make sure that results only from the latest successful call are displayed?
I mean if I got response from call #3 - I no longer care about calls #1 and #2 and don't want them to override results of call #3.

Ajax function is in default asynchronous it means that many of functions can run on same time. If You wrote 3 letters it will run 3 times, after 3 keyups. If you want to run function in sequence just add setting async: false.
$.ajax({
type: "GET",
url: "/search",
async: false,
data: { query: query }
}).done(function (results) {
showSearchResults(results);
});
But i think You should add some delay, so function will not run immediately after every keyup, just after last one.

I suggest that you bind an incremental id to each ajax request that you send. When you get a response, just check that it carries last given id.
let lastXHRid=0; // tracker of last sent ajax request
$('#search').on('keyup', function () {
let reqXHR = $.ajax({ // create a variable out of $.ajax returned value
type: "GET",
url: "/search",
data: { query: $(this).val() }
});
lastXHRid++; // increment the XHR counter
reqXHR.id = lastXHRid; // attach id to the request
reqXHR.done(function(results, status, respXHR) {
if ( respXHR.id == lastXHRid ){ // compare id of received and last sent requests
showSearchResults(results);
}
});
});
(Edit: I initially suggested tracking the unix timestamp of last sent request, but as #seth-battis suggested in the comments, a sequence number is far enough. As a bonus, I also debugged my sample snippet!)

Uncaught TypeError: object is not a function (in AJAX callback)

I am trying to update a FullCalendar object using a function that receives an array of events.
$('#sh1_cal').fullCalendar({
events: function(callback) {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/getEvents',
dataType: 'json',
success: function(reply) {
//var events = [];
console.log("printing " + reply.first)
alert(typeof reply.first);
callback(reply.first);
}
});
}
});
Reply is intended to be an object containing two arrays as its properties. I'm extracting the first, and it seems that the typeof alert is returning the correct type, but the callback is not working. Any suggestions?

I have not used this plugin but from the docs (http://arshaw.com/fullcalendar/docs/event_data/events_function/) it looks like the events function takes 3 parameters: start, end, and callback.
Start and end are date objects indicating when the event starts and ends. The way you have it now, that function thinks there is a date object called 'callback' which is why you're getting the error. In JavaScript the name of the parameter is not important (for example you can call it 'cb' or 'foo' instead of 'callback') but the order is.
Try (untested):
$('#sh1_cal').fullCalendar({
events: function(start, end, callback) {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/getEvents',
dataType: 'json',
success: function(reply) {
callback(reply.first);
}
});
}
});

Try this:
$('#sh1_cal').fullCalendar({
events: 'http://localhost:8080/getEvents'
});
Shouldn't be any need for writing your own ajax call, it's built in.
If that doesn't work, can you post the output of your JSON feed?

try this and let me know if it works:
$('#sh1_cal').fullCalendar({
events: function(cb) {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/getEvents',
dataType: 'json',
success: function(reply) {
return cb(reply.first);
//or try: cb(reply.first);
}
});
}(callback)
});
if not that, remove the return on the callback.
did either work?
*please note: I assume that "callback" is a function you are passing in and have instantiated it somewhere.

Event (As Function) in fullcalendar has been changed. Now the third parameter is timezone.
Further information on FullCalendar Documentation v2

Alternatives to global variables?

I'm trying to wrap my head around alternatives for global variables.
Case in question is one where I need to find values in one XML and compare against another XML (or more). Since the XML JQuery is, itself, a function and the operations beneath that are functions inside of a function (ugh) I can't get a value from 2 functions deep and use it globally.
So it's presently not possible for me to get an XML value from 1 file and use it filter another XML file, and that's where I need help.
I've been handed 3 XML files.
File 1 - categories.xml - contains a mapping of categories
ex...
<CAT>
<OA1>True</OA1>
<OA2>False</OA2>
<OA3>True</OA3>
<EP1>True</EP1>
<EP2>False</EP2>
<EP3>False</EP3>
</CAT>
File 2 = oa.xml - contains the values of each OA record
ex...
<OA>
<Name>Name 1</Name>
<City>City</City>
<State>ST</State>
</OA>
and so on...
File 3 = EP.xml - contains the values of each EP record
Copy code
<EP>
<object 1></object1>
<object 2></object2>
<object 3></object3>
</EP>
Now, what I thought I could do when I started was to allow the user to select a category, and based upon that selection return 2 tables containing the values that mapped to that category.
My problem is that when JQuery starts parsing XML it does it in a function (in all examples I've seen) so I have no idea how to set a variable inside of one function and use it inside of the next function used to open the 2nd file, or the 3rd.
Here is what I have now:
Copy code
<script>
var catid = ""; // I thought this, being outside of the function would be a global varaible
OA1 = ""; // I tried it with and without var in front
var OAid = "";
$(document).ready(function(){ //When opening an XML we do it in a function
$.ajax({
type: "GET",
url: "xml/categories.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Cat').each(function(){
//Next 2 rows don't matter b/c I can't use their values outside
//of the function
var catid = $(this).find('Catid').text();
var OA1 = $(this).find('OA1').text();
$('<div class="page-wrap"></div>').html('<table><tr><td>' + catid +'</td><td>OA1 '+ OA1 +'</td></tr></table></div>').appendTo('#page-wrap');
});
}
});
});
//The only way I know how to open up the next XML, start all over again
$(document).ready(function(){
$.ajax({
type: "GET",
url: "xml/OA.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('OAData').each(function(){
var OAid = $(this).find('OAid').text();
$('<div class="page-wrap"></div>').html('<table><tr><td>OA ID is '+ OAid +'</td></tr></table></div>').appendTo('#page-wrap');
});
}
});
});
</script>
//Somebody shoot me
ANY ADVICE would be most appreciated - I haven't been able to even consider the compare operation b/c of the variable issue.
Is there a way to compare 2 XML files and I'm just missing it, or can you recommend a solution using some sort of temporary location?

So taking the suggestion of #Kevin B and enhancing it a bit, you can pass values to your different success handler functions easily if you factor those functions out into separate functions.
<script>
var catid = ""; // I thought this, being outside of the function would be a global varaible
OA1 = ""; // I tried it with and without var in front
var OAid = "";
$(document).ready(function(){ //When opening an XML we do it in a function
$.ajax({
type: "GET",
url: "xml/categories.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Cat').each(function(){
//Next 2 rows don't matter b/c I can't use their values outside
//of the function
var catid = $(this).find('Catid').text();
var OA1 = $(this).find('OA1').text();
$('<div class="page-wrap"></div>').html('<table><tr><td>' + catid +'</td><td>OA1 '+ OA1 +'</td></tr></table></div>').appendTo('#page-wrap');
});
$.ajax({
type: "GET",
url: "xml/OA.xml",
dataType: "xml",
success: function(xml) { getCategoriesSuccess(xml, catid, OA1, OAid); }
});
}
});
});
function getCategoriesSuccess(xml, catid, OA1, OAid) {
$(xml).find('Cat').each(function(){
//Next 2 rows don't matter b/c I can't use their values outside
//of the function
var catid = $(this).find('Catid').text();
var OA1 = $(this).find('OA1').text();
$('<div class="page-wrap"></div>').html('<table><tr><td>' + catid +'</td><td>OA1 '+ OA1 +'</td></tr></table></div>').appendTo('#page-wrap');
});
$.ajax({
type: "GET",
url: "xml/OA.xml",
dataType: "xml",
success: function(xml) { getOASuccess(xml, OAid); }
});
});
}
function getOASuccess(xml, OAid){
$(xml).find('OAData').each(function(){
var OAid = $(this).find('OAid').text();
$('<div class="page-wrap"></div>').html('<table><tr><td>OA ID is '+ OAid +'</td></tr></table></div>').appendTo('#page-wrap');
});
}
</script>
So inside your $(document).ready()'s ajax call's success handler, you make a second ajax call as #Kevin B suggested. You can pass additional data to this by wrapping a function call inside your success handler. And I'll pass the data that a second nested function call (inside getCategoriesSuccess) needs in that first call so that it's available for the second call. So that's why I pass OAid in the first nested function call because it's needed inside of getOASuccess.
I'm sure there are other ways to do this, but this gives you a bit of flexiblity with your success handlers.
I hope this helps. Let me know if there are additional questions and I'll update my answer accordingly. Good luck!