Habil Ganbarli Habil Ganbarli - 4 months ago 28
jQuery Question

Ajax load after loader

I have a function which loads specific content of the outer html page and a loader. I want to load that content right after showing loader for 1.5 seconds. When i refresh the page loader loads then nothing happens and i need again click on button to load it. My code is here:

<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>


And here is my html page body.

<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>


Could you please help to solve it. Could not figure it out. Any help is appreciated.

Answer

in you onload function just load the data , and on click of the button show your 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");
}