Preloading page between two asp.net pages - javascript

I posed a question that related where I could display "Page loading" in asp.net page using jQuery. But, I had no luck.
So, say I have page1 and it navigates to page2 and page2 doesn't some heavy data access. Is there any way I could show the "preloading" page while the page2 is finished.
I want to navigate from Page1 -> "Preload" -> Page2(once page2 is completed).
I want to know if this is possible using Javascript in the code behind.
Thanks.

The way you would typically do this is have a page that shows the message and uses AJAX, in my example using jQuery, to load the other page onto the current page.
<body>
<div id="content">
Page loading
</div>
<script type="text/javascript">
$(function() {
$('#content').load('/url/to/other/page');
});
</script>
</body>
I've omitted loading jQuery itself.
Note: you could do this on a single page by having it generate different content based on some query parameter. You don't need to actually have a separate "loading" page -- though you could probably make that work for several different pages as well.

If using JavaScript is OK, redirect the user to the Preload page, and then use JavaScript to take the user to Page2. This will make the Preload page stay visible while Page2 is loading.
(Also, "JavaScript in the codebehind"? Don't tell me you're using JScript.NET or something as your server side language)

No matter what you do, to begin loading Page2 you'll have to navigate away from Page1 (unless you get complicated and wrap your pages in another container on a single page and navigate within your container).
Otherwise the default content for Page2 should be a "Preloading" message that gets taken away once the document has finished loading its content.

Is a possible solution to have an almost empty page with a few placeholder divs in the right places containing a loading image. Then run web service calls to populate each placeholder in jquery/javascript?

Related

Prevent a page from fully loading in codeigniter

I have separate views for my navbar (I'm using materialize), home, etc.
This is what my navbar looks like
It has tabs. When I click a another tab, a method in my controller does this
$this->load->view('navbar');
$this->load->view('payables');
However, it reloads my whole navbar which prevents my jquery to fulfill it's duty to change the active tab, the page loads but the tab that is selected is still 'HOME'.
How can I prevent my navbar from reloading and load another page at the same time using $this->load->view(). I researched that there is something called ng-route and ng-view in Angular JS that will accomplish this. Is there a counterpart in codeigniter?
If you click in a tab and you "load a method", it means you're launching a whole HTTP request, and you will reload the full page.
To avoid that, you'll need to do it asynchronously. You'll need to create an AJAX request, to load only the part you want. In your view, you'll have to code the JS request that launches a call to the server to render only the part you want to show. When the server answers, your JS will have to allocate that into the page.

Load different pages while leaving certains divs behind

I want to know how some web pages move between different PHP pages without reloading the entire page. Here some divs stays the same. If I use AJAX i cannot share the link of the page, so I need to do this. Thank you.
You have to use AJAX in order to do that.
BUT if you want to be able to share the link or handle reload ou need to build a navigation system using # and some javascript around it.
There is a lot of example for doing that on the web.
https://www.google.nl/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=tutorial%20build%20ajax%20navigation
You could just load a new page and include the same divs of the page :
include 'div1.php';
You could use the other answers below and just use ajax but also build a url at the same time so you can navigate back to the same structure of the page.
clicking the link modifies the url, eg:
document.title = document.title + '?div1=true'
Modify the URL without reloading the page
and then just does an ajax call to load a new section. And on first page load, parse the url to check what divs to load.
you could use iframes:
<iframe src="/div1.php" id="div1"></iframe>
And clicking a link loads new stuff to a specific iframe.

Do not display anything until everything is loaded

I am using the JS Facebook Graph API and want to load a friends list with profile pictures and this takes a few seconds if there are a lot of friends. I want to display a loading div, and once everything is loaded I want to hide the loading div and show the friendliest. I am using JQuery's $(window).load function, but it does not seem to work, the loading div does not show, but still shows content rendering. I think this may be because I'm making the Facebook request in the middle of my page, so the browser might think at the beginning everything is loaded, but have no idea how to fix this.
Put your whole page in a <div style="display:none;"> or simply set the <body style="display:none;"> then change it to :block (using jQuery.show() will work) once you have received the data you are requesting from Facebook.

Is it possible to place a loader image inside an iframe while its loading its content?

I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.

Render optionally needed content only when needed on dynamic JS page

I am building a web application which I intend it to work like a traditional 'software': as few page reload, and page redirect as possible.
My solution to page reload and redirect is to have them as 'tabs' within the app, so when you click on another tab, the div of your current content will shrink to 0 width.
My question is: how do I prevent the content (writtent in JS, w/ PHP backend) in a tab to load unless when it's clicked on?
(Assuming this is what I should do to reduce unnecessary load)
Just don't load it until the link/button/etc. to the tab is clicked.
See also the jQuery tab implementations.
If your back-end is in PHP, you should control what you send to the client from there.
By the time the js gets the code, it is too late to control what not to load. You can hide it, or remove it, but it has already been loaded.
So, to reduce unnecessary load, and as a good practice, you should only send to the client the active 'tab'. That has to be done in PHP in your case.

Categories