Dynamic Ajax Content Script

**omarkhan** · 06-17-2010, 07:28 AM

Script Title: Dynamic Ajax Content

Script URL (on DD): http://www.dynamicdrive.com/dynamici...tent.htm#combo

Problem Description

I am using the Dynamic Ajax Content script to show product information on my website. I've installed the script exactly as it was given on Dynamic Drive but I am getting this error thrice in Internet Explorer 8 and the script is not working in any browser. (Checked it on Firefox, Chrome and IE8)

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; HPNTDF; InfoPath.2; FDM; .NET4.0C; .NET4.0E)
Timestamp: Thu, 17 Jun 2010 07:21:07 UTC

Message: Access is denied.

Line: 38
Char: 1
Code: 0
URI: file:///D:/Formite/FORMITE%20Website/html/products.html

When I go to Line 38 on the product.html page, this is the code that is there

Code:

page_request.open('GET', url, true)
page_request.send(null)

Now I don't understand what the problem is. Will someone need my page code to diagnose this problem? I have to get this website up and running so I'm really in a hurry to get this working.

Thanks in advance.

**djr33** · 06-17-2010, 08:37 AM

It's probably just an issue with running this locally on your computer. Upload it to the server and there's a good chance it will work. Ajax has complex security issues, such as on a local computer or using it to get a page from a remote website (not on the same domain).

**omarkhan** · 06-17-2010, 08:54 AM

Yep, worked perfectly once I uploaded it onto my demo site. Thanks.

**omarkhan** · 06-17-2010, 10:10 AM

Im having a little trouble with styling. Will I have to import a stylesheet to style the page or will the style tags within the page work fine?

This is the page I'm working on right now: http://demo.t3-interactive.com/bld/products.html

I've got the script working but the style wont apply.

**daily.matters** · 06-17-2010, 10:40 AM

I'm also having trouble using this script. I'm trying to dynamically import a html page that contains some jquery code.

the code i'm using to import the page is:

Code:

<a href="javascript:ajaxpage('woolworths.html', 'content-gallery'); loadobjs('jquery-1.3.2.js', 'jquery.cycle.js')" >Woolworths</a><br />

What happens is that the html and css are imported with success, but no jquery...

Is that any way to correct this, or to make this work ?

Thx in advance, Cláudio.

**djr33** · 06-17-2010, 11:04 AM

In this case, you are both having the same problem (and for the same reason). daily.matters, please be careful about asking your own question in someone else's thread-- but here it's similar enough this is fine (but if you end up having separate issues trying to answer both in one discussion will be confusing-- please start a new thread if that occurs).

The problem is very simple to explain and somewhat difficult to fix:
Ajax brings in the pages as text, not as loading a new page. In other words, you won't be able to use external files referenced in the other page like this-- both css and js will be ignored.

To fix this, you will need to do one of three things:
1. Include these files in your main page. This means predicting what those other pages will load. This is simple, but it will only work if you are including a specific set of files with a predictable set of required css/js files. Easy, but not generally useful.
2. Dynamically load these files in addition to loading the Ajax content: this means doing two things-- 1. load using Ajax as you are; 2. find a way to dynamically load a js or css file-- and this means that you need to find out which ones you need. This will get complex, but it will be a good solution.
3. Use an iframe instead of "ajax" (you can use the same basic ideas and it'll actually be easier). An iframe acts as a separate page, so it will work with js and css files without trouble. This is a nearly perfect solution except that it requires working with iframes and that can sometimes be a problem.

In general, if you are placing html from one file into another, you should be careful to design it this way: for example, don't duplicate the <html> tags and don't have a new <head> section within the imported page: import only what would be valid content if in the first place it were part of the page.
If you cannot manage this, then you probably should be using an iframe or find another way entirely to approach the site.

**molendijk** · 06-17-2010, 11:35 AM

Originally Posted by djr33

Ajax brings in the pages as text, not as loading a new page. In other words, you won't be able to use external files referenced in the other page like this-- both css and js will be ignored.

Daniel is right about that, except that we can force Ajax to automatically bring in external code by not only using innerHTML and/or appendChild, but also document.write.
Here's a working example:

Code:

<head>
<script type="text/javascript">
//defining the request
var pageRequest = false //variable to hold ajax object
/*@cc_on
@if (@_jscript_version >= 5)
try {
pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try {
pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e2){
pageRequest = false
}
}
@end
@*/
if (!pageRequest && typeof XMLHttpRequest != 'undefined')
pageRequest = new XMLHttpRequest()

function remove(id)
{
while(document.getElementById(id).firstChild)
{document.getElementById(id).removeChild(document.getElementById(id).firstChild);}
}

function include(content,id){
var newdiv = document.createElement("div");
newdiv.innerHTML = content;
remove(id); document.getElementById(id).appendChild(newdiv);
}

if (pageRequest){

// add as many requests as you want; the variables holding them must be document.written (see below) in order to bring in external CODE
pageRequest.open('GET', 'external1.html', false)
pageRequest.send(null); ajax_include1=pageRequest.responseText;

pageRequest.open('GET', 'external2.html', false)
pageRequest.send(null); ajax_include2=pageRequest.responseText;

document.write('<div style="display:none">');
document.write(ajax_include1+ajax_include2);
document.write('<\/div>');

}
</script>

</head>

<body >
<a onclick='include(ajax_include1,"div1");'>add external1.html</a><br>
<a onclick='include(ajax_include2,"div2");'>add external2.html</a><br><br>
<a onclick='remove("div1")'>remove external1.html</a><br>
<a onclick='remove("div2")'>remove external2.html</a><br>
<div id="div1" ></div>
<div id="div2" ></div>
</body>

Important note: the js belonging to the external files must be (made) external in order for this to function properly in IE.
===
Arie Molendijk.

**daily.matters** · 06-17-2010, 02:16 PM

Thanks Molendijk but i don't understand one thing... using your example i don't need to use the code from the tutorial do i ?

(ajax is not something i master yet...)

In your example, it seems like we are importing the full extent of the outside code, isn't it ?

**molendijk** · 06-17-2010, 02:25 PM

No, you don't need the DD code. And yes, we are importing the entire outside code.
===
Arie.

**Lurzino** · 07-04-2010, 01:34 PM

Hello everyone!!!

About this ajax content... at this URL http://www.luigino.netsons.org/mainpage.php, clicking on Page 1 and selecting Categories in the combo I expect to load a jqGrid.... so I am loading the content of Categories through Ajax with an external file vvd_categories.php (http://www.luigino.netsons.org/vvd_categories.php) where I have the function that calls for a jqGrid.... while calling:

<select name="selecttable" id="selecttable" onChange="ajaxcombo('selecttable', 'contentarea'); loadobjs(rootdomain+'/jquery-1.4.2.js', rootdomain+'/grid.locale-it.js', rootdomain+'/jquery.jqGrid.min.js')">

I think it should have loaded also scripts to load a jqGrid but looks like it doesn't load any jqGrid... do you have a suggest?...

Maybe isn't in my case because of using:

document.getElementById(containerid).innerHTML=page_request.responseText;

in loadpage() function?....

thanks to everyone!
Ciao
Luigi

BTW: compliments for this ajaxcontent trick its really nice and useful as it looks :-)

Thread: Dynamic Ajax Content Script

Thread Tools

Search Thread

Dynamic Ajax Content Script

The Following User Says Thank You to molendijk For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions