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.
Related
I use Angular 2 (v2.4.4) and by using routerLink I navigate between the components.
This works fine, but if I load the very save component with the very same snapshot parameter (active.snapshot.params) the page won't get loaded again. So, for example if I am on /page/56 and I click on a link here which points to /page/56, the very same link (from a menu or something), the component won't reload. (And things might change in the database since the last load, so the page needs to be reloaded.)
I bypassed it by pointing to /jump/page/56 and the Page 404 controller redirects to /page/56.
This also works fine, but if I navigate back in the browser from /page/56, it will get to /jump/page/56 which directs to /page/56 by the Page 404 controller. So basically I cannot navigate back.
As much as I know, I cannot delete browser history by the HTML5 history API, but how could I go back to the page, which was right before /page/56, just by simply clicking on the back button of the browser?
The solution might be a simple JavaScript trick independent from Angular 2, as it does not actually load a new page just loads a different component and changes the URL. (Also because of this I should not use location.reload() because it will reload Angular 2 and all the depending JS, etc.)
Thank you for your solutions in advance!
you can use skipLocationChange Like :
this.router.navigate(['/jump/page/12'],{skipLocationChange:true});
Seems the only way is to create your own dicrective inherited from [routerLink] to control click handler or just add click handler to current element with managing refresh by yourself.
<a (click)="navigate(['/jump/page/56'])">Navigate</a>
where
navigate(route) {
this.router.navigate(route, {replaceUrl: true});
}
I have a single page app in which the page is never unloaded. I am using the # in the url and using javascript to detect the hashchange and then updating the UI using JS and AJAX... and I do not want the forward and back buttons to make an extra request to the server.
Currently, the first time the user initially comes to the site, a server request is made (which is OK)
Processing by MyController#index as HTML
My goal is for this server request to only happen once during the users time at the site...every time they click on any other link, I just use the "#" in the url to prevent a new server request... so all my "a" tags look like something like this
<a href="#page1/
The issue I am having is that clicking the back and forward button triggers my JS hashchange listener (which is what I want)... but it also calls
Processing by MyController#index as HTML //I DO NOT WANT THIS TO HAPPEN
Here is the functionality I am currently getting
1.) user navigates to mydomain.com
2.) "Processing by MyController#index as HTML" is launched and a server request is made (THIS IS OK)
3.) User clicks a link and now the url reads mydomain.com/#page1 and I update the view with JS (THIS IS OK)
4.) User clicks a link and now the url reads mydomain.com/#page2 and I update the view with JS (THIS IS OK)
5.) User clicks BACK and now the url reads mydomain.com/#page1 and I update the view with JS (THIS IS OK)
6.) a server request is AUTOMATICALLY made to reload the page ("Processing by MyController#index as HTML" is called again) (THIS IS NOT OK)
How do I prevent step 6 from occuring when the user clicks the back button??... I just want the url to change and for me to update my UI via JS and no server request
Also, I am using ruby on rails if this helps at all.
What you're trying to do is impossible. You can't override the default behavior of browser buttons like back/forward/stop/refresh, etc.
What you could do is create your own Back and Forward buttons (and place them on the actual page, itself) - and code their event handlers accordingly to make your AJAX calls.
This work fine for me
jQuery hashchange event
Finally got it figured it out. For some reason, Turbolinks was causing it to reload the page whenever the back or forward button were clicked. I removed the Turbolinks gem from the app and now its all working perfect.
We have designed the application with tabbed pages layout.
Tabbed Page Style
the tabs are page and are created on click of menu, these are and added in parent container as child DOM element,it is a new form which has input elements,we could have many tabbed pages at a time. my application is in Spring MVC ,PostgresSQL ,Jquery.
What happens when refreshed, lost all the added dynamic new tabs (tabs are pages and we lost the current state).
I could share the reference code if required.
Please suggest how could I manage the state of application.
Window reload/refresh is a pure browser event that ends the execution of the page, you can't really have script continuity after it.
One option is to attach an alert to window.onbeforeunload informing the user that the content will be lost if they reload - this will work with closing the window and refreshing it.
If, however, you need to be able to reload (eg, to load fresh data in the tabs) while preserving tabs, you can use window.onbeforeunload to prompt the user whether they want to save the data/layout before closing, and if so, execute an AJAX call to the server, where you save the tabs (associating it with the session). This would mean that on loading the page you need to first check if there is tab data associated with the session, and load from there.
Other option - and this would be my preference - is to use window.localStorage to save the data on user's disk, and on page load check if there is data in localStorage. It has pretty wide browser support at this point, and there are good libraries that make using it a breeze. I have used store.js and can vouch for its ease and reliability.
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.
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?