I have two pages that inherit from one master page, First.aspx or second.aspx. Navigation is on master page. If I am on first.aspx page & want to go to second.aspx onClick. I just want to load My contentplaceholder, not refresh all of the page. Is this possible or not?How do I do this if it is possible?
I have tried using:
$(function() { $("#btn").click(function() {
$("#Content").load("Second.aspx");
});
});
I have also tried using this:
function SelectRol() {
window.location = 'Second.aspx';
return false;
}
Unfortunately, that is not going to work. You could use ASP.Net UpdatePanel for partial page refreshing, or better use JQuery Ajax methods to load HTML content you want to show.
See http://www.dotnetfunda.com/articles/article1123-partial-page-refresh-using-jquery.aspx for more information about this solution.
Its better to use ajax call if you don't want whole page to get refreshed . or you can use AHAH as the one facebook use for the chat box
There is no such thing as Partial Loading / Partial postback. We can only do Partial Rendering. If you need to load a second page that page's entire page event life cycle would happen which will include the Master page's events.
If you need a true Ajax mechanism. Render your scripts initially which will construct your UI and subsequent communication will be transmitting only the data using RESTful / JSON service.
Related
I have a Master Page in a ASP.NET MVC 4 application. The master page has a menu with several items and each item is a link to a page.
The menu is a jQuery Accordion menu. When I select an item the entire page is reloaded and the accordion menu return to the original state.
To avoid this, I store the last menu opened and store it to an attribute of the header of the menu. On $(document).ready event I loop the headers and activate the menu but this makes an ugly effect to be seen.
How can I avoid reload of the entire page? I have to use the update panel in the MainContent of the ContentPlaceHolder of the Master Page? There is an example?
I'd suggest an Ajax method. You can find a tutorial here:
http://www.codeproject.com/Tips/886473/Implementing-AJAX-in-ASP-NET-MVC
Since you're already using jQuery, another option would be to use $.get(). You can find a lot of tutorials related to that method, like this.
To make a difference when returning data between an 'normal' call to your action and one from an ajax-call use :
if (Request.IsAjaxRequest()) return PartialView("_Index", VM);
return View(VM);
The partial one will not include the lay-out. Otherwise you might get a funny looking page with the multiple top-bars.
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 working on this website http://techxpertschico.com which uses ajax and .htaccess to update a single index.php page, the problem is that I can't get the back button to work. For example if you click two separate top header links and then click back it will not change the content you are looking at even though the url will be updated. This is because my logic to direct the user to the proper web page happens using php but when a user clicks the back button they receive a cached copy of the page therefore no server request. In fact, you'll notice if you click refresh on my site after clicking the back button it will load the correct content because it will send out the server request. My first thought to fix this was to force a refresh when a user clicks the back button, but I couldn't get this to solve the problem. I tried using header files, I tried using javascript, and I failed, so I'm asking for help once more. I just need to be able to parse the URL and direct them to the appropriate page but normally I do this using php and since the back button uses caching I am not sure if I need a javascript solution or if I need to try harder to figure out the forced refresh approach.... What would you do, or what do other sites that use a single index.php file do?
P.S. I'll post any code if you need to see it. Looking at my question from yesterday might help. How to refresh page on back button click?
Your problem is not related to the cache mechanism.
I've just checked your website using firebug and I have noticed that after loading the home page (without ajax), you use ajax to load requested page asynchronously and change URL in the address, the URL altering is done by your code which is ignored by firefox.
The URLs altered with code are not kept in the browser's history, this is why the Back button doesn't work in your case
EDITED, added own working Code example
If you are still working on this:
I do suggest you take a look into this article
change-browser-url-without-page-reload
I think it explains a good method which is not too complicated to make use of the HTML5 history possibilities.
Here's the code I finally implemented on my site, and the only issues I have is with my expandable menu states when going back in history..
HTML just uses a DIV with #content-main on your index.html, for all the external html-file contents will be loading into it.
The links(anchor) which should direct to that DIV get a class assigned: ajaxLink
In your referenced html-files, just write the content, no head or body.
You may include scripts, though, if it makes sense to not put them on your index page.
$(function () {
//AJAX: load html-pages dynamically into this site's div (#content-main), and add browser history and URL support
/*unnecessary? I don't use the next 3 lines of code
//To override the default action for the link(anchor tag), use the following jQuery code snippet.
$("a.ajaxLink").on('click', function (e) {
//code for the link action
return false;
});
*/
//Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.
$("a.ajaxLink").on('click', function (e) {
e.preventDefault();
/*
- if uncomment the ABOVE line, html5 nonsupported browers won't change the url but will display the ajax content;
- if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div #content-main
$('#content-main').load(pageurl);
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
//stop refreshing to the page given in
return false;
});
//the below code is to override back button to get the ajax content without page reload
//added some details from http://rosspenman.com/pushstate-jquery/ - otherwise going back in history to initial page resulted in issues
$(window).on('popstate', function(e) {
if (e.originalEvent.state !== null) {
$('#content-main').load(location.pathname);
}
else {
$('body').load(location.pathname);
}
});
});
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 have a list of "patients" that is queried and linked like so:
list.append($(document.createElement('li')).html("<a href='./patient.html?id="+data[i].UnitNumber+"'><img src='http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+data[i].UnitNumber+"&type='/><h3>"+data[i].LastName+", "+data[i].FirstName+" "+data[i].MiddleName+"</h3><p>Age: "+data[i].Age+"</br>SSN: "+data[i].SSN+"</p></a><a href='./patient.html?id="+data[i].UnitNumber+"' data-transition='slideup'>info</a>"));
Upon clicking that page I arrive at a patient profile page that should load in some of this data using the query in the URL (i.e. patient.html?id=100002). That ID is used in a getJSON call to populate the various fields. I want this to happen as soon as the page is loaded.
Problem: When one of the list elements above is clicked, it leads to the patient profile page but none of the fields have been populated. If I Refresh that same page, all of the data loads fine. Here's some code:
function login() {
var query = window.location.search;
if (query.substring(0, 1) == '?') {
query = query.substring(4);
}
$.getJSON("http://URLGOESHERE/wcf/PatientSearch.svc/byunitnumber?unitnumber="+query+"", function(data) {
var head1 = document.getElementById("name");
var newtitle=""+data.LastName+", "+data.FirstName+" "+data.MiddleName+"";
head1.firstChild.nodeValue=newtitle;
document.frmLogin.email.value=" "+data.BirthDateText+" ("+data.Age+")";
document.frmLogin.password.value=" "+data.SSN;
document["profpic"].src = "http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+query+"&type=pic";
});
}
I call the function "login()" at document.ready. I even tried calling it "onLoad" of the body. No idea why this doesn't work when linked, but does if I just go to the URL directly or I refresh..
Linking within a multi-page document
A single HTML document can contain one or many 'page' containers simply by stacking multiple divs with a data-role of "page". This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.
If a link in a multi-page document points to an anchor (#foo), the framework will look for a page wrapper with that ID (id="foo"). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking.
It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would look like this:
href="multipage.html" rel="external">Multi-page link