2016-08-08 1 views
0

J'ai une fonction qui charge le contenu spécifique de la page html externe et un chargeur. Je veux charger ce contenu juste après avoir montré le chargeur pendant 1,5 secondes. Quand je rafraichis les charges du chargeur de page alors rien ne se passe et j'ai besoin de cliquer à nouveau sur le bouton pour le charger. Mon code est ici:Ajax charge après chargeur

<script> 
// CSS for loaded content 
$("<link/>", { 
    rel: "stylesheet", 
    type: "text/css", 
    href: "UserCSS(English).css" 
}).appendTo("head"); 
// Loaded content by button 
$(document).ready(function(){ 
    $(".searchbutton").click(function(){ 
     $("#CourseContent").load("Userpage.html #Content"); 
    }); 
}); 


var myVar; 

function myFunction() { 
    myVar = setTimeout(showPage, 1500); 
} 

function showPage() { 
    document.getElementById("loader").style.display = "none"; 
    document.getElementById("CourseContent").style.display = "block"; 
} 

</script> 

Et voici mon corps de page html.

<body onload="myFunction()" style="margin:0;"> 
     <div id="Page"> 
      <div id="Head"> 
       <a href= "user.php"><img id = "Erulex"src="logo.png" alt="Logo" style="width:300px;height:59px;"></a> 
       <input id="Search" placeholder="Search..." type="text" name="Search"> 
       <a class="searchbutton" href="#"></a> 
       <a class="messagebutton" href="#"></a> 
       <a class="addbutton" href="#"></a> 
       <a class="notificationbutton" href="#"></a> 
       <a class="outbutton" href="logout.php"></a> 
      </div> 
      <div id="Body"> 
      <div id="loader"></div> 
      <div style="display:none;" id="CourseContent" class="animate-bottom" > 
      </div> 
       <ul id="NaviUp"> 
        <li id="U"><a class="active" href="#home">Home</a></li> 
        <li id="U"><a class="active" href="#home">Profile</a></li> 
        <li id="U"><a href="#news">Forum</a></li> 
        <li id="U"><a href="#contact">Store</a></li> 
        <li id="U"><a href="#about">Help Center</a></li> 
        <li id="U"><a href="#about">Friends</a></li> 
       </ul> 
      </div> 
      <div id="Footer"> 
       <ul id="NavBar"> 
        <li id ="D" ><a href="#home">About</a></li> 
        <li id ="D" ><a href="#terms">Terms of Use</a></li> 
        <li id ="D" ><a href="#contact">Help & Support</a></li> 
        <li id ="D" ><a href="#private">Privacy Policy</a></li> 
        <li id ="D" ><a href="#contact">Contact Us</a></li> 
       </ul> 
      </div> 
     </div> 
    </body> 

Pourriez-vous s'il vous plaît aider à résoudre les problèmes. Impossible de comprendre. Toute aide est appréciée.

+1

ce que vous faites pour afficher le contenu en CourseContent lors du chargement de la page? Vous montrez simplement un div vide ('id =" CourseContent ") au chargement de la page –

+0

Yo Yo, Non le chargeur fonctionne, le chargement du contenu ajax fonctionne (quand j'appuie sur le bouton) mais séparément. J'ai besoin de la première pour exécuter loader quand Je clique sur le bouton là, puis je veux charger le contenu immédiatement après automatiquement. –

+1

Peut-être que vous devriez déplacer/copier le code qui charge réellement le contenu ('$ (" # CourseContent "). Load (" Userpage.html #Content ");') du gestionnaire de clic de votre bouton à votre fonction timeout ('showPage () ')? –

Répondre

1

en vous onload fonction il suffit de charger les données, et cliquez sur le bouton show votre div

<script> 
// CSS for loaded content 
$("<link/>", { 
    rel: "stylesheet", 
    type: "text/css", 
    href: "UserCSS(English).css" 
}).appendTo("head"); 
// Loaded content by button 
$(document).ready(function(){ 
    $(".searchbutton").click(function(){ 
     document.getElementById("CourseContent").style.display = "block"; 
    }); 
}); 


var myVar; 

function myFunction() { 
    myVar = setTimeout(showPage, 1500); 
} 

function showPage() { 
    document.getElementById("loader").style.display = "none"; 

    $("#CourseContent").load("Userpage.html #Content"); 
}