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.
Related
I have created a PHP/HTML document which uses jQuery to create a sliding page effect. I would like to have what the user selected on the first page correspond to what they see on the second page. I know how to do this if I was to use two separate pages however I would like to keep the sliding page effect.
The problem is that PHP is loaded first so for the second page nothing is displayed because on initially loading the page nothing is selected on the first page.
The only solution I have is to have the second page only load when the first is completed, but I have no idea how to do this. Does anyone know if its possible to have the document load at separate times?
UPDATE
On second thoughts could I use a XMLHttpRequest to achieve this? And if so how can I do this
so when it comes to Javascript, I have no idea what I am doing.
I have a main page, with two iFrames. The main "content" iFrame holds the main content, in this case, the results from a MySQL database SELECT. The bottom iFrame is used to add rows to the same table.
When the 'add row' form is submitted from the bottom iFrame, I want the 'content' iFrame to load the list of results, and scroll to the newly added result.
I use
Currently, the only way to make this work that I have found is echo-ing the following code once upon successful row entry:
parent.document.getElementById('content').contentWindow.location.reload();
parent.document.getElementById('content').src = '../pages/results.php#".$id."';
The $id variable is set with $mysqli->insert_id;
The above code works, but it's obviously bad coding, on slower connections, for example, I can imagine the browser will fail to change the src as the reload action is still performing.
So, what can I add to my code, or what can I change my code to, to make the javascript either:
Reload the 'content' iFrame to show the new row and then navigate to the anchor to scroll the user to the newly created row. or
Do all of that in one simple action (I've found just using the bottom line of the two lines on it's own doesn't work, so the reload seems necessary to me at the moment.)
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 am building a profile page in asp.net and it has two tabs(Horizontally), one for profile and one for settings. If a user navigates between tabs, he will see the settings page and the profile page. I know two ways to implement this.
Code the page contents in the page and use javascript to hide them, while navigating through them.
This type of method is inefficient as it will lead to performance issues and increase load time.
Use onclick event handler and build the page using codebehind file. This is more efficient way, I can use javascript to rotate something to show that something is being processed and then call a last method in codebehind to hide the rotating Image.
Besides these methods, Are there some other efficient ways to accomplish this?
The answer depends on many factors. Do you want the user to be able to switch back and forth without page refreshes? If so, then you have to load both tabs.
If you're ok with partial refreshes, then you can use Ajax to populate the tabs when you click on them. This has some performance consequences, since it needs to round trip to get the data.
If you're ok with complete refreshes, then simply have each be a different page, when you click on the other tab, it just loads the other tab page.
I'm really not sure what you mean by "build the page with code-behind". Perhaps you mean only include the html for the selected tab when the page is loaded. In my opinion, it's easier to simply make them different pages than to write complex code that changes the structure of the page.
Usually when using any web page that is used to search for huge amount of data, like searching for cheap flights, user is first redirected to a page that shows progress bar e.g. 'Now Searching Multiple Travel Sites..', and when search on the server is done, then is redirected to actual search results.
How that is done? Is it some javascript/ajax trick?
Well you can easily set a function or event to trigger when the AJAX is finished loading. So on the submission of a form you can just set the page to display "loading..." then remove that to display the results or whatever once the AJAX is finished loading.
there are a few ways, one way as you suspect can be with javascript to show a div or some element with 'loading...' in it, on clicking a submit / search button. This will show up until the moment that the page refreshes with the page results.
There are lots jquery plugins which are really simple to use and allow customization in terms of the processing message you want to show. Here is one such Jquery plugin.
It is as simple as calling $blockUI() and $unblockUI() from javascript. You can check out the demo here.