Retrive data from DB , make an array and send it to a .js file.

Using the code in the console it works.

My data.php file in the js/data.php is
[php]<?php
header(‘Content-Type: application/json’);
include ‘config.php’;

$query = mysql_query(“SELECT str_data ,occasione FROM Evento”);

$arraydata = array();
$arraynome = array();

while($row = mysql_fetch_assoc($query)){

$arraydata[] = date(“m-d-Y”, $row[‘str_data’]);
$arraynome[] = $row[‘occasione’];

}

$datanome = array_combine($arraydata, $arraynome);

// Output it as JSON
echo json_encode($datanome);

?> [/php]

Maybe the problem is how i implement the script

[php] $.get(“js/data.php”)
.done(function(data) {
$("#calendar").calendario().setData(data)
})
.fail(function() {
console.log(‘failed’)
});[/php]

into my index2.html ?
[php]$(function() {

			var transEndEventNames = {
					'WebkitTransition' : 'webkitTransitionEnd',
					'MozTransition' : 'transitionend',
					'OTransition' : 'oTransitionEnd',
					'msTransition' : 'MSTransitionEnd',
					'transition' : 'transitionend'
				},
				transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
				$wrapper = $( '#custom-inner' ),
				$calendar = $( '#calendar' ),
				cal = $calendar.calendario( {
					onDayClick : function( $el, $contentEl, dateProperties ) {

						if( $contentEl.length > 0 ) {
							showEvents( $contentEl, dateProperties );
						}

					},
					caldata: function() {
					$.get("js/data.php")
					.done(function(data) {
					$calendar.setData(data);
					})
					.fail(function() {
						console.log('failed')
					});
					return [];
					},
					displayWeekAbbr : true
				} ),
				$month = $( '#custom-month' ).html( cal.getMonthName() ),
				$year = $( '#custom-year' ).html( cal.getYear() );

			$( '#custom-next' ).on( 'click', function() {
				cal.gotoNextMonth( updateMonthYear );
			} );
			$( '#custom-prev' ).on( 'click', function() {
				cal.gotoPreviousMonth( updateMonthYear );
			} );

			function updateMonthYear() {				
				$month.html( cal.getMonthName() );
				$year.html( cal.getYear() );
			}

			// just an example..
			function showEvents( $contentEl, dateProperties ) {

				hideEvents();
				
				var $events = $( '<div id="custom-content-reveal" class="custom-content-reveal"><h4>Events for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + dateProperties.year + '</h4></div>' ),
					$close = $( '<span class="custom-content-close"></span>' ).on( 'click', hideEvents );

				$events.append( $contentEl.html() , $close ).insertAfter( $wrapper );
				
				setTimeout( function() {
					$events.css( 'top', '0%' );
				}, 25 );

			}
			function hideEvents() {

				var $events = $( '#custom-content-reveal' );
				if( $events.length > 0 ) {
					
					$events.css( 'top', '100%' );
					Modernizr.csstransitions ? $events.on( transEndEventName, function() { $( this ).remove(); } ) : $events.remove();

				}

			}
		
		});[/php]

The strange thing is that if i include this
[php][/php]
In my index2.html page, the F12 > Network load the data.php file. If i delete that code the browser doesn’t read the data.php file anymore.

Ah, that might be the reason it was requesting data.php before, it was simply trying to load it as a script file

It seems the code to fetch the data never runs, maybe I have messed up something.

Does it run (maybe even work) if you just do this? Long time since I’ve used jquery, hopefully the it has working promises. (realizing this might be much easier if I just set up the code you have to run in a test environment and look at it myself)

[php]caldata: $.get(“js/data.php”).done(function(data) {
return data;
}).fail(function() {
console.log(‘failed’);
});
},[/php]

Thank you for your patient.
If i copy

[php]caldata: $.get(“js/data.php”).done(function(data) {
return data;
}).fail(function() {
console.log(‘failed’);
});
},[/php]

