PDA

View Full Version : Dynamic Ajax Content Script



omarkhan
06-17-2010, 07:28 AM
Script Title: Dynamic Ajax Content

Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.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

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:


<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
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:

<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 :-)

molendijk
07-04-2010, 05:51 PM
See the messages posted above.
===
Arie Molendijk.

Lurzino
07-06-2010, 06:16 AM
Hello again molendijk,

I read the thread and I'm trying to change that loadpage() with some $.load(...) and $.getScript(...) but since I would like to keep jqGrid function call inside each external file so in the future I wouldn't need to touch mainfile.... just adding new table in db and creating a new external file and all would be managed automatically...

So for mainpage.php, since I know if I put <script></script> in external file which doesn't have any <head></head>, it wouldn't execute any script so I was thinking to use in onChange="" sort of like to load dynamically those files:

onChange="$('contentarea').getScript(rootdomain+'/jquery.jqGrid.min.js', $('contentarea').getScript(rootdomain+'/grid.locale-it.js', $('contentarea').getScript(rootdomain+'/jquery-1.4.2.js', function() { $('contentarea').load(ajaxcombo('selecttable') } )));

where ajaxcombo() would be just:

function ajaxcombo(selectobjID, loadarea) {
var selectobj=document.getElementById? document.getElementById(selectobjID) : "";
if (selectobj!="" && selectobj.options[selectobj.selectedIndex].value!="")
return ajaxpage(rootdomain +"/"+selectobj.options[selectobj.selectedIndex].value+".php", loadarea);
}

but I'm stuck because seems not making any sense reloading jQuery 1.4.2 in the external file dynamically even if the jQuery documentation says with this example:

$.getScript("test.js", function(){
alert("Script loaded and executed.");
});

where it says it loads test.js but it will be applied once is executed the alert function...

Any suggest?

Thanks a lot
Ciao,
Luigi

molendijk
07-06-2010, 11:11 PM
Hi Luigi,
The links in your previous post don't work.
===
Arie.

Lurzino
07-07-2010, 04:28 AM
Hi Arje,

which links do you mean in the previous post?...

Practically, I am here asking how I could preload scripts (jquery-1.4.2.js, grid.locale-it.js and jquery.jqGrid.min.js) while loading (with $.load() or $.ajax() ) the external file in the <div> then applying scripts in the <div> so they could be applied once loaded the content and jqGrid would be executed? I thought about $.getScript() but how I could use it in this way in the onChange event's select?

Thanks.
Ciao,
Luigi