I have a Durandal App in an asp.net mvc project. It all works great but a few people mentioned the navigation didn't work. I then noticed that they were clicking on the links BEFORE the app was ready and the router was ready.
Does anyone have any suggestions as to how I can prevent the navigation being available until the app is ready?
You can throw up a full-screen scrim (or a block UI, as some people call it) that sits at a very high z-index, covering all content. You can even put a spinner within this scrim at the same z-index.
In the compositionComplete handler of your shell's viewModel, you can then hide the scrim. This proceeds on the assumption that the completion of routing and composition should signal the availability of your app. Bear in mind, though, that if you have AJAX calls (in the form of fetching data, etc.) that could tie up your app, you may need to align hiding the scrim to the completion of those calls instead. That should happen no earlier than compositionComplete.
The last sentence is a bit a tricky. Most of the time, you're fetching data in the activate handler, which is handled earlier than compositionComplete. There's no way to know if the AJAX fetch will complete before or after 'compositionComplete'. In these cases, it might make more sense to move the AJAX fetch to the compositionComplete handler so that you can better coordinate and time the hiding of the scrim to the completion of routing, composition, and fetching.
Related
I am working on a JS application using the Flux architecture. Among other things, the application displays a list of contacts and on each of them you can add or remove them from your contact book.
The application is doing optimistic UI updates, so in this case you can click on 'add' and see 'remove' right away while in the background we are doing the ajax request to add the contact.
However I do not know how to handle the case when someone clicks on 'remove' while we are still adding the contact. The 'remove' ajax request expects an ID that we do not have yet. It is also a requirement that I cannot grey out the 'remove' button while the request is running.
My ideal way I think would be to be able to dispatch actions that are dependent on other action. Is that a good idea, how can I implement that?... :/
Do you guys know how I should handle this case in a flux application architecture?
Optimistic updates are great -- but putting a "Remove" link that is incoherent makes no sense. Why not add the contact on the page but wait to add the "Remove" until you're notified by the store that the addition was successful?
I have an application with an accordion. The accordion's section .content is pulled from a server, generated dynamically and can be rather large. Therefore it would be best to load the content only when the user opens the section. My though is that the best way to do this would be binding to a section open event, display a loading icon while fetching the content, then displaying that content.
However, I'm having great difficulty binding to the open event. There does not seem to be a great deal of documentation on the new Foundation 4 section/tabs/accordion. What I did see may have been for foundation 3. It said open/opened/close/closed events should be sent, but they do not seem to be thrown.
The only event I seem able to bind to is "click." Which would work, except the accordion frequently loads with the first section already open. I could run myExampleDynamicLoader($('section.active')) on document ready, but it seems like there should be a less hackish way.
I created a jsFiddle to show what I'm talking about http://jsfiddle.net/HurricaneJamesEsq/6sGGD/14/
Any suggestions?
After reading through the foundation.section.js source, it is pretty clear that sections do not trigger any events. A pull request was added, but in the mean time it looks like this can only be done via 'click' events.
I have becommen the SocketTimeoutException, which is quite hard to replicate now, but it is not the most important here. What is troubling me is the reaction of the PrimeFaces UI on such happening. The UI got frozen, so no AJAX clicks were processed (one could click what one will but nothing happened).
I don't know the PrimeFaces internals well, but with my experience with AJAX apps, it could happen where we have the AJAX queue and the job is not released after unexpected error happens. Is it the case here?
And how to prevent such behaviour? Or if prevention is not possible, is it possible to "restart" the AJAX engine of PrimeFaces in Javascript? As the last resort I could provide the special button to "reset" the AJAX state without "refreshing" (which should be rather called destroy-all-my-changes) the site?
In the past I have developed large extjs single page applications. Many users get frustrated for not being able to use the Back or Fwd buttons or reload the page.I would also like to warn the user if they navigate away from a page without completing a work flow, and enable users to directly access particular views.
For the next application, I am thinking of using the Codeigniter php MVC framework. It is possible to something similar to this example. I am stucked thinking about the navigation. If I load the ExtJs for each view, that is a significant slowdown.
How best to approach this?
Have a look at the Ext.History class (Ext.util.History on Ext4). With it you can register listeners for changes to the hash:
Ext.History.on('change', function( token ) {
console.log('token changed to: ', token);
});
The Ext.History singleton includes forward() and back() methods for triggering navigation from within the client-side code.
By having only the hash part of the URL change the browser stays on the same page, thus eliminating the need to reload the Ext library.
How this would integrate with your PHP framework I cannot say. I am not familiar with CodeIgniter and your example link goes to a dead page.
Also, do note a caveat with History in that under Ext3 at least it may give you issues with newer browsers. If this is the case an alternative is to code your own History-like solution using the 'hashchange' browser event as illustrated in this answer.
I thought I would ask here about how to develop a wiazrd like control
in ajax for MVC before I started it.
The control will have pages that have data entry controls and
on each page submission insert data into a database.
Any ideas how to go about this?
Malcolm
Are you using a JavaScript library? I know dojo has a wizard in dojox namespace, and I'm pretty sure there are wizards for jquery. If not, I'd do a wizard just like I would tabs, without the tab bar, and each view contains a form and next, previous, cancel and or restart buttons, all of which would handle the ajax calls/state management and change the view.
If it's a wizard you probably actually should use separate web pages rather than having a single page that's updated through ajax calls, that way the forward and back buttons can work as nature intended in the browser for moving forward and back through the wizard.
Of course you can use fragment tricks to get forward / back working in a single page but in my experience this is tricky.