2016-04-24 8 views
0
私はプロジェクトのためのAjaxを学ぶために始めている

をロードしていないが、私はいくつかの問題を持って...これは私の状況はこれまでのところです:私は示すために、異なるボタンとナビゲーションバーを持っている学習のAjax:動的コンテンツは

の1-コンテンツ。

2私は選択されたコンテンツを行くdivコンテナを持っています。

3-希望のコンテンツをクリックすると、読み込まれません。

$(function(){ 
 

 
    $.ajaxSetup ({ 
 
     cache: false 
 
    }); 
 
    
 
    var ajax_load = "<img width='50px' src='https://berkeleyloop.ridecell.com/static/common/images/loading-circle.gif'/>"; 
 
    
 
    var loadUrl1 = "http://fullhdpictures.com/wp-content/uploads/2015/04/Beautiful-Pagani-Zonda-Wallpapers.jpg"; 
 
    $("#load1").click(function(){ 
 
     $("#result").html(ajax_load).load(loadUrl1); 
 
    }); 
 
    
 
    var loadUrl2 = "http://fullhdpictures.com/wp-content/uploads/2015/04/Most-Beautiful-Pagani-Zonda-Wallpapers.jpg"; 
 
    $("#load2").click(function(){ 
 
     $("#result").html(ajax_load).load(loadUrl2); 
 
    }); 
 
    
 
});
#navbar { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 48px; 
 
    height: 100%; 
 
    background: #181818; 
 
    overflow: hidden; 
 
} 
 

 
#result { 
 
    position: relative; 
 
    left: 50px; 
 
    width: calc(100% - 48px); 
 
    height: 100%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="navbar"> 
 
    <button id="load1">1</button> 
 
    <button id="load2">2</button> 
 
</div> 
 

 
<div id="result"></div>

私は何を逃したのですか?希望の効果を達成するために私を助けてください!

+0

「ロードが終了しない」とはどういう意味ですか? ''要素は '.load()'の結果で置き換えられましたか? – guest271314

+0

まず、Wordpressにはajaxを処理する独自の方法があります。第二に、あなたは画像にAJAXを必要とせず、DOMに挿入するだけで、すべてロードします。 – adeneo

+1

ボタンのクリックイベントでイメージをロードしています。イメージがあなたの希望する場所にロードされているので、何をしたいのですか? –

答えて

2

loadを使用して別のWebサイトからコンテンツを読み込むことはできません。そうするためには、あなたは権利でなければなりません。私は、これは

codepen.io/airsakarya/pen/zqLVZoを助けるだろうと思い :あなたのコンソールをチェックする場合は、この

は「いいえ 『をアクセス制御 - 許可 - 起源』を」

編集が表示されます?editors = 1010

+0

はい!ありがとうございました! :) – Ermac

+0

@Ismailあなたが参照するリンクがなくなる場合は、あなたの回答の詳細をあなたの投稿にコピーする必要があります。 –