jqueryの作成を助けてくださいAJAXed divsのリンクはiframeのように動作します

Question

iframeに似た同じページでいくつかのdivを作ってみたいと思います。それぞれはリンクを含むURLを読み込みます。これらのリンクをクリックすると、AJAXリクエストが出て、クリックされたリンクのページからdivのhtmlを新しいhtmlに置き換えてほしいという要求があります。これは、iframe内のページをサーフィンすることと非常によく似ています。

ここ

が最初のdivをロードするための私のコードは、（このコードは動作します）です：

のonload：

$.ajax({ 
    url: "http://www.foo.com/videos.php", 
    cache: false, 
    success: function(html){ 
    $("#HowToVideos").replaceWith(html); 
    } 
}); 
$.ajax({ 
    url: "http://www.foo.com/projects.php", 
    cache: false, 
    success: function(html){ 
    $("#HowToProjects").replaceWith(html); 
    } 
}); 

これは私が実装する方法はかなりわからないコードのサンプルですが、説明しますコンセプト。私はいくつかのセレクター（？のサラウンド）のいくつかの助けを得ることができますか、またはこれを行う正しい方法は何かを教えてください？私はまた、関数を配置する適切な場所がどこにあるのかを知る必要のあるローディングアイコンを表示したいと思います。

$(".ajaxarea a").click(function(){ 
     var linksURL = this.href; // 
     var ParentingAjaxArea = $(this).closest(".ajaxarea");; 
     $.ajax({ 
     url: linksURL, 
     cache: false, 
     success: function(html){ 
     $(ParentingAjaxArea).replaceWith(html); 
     } 
    }); 
    return false; 
}); 

$(".ajaxarea").ajaxStart(function(){ 
    // show loading icon 
}); 

Answer 1

それを実感してください！問題は、コンテンツを置き換える代わりにAJAXed div（class = "ajaxarea"）を完全に削除していた関数 ".replacewith（）"を使用していることでした。ここで使用する適切な関数は ".html（）"でした。

は、ここでのiframeのようなAJAXedのdiv仕事をするために自分の作業コードです：助けを

//onload to initialize the div 
$.ajax({ 
    url: "http://www.foo.com/projects.php", 
    cache: false, 
    success: function(html){ 
    $('#HowToProjects').html(html); 
    } 
}); 

$(".ajaxarea a").live('click',function(e){ // must use live instead of .click() 
    e.preventDefault(); 
    var URL = $(this).attr('href'); 
    var parentFrame = $(this).closest(".ajaxarea"); 
    $.ajax({ 
    url: URL, 
    cache: false, 
    success: function(html){ 
     parentFrame.html(html); 
    } 
    }); 
}); 

Answer 2

あなたはクラスajaxareaを持つすべての要素内のすべてのアンカータグのためのイベントをクリックして聴きたいと仮定すると、あなたのセレクタは正常に動作します：

$(".ajaxarea a").click(function(){ .. }); 

そして、このコード行を、しばらくないセレクタ（あなただけクリックされたDOM要素）のプロパティにアクセスしているだけでなく正常に動作する必要があります：

var linksUrl = this.href;

ParentingAjaxAreaについては、セレクタで$(this).closest()を使用する必要がありますが、どの親を使用するかを判断する必要がありますが、HTML構造を知らなくても具体的な例を示すのは難しいです。読み込みダイアログについては

var ParentingAjaxArea = $(this).closest("#HowToProjects, #HowToVideos");

、私は（ajaxStartとajaxStopを使用して）this answerは良い方法を説明すると思う：それはあなたが書くことができるようにParentingAjaxAreaは、ID #HowToProjectsまたは#HowToVideosを持つ要素のいずれかになりたいように見えます。

編集：私はまた、あなたがclickイベントを使用している気づいた - あなたは後でAJAX経由でDOMに挿入されるリンクにイベントハンドラをアタッチすることができることを計画している場合は、delegateまたはliveを見てください。

Answer 3

$(".ajaxarea a").live('click',function(e){ 
    e.preventDefault(); //* 
    var URL = $(this).attr('href'); 
    var parentFrame = $(this).parent(".ajaxarea"); //** 
    $.ajax({ 
    url: URL, 
    cache: false, 
    success: function(html){ 
     parentFrame.replaceWith(html); //*** 
    } 
    }); 
}); 

• *は - 代わりclosest、私はparentを使用 - - それはより多くのそれが説明的資質
• だためと同様に** **
• （関数の引数でeを参照）クリック操作を防ぐためにpreventDefaultを追加しました* - var親AJAXフレームを含むはとする必要があります。jQueryオブジェクトである必要があります。$(..)

これは正常に動作するはずですが、テストされていません。

編集：

あなたは、おそらくライブ（大丈夫、私はあなたがそれを必要と確信している）必要があります。どのようなclick()それはそれがDOMの時点ですべての要素にonClickイベントを追加することです。 live()は、DOMの変更を待ってセレクタ（.ajaxarea a）を使用して実行し、新しい要素に合っている場合はアクションを追加します。擬似コードでは、基本的にこのん：

DOM.hasChanged{ 
    $('selector').click(..) 
} 

Answer 4

私は自分自身のWebページのために、この例を使用：

http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

それは非常にうまく機能してのハッシュタグとjQuery.history.jsを使用していますあなたのブラウザの歴史。あなたはメディアプレーヤーのようなものを再生させ続けることができるので、とてもうまくいきます。 my own siteをご覧ください。ここには、javacriptファイルのajaxpages.jsがあります。私はlive()を使用していないが、おそらく私はすべきである。