LinuxQuestions.org
Did you know LQ has a Linux Hardware Compatibility List?
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices

Reply
 
Search this Thread
Old 04-15-2012, 03:41 AM   #1
Skyer
Member
 
Registered: Aug 2011
Posts: 113

Rep: Reputation: 6
Ajax loading pages dynamically using <a> tags


Hello,
I'm trying to get into Ajax, and I want to create a site which could "swap" pages on the fly. I've came into problem with <a> tags:

1. The page should work normally with all js disabled.
2. I don't want to add "onclick" to all <a> links. I'm writing this as engine where pages are user-supplied, and I'd like the users to be able to simply use standard <a href="">something</a> syntax.

Code:
...
<a href="articles.html">articles</a>
...
When user clicks on the link, js should reload the article content, or if js is disabled, the whole page would be reloaded. Is there any nice method to do this?


Thanks
 
Old 04-15-2012, 06:22 AM   #2
uhelp
Member
 
Registered: Nov 2011
Location: Germany, Bavaria, Nueremberg area
Distribution: openSUSE, Debian, LFS
Posts: 205

Rep: Reputation: 43
AJAX is an acronym for
AdvancedJavascriptAndXml

If you find a way to use javascript without using javascript, you've got your solution.
 
Old 04-15-2012, 06:35 AM   #3
Skyer
Member
 
Registered: Aug 2011
Posts: 113

Original Poster
Rep: Reputation: 6
I think you've misunderstood me, uhelp.

I want the page to work without javascript enabled - that means, if the browser has javascript disabled, the page will work the standard way - user clicks on the link, and whole page is reloaded.

If JS is functional, I want to use it. However, since users are going to generate the content of website, and I'd like to avoid parsing their documents afterwards, I'm asking about ways to call JS function when one clicks on the link, and block the default reloading action. That wouldn't be too complicated, but I'd like to do it without modifying the <a> tags - though I doubt if it's possible. That's why I'm asking here.

edit: And by the way, it's Asynchronous, not advanced.

Last edited by Skyer; 04-15-2012 at 06:37 AM.
 
Old 04-15-2012, 07:11 AM   #4
uhelp
Member
 
Registered: Nov 2011
Location: Germany, Bavaria, Nueremberg area
Distribution: openSUSE, Debian, LFS
Posts: 205

Rep: Reputation: 43
You are right. It is Asynchronous.
(In the very first beginning of Ajax it was "advanced")
If the <a> tag is unmodified, it will just be used.
There is no way to handle this without parsing.
With a lib like jquery you can parse this easily.

But I think, i didn't get it at all. Makes no sense to me.
 
Old 04-15-2012, 08:39 AM   #5
Skyer
Member
 
Registered: Aug 2011
Posts: 113

Original Poster
Rep: Reputation: 6
I've heard about jQuery, but I'd like to keep off any framework, I prefer my own code.
English is not my native language, so I'll try to explain it again, perhaps better this time:

1. If Javascript is disabled in browser, I want the page to work normally.
Code:
<a href="page.php">Go to page</a>
When user clicks on the link, the page reloads to page.php, as it should.


2. If it's enabled, I want to use it. The content is going to be user generated, and I'd like to use it unmodified.
Code:
<a href="page.php">Go to page</a>
When user clicks on link, instead of 'going' to page.php, I want some javascript to be called.
But I don't want to change the a tag, so I'm searching for different approach.

Hopefully it's more comprehensible this time
 
Old 04-15-2012, 09:40 AM   #6
Nominal Animal
Senior Member
 
Registered: Dec 2010
Location: Finland
Distribution: Xubuntu, CentOS, LFS
Posts: 1,723
Blog Entries: 3

Rep: Reputation: 942Reputation: 942Reputation: 942Reputation: 942Reputation: 942Reputation: 942Reputation: 942Reputation: 942
What you need is a Javascript function that goes through the entire document (using DOM interfaces available in Javascript, documented for example here), and adds an onclick handler to each link. The handler runs your desired Javascript, tailored to each link. Make sure the handler returns False, so the browser will not attempt to execute the link in the href tag.

