I have some jQuery code working that reloads the div every 10 seconds without reloading the whole page. However, right at the moment, the user doesn't see anything happen on the browser when the refresh is happening.
I know there are thousands of examples on the internet, but I want for the script I already have to display a loading gif image while the data is retrieved when the refresh is happening every 10 seconds for me, user should see some refresh image like this -
.
I'm sure this is probably easy, but I can't find any info on how to do it. Any help or pointers would be greatly appreciated.
Problem Statement:-
Below is my div in my JSP file (dataInfo.jsp) and I am reloading the div container every 10 seconds without reloading the full page.
<body>
<div id='headerDivDash'>
<h1 id='topHeaderDash'>
<!-- some image here -->
</h1>
</div>
<div id="vertical-list" style='display: block; list-style-type: none;'>
<ul class="resp-tabs-list">
<li>Test 1</li>
<br />
<li>Test 2</li>
</ul>
</div>
<!-- just need to reload this div, other div should be intact without getting appended -->
<div class="container">
</div>
<div class="footer">Some Value Here</div>
</body>
Now below is the jquery script I am using to load the div container every 30 seconds and it works fine.
<script type="text/javascript">
$(document).ready(function(){
var auto_refresh = setInterval(
function ()
{
$('.container').html('');
$('.container').load('dataInfo.jsp .container').fadeIn("slow");
}, 10 * 1000);
});
</script>
Now as I mentioned above, as soon as the refresh is going to happen, I would like to grey out the container div and show refresh image as shown above and as soon as the refresh is done, then show the normal result and then the refresh image will also be gone..
Is this possible to do in my current example?
I see you are already using JQuery so this answer will suit you well.
You can use this code to create the gray background and show the loading image.
// Create a refresh function:
function refresh(){
// SHOW overlay
$('#overlay').show();
// Retrieve data:
$.ajax({
url: 'data.html',
type: 'GET',
success: function(data){
// onSuccess take only the container content
var content = $($.parseHTML(data)).filter(".container");
//Replace content inside the div
$('.container').html(content);
// HIDE the overlay:
$('#overlay').hide();
}
});
}
$(document).ready(function(){
// Create overlay and append to body:
$('<div id="overlay"/>').css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: $(window).height() + 'px',
opacity:0.4,
background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
}).hide().appendTo('body');
// Execute refresh with interval:
setInterval(refresh, 1 * 1000);
});
Hope this help you. Note: Replace "img/loading.gif" with the route to the gif you want to use.
Here you go with the code working:
http://jsbin.com/zizudexo/1/edit
When you start the ajax request, place the loading image on the results container.
$('<div id="ajaxLoad"></div>').appendTo('.container');
Add this CSS rule, to display it correctly:
#ajaxLoad {
position: absoulte;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5;
background: silver url(my_image.png) no-repeat center center;
z-index: 1000;
}
Add a position: relative; to the .container.
Then you can start the ajax call:
$.ajax({
type: "GET",
url: "dataInfo.jsp",
success: function(data) {
$('.container').html(data).fadeIn("slow");
},
complete: function() {
$('#ajaxLoad').remove();
}
});
When the data arrives display it, thats what success does. The complete runs even when the server returns an error code or your query times out.
Can you look at this: jsFiddle
I used <i class="fa fa-refresh fa-spin"></i> fontawesome icon to show refresh symbol...
This is one of the ways to achieve what you want...
Related
I've checked some other threads but can't seem to find a response that goes with my code. My issue is my click event only fires on the second click, at which point it works perfectly (second click opens, third click closes, fourth opens, etc...)
$('.expand-btn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.expand-wrapper').animate({
right: "0"
}, 500, function() {
});
} else {
$('.expand-wrapper').animate({
right: "-325px"
}, 500, function() {
});
}
$(this).data('clicks', !clicks);
});
EDIT: Here is my HTML code. It works like this jquery plugin where .expand-wrapper is the contact form which is hidden off screen and .expand-btn is the little flap that is on the side of the screen and clickable.
<div class="expand-wrapper">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Contact
<div class="expand-form">
<?php echo do_shortcode('[contact-form-7 id="2173" title="Home 01 Request_no_title"]'); ?>
</div>
</div>
This sounds like an issue where your data-clicks attribute isn't initialized on your element (as you are setting it at the end of your first click and then it appears to work as expected).
Try initializing it on your .expand-btn element as follows :
<a href="#" class="expand-btn" data-clicks='false'>...</a>
Or if you have multiple expand button elements, you can initialize them when your page is loaded using jQuery :
$(function(){
$('.expand-btn').data('clicks',false);
});
Well, i am stucked and can't find the answer myself. Hopefully someone can give me a hint.
I try to fullfill the following requirements:
There should be a Newsblock within a HTML Page with a fixed width and
height.
In this Newsblock only the title of the news are visible.
Those news are "collapsed" by default and should "expand" if the Mouse is over it.
Due the fact that the 'Newsblock' is limited by its height, there should be a Scrollbar visible. But only if the currently expanded news makes it necessary, so the user can Scroll down.
Newstitle and Newstext should never leave the Newsblock.
so far so good, i was able to fullfill all those demands except the one with the Scrollbar. If i try to reach the Scrollbar out of the currently expanded news it collapses again and the Scrollbar disappears. I understand that my .hover is configured that it always SlideUp if i leave the newsentry and the Scrollbar isn't a part of the newsentry div. But i have no idea what to change to still have an overall Scrollbar for the Newsblock, but won't disappear if i try to 'reach' it.
P.s.: A Scrollbar only per Newsentry looks weird. Thats why i want 'bind' the scrollbar to the parent container :S
HTML
<div id="newsblock">
<div> // some auto generated div's i have to life with, so the news entries are not 'direct' children of the newsblock.
<div class="newsentry">
<div class="newstitle">...</div>
<div class="newstext">...</div>
</div>
... another 9 'newsentry' divs.
</div>
</div>
JS
$(".newsentry").hover(
function() {
$(this).children(".newstext").stop(true,true).slideDown();
},
function() {
$(this).children(".newstext").stop(true,true).slideUp();
}
);
CSS
.newsblock {
height: 200px;
overflow-y: auto;
}
Instead of closing a .newsentry when the cursor goes out of it, a solution can be to close it only when it enters another .newsentry or when it leaves #newsblock.
The scrollbar being part of #newsblock, the entry isn't closed anymore when you go on it.
EDIT: Following our discussion about the scroll issue, I added a step callback to the closing animation to make sure that the top of the .newsentry getting opened remains visible when the other entries are getting closed.
Here is a working example:
var $newsblock = $("#newsblock");
function closeAllNews(slideUpArgs){
return $(".newstext").stop(true).slideUp(slideUpArgs);
}
function openNews(news, slideDownArgs){
$(news).find(".newstext").stop(true).slideDown(slideDownArgs);
}
function ensureNewsTopVisible(news){
// Check if the top of the newsentry is visible...
var top = $(news).position().top;
if(top < 0){
// ...and if not, scroll newsblock accordingly.
$newsblock.scrollTop($newsblock.scrollTop() + top);
}
}
$(".newsentry").each(function(){
var $this = $(this);
// When the mouse enter a news entry...
$this.on("mouseenter", function(){
// ...close all opened entries (normally there is at most one)...
closeAllNews({
// (while making sure that the top of this entry remains visible
// at each step)
step: ensureNewsTopVisible.bind(null, $this)
});
// ...open this newsentry.
openNews($this);
});
});
// When the mouse get out of the newsblock, close all news.
$newsblock.on("mouseleave", closeAllNews);
.newstitle {
font-size: 2em;
}
.newstext {
display: none;
}
#newsblock {
max-height: 150px;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="newsblock">
<div>
<div class="newsentry">
<div class="newstitle">News 1</div>
<div class="newstext"></div>
</div>
<div class="newsentry">
<div class="newstitle">News 2</div>
<div class="newstext"></div>
</div>
<div class="newsentry">
<div class="newstitle">News 3</div>
<div class="newstext"></div>
</div>
<!-- Etc. -->
</div>
</div>
<!-- Ignore the script below. It is just filling in the news' text. -->
<script>
$(".newstext").each(function(i, newstext){
$.get("http://baconipsum.com/api/?type=meat-and-filler&format=html¶s=5&num=" + i)
.then(function(ipsumHtml){
$(newstext).html(ipsumHtml);
});
});
</script>
Try this:
$(".newsentry, .newsblock").hover( // <-- changed
function() {
$(this).children(".newstext").stop(true,true).slideDown();
},
function() {
$(this).children(".newstext").stop(true,true).slideUp();
}
);
This makes sure the block stays open when you hover either over the header or the block itself.
Is that what you mean?
There would be a joke , if i am wrong .. what i thing just change your css as
/* not .newsblock **/
#newsblock {
height: 200px;
overflow-y: scroll;/* not auto*/
}
It will be a lot better if you use click operation instead of hover to slide down news text block because the user can accidentally hover over any of the news entry in order to reach for the scroll bar. I think you need a accordion like functionality. You can use the below code if you are fine with click instead of hover.
$(".newsentry").click(
function() {
$(".newstext").stop(true,true).slideUp();
$(this).children(".newstext").stop(true,true).slideDown();
}
);
Or use the below one to go with hover.
$(".newsentry").hover(
function() {
$(".newstext").stop(true,true).slideUp();
$(this).children(".newstext").stop(true,true).slideDown();
},
function(){}
);
This will not close the news text block until you accidentally hover over another news entry.
Cheers! Building a webpage from scratch using tornado io. I have different graphs and wanted to use some of the single page app magic. So I thought do a div and swap out the content doing:
<div id="chartType"> Chart goes here</div>
Load Graph
<div id="maincontent"></div>
<script type="text/javascript">
$('#addContent').click(function(){
$("#maincontent").replaceWith("{% include graph.html %}");
return false;
});
</script>
HTML does not seem to like the {% include graph.html %}
If I do something like $("#maincontent").load(/path/to/file) it keeps adding the content and not swapping it.
My question is how to swap the div content with different {% includes %}?
Is there a better way of doing this (Am I misusing the %includes% )?
Many thanks
I believe that $("#maincontent").load(/path/to/file); should work. I think you may be running afoul of caching, and so you may need to do this:
var setMainContent = function(path) {
$.get({
url: path,
cache: false
}, function(data){
$("#maincontent").html(data);
});
};
And then call your function in your click handler:
setMainContent(/path/to/file);
What I usually do with very simple content swaps is use css to handle it.
For instance, if I have the content I want to show originally in Div A and the content I want to replace it with in Div B, by default I will have Div A set to 'display: block' and Div B set to 'display: none'. Then, to swap the content, use javascript to set Div A to 'display: none' and Div B set to 'display: block'.
var divA = document.getElementById('divA');
var divB = document.getElementById('divB');
function hideDivA() {
divA.style.display = 'none';
}
function showDivB() {
divB.style.display = 'block';
}
function swapContent() {
hideDivA();
showDivB();
}
#divA {
background: #74CFAE;
color: #000;
display: block;
}
#divB {
background: #555;
color: #fff;
display: none;
}
<div id='content-wrap' onclick='swapContent()'>
<div id='divA'>Div A (initially visible content)</div>
<div id='divB'>Div B (initially not visible content)</div>
</div>
Depending on your use case, you can also create a template and assign that into your DOM.
For instance.
<div id="runtime_area"></div>
<script type="text/html" id="page1">
<b>Banner</b>
</script>
Then later
document.getElementById("runtime_area").innerHTML = document.getElementById("page1").innerHTML
i have this code it works fine problem is i need to use it for 60 links
that wil make around 3600 lines of java script code just to be able to see hidden content for 60 divs
sorry it was late, so posted wrong code, it was not working,
forgot to mention my script is menu with two links about and help when page loads the link is shown but not the contens, instead it shows welcome message, when about is clicked it shows its content and when help is clicked it replace the contens with it
ok fixed my example works fine now.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#welcome-content").show();
$("#help-content").hide();
$("#about-content").hide();
$("#about-anchor").click(function(){
$("#welcome-content").hide();
$("#help-content").hide();
$("#about-content").show();
});
$("#help-anchor").click(function(){
$("#welcome-content").hide();
$("#help-content").show();
$("#about-content").hide();
});
});
</script>
<div id="anchor-div">
<a id="about-anchor" href="javascript:;">
About
</a>
</br>
<a id="help-anchor" href="javascript:;">
Help
</a>
</br>
</div>
<div id="content-div">
<div id="welcome-content">welcome to help system</div>
<div id="about-content">About=123</div>
<div id="help-content">Help=456</div>
</div>
jsfiddle demo here
Make use of the index of every li to show/hide the corresponding div:
$('#anchor-div a').click(function(e) {
e.preventDefault(); // Dont follow the Link
$('#content-div>div').hide(); // Hide all divs with content
var index = $(this).index('a'); // Get the position of the a relative to other a
$('#content-div>div').eq(index + 1).show(); // Show the div on the same position as the li-element
});
$('#anchor-div a').click(function(e) {
e.preventDefault(); // Dont follow the Link
$('#content-div>div').hide(); // Hide all divs with content
var index = $(this).index('a'); // Get the position of the a relative to other a
$('#content-div>div').eq(index + 1).show(); // Show the div on the same position as the li-element (skip welcome div)
});
#content-div>div {
display: none;
/* Hide all divs */
}
#content-div>div:first-child {
display: block;
/* Show welcome */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anchor-div">
About<br />
Help
</div>
<div id="content-div">
<div>Welcome!</div>
<div>About</div>
<div>Help</div>
</div>
This way you neither need ids nor classes
// Edit: I changed the answer to match the new question. I hide the divs using css (not as mentioned in the commets with js)
I am displaying the pop up using the code below:
function validatePlaces()
{
$(document).ready(function(){
//open popup
$("#pop").ready(function(){
$("#overlay_form").fadeIn(1000);
positionPopup();
});
//close popup
$("#close").click(function(){
$("#overlay_form").fadeOut(4500);
});
});
//position the popup at the center of the page
function positionPopup()
{
if(!$("#overlay_form").is(':visible'))
{
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position:'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
var placeValue = document.getElementById("form1:placeId").value;
var countryValue = document.getElementById("form1:countryId").value;
var continentValue = document.getElementById("form1:continentId").value;
if(placeValue=="Name Of Places?"||placeValue==" ")
{
//alert("Please enter your search place name... ");
pop();
return false;
}
return true;
}
Problem: Page is refreshing automatically and the pop up vanishes very soon so I need to put a setTimeout. Or if any other solution please provide. Please Help...
Page is refreshing automatically..I have no idea why..
Pop Form Code Used:
<form id="overlay_form" style="display:none; opacity:0.8; background-color: gray; border-
radius:10px; height:65px; margin-top: 12%; width:350px;">
<img border="0" src="../../resources/images/error.png" alt="" width="30" height="22"/>
<p style="font-family:times new roman ; font-size:18px; color: white;">
Enter your search place name...</p>
<b>Close</b>
</form>
I had a very similar problem when using List.js whereby immediately after clicking on sort, the page would refresh. Hours later I tried changing my form element to div and this fixed it. I think it was behaving as if its been submitted or something. I know its late but any other person please try changing form to div. and it will stop the page refreshing.
//5000 is the time in mili seconds after which you want to hide the popup
$("#overlay_form").fadeIn(1000).delay(5000).fadeOut(1000);