UI-ROUTER - stop ui-sref from changing state - angular-ui-router

Does anyone knows a way to stop ui-sref from reloading a state?
I cant do it from '$stateChangeStart' event because the ui-sref is only changing the params and not the state name.
I have a book list on the left and book details on the left. I am navigating between books details. So the state name doesn't change only the params that is the book ID.
User can change books details but when the form is dirty and the user presses a link to another book I need to notify the user and stop from ui-sref to reload the state.
When the user clicks on a link I through an event and the book details controller catch the event and checks if the form is dirty. If so I need to stop ui-sref.
Thanks!

try find it there,
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
please write your code example..

Related

How to tell which page a user was on when they fired the first of an event type in Google Analytics

I want to see what page on the site my users were on when they fired the first event action: add to cart, effectively starting their shopping journey within that session. I'm in Google Analytics, but completely stumped how to combine the pageviews and event action to pinpoint that this was the page the user was on the first time the user fired that event in their session (assuming Unique Event could be a metric used?).
Would love some ideas and help! Thank you!!
From the Events report you can't deduce when a user clicked for the first time on an element. The data is aggregated.
You could do it for example by sending a custom dimension at the time of the click on your element and assigning a cookie that checks if that information has already been sent to Analytics. If the cookie exists, don't send that dimension anymore.
It is not a 100% reliable method but it allows you to get the information you want for the future.

Time of stay on webpage

I want to know the time a user spends to fill a particular field in the page and want to trigger an event if the user spends more than 5 minutes to answer a question on that page.
I've looking at various Web Analytical tools like Crazyegg, Lucky Orange. Google Analytics for my website and i did not find any of them have this feature.
Is there any way that i can get this feature in my website.
I've been researching to get the perfect fit but in vain.
Any advice would help.
Thank you.
With the help of the Google Tag Manager you should be able to do this with Google Analytics:
Add a Datalayer to your page, which fires if a User starts filling your form/field.
Build a Event, Listening on this Datalayer and send a Timestep (for example: Category = Form, Action = Start, Label = {{Timestamp}}) Now you know then a User started interacting with your form.
Build a second Datalayer, fireing when the User sends your form. Build a Event for this and send your second Timestamp to GA (for example: Category = Form, Action = End, Label = {{Timestamp}}) - now you know how long a user needs for your form.
Trigger the Event
Here we can use the same Datalayer, we used with the Event-Tracking.
Build a Triger for your Event, listening on the Datalayer and then starts a Countdown (Timer-Trigger in GTM)
In the Timer-Trigger rules you have to specify, that the Trigger should not fire if the second Datalayer (Datalayer-End) fired allready.

Put an event on the model, or on the controller?

This is for a client-side MVP program, using Passive View.
I want to allow the user to create a contact and add it to a quote. I want the quote to be notified when the contact is created.
Is it better to do a) or b)?
a) Listen to the model
Pass the contact to the contacts controller, and listen for a saved event on the model
var contact = new Contact()
contact.on('saved', function(contact){ do some stuff })
contactsController.create(contact)
contactsController then loads the contact into the view, user enters some info, hits save, contact is saved to the server, contact.saved event is fired
b) Listen to the controller
contactsController.on('saved', function(contact) { do some stuff })
contactsController.create()
contactsContoller then creates contact model, loads the contact into the view, user enters some info, hits save, contact is saved to the server, contactsController.saved event is fired
Thanks!
I think it depends on the subtle but important difference between wanting to know when a contact gets saved to the database versus wanting to know when a user submits the save contact page. I.e., the controller may not be the only place that saves a contact. If you want to know the former, use the model. If you want to know the latter, use the controller.
I would recommend the following.
User clicks Add a Contact
The View tells the Presenter that a Contact as been added
The Presents execute as Command that handles adding a contact
The Command does the following
Displays a Dialog or View that allows the user to add the contacts.
The Command waits until the user clicks add or OK to confirm the new contact
The Command then updates the Model
The Command tells the right Presenter* that a contact has been added.
Then in the Presenter that handles the Queries, the Update Contact call will find all the relevant Queries and update the contact info. This update may be done through a listener pattern where all the query views register themselves with the presenter.
*The right presenter is whatever presenter you setup to handle the view that displays the queries. Some system could have a unique presenter for displaying queries, in other it may be just be a part of a presenter where the query display is just a section of a larger display.

