Jump to content

Check out our Community Blogs

Register and join over 40,000 other developers!

Recent Status Updates

View All Updates

- - - - -

Changing content of HTML using AJAX - what if javascript is deactivated?

HTML ajax

  • Please log in to reply
4 replies to this topic

#1 andershp


    CC Lurker

  • Just Joined
  • Pip
  • 4 posts

Posted 21 April 2011 - 01:24 AM

Hi, I'm new at making websites and at web programming, so I'm not quite sure how to do/explain this..

I'm making a website, in which there shall be 2-3 menu links that changes the content of a <div>. I've already done this using AJAX to insert text (HTML) from .txt files. To insert the main content of the <div> (the front page), I've inserted the javascript which loads from one of the .txt files in the head section of the HTML file.
This way, the page loads showing the content of one .txt in the <div> and this content can be changed from links launching javascripts loading from other .txt files (without refreshing the page).

But what if someone whose browser does not support javascript visits my website? Then nothing will be loaded at all, and the menu wont work either.

How do I solve this the best way, so that the non-javascript users will just have the page refreshed on click and so the content will be loaded on refresh anyway?

  • 0

#2 dargueta


    I chown trolls.

  • Moderator
  • 4854 posts
  • Programming Language:C, Java, C++, PHP, Python, JavaScript, Perl, Assembly, Bash, Others
  • Learning:Objective-C

Posted 21 April 2011 - 10:10 AM

Take a look at using the <noscript></noscript> tags.
HTML noscript tag

As for refreshing, I guess you could use a link to the page itself so that the browser will reload it.
  • 0

sudo rm -rf / && echo $'Sanitize your inputs!'

#3 gokuajmes


    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 483 posts

Posted 04 May 2011 - 08:03 PM

You will have to implement Graceful degradation design pattern. On disabling javascript causing a postback is your only solution. Server Side Framework either Php, Asp, Asp.net should handle it .
  • 0

#4 gon1387


    CC Regular

  • Member
  • PipPipPip
  • 30 posts
  • Programming Language:C, C++, PHP, JavaScript, Others
  • Learning:C, Java, C++, PHP, Python, JavaScript, Others

Posted 14 May 2011 - 08:26 PM

I agree to what gokuajmes said. You have to provide an alternative pages for your website where NO Javascript manipulates the content's visibility or layout; including the in and out of data, for AJAX.
  • 0

#5 Root23


    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 15 May 2011 - 02:20 PM

I'm sure this isn't the best way, but it would be easy. Instead of making txt files that just have the contents for whichever link is clicked, make each page be a full website. Then, you could use JQuery for your AJAXication.. You can have JQuery load in a specific div from those files into the content div on the main page for those with JS, and then regular people will just have the normal page reload.

<a href="link1.html" onclick="$('#content').load('linke1.html #subContent');return false;">

You would want to make a function for that JQuery, instead of having it inline like that, but for simplicity I put inline. The 'return false;' is to prevent the href from being performed after the onclick. Having the href is needed for those with JS disabled.

Your main page basic layout could be:

<div id="top"><!--whatever here--></div>
<div id="content"><!-- content from other pages will load here--></div>
<div id="footer"></div>

Then for your other pages to make it work right you'd want to have an extra div, with no styles, to prevent CSS issues. Something like this:

<body id="top"><!--whatever here--></div>
<div id="content"><div id="subContent">Link1 content would be here</div></div>
<div id="footer"></div>

The subContent div would have no style associated with it. If we didn't add the extra div what would happen is your page would end up like <div id="content"><div id="content">this inside content div was loaded via jquery</div><div>

You'd then have CSS styling two divs. This can cause display issues depending on how the CSS is styling #content.

As I stated before, this probably isn't the best way. You won't be able to use for forward/backward browser buttons without taking this example further. Also, upon doing 'view source', you'll notice that it doesn't show the new content that was loaded via ajax. It will only show what is in index.html before any JS is executed.

Edited by Root23, 16 May 2011 - 11:24 AM.

  • 0
Posted Image

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download