into the script
[php] $(function() {

			var transEndEventNames = {
					'WebkitTransition' : 'webkitTransitionEnd',
					'MozTransition' : 'transitionend',
					'OTransition' : 'oTransitionEnd',
					'msTransition' : 'MSTransitionEnd',
					'transition' : 'transitionend'
				},
				transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
				$wrapper = $( '#custom-inner' ),
				$calendar = $( '#calendar' ),
				cal = $calendar.calendario( {
					onDayClick : function( $el, $contentEl, dateProperties ) {

						if( $contentEl.length > 0 ) {
							showEvents( $contentEl, dateProperties );
						}

					},
					caldata: $.get("js/data.php").done(function(data) {
					return data;
					}).fail(function() {
					console.log('failed');
					});
					},
					displayWeekAbbr : true
				} ),
				$month = $( '#custom-month' ).html( cal.getMonthName() ),
				$year = $( '#custom-year' ).html( cal.getYear() );

			$( '#custom-next' ).on( 'click', function() {
				cal.gotoNextMonth( updateMonthYear );
			} );
			$( '#custom-prev' ).on( 'click', function() {
				cal.gotoPreviousMonth( updateMonthYear );
			} );

			function updateMonthYear() {				
				$month.html( cal.getMonthName() );
				$year.html( cal.getYear() );
			}

			// just an example..
			function showEvents( $contentEl, dateProperties ) {

				hideEvents();
				
				var $events = $( '<div id="custom-content-reveal" class="custom-content-reveal"><h4>Events for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + dateProperties.year + '</h4></div>' ),
					$close = $( '<span class="custom-content-close"></span>' ).on( 'click', hideEvents );

				$events.append( $contentEl.html() , $close ).insertAfter( $wrapper );
				
				setTimeout( function() {
					$events.css( 'top', '0%' );
				}, 25 );

			}
			function hideEvents() {

				var $events = $( '#custom-content-reveal' );
				if( $events.length > 0 ) {
					
					$events.css( 'top', '100%' );
					Modernizr.csstransitions ? $events.on( transEndEventName, function() { $( this ).remove(); } ) : $events.remove();

				}

			}
		
		});[/php]

The browser doesn’t run the script anymore ( only show the html and css )

Someone told me that the problem maybe is that we are passing to caldata a function while it accepts only an object.

If you look in your browser tools, it should tell you the problem with the JavaScript.

still can’t find the problem. I think i have to declare caldata : null and then use the set data after the script calendar is loaded… but i don’t manage how.

Someone seems to have solved it that way


could work on mine ?

Jin i need your help ç_ò i’ìve tryed this
[php]var datas;

				$.post( "js/data.php", function(data) {
				datas = $.parseJSON(data);
				alert( "Data Loaded: " + datas );
				});

			
				cal.setData(datas);[/php]

and the alert return datas NULL

[center]Take out the / " / from a echo json.[/center]

Hi guys. I have that script

[php] $(function() {

		var xmlhttp = new XMLHttpRequest();
		var url = "js/data.php";

		xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		myFunction(xmlhttp.responseText);
}
}
		xmlhttp.open("GET", url, true);
		xmlhttp.send();

		
			var transEndEventNames = {
					'WebkitTransition' : 'webkitTransitionEnd',
					'MozTransition' : 'transitionend',
					'OTransition' : 'oTransitionEnd',
					'msTransition' : 'MSTransitionEnd',
					'transition' : 'transitionend'
				},
				transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
				$wrapper = $( '#custom-inner' ),
				$calendar = $( '#calendar' ),
				cal = $calendar.calendario( {
					onDayClick : function( $el, $contentEl, dateProperties ) {

						if( $contentEl.length > 0 ) {
							showEvents( $contentEl, dateProperties );
						}

					},

					displayWeekAbbr : true
				} ),
				$month = $( '#custom-month' ).html( cal.getMonthName() ),
				$year = $( '#custom-year' ).html( cal.getYear() );

			$( '#custom-next' ).on( 'click', function() {
				cal.gotoNextMonth( updateMonthYear );
			} );
			$( '#custom-prev' ).on( 'click', function() {
				cal.gotoPreviousMonth( updateMonthYear );
			} );

			function updateMonthYear() {				
				$month.html( cal.getMonthName() );
				$year.html( cal.getYear() );
			}
			
				
				/*// goes to a specific month/year
				cal.goto( 3, 2013, updateMonthYear );*/

			// just an example..
			function showEvents( $contentEl, dateProperties ) {

				hideEvents();
				
				var $events = $( '<div id="custom-content-reveal" class="custom-content-reveal"><h4>Events for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + dateProperties.year + '</h4></div>' ),
					$close = $( '<span class="custom-content-close"></span>' ).on( 'click', hideEvents );

				$events.append( $contentEl.html() , $close ).insertAfter( $wrapper );
				
				setTimeout( function() {
					$events.css( 'top', '0%' );
				}, 25 );

			}
			function hideEvents() {

				var $events = $( '#custom-content-reveal' );
				if( $events.length > 0 ) {
					
					$events.css( 'top', '100%' );
					Modernizr.csstransitions ? $events.on( transEndEventName, function() { $( this ).remove(); } ) : $events.remove();

				}

			}
		
		function myFunction(response) {
		var arr = jQuery.parseJSON(response);
		alert(response);
		cal.setData(arr);			
		};
		
		
		cal.setData( 

{‘05-01-2016’ : ‘testing’,‘05-10-2016’ : ‘testing2’,‘05-21-2016’ : ‘testing3’}
);

		});[/php]

In this page http://www.ldida.altervista.org/calendario/index2.html

I get from a php file some datas wich i can see with an
[php]alert(response);[/php]

the alert give back exactly
“{‘04-20-2016’ : ‘Compleanno’,‘05-14-2016’ : Compleanno’,‘05-03-2016’ : ‘Battesimo’}”

