2016-08-04 169 views
0

我做了一個阿賈克斯網站從/pages文件夾中調用頁面ajax-container div在我的index.php第二個Ajax請求不起作用

現在我想使第一AJAX請求成功,但第二個請求將只在某些碼頁之後第二個Ajax請求,

例如:我叫work.php的頁面,而這個頁面裏面我想打電話給頁work-slider從同一個文件夾並替換由工作slider.php的work.php網頁在我的Ajax的div容器,當我在圖像link-in 點擊,但我不能找到使它成爲一個解決方案,

這是我的實際代碼:

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-slider.php替換work.php ajax-container div在我的index.php – Tiaw

+0

你的意思是你想從你在服務器端獲得的PHP頁面發出ajax調用? Mmmmhhhhh –

回答

0

如果如果dinamically插入到DOM頁面加載後。鏈路,在標籤, bind()方法將失敗:bind()將偵聽器附加到它在調用時找到的元素。如果在綁定調用之後添加新的elemenent,它將不會收到監聽器綁定。

爲了防止當在一個頁面中插入dinamically的HTML代碼,您應該使用()方法:

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

而現在,你dinamically推體內每一個。鏈路,在標籤會迴應到點擊監聽器。關於默認使用on()而不是bind()的討論實際上在bind() documentation中找到。