hi

I'm making a full AJAX site with prototype, and I want that every time a hyperlink is activated, the event is canceled and a AJAX script loads the page instead. This is the code I'm using:

Event.observe(window, 'load', function(){
  Event.observe($$('a'), 'click', function(e){
    Event.stop(e);
    window.location.hash = $(Event.element(e)).readAttribute('href');
    new Ajax.Updater('main', $(Event.element(e)).readAttribute('href'), {method: 'post'});
  });
});

It seems to work if I change $$('a') with $('link-id'), but I don't want to repeat the code every time I'm making a new link... I've also tried $A(documents.getElementsByTagName('a')).observe(...) but didn't work either... anybody knows what I'm doing wrong? :/

This should work! Instead of ( readAttribute ) / simply replace it with the ( getAttribute ).

window.location.hash = $(Event.element(e)).getAttribute('href');
new Ajax.Updater('main', $(Event.element(e)).getAttribute('href'), {method: 'post' }

it didn't really change anything. The problem is that it's not even triggered, the link just changes the page as normal...

the event.observe doesn't accept an array of elements, so you have to attach observers to each A element in a loop, like this:

Event.observe(window, 'load', function() {
	$$('a').each(function(element) {
		Event.observe(element, 'click', function(e){
			Event.stop(e);
			// do what you want with the event..
		});
	});
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.