In my script i also have to test the setdata function this
[php]cal.setData( {‘05-01-2016’ : ‘testing’,‘05-10-2016’ : ‘testing2’,‘05-21-2016’ : ‘testing3’} );[/php]

This part of the script works and the calendar get those data but the one wich retrive datas from the php file doesn’t. THE ONLY difference betwin
[php] cal.setData( {‘05-01-2016’ : ‘testing’,‘05-10-2016’ : ‘testing2’,‘05-21-2016’ : ‘testing3’} );[/php]

and
[php]"{‘04-20-2016’ : ‘Compleanno’,‘05-14-2016’ : ‘Compleanno’,‘05-03-2016’ : ‘Battesimo’}"[/php]

are the " at the start and " at the end of the string.
I think this is why the script doesn’t read and use the variable. There is a way to take down the / " / from the result ?

jim i managed to solve a lot of problems , but now i think i have the last 1 , i posted also on the javascript section maybe someone can help me there.

[center]Take out the / " / from a echo json.[/center]

[php] $(function() {

		var xmlhttp = new XMLHttpRequest();
		var url = "js/data.php";

		xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		myFunction(xmlhttp.responseText);
}
}
		xmlhttp.open("GET", url, true);
		xmlhttp.send();

		
			var transEndEventNames = {
					'WebkitTransition' : 'webkitTransitionEnd',
					'MozTransition' : 'transitionend',
					'OTransition' : 'oTransitionEnd',
					'msTransition' : 'MSTransitionEnd',
					'transition' : 'transitionend'
				},
				transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
				$wrapper = $( '#custom-inner' ),
				$calendar = $( '#calendar' ),
				cal = $calendar.calendario( {
					onDayClick : function( $el, $contentEl, dateProperties ) {

						if( $contentEl.length > 0 ) {
							showEvents( $contentEl, dateProperties );
						}

					},

					displayWeekAbbr : true
				} ),
				$month = $( '#custom-month' ).html( cal.getMonthName() ),
				$year = $( '#custom-year' ).html( cal.getYear() );

			$( '#custom-next' ).on( 'click', function() {
				cal.gotoNextMonth( updateMonthYear );
			} );
			$( '#custom-prev' ).on( 'click', function() {
				cal.gotoPreviousMonth( updateMonthYear );
			} );

			function updateMonthYear() {				
				$month.html( cal.getMonthName() );
				$year.html( cal.getYear() );
			}
			
				
				/*// goes to a specific month/year
				cal.goto( 3, 2013, updateMonthYear );*/

			// just an example..
			function showEvents( $contentEl, dateProperties ) {

				hideEvents();
				
				var $events = $( '<div id="custom-content-reveal" class="custom-content-reveal"><h4>Events for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + dateProperties.year + '</h4></div>' ),
					$close = $( '<span class="custom-content-close"></span>' ).on( 'click', hideEvents );

				$events.append( $contentEl.html() , $close ).insertAfter( $wrapper );
				
				setTimeout( function() {
					$events.css( 'top', '0%' );
				}, 25 );

			}
			function hideEvents() {

				var $events = $( '#custom-content-reveal' );
				if( $events.length > 0 ) {
					
					$events.css( 'top', '100%' );
					Modernizr.csstransitions ? $events.on( transEndEventName, function() { $( this ).remove(); } ) : $events.remove();

				}

			}
		
		function myFunction(response) {
		var arr = jQuery.parseJSON(response);
		alert(response);
		cal.setData(arr);			
		};
		
		
		cal.setData( 

{‘05-01-2016’ : ‘testing’,‘05-10-2016’ : ‘testing2’,‘05-21-2016’ : ‘testing3’}
);

		});[/php]

In this page http://www.ldida.altervista.org/calendario/index2.html

I get from a php file some datas wich i can see with an
[php]alert(response);[/php]

the alert give back exactly
“{‘04-20-2016’ : ‘Compleanno’,‘05-14-2016’ : Compleanno’,‘05-03-2016’ : ‘Battesimo’}”

In my script i also have to test the setdata function this
[php]cal.setData( {‘05-01-2016’ : ‘testing’,‘05-10-2016’ : ‘testing2’,‘05-21-2016’ : ‘testing3’} );[/php]

This part of the script works and the calendar get those data but the one wich retrive datas from the php file doesn’t. THE ONLY difference betwin
[php] cal.setData( {‘05-01-2016’ : ‘testing’,‘05-10-2016’ : ‘testing2’,‘05-21-2016’ : ‘testing3’} );[/php]

and
[php]"{‘04-20-2016’ : ‘Compleanno’,‘05-14-2016’ : ‘Compleanno’,‘05-03-2016’ : ‘Battesimo’}"[/php]

are the " at the start and " at the end of the string.
I think this is why the script doesn’t read and use the variable. There is a way to take down the / " / from the result ?

Merged your other topic. This is still dealing with the same issue, the conversation flows better when you see it all in the same place.

Sponsor our Newsletter | Privacy Policy | Terms of Service