Ajax request using mootools not working

Question

Hi everyone,

I try loading content into a div with this tutorial. Unfortunately, this simply loads the HTML file as a new page.

This is the javascript that should do the job

window.addEvent('domready', function() {

     $('runAjax').addEvent('click', function(event) {
         event.stop();
         var req = new Request({
             method: 'get',
             url: $('runAjax').get('href'),
             data: { 'do' : '1' },
             onRequest: function() { alert('The request has been made, please wait until it has finished.'); },
        onComplete: function(response) { alert('Response received.); $('container').set('html', response); }
         }).send();
$('runAjax').removeEvent('click');
     });
});

this is the link that should initiate the function

<a href="about.html" id="runAjax" class="panel">Profil</a>

and this is the div-structure of index.html. i want the content to be loaded into the "container"-div

<div id="view">
    <div id="sidebar">
     mib
    </div>

    <div id="container">
     <div id="logo">
      <!--img src="img/logo.png"-->
     </div>

     <div align="center" id="tagline"> 
      content
     </div>
    </div>
</div>

I dont really care what script i use as long as its compatible with MooTools 1.2, because i need it for a sliding top panel and it would be a lot more work to change it to a jquery panel for example.

Answer 1

There is a ' missing here:

alert('Response received.);

Answer 2

You're making things more complicated than you need to. Give this a try:

window.addEvent('domready', function(){
    function loadPage(url) {
        $('container').load(url);
    }

    $('runAjax').addEvent('click', function(e) {
        e.stop();
        loadPage(this.get('href'));
        this.removeEvent('click', loadPage);
    });
});

If that doesn't work, boot up Firebug and see what Javascript errors are getting logged. Here's the reference for the Element.load() shortcut:

http://mootools.net/docs/core/Request/Request.HTML#Element%3Aload

Answer 3

You aren't stopping the click event as recommended.

instead of:

event.stop();

do:

new Event(event).stop();