PDA

View Full Version : Dynamic Ajax Content site.html instead text



Lazor
10-14-2009, 06:44 PM
1) Script Title:
Dynamic Ajax Content
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
3) Describe problem:

<div id="rightcolumn"><h3>Choose a page to load.</h3></div>

How to replace text on the page to work for example index.html.
Sorry for my english.
@edit

<div id="rightcolumn"><a href="ajaxfiles/external2.html"></a></div>
Does not display page :(

jscheuer1
10-15-2009, 08:13 AM
I see no reason why:



<div id="rightcolumn"><a href="ajaxfiles/external2.html"></a></div>

should do anything. It is just an ordinary link tag with no visible content. However, if you were to place this script (highlighted) at the end of the page, just before the closing </body> tag, it should work:


<script type="text/javascript">
ajaxpage('ajaxfiles/external2.html', 'rightcolumn');
</script>
</body>
</html>

Lazor
10-15-2009, 12:41 PM
Screen (no display )
http://img70.imageshack.us/img70/8195/nodisplay.png
Code

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

function target_ob(id, a)
{
if (document.getElementById && document.getElementById(id) &&

document.getElementById(id).innerHTML)
{
var ob = document.getElementById(id).innerHTML;
if (ob.toLowerCase().indexOf(' data=') != -1)
{
var start = ob.toLowerCase().indexOf(' data=');
var stop = ob.indexOf('"', start+3);
if (stop == -1 || ob.indexOf('>', start+3) < stop || ob.indexOf('=', start+3) <

stop) stop = ob.indexOf(' ', start+3);
if (stop == -1 || stop > ob.indexOf('>', start+3)) stop = ob.indexOf('>',

start+3);

var minus = -1;
if ((minus = ob.toLowerCase().indexOf(' width="-')) != -1 || (minus =

ob.toLowerCase().indexOf(' width=\'-')) != -1 || (minus = ob.toLowerCase().indexOf(' width=-')) != -1)
{
for (var i = minus+8; i < ob.length; i++)
{
if ((ob.charAt(i) < '0' || ob.charAt(i) > '9') && ob.charAt(i) != '-')

break;
}
ob = ob.substring(0, minus+7+(ob.toLowerCase().indexOf('

width="-') != -1 || ob.toLowerCase().indexOf(' width=\'-') != -1 ? 1 : 0)) +

ob.substring(minus+8+(ob.toLowerCase().indexOf(' width="-') != -1|| ob.toLowerCase().indexOf(' width=\'-')

!= -1 ? 1 : 0), i) + '%' + ob.substring(i);
}
var minus = -1;
if ((minus = ob.toLowerCase().indexOf(' height="-')) != -1 || (minus =

ob.toLowerCase().indexOf(' height=-')) != -1)
{
for (var i = minus+8; i < ob.length; i++)
{
if ((ob.charAt(i) < '0' || ob.charAt(i) > '9') &&

ob.charAt(i) != '-') break;
}
ob = ob.substring(0, minus+8+(ob.toLowerCase().indexOf('

height="-') != -1|| ob.toLowerCase().indexOf(' height=\'-') != -1 ? 1 : 0)) +

ob.substring(minus+9+(ob.toLowerCase().indexOf(' height="-') != -1|| ob.toLowerCase().indexOf('

height=\'-') != -1 ? 1 : 0), i) + '%' + ob.substring(i);
}

if (stop > start) document.getElementById(id).innerHTML = ob.substring(0,

start) + ' data="' + (a.href ? a.href : a) + '"' + ob.substring(stop);
else return true;
}
}
else return true;

return false;
}
// ]]>
</script>

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

}

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

#leftcolumn a:hover{
}

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

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

<body>

<div id="leftcolumn">
<a href="ajaxfiles/external.htm" onmouseover="ajaxpage('ajaxfiles/external.htm','rightcolumn');">Link</a>
<a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn');">Ferrari Page</a>
<a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');">Aston Martin Page</a>

</div>

<script type="text/javascript">

ajaxpage('ajaxfiles/external2.html', 'rightcolumn');
</script>

<div style="clear: left; margin-bottom: 1em"></div>

</body>

</html>
Help me please

jscheuer1
10-15-2009, 02:31 PM
You still need to have:


<div id="rightcolumn"></div>

on your page. Also, it must come before the small script I told you to add.

Lazor
10-15-2009, 03:01 PM
thanks jscheuer1

earthsolar
10-15-2009, 06:02 PM
I don't know coding, but I see some file names are ajaxfiles/external2.htm and ajaxfiles/external2.html

Are they different files or a html is missing ?

jscheuer1
10-15-2009, 07:27 PM
I don't know coding, but I see some file names are ajaxfiles/external2.htm and ajaxfiles/external2.html

Are they different files or a html is missing ?

First of all this is more of a general question and as such should probably be in the HTML forum.

Second, for what is essentially a new topic, a new thread should be started.

However, this thread is apparently resolved, so that's not so important in this case (it can be a real drag to have your thread interrupted by someone else's question before your issue is resolved). Both of these reflect the general rules and spirit of these forums, so just file that information away for future use, please.

Anyways, as to your question, an HTML file may have either extension. This is a holdover from earlier 8.3 DOS and Windows file naming limitations (a maximum of 8 characters only were allowed for the filename, maximum 3 characters only were allowed for the extension, hence 8.3). As far as I know, and this is the important point here, all servers will recognize either .htm or .html as indicating an HTML file and will then serve it as such. This matters greatly because if it is served as text or something else other than as HTML, the browser need not (and often, depending upon the browser, will not) interpret the tags contained within it correctly for HTML presentation.

The short answer though is that they are equivalent, don't worry about it.