0

ボタンがクリックされた後に ajax 呼び出しを行いたいと思います。サイトの他の部分から要素をキャッチするために ajax リクエストを行うボタンが 14 個以上あります。

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

そのために、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(); 
});

そしてDIVをロードするには

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

これはajax呼び出しを行っています。タブのいくつかがクリックされたときに ajax 呼び出しを行うのが好きです。そのため、今のところ、ページを読み込もうとすると、バックグラウンドでこのコンテンツがすべて自動的に読み込まれますが、これは好ましくありません。

クリックしてコンテンツをロードすると、個々のタブがすべて必要になります。このようにして現場のスピードを保っています。

これについて何か助けはありますか？

4

2 に答える 2

1

最初にすべてのコンテンツをロードするのではなく、個々のボタンにイベントを追加する必要があります (サーバー側のロードよりも高速ではありません)。

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
});
于 2012-05-10T04:32:34.603 に答える
1

ここで物事を改善するためにいくつかのことができます：

  1. localStorageコンテンツが十分に安定している (動的に変化しない) 場合は、または単純なクロージャーを使用して (サポートされていない場合)、タブ ID に基づいたキーでタブの応答をキャッシュします。
  2. ホバーインテントを追加 - 基本的に、マウスオーバーで ajax リクエストを開始し、応答をストレージに保存します。ユーザーが実際にクリックした場合は、キャッシュから準備完了の応答を表示するだけです。

キャッシュを実行して要求クラスを拡張できるクラスを作成する際に助けが必要な場合は、その点に関して私が行ったいくつかの作業を紹介できます。

于 2012-05-10T08:28:30.570 に答える