how to prevent multiple inserts when submitting an ajax form

On this problem some more people have stumbled and for non-ajax scenario there is already a solution :
How to prevent multiple inserts when submitting a form in PHP?
(answered Jan 25 '10 at 17:02)
I'd like to know how could be implemented efficiently on both the server and client side a similar solution for the following problem :
there is a wall listing containing multiple items on which the users can click an ajax-enabled "i like" button (no page reload)
the user can have multiple browser windows opened on which can click "i like" buttons
Expected :
Only the first click on the "I like" button for any of the wall items is taken at the server side into account and the following requests for the wall item are not handled anymore.
Keep track of the liked items of each user on the serverside (for example an extra database table). When a new like is going to be inserted, check if there is already an existing record in this table. If there is, the user has already liked this item and you dont't have to count it anymore.
I think the best way is to use a session variable that store the current state, ie when someone clicks you "i like", on the server side, you check the state of the SESSION var.

Joomla handling multiple ajax forms on the same page

I'm using Joomla to develop a user profile management component with AJAX.
The goal is to allow the user to edit his own user information. There is a lot of information so instead of having one massive form, I decided to make "subforms" or sections. And for the whole thing to be user-friendly I want to send the forms and refresh the user information with AJAX.
Here's an example :
There are two sections, "Basic user info" which displays the first name, the last name and the age of the person and "Extended user info" which displays the occupation, the company and the skills of the person. Each section has an "edit" link (or button) which turns the content into a form (AJAX) allowing the user to modify the presented information. You can only edit one section's information at a time. When the user has finished modifying the data, he sends the form with a "send" link (or button) and the section gets back to simply displaying the information of the section (with the updates that were just made).
So I need to know what is the most efficient way to develop such a component. I thought of two approaches :
1) In the "tmpl" directory of the main component view we the following files :
default_basic.php (displays the basic user information),
default_basic_edit.php (displays the form which allows the user to edit the basic information)
default_extended.php (displays the extended user information),
default_extended_edit.php (displays the form which allows the user to edit the extended info)
default.php (loads each of the display subtemplates with calls to JView::loadTemplate($subtemplate))
When the user clicks on an edit link, an AJAX call is made to the following URI index.php?option=com_userinfo&view=userinfo&subview=basic_edit&format=ajax, which causes the view class to call $this->loadTemplate('basic_edit') after assigning the user information to it.
If the user clicks cancel the same process is used to load the 'basic' template again. And if the user modifies the information and clicks the send link, the form is sent and then the 'basic' template is loaded too.
2) There is only a "default.php" file in the "tmpl" directory which holds the edit version and the display version of each section. But all the edit versions are hidden at first. And when the user clicks on the edit link the display version of the section becomes hidden and the edit version is displayed (using display:none and display:block). Then, if the user clicks the cancel button we do the opposite. And if the user clicks the send button we send an AJAX request to update the data in the database and return the updated user info which will be loaded into the display version of the section. And we finally replace the edit version of the section with its display version.
I know there's a lot of text but in the end it goes down to choosing between refreshing full HTML blocks with AJAX, or just sending the updated info and modifying the content of hidden blocks and then make them appear. So what do you think is the most logical approach, knowing that we are in a Joomla 1.5 environment ? How would you procede ? (maybe there are other ways to create such a component ?)
(I tried both ways and I couldn't entirely make it work so I decided to ask to see if it is a matter of conception...)
Thank you for taking the time to read all the text.
My answer is: why even refresh parts when it can be done without it?
For example when we are talking about basic form elements like text fields and check/radio buttons I would prefer the following: on a successful save/send simply display a nice message like "Profile saved" for some seconds and the user is sure that the changes are save and sound.
In case I msissed somthing let me know.
I have tried both solutions and #2 is the only one that worked for me.

Resources