Written: December 16, 2010

Expanding Forms with Ajax

I added a new feature to the Tualatin Chamber of Commerce web site that allows them to schedule events that are repeating, saving time by typing less. To make an event repeated they first click on a checkbox:

Clicking the checkbox calls Ajax to dynamically insert new content into the form without refreshing the page:

They now have three choices for the repeated event: Weekly, Monthly or Yearly. Here’s the Monthly repeated event:

Finally, the yearly repeated event:

I’m using Ajax code from Dynamic Drive, my source is at http://www.tualatinchamber.com/ajax-page.js

The Javascript for the Checkbox is:

1
2
3
4
5
6
7

function repeatedCheck(form) { // Is this a repeated event?
if (form.repeated.checked == true) { // This is a repeated event
ajaxpage('add_event_weekly.php','repeated-events');
} else { // This is not a repeated event
ajaxpage('add_event_none.php','repeated-events');
}
}

Each of the radio buttons has some Javascript too:

1
2
3
4
5
6
7
8
9

My HTML code is style with one DIV statement with id=”repeated-events”

Once that DIV gets filled in, each of the three radio buttons writes to another DIV with id=”repeated-weekly.

I tend to re-use the same Ajax code on every project where I want my pages to become dynamic and not re-load so much.
Have fun making your forms dynamic and easier for visitors to get their job done in less clicks.

Tags: AJAX, dynamic content

2 responses to “Expanding Forms with Ajax”

Anonymous says:

May 25, 2011 at 12:00 pm

Do you have a demo page where we can actually see it? Otherwise, no way to figure out how you did it.

Reply
Daniel Payne says:

May 25, 2011 at 12:26 pm

Sure, check out the demo at: http://tualatinchamber.com/repeated.html

Reply

Changing Page Content without Reloading the Full Page

My client Santa Cruz Veterinary Hospital wanted to show several pages worth of information and I decided to use links on the right hand side that would dynamically load content into the center column:

Normally when you click a web page link then your browser blinks and you wait while new content is loaded. Using Ajax I was able to have only the center part of the page update when a link is clicked. Here’s the HTML for the link code:

I’m calling a javascript function named “ajaxpage” and passing it two fields:

oral-health.html (the new content to load)
page_text (the DIV name where the new content will load)

This javascript is defined in my file ajax-page.js which you can read and re-use. I got it initally from www.dynamicdrive.com , a great resource.

In the center of my page I have a DIV statement where new content gets loaded into:

You may have noticed that this page uses Tables and are asking yourselves, “Why is Daniel still using tables in the era of CSS?”
Simple answer, I took over this site from another web developer and didn’t want to re-factor it and remove all tabels. Tables work, CSS works, use them both as needed.

Tags: AJAX, dynamic content

2 responses to “Changing Page Content without Reloading the Full Page”

Les says:

February 17, 2014 at 1:17 pm

Hi
I tried to view your file ajax-page.js but it comes up as page not found when you click it. Can’t seem to find it on dynamicdrive either. Would you be able to email me a copy of this so I can try and adapt for my own situ?

Thanks.

Reply
Daniel Payne says:

February 17, 2014 at 1:20 pm

Here’s the code:

[code]
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=””
var rootdomain=”http://”+window.location.hostname
var bustcacheparameter=””

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject(“Msxml2.XMLHTTP”)
}
catch (e){
try{
page_request = new ActiveXObject(“Microsoft.XMLHTTP”)
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf(“?”)!=-1)? “&”+new Date().getTime() : “?”+new Date().getTime()
page_request.open(‘GET’, url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf(“http”)==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i
Reply

Expanding Forms with Ajax

2 responses to “Expanding Forms with Ajax”

Leave a Reply Cancel reply

Changing Page Content without Reloading the Full Page

2 responses to “Changing Page Content without Reloading the Full Page”

Leave a Reply Cancel reply

Blog Tags

Recent Posts