use json data in javasscript function

[talisien]

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

[ddymacek]

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

[Airshow]

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

[talisien]

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

[Airshow]

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

[talisien]

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

[talisien]

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.

[Airshow]

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.
• Improved variable names avoiding "$" prefix and keywords return and class . "$" prefix vars should be used only for jQuery objects.
• jQuery's $.each(calendarEvents, ...) is used in preference to for(var i in calendarEvents){...} , with this inside loop in place of calendarEvents[i] .
• Contents of loop is simplified by addressing clss and toolTip after the loop.
• Consistent indentation for readability.

My code may not be 100% correct but you should get the idea about what simplification is possible.

Airshow

[talisien]

Thanks so much Airshow, Your code works like a charm!