CODEWITHSUNDEEP
phpjavascriptajaxmootools
Seik
Seik

Reputation: 41

Making a Ajax Call, after my button is clicked with MooTools

I would like to make a ajax call after my button is clicked. I have more then 14 buttons wich making ajax request to catch element from other parts of my site.

Button, Button1, Button2, Button3
|               |
| load content  |
|               |
|_______________|

For that I have used this command in MooTools:

window.addEvent('load', function(){     
    new Request.HTML({      
        'url': '<?php echo $this->baseUrl() ?>/pageitems/1/news/?format=smoothbox',
        'onComplete': function(answer) {
            answer[1].getElements('.CatchClassId')[0].inject($('spendPointsContPages1').empty(),
'bottom');      
        }   
    }).send(); 
});

And to load the DIV

<div id="spendPointsContPages1"><img src="<?php echo $this->baseUrl() ?>/application/modules/Socialengineaddon/externals/images/loading.gif"/></div>

This is making ajax call. I like when some of my tabs is clicked, then to make the ajax call. So, for now, when I try to load my page, in background all of this content are loaded automatically which I don't like it.

I want every individual tab when is clicked to load the content. On this way I keep the speed on the site.

Any help on this?

Upvotes: 0

Views: 220

Answers (2)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

you can do several things to improve stuff here:

  1. use localStorage or a simple closure - if not supported - to cache the response on the tabs in keys based around the tab ids, if the content is stable enough (does not change dynamically).
  2. add hover intent - basically, start the ajax request on mouseover and store the response in storage, then if the user actually clicks, just show the ready response from the cache.

if you need help with writing a class that can do the cache and extend your request class then i can point you to some work i have done in that regard.

Upvotes: 1

Julian H. Lam
Julian H. Lam

Reputation: 26124

You should be adding events to each individual button, instead of loading all content at the start (which is no faster than server-side loading).

HTML

<div id="menuBar">
    <button class="menuItem" data-page="home">Home</button>
    <button class="menuItem" data-page="about">About Me</button>
</div>

Javascript

document.id('menubar').addEvent('click:relay(button.menuItem)', function() {
    var requestedPage = this.getProperty('data-page');
    loadPage(requestedPage);    // Where loadPage is defined somewhere else
});

Upvotes: 1

Related Questions