I'm creating a TabPanel component where the specific tabs are created/defined by user configuration.
So far, I've taken the approach of just using a stateful component to keep the users preferences of which tabs to show and been using the simple Ext.state.LocalStorageProvider to keep the users preferences.
But I actually ultimately want to store the user preferences/config in my database, so I created my own StateProvider that will store/load the prefs via AJAX calls.
The problem I've encountered is that my tab panel is loaded far sooner than the AJAX calls inside my StateProvider return, so what I need is some way to do a synchronous ajax call (which I know is morally wrong) or to somehow delay my tab panel from rendering until the preferences in my state provider are finished loading.
Anyone had a similar issue? It might be as simple as sleeping one thread for a while, but I know that's not nice either.
I think this is a bit old, but as I have found a similar problem...
Instead of sleeping, you can load the tab panel on the listener of your StateProvider ajax calls. So when your call returns, the tab will still not be loaded.
Related
Lighthouse audit suggest me to lazy load chat beacon that is implemented via Google Tag Manager. Because this tag is quite big I have been already delay it by adding custom event that fires 1.5 seconds after Window Loaded event and on that custom event I am firing this chat beacon. Should I do anyway lazy loading on this tag? Report says that I could save around 3 second in loading page. If yes how could I make lazy loading tag in GTM and if it is even possible? Bellow I pasted how tag look like. Thank you for any suggestion.
<script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script>
<script type="text/javascript">window.Beacon('init', 'XXXXXXXXX-XXXX-XXXXXXXXX-XXXXXXX')</script>
And one more question. This tag is attach to the page which means that if we scroll down it will always be in the same place. Lazy loading in this situation I understand as loading beacon after clicking this chat icon?
Yes, in this case lazy loading would be loading on click.
However, people rarely do it. Why? Cuz async loading n.async=!0 won't normally delay anything from the user perspective in any significant way.
And lighthouse is not the last instance of truth. It's just a not-very-good way to generically suggest page speed improvements.
If you want to measure it properly, stop using lighthouse, start using page speed profiling in your browser. Measure the user experience with the chat how it is now, then disable it completely in tag manager and reload the page. See if you're able to find those claimed 3 seconds. Repeat both experiments a few times to compensate for random speed fluctuations. I doubt you will be able to measure any real difference.
I want to add a confirmation popup when a user navigates away from one of my presenters and is replaced in a NestedSlot. Can I intervene before a place is revealed and check the current presenter?
Edit: I just learned that the PlaceManager has some support for this using the setOnLeaveConfirmation method. That said, I still don't think this will work for my case because I want the confirmation popup to be associated with a single nested presenter. I would also prefer to manually intervene because I already have a confirmation modal for a cancel button that I want to reuse.
It would have been simple if you could override window.confirm() using GQuery the same way as you can in JQuery, however that's not the case. Your best option is still using placeManager.setOnLeaveConfirmation(). You could probably emulate the same behaviour as window.confirm() with a PopupWidget, but then it wont block access to other parts of the page.
in a ASP.NET MVC application that I am currently working there are multiple places in a single page that the user can click. So there is a main menu that's in _layout and for each inidividual page there can be links associated with that page.
I am trying to use a loader which will be shown on every click, mainly where the response takes time but for now it's for every click.
For example in the home page, from the main menu the user can click Students and the loader should come up and hide when the page loads completely. On the students page there can be an ajax call that gets data and binds it to the grid.
So from the time the user clicks on a menu link and the page loads the loader is active/shown. It's hidden once the page loads completely.
The grid can have editing functionality and when the user clicks on any of the CRUD links the loader should show and hide.
I am looking at suggestions on implementing this requirement.
If I can hookup any of the MVC events, that would be cool as I want less of Javascript/jQuery stuff but if Javascript/jQuery is the way then that's fine too.
Currently I don't have anything so anypointers are appreciated.
Assuming AJAX is being used
I don't see a way to keep this server-side without a middle page with a redirect being used (which would just be unnecessary bloat). And, since you're not opposed, you can implement this fairly easily using jQuery and something like blockUI.
I'll let you play with refining the binding to only links you care about, but for now we'll assume all links. Also, MVC should be using jQuery for things like Ajax.Actionlink so we can hijack events like $.ajaxStart and $.ajaxStop:
function showLoadingScreen(enabled){
return enabled ? $.blockUI() : $.unblockUI();
}
$(document).ajaxStart(function(){
showLoadingScreen(true);
}).ajaxStop(function(){
showLoadingScreen(false);
});
Later on you can maybe apply classes to the links you care about and just bind to them (instead of $.ajaxStart) but I'll leave that up to you.
I want to enable caching for a page that loads when an ListView item is clicked. So when the user clicks a second time on the same item, the app will navigate to the previous cached page.
(I'm using LayoutAwarePages and I suspect that this should be possible if in the OnNavigatedTo method the NavigationMode parameter is different from NavigationMode.New)
Any ideas?
You affect the page caching by setting the NavigationCacheMode property of the page in its constructor. By default it is disabled, but if you enable it, you'll get the existing page instance every time you navigate to it. This means that even if the user navigates to a different item in your ListView, the same instance of the page will be reused.
I've found a library reimplementing the navigation framework to make it more like the one in Windows Phone, i.e.:
When navigating back the cached page is used.
When navigating forward a new instance of the page is created.
If I understand your question correctly, you require a different caching behavior from both of the above. To achieve that you could either base your alternative navigation framework on the one in the library I linked to or simulate the behavior by persisting just the page state for each item instead of actually caching the pages.
We have a Facebook app here which has three boxes with three buttons. Each button, when clicked, should change state once an event (successfully) happens. The buttons are almost all working (a few minor bugs) but they have been done a rather long-winded and inefficient way.
My question is, what is the most efficient way to link events (i.e. page 'liked', personal information submitted, page 'shared') with the state of the buttons?
You can use jQuery and the .trigger() function to fire off events. Then you can use .bind() to listen to the events and do something. For example, when the user logs in, you can trigger a user_logged_in_event, and bind to it. In the function, you can then use JS to change the login button to logout...