CODEWITHSUNDEEP
javascriptphpjqueryajaxinclude
Roshi
Roshi

Reputation: 396

Ajax request inside an other ajax

So i made an ajax request for get my "home" page and my "about" page in a "container" on click menu link button inside my index.php, and now i have three link in my "home" page, and i also want open each of these links inside my div "container" to replace the "home" page, so how can i make an ajax request after the first ajax call ?

This is my php request in the index.php:

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

In here my ajax:

$(document).ready(function(){
    $("#menu a").click(function(){
        page=$(this).attr("href");
        $.ajax({
            url: "pages/"+page,
            cache:false,
            success:function(html){
                afficher(html);
            },
            error:function(XMLHttpRequest,textStatus, errorThrown){
                afficher("erreur lors du chagement de la page");
            }
        });
        return false;
    });
	
});

function afficher(data){
$("#container").fadeOut(500,function(){
    $("#container").empty();
    $("#container").append(data);
    $("#container").fadeIn(1200);
	
});
}

and finally my home.html ( i just show you the links ):

<div class="section vs-section" data-speed="0.4">
            <div class="vs-transform title " data-speed="0.4"><a href="projet1.html"><h3>projet1</h3></a></div>
            <div class="vs-transform title" data-speed="0.38"><a href="projet2.html"><h3>Projet2</h3></a></div>
            <div class="vs-transform title" data-speed="0.4"><a href="projet3.html"><h3>projet3</h3></a></div>

  </div>

Upvotes: 0

Views: 35

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Yes you can, you should just use event delegation on() to deal with the new HTML tags added dynamically to the DOM by the first ajax request :

$('body').on('click', '.vs-transform a', function(){
     //Second ajax request
})

Hope this helps.

Upvotes: 1

Related Questions