I need a javascript code which refresh an HTML DIV.
Currently, i use this:
$("#area").load("something.html #area > *");
It is good, it makes what i need, but i have to call it every 1 second and it takes about 4-5 seconds to reload my DIV. Is there any way to reload a DIV (the DIV contains php codes) fast?
The problem here relies on your PHP server, you can perform a .load call, a $.post call or an $.ajax call and I believe all will have the same result. The 4-5 seconds you are describing are mostly due to something in the server side script that's taking long to process. My suggestion would be to check the map.php file (as per your comment) and try to improve the performance of it.
Related
I have a problem, I have a php code that loads 10 seconds. This is too long to load the page.
So I need load the whole page first without it. And on place of it show simple text "loading".
Next through javascript load and show it independently. However, these functions are 3.I need to do that with every function.
Specifically, detection of CPU / RAM / HDD state on remote servers.Because it now loads me the page for 10 seconds. This is how I would like to load whole web without this functions the first one, and after a few seconds load it, regardless of the page load.
I needed to keep these features in the same file too.
I hope you understand. Thank you for your help.
Try something like this: First, make your initial page with just HTML. Then have the page make a call with AJAX to a separate PHP file which will do the more complex steps that will take time.
Good to keep things faster from start
follow the steps
1) basic html having loading screen and divs in which other data will be placed
2) send parallel ajaxes to server to get different data in parts
3) on ajax response add data to those predefined divs
4) hide loading screen
I have two pages html (upload page and insert page) with own javascript files. These two pages are the same with the javascript functions. The unique difference is that when I load the insert page it doesn't load from the server some information and when I load the upload page it ask to server some information. The others difference is the name of the button.
Is there a way in order to merge these two page and before to load the page to know its behavior (and to print the right button for instance and to set some global parameters in order to use properly the javascript function)? Maybe with a Ajax with the server? Or it is better to have the two page with own code that the difference is minimum?
The server is written in php.
For instance:
Upload page has green button and the insert page has blue button.
The javascript are more or less the same but in certain case there is some difference. This difference can be manage by a if:
if(flag===true) do X
else do Y
I have to thought to maintain separately the two page but the code is redundant.
So I have thought this approach:
I don't load the page (I use an spinner loop) and I ask to server some information
By this information I show the
button blue or green and set some variables
My answer is: It is better to maintain a redundant code or to use a different approach? And if it is better to use a difference approach which?
What I'm trying to do is make my website show 10 posts, then ask the user if he/she wants to load the "next page." What I want this "next page" button to do is load the content when the user clicks it.
The reason I want the div to just not load completely at all is for website speed. If my website hits let's say 100 posts, even if I just use a simple .hide(); function or something, then the website's still going to take it's time trying to load the 90 posts the website is hiding.
And yes I do realize if I'm worried about page performance I could just make new pages every time I reach 10 posts but that seems like it'd take a lot of time and be very confusing because it wouldn't work in order or something would be wrong with it.
You can't. If it is in the HTML document then it will be sent to the browser. It will be too late to stop it from loading at that point.
The only way to stop the div content from loading is to not have the div in the document in the first place, and then fetch more data from the server (which you would typically do with a link to the next page optionally with JavaScript progressively enhancing things to load the extra data with Ajax instead).
What you need to use is an XHR or Ajax request to get the next 10 posts, it is much better to do it this way rather than hiding them and activating them as needed, because even if you hide it the browser still had to download the content.
You should start by displaying just a few posts, and then load more as needed using XHR/Ajax.
jQuery provides some simple .ajax functions that should help you with retrieving the data as needed.
AJAX is your best bet.
For your needs you could do this two ways:
Make AJAX load more posts as soon as the user clicks the button.
As soon as your page loads (JQ ready function) you could fire an AJAX call to get 10 more posts and either print them in a DOM hidden element OR save them in some variable for later use. After you recover the posts succesfully (AJAX .success()) you could call the AJAX function again and run it again and make it repeat this process until it caches say... 100 posts in a variable or prints it in your DOM element.
You can do an ajax call every time the user clicks the button and append the result to the last div on your page using jquery
$( ".container" ).append( $( "div" ) );
If you want to create a page which will not load all the content at once and not have the user click a button, you can use lazyloading.
It was developed for loading of images, but it can be used for loading of div's too. See Layz Loading for Div
This works both when the user scrolls down and if they navigate to another page and then go back, it will only load part of the page that is visible. Meaning, if they are at the bottom, and they scroll up, it will reload the div's above.
Are there any clever ways of resetting a page back to it's original state (basically a reload) without having the screen physically look like it resets.
Basically i have a bunch of ajax requests, variables and content that i want wiped when a user clicks 'new' (currently i'm using just using location.reload(); ) but want a more graceful way of doing it.
I'm really wanting to refresh it without the screen going white for a split second and also want to retain a single modal popup i have which is open when the user clicks 'new'.
So the user clicks the 'new' button, a popup appears taking a parameter, the site refreshes and the parameter is passed to an Ajax request kicking off the start process.
If anyone could point me in the direction of what to even look for it'd be much appreciated.
"Are there any clever ways of resetting a page back to it's original state (basically a reload) without having the screen physically look like it resets."
You can't refresh the website without making it look like it refreshed, the browser needs time to display the content.
You can, however, use jQuery .load to load some standard markup into your site to make it appear as it did when it was initialized, the browser won't refresh, just like making an AJAX call doesn't require the website to refresh.
I'm, however, unable to see why you want the website to refresh if only to make an AJAX call.
The simple answer is to have the content you want to reload inside a container i.e.:
<div id="container"> page content </div>
Then when you have successfully got new data from the ajax call you can empty the container with:
$("#container").empty();
and repopulate it with
$("#container").append(newcontent);
You can use jQuery's .load to request and replace a portion of your page, e.g. a container element.
For example, calling the following on index.html would effectively "reset" the #container element:
$("#container").load("index.html #container");
See "Loading Page Fragments" on the docs for $.load.
As for resetting variables and cancelling any pending ajax requests - you could perhaps write a reset() function to do all that for you.
Another possibility would be to put data in local storage, or in the url after a # before the reload. But your options for having it look like it isn't refreshing are pretty limited outside of jQuery .load or an XHR request (which is what the jQuery load does)
I have following page with some random tips: http://www.javaexperience.com/tips
I want to display the tips only on the other pages of website so I am making an ajax call and adding whatever returned by the ajax response to a Div's HTML.
The DIV html is:
<div id="tips"><div>
The ajax call is:
jQuery("#tips").load("/tips/");
The problem is that the ajax call results in whole page content to be added to div (since the page gets appended to the div, the above jQuery code gets invoked infinitely) where as I want to add only the tips section. Is there any easy way out?
This is the expected behavior of the load method, it'll always download the entire content. You can specify that a certain part of the loaded page be parsed and placed into the calling container.
jQuery('#tips').load('url #tip1');
You need:
$('#tips').load('ajax/test.html #container');
More info on load here