Printable View
Dynamic Ajax Content
http://www.dynamicdrive.com/dynamici...jaxcontent.htm
Including my php-Files from server works really fine, but what kind of link do I have to put in my external php-File to load from there a new external page into my origina div?
Did you try the obvious? Something like:
HTML Code:<a href="javascript:ajaxpage('test.htm', 'contentarea');">test</a>
yes, I did.
I get the javascript error, that the function "ajaxpage" is not defined.
When looking at the page-source, I don't see the html-page-source of my external loaded page, so that I cannot say, if the javascript-File is included...
That means that you have to put the script on or linked it to the head of the page. When using includes, it is generally best to do this on the page(s) that include other content, rather than on the page(s) that get included.
I did include the .js-File in my index.php (on that page, I include external pages), but it doesn't work. ´
When including the javascript-code in the page, I include, it doesn't work too... maybe anybody has an working example...
What do you mean by:
If you literally mean include, this often does not work. The script needs to be on (hard coded on the page) or linked to the head of the page, ex of linking to the page:Quote:
I did include the .js-File in my index.php
Code:<script type="text/javascript" src="path/scriptfilename.js">
place script credit here
</script>
I already have "included" the .js-File as you described in your post, but it does not work.
Could you please post an working example with a simple javscript-action (like an alert)? I tried for hours, but no success...
Ah, now the true problem is becoming apparent. Dynamic Ajax content (the ajaxpage function) is not for loading scripts. It is for loading HTML content.Quote:
Originally Posted by pbundschuh
If you are using the loadobjs function to load a script, generally that may (under certain circumstances) be able to execute a command in the script the first time the script is attached to the document.
The way that ajaxpage and loadobjs are to be used with scripts is that ajaxpage loads the markup and loadobjs loads the script. It is then user activated triggers in the content that will set the script in motion.
However, if either the script or the markup are extensive or take awhile to append to the page, there can be lag time before both are fully functional together. And, if the script must initialize content loaded by ajaxpage, the content must be there before the initialization is run and the initialization must be run by a separate function that first determines (usually through polling) if the content has successfully loaded.
ok, back to my origin problem; is there really no possibility to change the content of the div with a link out of the external loaded page?
Well, I don't know if this is a PHP specific issue or not but, I just downloaded the demo archive from the demo page. I then opened it up and tried it out. Of course, it worked as expected. Next I took its external2.htm and added a link that loads the external.htm to it so that external2.htm now looks like so (addition red):
I can click on that added link and it will load external.htm into the 'rightcolumn'. The only tricky part (if this is not a PHP specific problem) is that the path to external.htm in the ajaxpage call has to be either absolute (probably safest/easiest for a live installation) or relative to the 'top page' (as in my example), not to the 'loaded page'.Code:<img border="0" src="ajaxfiles/ferrari.jpg">
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>
<p>The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari.
The name, which means "red head", comes from the red painted cylinder heads on
the flat-12 engine. The engine was technically a 180° V engine since it shared
flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291
kW), and the car won many comparison tests and admirers - it was featured on
the cover of Road & Track magazine nine times in just five years. Almost
10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the
most common Ferrari models despite its high price and exotic design. [<a href="http://en.wikipedia.org/wiki/Ferrari_Testarossa#Testarossa">source</a>]<br>
<a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');">Porsche Page</a>
hi fellas:cool:
Description: This script uses Ajax to enable you to load external pages into a DIV without having to reload the browser or use IFRAMES. If your external pages reference any external .css or .js files for styling, this script can also load and apply them to the page on demand.
Note: Due to security limitations, the external pages loaded must be from the same domain as the encompassing page. Any external .css and .js files associated with these pages, however, can be from any domain.
Demo (Load an external page or style/javascript file associated with them) Download demo. :
Porsche Page Ferrari Page Aston Martin Page
Dynamic PHP page: DD Forum archives
Load CSS & JS files Load "style.css" and "tooltip.js"
Choose a page to load.
The "Forum Archives" link illustrates how you're not limited to just loading html pages, but also dynamically generated pages (ie: php). The last link shows how you can invoke external .css and .js files on demand to the page, such as when loading an external page, to style and provide functionality to it.
Directions
Step 1: Insert the below script to the HEAD section of your page:
Select All
Step 2: Once that's done, simply create links that will load an external page into the desired DIV or container using one of the below syntax:
Normal link:
<a href="javascript:ajaxpage('test.htm', 'contentarea');">test</a>
<div id="contentarea"></div>
In the above case, "test.htm" is the file on your server that you want to load, and "rightcolumn", the ID of the container that this content will be loaded into. You can even load an external page without requiring the click of a link, by calling the function directly:
<script type="text/javascript">
ajaxpage('test.htm', 'rightcolumn') //load "test.htm" into "rightcolumn" DIV
</script>
Load absolute URL link:
Here's a different link syntax that references an absolute URL to the file on your server:
<a href="javascript:ajaxpage(rootdomain+'/mydir/index.htm', 'contentarea');">test</a>
<div id="contentarea"></div> This will load "http://www.mydomain.com/mydir/index.htm". Here the important thing to note is the "rootdomain" variable. Instead of specifying literally the domain of your server, such as "http://www.mydomain.com", you should instead use "rootdomain" and let the script dynamically determine this domain. The reason for this is due to the two possible ways your domain can be entered, either with or without the "www" prefix. This variation creates a problem in that if you hard coded your domain inside the link using one version ("http://www") and the user is viewing your site using the other ("http://"), to Ajax, the two domains don't match, triggering the security limitation mentioned above, and the file is not loaded for that user. The "rootdomain" variable takes care of this by dynamically determining your current domain name as the user is using inside his/her browser to construct a full URL to the file to load.
Using a drop down menu to load the links
Some people have asked how to use a drop down menu instead to select and load a link. You can use the following code:
<script type="text/javascript">
/***Combo Menu Load Ajax snippet**/
function ajaxcombo(selectobjID, loadarea){
var selectobj=document.getElementById? document.getElementById(selectobjID) : ""
if (selectobj!="" && selectobj.options[selectobj.selectedIndex].value!="")
ajaxpage(selectobj.options[selectobj.selectedIndex].value, loadarea)
}
</script>
<form>
<select id="ajaxmenu" size="1">
<option value="page1.htm">Page 1</option>
<option value="page2.htm">Page 2</option>
<option value="subdirectory/page3.htm">Page 3</option>
</select>
<input type="button" onClick="ajaxcombo('ajaxmenu', 'contentarea')" value="Go" />
</form>
<div id="contentarea"></div>
where "ajaxmenu" is the ID
Regards
Chronis Tsempelis
Marketraise Corp.
Suite 200 and 400,
41-A East Merrick Rd.,
Valley Stream,
NY 11580
Cell: 516-398-0996
Tel: 516 887 1929.
marketraise,
What if any question do you have? What if any help is pasting in portions of the demo page without adding anything?
pbundschuh,
See my most recent previous response in this thread.
I have tried the said scripting and loading the external html does work. My only problem now is the external .css files that I have my pages use.
I tried loading the said css files through links using the format:
loadobjs('reset.css', 'style.css', '960.css') - when my css files is in the same folder as the index.html file
loadobjs('css/external.css', 'css/external2.css', 'css/feature.js') and loadobjs('css/external.css', 'css/external2.css', 'css/feature.js') - when my css files is inside my css folder in the same root directory where index.html is located.
All of the mentioned ways do not load the desired css layout style seen on index.html:
Attachment 4024
Attachment 4025
Attachment 4026
Any help is deeply appreciated.
I find it best to ignore the loadobjs function. Just link in the external stylesheets on the 'top' page in the normal manner. If that doesn't work, then there's some normal conflict with existing styles for the page.