2016-08-04 13 views
0

/pagesフォルダのajax-container div内のページを呼び出すajax Webサイトをindex.phpに作成しました。2番目のajaxリクエストは機能しません

今私は最初のAJAXリクエストが成功した後、第2 AJAXリクエストを作りたいが、2番目の要求は、例えばのみcertainsページ、

になります:私はページwork.phpを呼び出して、このページ内の私は呼びたいですページ同じフォルダからwork-sliderと私は画像link-in をクリックしてくださいしかし、私はそれを作るための解決策を見つけることができないときに私のAjaxコンテナのdivに作業slider.phpによってwork.phpページを置き換え、

この実際のコード:

index .PHP:

<div id="ajax-container"> 
 
<?php 
 
    $d = "pages/"; 
 
    if (isset($_GET['p'])) { 
 
    $p = strtolower($_GET['p']); 
 
    if (preg_match("/^[a-z0-9\-]+$/", $p) && file_exists($d . $p . ".php")) { 
 
     include $d . $p . ".php"; 
 
    } else { 
 
     include $d . "404.php"; 
 
    } 
 
    } else { 
 
    include $d . "home.php"; 
 
    } 
 
?> 
 
</div>

のAjax機能:

var afficher = function(data) { 
 

 
    $('#ajax-container').fadeOut(250, function() { 
 
     $('#ajax-container').empty(); 
 
     $('#ajax-container').append(data); 
 
     $('#ajax-container').fadeIn(100, function() {}); 
 

 
    }); 
 
}; 
 

 
var lastRequest = null; 
 
if (lastRequest !== null) { 
 
    lastRequest.abort(); 
 
} 
 

 
var loadPage = function(page, storeHistory) { 
 
    if (typeof storeHistory === 'undefined') { 
 
     storeHistory = true; 
 
    } 
 

 

 
    lastRequest = $.ajax({ 
 
     url: "pages/" + page, 
 
     cache: false, 
 
     success: f$.ajax({ 
 
    url: "pages/" + page, 
 
    cache: false, 
 
    success: function(resultFirst) { 
 
     afficher(resultFirst); 
 
     if (storeHistory === true) { 
 
      history.pushState({ 
 
       'key': 'value', 
 
       'url': page 
 
      }, '', page); 
 
     } 
 
     $.ajax({ 
 
      
 
      // How can i define pageIn variable ?? 
 
      
 
      url: "pages/" + pageIn, 
 
      cache: false, 
 
      success: function(resultSecond) { 
 
      afficher(resultSecond); 
 
      } 
 
     }); 
 
    }, 
 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
 
     afficher('erreur lors du chagement de la page'); 
 
    } 
 
}); 
 

 
    return false; 
 
}; 
 

 
window.addEventListener('load', function() { 
 
    setTimeout(function() { 
 
     window.addEventListener('popstate', function(e) { 
 
      if (e.state === null) { 
 
       loadPage('home.php'); 
 
      } else { 
 
       loadPage(e['state']['url'], false); 
 
      } 
 
     }); 
 
    }, 0); 
 
}); 
 

 
    
 
    // link inside index.php 
 

 
$('.link').bind('click', function(e) { 
 
    e.preventDefault(); 
 
    var page = $(this).attr('href'); 
 
    loadPage(page); 
 
    return false; 
 
}); 
 

 
    // second link inside called page 
 
    
 
    $('.link-in').bind('click', function(e) { 
 
    e.preventDefault(); 
 
    var pageIn = $(this).attr('href'); 
 
    loadPage(pageIn); 
 
    return false; 
 
});

+1

あなたがしようとしていることははっきりしませんが、呼び出す前に呼び出されたページにいくつかのイベントをバインドしていると感じています。ページを取得したら、リンクをクリックしてリンクインする必要があります。 –

+0

私はちょうど最初のものの後に他のajaxリクエストを作成したい:私はwork.phpを今すぐ呼び出す。work.phpから私はwork-slider.phpを呼び出したいのでwork.phpをwork-slider.phpで置き換える。inside私のindex.phpのajax-container div – Tiaw

+0

あなたは、サーバー側で取得しているPHPページからajax呼び出しを行いたいということですか? Mmmmhhhhh –

答えて

0

もしdinamicallyページのロード後にDOMに挿入された場合に.link-タグ、 bind()メソッドは失敗します:bind()リスナーを呼び出したときに見つかった要素にアタッチします。バインド呼び出しの後に新しいエレメンツを追加すると、リスナーバインディングは受信されません。

dinamicallyページにHTMLコードを挿入するとき、あなたは上の()メソッドを使用すべきであることを防止するために:

$('body').on('click' , '.link-in', function(e) { 
    e.preventDefault(); 
    var pageIn = $(this).attr('href'); 
    loadPage(pageIn); 
    return false; 
    }); 

そして今、あなたは身体の内側dinamically押すごと.link-でタグが応答するとクリックリスナーに送信します。実際にはbind()の代わりにon()をデフォルトで使うことについての議論は、bind() documentationにあります。

関連する問題