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...
Related
I have the case that I push some parameters to the nuxt router (https://router.vuejs.org/guide/essentials/navigation.html) whenever somebody visits a page without any parameters.
Example:
somebody visits: /program it will end up in /program/first-event?year=2018&month=6
(First the view filters the program for current events (therefore the parameters for this year and this month) and then from the filtered events it will set the first event as active post (also by pushing it to the router).
This is all wanted and good. BUT now I detected the following problem:
Somebody is visiting /aboutus and then navigates to /program, the router will automatically change to /program/url-of-event-post?year=2018&month=6.
Assuming the user wants to go back to /aboutus he clicks on the browser back button. This will bring him back to: /program which automatically adds the post and the parameters again (effectively moving one step forward again).
Means the user is caught in clicking endlessly on the back button.
My approach would be to try to register if a user clicks on the back button and if so, I would not add the parameters. But I don't know how to do this.
I thought the router would provide some 'from' property, but so far I did not find anything.
I would be very happy to hear some thoughts on this. Thank you heaps in advance.
You need use router.replace.
https://router.vuejs.org/guide/essentials/navigation.html#router-replace-location-oncomplete-onabort
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.
Is there a way by which I can duplicate or clone dijit widgets?
Basically, idea is to improve page rendering performance by minimizing widget creation time.
We have a single page web application and we do not reload the entire page whenever the user performs any action.
The flow of events is as follows,
The main page is loaded by the browser. It contains a dijit ContentPane which acts as a master container and displays the entire page using various other dijit widgets like textboxes, tabs, datefield, Enhanced grid etc.
The user performs an action (e.g. click on a dijit button)
The application sends an ajax call to server which processes the button click event and generates UI of the next page.
Browser receives successful response from ajax call and calls refresh method of dijit ContentPane. Which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position. (instead of refreshing the entire page)
The user again performs some action and again the refresh method is called which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position.
Because of such architecture the browser has to destroy existing widgets and recreate them again and again. Which results in slow performance.
The idea is to have a set of widgets always readily available on the browser clone them and place at appropriate position and update them instead of recreating each time.
Yes this is possible with something called _AttachMixin.
Basically there is no getting around the fact that your widgets would need to attach event listeners to the HTML Document. What can be cut out though is the time in the Dijit Widget's lifecycle to generate the DOM. As we well know, simple Dijit widgets like a dijit/form/Button has a div inside a div inside a div etc.
This is explained in detail here http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html
Here is an example using Node.JS as a backend. http://jamesthom.as/blog/2013/01/15/server-side-dijit
This is a tough problem and this concept isn't explained very thoroughly. If you have a backend that is not Node.JS you have to manually make the widget string and pass it as a response to your AJAX and an follow the example from the 1st link (Ref Doc)
We have had lots of widgets of our app render nicely within the client side. A far less complicated approach would be to simply show / hide (instead of render and destroy) widgets as and when they are needed. I assume that you app's access policy would focus on data and not which person has access to which widget.
In my Durandal app, I have a search page - I'd like to:
Load a clean search page when it's loaded from the menu (router.navigate('#/search'))
When navigating to an item from the search page, then using the back button, this should return to the original search result & criteria.
I'm also storing my search criteria & results as a (app-wide) singleton, which is injected to the view model via RequireJS.
Am I able to: distinguish how the user entered the page? I can see that the activate() lifecycle call is triggered under both entry methods.
If you want to know if the user landed to the search page by clicking a link/button from your app or by visiting by entering a url/back button, what I would do is to raise an event when the user clicks on the link/button and on the search page check if the event has been raised or pass some parameter in router.navigate.
I have been recently doing some work on distinguishing a user click from within the application and a back or forward button from the browser. If you are using router.navigate() to navigate around the Durandal application the router.explicitNavigation flag is set to true. But you would want to capture this before the 'router:navigation:complete' event in 'router:route:activating' event as the flag gets set back to false on 'router:navigation:complete' event.
Bottom line is if you are using router.navigate to navigate around the application the router.explicitNavigation property will be set to true and if navigation is triggered using the back/forward button in the browser router.explicitNavigation will be set to false.
In actual case you might not even need to perform router.navigate() to distinguish between an in app navigation and a browser back/forward because Durandal's router module listens to all 'a' tag click on the document level and sets the explicitNavigation flag to true. However I haven't tested this fully.
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.