Dynamic Ajax Content

JavaScript
1

Dynamic Ajax content loaded inside a div tag.

Please i will like to know how best possible, i can prevent refresh of the index (main) page whenever a submit button inside the content is clicked.
I have used and example from this link: http://dynamicdrive.com/dynamicindex17/ajaxcontent.htm
button the load loadobjs function does not load my external js file that i needed to validate the content page.
I also try to get in contact with the forum members button i got stuck with the process.
Please can somebody test the code and advice me on how to go about it.

I appreciate thanks.

2

The whole purpose of Ajax is to make (parts of) content to update dynamically without page reload. If I understand it well, you’d like to prevent a button’s default submit event and load content from an external page?

Can you please provide the actual code you are using and perhaps a page where you have tried it?

Cheers

3

Thank you very much for coming to my rescue.
This is the main file which is also the index. It contains the Ajax code for dynamic loading into the content div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Rotating Includes Script</title>
<script type="text/javascript">

/***********************************************
* 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 loadedobjects=""
var rootdomain="http://"+window.location.hostname

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)
}
page_request.open('GET', url, 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<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

<style type="text/css">
#leftcolumn{
float:left;
width:150px;
height: 400px;
border: 3px solid black;
padding: 5px;
padding-left: 8px;

}

#leftcolumn a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}

#leftcolumn a:hover{
background-color: #FFFF80;
}

#rightcolumn{
float:left;
width:550px;
min-height: 400px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}

* html #rightcolumn{ /*IE only style*/
height: 400px;
}
</style>
</head>

<body>

<div id="leftcolumn">
<a href="javascript:ajaxpage('ajaxfiles/form.html', 'rightcolumn');">Form</a>

</div>

<div id="rightcolumn"><h3>This is the main content area.</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>

</body>

</html>

The next is the external page, which display on the main content inside a div when the hyperlink is clicked.

<html>
<head>
<title>
</title>

</head>
<body>
 <form action="">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form> 
</body>
</html>

here comes my challenge, when i click on the submit button, the the index is refreshed and the loaded content disappear even when i use some Java script to prevent the default act of reloading.

Please can you supply some Javascript that can hold the form page back a display submit response. Thanks

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.