LinuxQuestions.org - [SOLVED] Ajax loading pages dynamically using <a> tags

- Programming (https://www.linuxquestions.org/questions/programming-9/)

- - Ajax loading pages dynamically using <a> tags (https://www.linuxquestions.org/questions/programming-9/ajax-loading-pages-dynamically-using-a-tags-939875/)

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

AJAX is an acronym for
AdvancedJavascriptAndXml

If you find a way to use javascript without using javascript, you've got your solution.

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.

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.

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

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.

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

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.

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.