Hi all,
How do I use data from json in a javascript function?
I have something like this!
$('#monday').click(function(){
test();
});
function test() {
$.getJSON('singleday.php?dld='+ id+'&chkdag=' + 1, function(json) {sday=json});
OtherFunction();
}
Now I want to transfer the json date into an other function. something like this
function OtherFunction() {
for (var i in sday) {
// do somthing
}
}
I just can 't figure it out how?
Leon
try to assign your get function to a variable...
function test() {
var data
data = $.getJSON('singleday.php?dld='+ id+'&chkdag=' + 1, function(json) {sday=json});
OtherFunction(data);
}
function OtherFunction(data) {
for (var i in sday) {
// do somthing
}
}
try to assign your get function to a variable...
function test() { var data data = $.getJSON('singleday.php?dld='+ id+'&chkdag=' + 1, function(json) {sday=json}); OtherFunction(data); } function OtherFunction(data) { for (var i in sday) { // do somthing } }
I'm afraid that won't work because $.getJSON returns jqXHR, not the required JSON-decoded object/array. (There's no point handling the jqXHR object in this way unless you need to break out of jquery's way of doing things).
Try this:
function test() {
$.getJSON('singleday.php?dld='+ id+'&chkdag=' + 1, function(obj) {
OtherFunction(obj);
});
}
function OtherFunction(sday) {
for (var i in sday) {
// do somthing
}
}Airshow
I need to explain why I it has to break out of jquery's way.
It is a follow up on this thread
http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/398349
It checks dates in a database and disables them in datepicker
Now I want to add an extra feature that when a day (for example monday) is selected all dates found for monday in the database are being disabled and the remaining dates are enabled and all other days are disabled
My code looks something likes this:
$('#monday').click(function() {
day = 1;
singleday(day);
});
function singleday(dag){
$.getJSON('script/php/afwijkendrooster/singleday.php?dld='+ id+'&chkdag=' + day, function(obj){
$('#datepicker').datepicker('show');
});
}
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
showWeek: true,
beforeShowDay: checkAvailability2
});
function checkAvailability2(date, obj){
var days = date.getDay();
var obj;
var $return=true;
var $returnclass ="available";
var $checkdate = $.datepicker.formatDate('dd-mm-yy', date);
// code for checking dates in database
for(var i in dates)
{
if(dates[i].start == $checkdate) {
$return = false;
$returnclass= "unavailable";
}
}
// code for enabling selected day
for ( var x in obj) {
if(days == obj[x].daynr) {
$return = false;
}
}
return [$return,$returnclass];
}When I do an alert(obj) it says undefined.
What am I missing here?
Leon
Leon,
I can't quite understand what you are trying to achieve but the simple answer is that you declare obj as a formal variable in checkAvailability2 's argument list, then re-declare obj with the statement var obj; . This nullifies obj , as formally passed.
Airshow
After a long search and trying things I ended up with this code
$.ajax({
url: 'script/php/afwijkendrooster/checkDates.php?dld='+ id,
data: "dates=json",
dataType: "json",
success: function(calendarEvents){
$("#datepicker").datepicker({
showWeek: true,
beforeShowDay: function (date){
var day = date.getDay();
var $return=true;
var $returnclass ="available";
var $checkdate = $.datepicker.formatDate('dd-mm-yy', date);
for (var i in calendarEvents) {
// disable dates found in database
if(calendarEvents[i].start == $checkdate) {
$return = false;
$returnclass= "unavailable";
// show event on hover day
var eventDate = calendarEvents[i].start;
var eventTitle = calendarEvents[i].title;
if(eventDate) {
var $output = eventTitle;
}
}
// disablem days that are not active
if(calendarEvents[i].dagnr == day) {
$return = false;
$returnclass= "unavailable";
}
// show message for days that are not
active on hover day
if(!eventDate && !$return && $returnclass){
var $output = 'dit is geen actief dagdeel!';
}
// show message for days that are active and available for input
on hover day
if(!eventDate && $return && $returnclass){
var $output = 'open form here';
}
}
return [$return,$returnclass, $output];
}
});
}
});Resources:
jQuery UI: Highlight multiple dates in jquery datepicker
show events
Next thing to do is disabling holidays, but that won't be that difficult. Simply adding a new table to the database fill it with dates and name of holidays and do some recoding in the php database call. I also want to add some color to the events for making things cleared for the user.
This code is part of an timemanagement s
After a long search and trying things I ended up with this code
$.ajax({
url: 'script/php/afwijkendrooster/checkDates.php?dld='+ id,
data: "dates=json",
dataType: "json",
success: function(calendarEvents){
$("#datepicker").datepicker({
showWeek: true,
beforeShowDay: function (date){
var day = date.getDay();
var $return=true;
var $returnclass ="available";
var $checkdate = $.datepicker.formatDate('dd-mm-yy', date);
for (var i in calendarEvents) {
// disable dates found in database
if(calendarEvents[i].start == $checkdate) {
$return = false;
$returnclass= "unavailable";
// show event on hover day
var eventDate = calendarEvents[i].start;
var eventTitle = calendarEvents[i].title;
if(eventDate) {
var $output = eventTitle;
}
}
// disablem days that are not active
if(calendarEvents[i].dagnr == day) {
$return = false;
$returnclass= "unavailable";
}
// show message for days that are not
active on hover day
if(!eventDate && !$return && $returnclass){
var $output = 'dit is geen actief dagdeel!';
}
// show message for days that are active and available for input
on hover day
if(!eventDate && $return && $returnclass){
var $output = 'open form here';
}
}
return [$return,$returnclass, $output];
}
});
}
});Resources:
jQuery UI: Highlight multiple dates in jquery datepicker
show events
Next thing to do is disabling holidays, but that won't be that difficult. Simply adding a new table to the database fill it with dates and name of holidays and do some recoding in the php database call. I also want to add some color to the events for making things cleared for the user.
This code is part of an time management system which will run localy.
Talisian,
I think your code will simplify, maybe as simple as this:
$.ajax({
url: 'script/php/afwijkendrooster/checkDates.php',
data: {dld:id, dates:"json"},
dataType: "json",
success: function(calendarEvents){
$("#datepicker").datepicker({
showWeek: true,
beforeShowDay: function (date){
var enable = true,
checkdate = $.datepicker.formatDate('dd-mm-yy', date),
toolTip,
clss;
$.each(calendarEvents, function() {
if(this.start == checkdate) {
enable = false;
toolTip = this.title;
}
if(this.dagnr == date.getDay()) { enable = false; }
});
clss = enable ? "available" : "unavailable",
if(!toolTip){
toolTip = enable ? 'open form here' : 'dit is geen actief dagdeel!';
}
return [enable, clss, toolTip];
}
});
}
});untested
Notes:
data: {dld:id, dates:"json"} avoids hybrid composition of url's querystring.return and class . "$" prefix vars should be used only for jQuery objects.$.each(calendarEvents, ...) is used in preference to for(var i in calendarEvents){...} , with this inside loop in place of calendarEvents[i] .clss and toolTip after the loop.My code may not be 100% correct but you should get the idea about what simplification is possible.
Airshow
Thanks so much Airshow, Your code works like a charm!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.