Next, you need to hook the script into the document. Easiest is to add an onload handler to the body element, I suppose, but there are lots of alternatives. It depends on how you emit/serve the pages.

Last edited by Nominal Animal; 04-15-2012 at 09:41 AM.
 
Old 04-15-2012, 12:33 PM   #7
dugan
Senior Member
 
Registered: Nov 2003
Location: Canada
Distribution: distro hopper
Posts: 4,611

Rep: Reputation: 1414Reputation: 1414Reputation: 1414Reputation: 1414Reputation: 1414Reputation: 1414Reputation: 1414Reputation: 1414Reputation: 1414Reputation: 1414
You are trying to write a single-page application that gracefully degrades to a normal multi-page web application

To do this, you need to use the HTML 5 history API. I have a thread about it here:

http://www.linuxquestions.org/questi...ne-age-856902/

Here's some untested example code. If you would prefer it to not use any frameworks, then rewriting it to not use frameworks is your problem:

Code:
<nav>
    <a href="/article1.html">Article 1</a>
    <a href="/article2.html">Article 2</a>
</nav>
<article></article>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="myjavascript.js"></script>
Code:
$(function () {
    if (Modernizr.history !== true) {
        return;
    }
    $('nav').click(function (evt) {
        var receiver = $(evt.target),
            url = receiver.attr('href');
        if (receiver.is('a')) {
            evt.preventDefault();
            $.get(url, function (data) {
                $('article').html(data);
                window.history.pushState(url);
            });
        }
    });
});
What this does is:

If Javascript is not enabled, links simply work as normal.

If Javascript is enabled, we check if the HTML 5 history API is supported. If not, we leave the page as is.

If the HTML 5 history API is supported (as it currently is on Google and Mozilla's browsers), we apply one event handler to the "nav". Clicks received by links inside the nav will bubble up to it and be received by that handler.

When a click is received, we check if the event receiver ("target") is a link. If not, we do nothing.

At this point all is good, we cancel the event (evt.preventDefault()), load the content of the link into the article and modify the brower's address bar to become a link to that specific article.

Note that by doing it this way:
  • it works if you have Javascript disabled
  • it works even if the browser doesn't support the HTML 5 history API
  • your bookmarks will work in any browser

(This example, of course, has a problem. The link's entire HTML is loaded into the article, <html> and <body> tags and all. I'll leave fixing that to you).

Last edited by dugan; 04-20-2012 at 10:22 PM.
 
1 members found this post helpful.
Old 04-16-2012, 06:43 AM   #8
Skyer
Member
 
Registered: Aug 2011
Posts: 113

Original Poster
Rep: Reputation: 6
Thanks for help,

Nominal Animal: Yes that could do the job, but as I've mentioned, I'd like to keep away from this method, if it's possible.

dugan: Yeah, that might be it. Let me check it out further, I'll come back with results soon.
 
Old 04-20-2012, 03:41 PM   #9
Skyer
Member
 
Registered: Aug 2011
Posts: 113

Original Poster
Rep: Reputation: 6
Okay, I've got it figured out for now. On the page load, all links get onclick javascript function attached, as Nominal Animal proposed. The function then, simply swaps the page the Ajax way, and I'll try to get the rest done using HTML 5 API.

Thanks for help guys, problem solved, I think.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Having Ajax reloading pages with link's user friendliness intact Skyer Programming 9 10-31-2011 02:30 PM
caching dynamically generated pages linuxmandrake Linux - Server 1 01-16-2009 04:53 PM
cups-pdf command-line print .html pages without tags ? o5iri5 Linux - Software 1 08-06-2007 06:24 AM
dynamically loading modules that don't perryub Linux - Software 1 12-15-2004 04:44 AM
problem in dynamically loading the shared object sumit Programming 1 01-10-2002 03:15 PM


All times are GMT -5. The time now is 10:18 AM.

Main Menu
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
identi.ca: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration