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
Related
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.
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.)
I have a web page loading with javascript populating drop down lists.
The problem is that one dropdownlist is taking longer to load than the other, i.e. one is able to be clicked on straight away but the other takes a little longer to load and can't be clicked on until it has loaded.
Does anyone know why this might be happening?
Thanks!
I have a page linking to another separated page on the server. I would like to present a loader that finishes exactly when the second page is fully loaded. I dont use AJAX to call the second page, but a simple GET action. Is there a way to control that?
an example would be at: http://m.elal.co.il when you click on one of the buttons.
Thanks
I think the best way here is to preload page with ajax and then push all content of second page to body tag of this page.
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.