If I have a more than one pages, all using the same layout page, is there a way I can navigate between the pages and only refresh the body part of the layout page. For example if I have a list page and select an item to go to the detail page and they both contain the same layout view, I don't want the layout which contains the menu and footer to reload, just the #RenderBody() should reload.
I am building this in Mvc 3.
I am a beginner to Mvc so help we with some examples.
Thanks.
Call the pages in ajax and replace the content of your html body
Tutorial: http://www.webdesignerdepot.com/2014/02/how-to-supercharge-your-sites-speed-with-ajax-and-jquery/
Demo: http://www.webdesignerdepot.com/cdn-origin/uploads7/how-to-supercharge-your-sites-speed-with-ajax-and-jquery/demo2/#page3
Related
I'm working on a jquery mobile hybrid app. as I have a fixed skeleton of the app, all I do is loading the content of each page on the <div data-role="content"> of the index file preserving the header / footer / sidebar etc...
$("#pageContent").load ("pages/login-view.html", function () {
$(this).enhanceWithin();
});
Everything's working just fine.
But what's blocking me right now, is managing the back action when clicking on a left arrow in the header.
Since I'm not reloading the whole page and I'm loading only the content on pages inside my main page, I have no Idea how to create or use the Backstack of loaded pages contents.
Do you hve any idea about how to do this ?
Thank you.
I'm trying to build a web app (HTML/Bootstrap/jquery) which has header,footer,leftnav and right pane. The content of the right pane would be a separate html page which will be loaded based on what is clicked in the left nav.
I got individual pages with HTML for header/footer/leftnav replicated for each content page. But I only would like to have the right pane content to be loaded without reloading the other components.
Heres an example, upon click on left nav item.. only the content of the right pane changes:
http://play.raaga.com/myraaga
Appreciate any help, thanks!
You could use the ".load()" function of jquery.
$('selector-of-the-panel').load('url');
jQuery .load() docs
The example you included looks pretty close to jQuery UI's .tabs() widget, which you can use with ajax to load your different html pages: http://jqueryui.com/tabs/#ajax For a vertical nav-like look, see: http://jqueryui.com/tabs/#vertical
I'm trying to implement a SPA with AngularJS. I have a main page layout where the left side deals with navigation links and the top right corner contains username and user preference options as well and of course most of the page deals with the content of each navigation path.
What I'm trying to do is if the user is not logged in, redirect him to a login page that has a completely different layout (the login form centered and that's all).
How can this be done in a simple manner?
I am also in the process of implementing this feature. I will be treating login and the authenticated application as two different SPAs. So there will be 2 different server routes one for the login and one for the application.
This will allow me to not have my ng-view on the body tag so I don't need to have my header and sidebar logic replicated on every route.
You can use ng-view on the body tag so you can change the whole layout
<body ng-view>
</body>
I'm creating a mobile app using jquery mobile and cordova. I've successfully loaded a dynamic listview from a json ajax call. My issue is that when I navigate to another page, then press the back button, the original page's listview does not load and there is nothing where it should be. If I refresh the page, the listview appears. Rather than refresh the whole page every time I navigate to this page, how would I refresh just the listview?
I've tried refreshing the listview both when the DOM and the window have loaded, and before both, and using $(document).on("pagebeforeshow", "#pagenamehere", function() {}); to no avail.
To be more specific, I have two pages with listviews. The navigational steps go as follows:
1. load page 1: listview shows
2. navigate to page 2: its listview does not show
3. press back: page 1 listview shows
4. navigate to page 2: its listview still does not show
5. refresh page 2: its listview DOES show
6. press back: page 1's listview does NOT show
This process should make it clear that the listview only loads when the url is directly input or reloaded; for some reason navigation between pages (different html files) breaks this.
If you have script inside the head tag of the second page and this page is loaded through Ajax, then the script won't execute.
Try to move your script from the head tag inside the second page's div (<div data-role="page" id="mySecondPage">) or create a JS file and load it on the first page's load. Relevant example here
jQuery Mobile uses Ajax to perform pages transitions so during the transition jQuery Mobile will only inject the contents of the response's body element (or more specifically the data-role="page" element). Nothing in the head of the page will be used (except the page title).
In conclusion, any scripts and styles referenced in the head of a page won't have any effect when a page is loaded via Ajax. They will execute if the page is requested via HTTP and that's why your listview is loaded after a full page refresh.
I have a page that shares the same footer / header layout and design.
I am looking for sample javascript code that allows clicking on menu to reload center panel only. I am not doing it in JSP. I hope to get some sample javascript code.
Can I put the center panel in an iFrame or another type of widget?
What is the most efficient way to do this?
Thanks a lot.
From this question
document.getElementById('iframeid').src = document.getElementById('iframeid').src
However, this if your header and footer are in frames, or if your body is in a frame, just to make them resuable, this is a Bad Idea! Your server should be generating a SINGLE PAGE by using a layout page for the header and footer, and rendering the body.