PDA

View Full Version : Ajax dynamically loading content into div



legg92
04-22-2014, 06:40 PM
Hi people,

I am using this script http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm to load html pages into a div on the index page.

I have a navigation bar which has links the user can click on and the page loads into the div on the index page without the need for refreshing. This is my code:
<nav id="firstNav">
<ul>
<li><a href="javascript:ajaxpage('page1.html','main'); loadobjs('styles/stylesheet.css')">ABOUT</a></li>
</ul>
</nav>

The question is how would a user without javascript enabled open the page? I was thinking of having a html file for javascript users and non-javascript users, where the non-javascript pages would have the whole html file including head, navigation bar etc and so the page would have to reload, i tried to implement that but I didn't work. Is there a better way?

jscheuer1
04-23-2014, 03:11 AM
This would allow non-javascript users to at least see the page:


<nav id="firstNav">
<ul>
<li><a href="page1.html" onclick="ajaxpage(this.href,'main'); loadobjs('styles/stylesheet.css'); return false;">ABOUT</a></li>
</ul>
</nav>

Or you could use a targeted iframe:


<nav id="firstNav">
<ul>
<li><a href="page1.html" onclick="ajaxpage(this.href,'main'); loadobjs('styles/stylesheet.css'); return false;" target="theiframe">ABOUT</a></li>
</ul>
</nav>

Then in the main div have:


<div id="main">
<noscript>
<iframe name="theiframe" src="about:blank" width="100%" height="500" scrolling="auto" frameborder="0"></iframe>
</noscript>
</div>

Then it would be almost the same for non-javascript users.

legg92
04-23-2014, 04:35 PM
Appreciate it, thanks!