[kummu4help]

i have a html page and a php page

the php code displays calender and i want to include that php output in to my html page(in content div area)

i want to do it with ajax so that when user selects month and year the calender will automatically adjusted for the user selected month

at present in my php i've dropdowns and after selecting month and year user has to click button.

i want to remove that and made it dynamically with ajax

any help would be appreciated
thanks

Attached File(s)

•  csspage.html (1.06K)
  Number of downloads: 40
•  index.php (4.44K)
  Number of downloads: 42

[pemcconnell]

allo there,

you will want something like this as your java script:

// AJAX Javascript

var xmlHttp;

function showCalendar(month)
{ 
	xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null){
		alert ("Browser does not support AJAX - Please update");
		return;
	}
	var url="phpcalendarpage.php";
	url=url+"?m="+month;
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}

function stateChanged() { 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
		document.getElementById("calendarDIV").innerHTML=xmlHttp.responseText 
	} 
}

function GetXmlHttpObject(){
	var xmlHttp=null;
	try{
	// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e){
	//Internet Explorer
		try	{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e){
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

(Obviously update the phpcalendarpage.php to the php filename of the file which will genereate the calendar, depending on the month (which is a variable called m ) )

You would then have this on your html front end:

<select id="sel_res" name="sel_res" onchange="showCalendar(this.value)">
		 <?php
		for($i = 1; $i <= 12; $i++){
		 echo '<option value="'.$i.'">'.$i.'</option>';
	}
		 ?>
</select>
<div id="calendarDIV"></div>

To explain, the drop down select menu item will display the values 1 to 12 (representative of the months - a quick example ). When the select boxes value has been changed, it will trigger the javascript function showCalendar() and pass the current select boxes value through to it. This in turn is sent to the PHP page with a GET request, and the result from that page is displayed in the element 'calendarDIV'

The only thing that code needs is the phpcalendarpage.php (which should dynamically display a calendar depending on what the variable 'm' is.

Hope this helps

This post has been edited by pemcconnell: 09 September 2008 - 01:15 AM

[kummu4help]

Thanks pemconnell
now i am able to implement ajax to my code
but the thing is i can not center the table displaying here
can u pls adjust the table to the right div

at present the table is displaying outside the div region
i want to limit the table display into right div region only
i am attaching the code below

i tried to style the table using following code

table
{ 
		table-layout: fixed;
		margin-left: 0em;
		margin-right: 0em; 
}

but still no use
help me dude?

Attached File(s)

•  webstd.html (4.01K)
  Number of downloads: 39
•  phpcalender.php (2.03K)
  Number of downloads: 40

[pemcconnell]

i don't fully understand what it is you want to happen. From my code, any html generated by the file phpcalendarpage.php will be displayed inside the div 'calendarDIV'. You can place that div anywhere in your page, which will position the calendar.

Any styles used in the calendar generated dynamically by the php page should not affect the container as long as you don't use clears and floats

[kummu4help]

Sorry pemcconnell
now i'm attaching a powerpoint screen shot about my problem

in the screen u can observe that my table is printing outside of my right div region

i want my table should be completely accomodated inside that rightcol div region

i think its clear now

any help now?

Attached File(s)

•  Presentation1.ppt (180.5K)
  Number of downloads: 57

[kummu4help]

Hi,

i know my post is running towards css issue from javascript or ajax.

but for continuity sake i'm still posting here

if any moderator feels it should be in html&css section then they r welcome to do it so

thanks

[pemcconnell]

Allo,

Simply give your table an id of, say, 'myCalendarTable' like so:

<table id="myCalendarTable" cellpadding="0" cellspacing="0">

Remember to set both cellpadding and cellspacing to 0.

Now in your CSS, you can use something like this:

#myCalendarTable { width:100px; border:1px solid #CCC; background:#FFF; font-size:11px; padding:0; margin:0; font-family:Verdana; color:#333; }

#myCalendarTable td { height:20px; width:30px; text-align:center; }

You can obviously customise this until your hearts content.

Hope that helps

This post has been edited by pemcconnell: 10 September 2008 - 01:14 AM

[kummu4help]

Thanks pemcconnell
i could able to resolve my alignment problem
thanks matey

[mpemburn]

kummu4help, on 9 Sep, 2008 - 12:42 AM, said:

i have a html page and a php page
the php code displays calender and i want to include that php output in to my html page(in content div area)
i want to do it with ajax so that when user selects month and year the calender will automatically adjusted for the user selected month
at present in my php i've dropdowns and after selecting month and year user has to click button.
i want to remove that and made it dynamically with ajax

Based on what I can infer from your post, you are generating the calendar with PHP and displaying it somewhere on the resulting HTML page. If you want to replace just the calendar on the page, you'll need to re-generate the content as HTML code and replace the existing HTML with it. If I wanted to do this, I'd set up a PHP page to generate the calendar -- complete with all HTML -- and then use Javascript to replace the innerHTML of the element that contains your calendar.

To do this you'll need to:
1. Design a PHP page that accepts URL parameters like: &MONTH=Jan&YEAR=2009. Use these parameters to get the correct calendar and set it up so that the entire calendar month is displayed using "echo" statements.

2. Set up an AJAX request and listener that will call this PHP page. The listener will receive the echo'ed HTML calendar and make it available through its responseText property.

3. When the listener signals that it's ready with the response, call a Javascript function that replaces the innerHTML of the current calendar's wrapper element with the contents of the responseText.

Simplified code to do all this:

//*** Instantiate AJAX object.  Suitable for IE and all others
if(window.XMLHttpRequest) {
	xmlhttp = new XMLHttpRequest();
} else {
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

//*** Send the request to your PHP page and define the listener for the response
xmlhttp.open("POST","GenerateCalendar.php?MONTH=Jan&YEAR=2009",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.onreadystatechange = post_listener;
xmlhttp.send(null);

//*** Listener.  A readyState of 4 means AJAX is done
function post_listener() {
	if (xmlhttp.readyState == 4) {
		changeMyCalendar(xmlhttp.responseText);
	}
}

//*** Use the text returned by the AJAX call.
function changeMyCalendar(htmlText) {
	var calWrapper = document.getElementById("calendar");
	calWrapper.innerHTML = htmlText;
}

<div id="calendar">
Calendar goes here
</div>

Good luck!

Mark