Develop Reference

How can we call a function before refreshing a page using react

Our application is developed using react and on refreshing and route navigation, we need to check for unsaved changes in the page and show an alert.
For this scenario, we were able to leverage with route API on page-navigation,
and yet refreshing the page directly seems not working.

So in your case basically a user has typed a long form, so there are below cases you need to show him the message that unsaved changes will be lost.
When switching to different component clicking on any of the link
Refreshing the component
So inorder to do these there is a native event called beforeunload, so you need to add the event to the document by using document.addEventListener in componentDidMount and you can unmount that one in componentWillUnmount in the parent component
so there should be check to know the form has been dirty which means user has typed something, like isDirty in redux-form.
so whenever the user is typing something you can make this value to true based on this value if the user clicks on the refresh you can have the check and execute it
You can check more on here and this
so you can hold a state variable at the parent level and based on this you can trigger it

You can use Promise struct and run your refresh other whatever if you want in then
export const unSavedChanges= (values,listTitle)=> new Promise((resolve, reject) => {
//Your code of check, validation what ever
})
when you call this func
unSavedChanges(changes,"list").then(response=>{
refresh.page
}
)

How to update route without re-rendering page (opening / closing a modal that has its own route)?

In my routes I have set-up a slug for a particular route like so:
Main route: /members
Sub route: /members/:slug
Now when I go to www.website.com/members/some-slug
I will try to detect whether there's a slug or not with:
if (this.props.match.params.slug) {
// If have slug, open a modal window with data that corresponds to that slug
this.showModal(this.props.match.params.slug);
}
What's happening is that showModal will change the state of a Modal component to true (thus reveal it) and also trigger an API call to get the details pertaining to the slug parameter that's passed (e.g. the slug sarah-smith is used for a GET request as a param to get Sarah Smith's details).
So all of these are fine so far. However, the issue is the re-rendering of the page when I either:
Open the modal
Close the modal
We have transitions for each element on the page so if you visit a route, the elements will have a subtle fade-in transition.
When a modal is clicked what I do is (member.name being the slug):
<Link
to={`/member/${member.name}`}
</Link>
Which causes a re-routing hence you can see those small transitions in the background while the modal is fading into view (as if I am opening /member/slug for the first time).
Same with the modal close button, if I click on it, what I do is invoke:
closeModal() {
this.props.history.push("/member");
}
Which re-renders the entire page /member page and not just close the modal. I can't just use this.setState({ showModal: false }); since that wouldn't change the route back to /member.
Is there a way to resolve this? Or another way of doing it so that the page doesn't re-render while changing the URL?

You can wrap your modal in route like this.
Modal
Then this.props.history.push("/path");

I think React-Router docs already have such examples. You can check following
https://reacttraining.com/react-router/web/example/modal-gallery.
There is npm module available as well https://github.com/davidmfoley/react-router-modal

How to use a Dialog throught a app, passing content to it

I am building my first Vue.js app and I want to open a Dialog (using Element.io) components. I want to call a Dialog and pass the content to it.
So my dialog would be "global" and I would pass content to it from different components.
How do I include this dialog? how do I pass arguments to it and so on?
Should I use something like:
import Dialog from '../GlobalComponents/Dialog.vue';
Vue.prototype.$dialog = Dialog;
or include it in each component, and how would that be?
I have no problem making a event handler for the toggle of the Dialog, just don't know how to call the dialog to open it (or change its dialogVisible state).

You can simply add the Dialog as vue component to make it available globally.
Vue.component('my-dialog', Dialog);
Then in your "main" file / index.html or whatever you use to start your Vue app you define your dialog
<my-dialog></my-dialog>
If you want it to display errors for example you can use emits and listenters
Vue.prototype.$bus = new Vue(); // event buts
in the created method of your my-dialog
created: function() {
this.$bus.$on('error', function(msg) {
// access message here
// make dialog visible
});
}
And wherever an error occurs
this.$bus.$emit('error', 'this is my error');
If your dialog is more complex you can ofcourse also pass objects instead of strings in the emit

AngularJS execute code when changing pages that use same controller

I have a PhoneGap app, that has multiple html pages.
I use one controller, called AppController, that loads the data for the startup screen and default pages.
I added a new page to the navigation bar, which, when clicked & opened should load up data from the server with a php call, so it should only make a php call, when the page is shown.
This page uses the same controller as the rest of the app.
I am really new to AngularJS, so I might've programmed it in a bad way, but the rest of the data for the home page is loaded in the appController like this
myApp.controller('AppController', function ($scope, $timeout, sharedProperties) {
$scope.items= {};
$scope.items[item1] = {....} //LOADING UP the items collection
}
How can I hook up an "onload" event or something, that would only fire when the page is shown?

There are so many ways you could do that, one of them:
// inside your controller
angular.element(document).ready(function () {
// your code
});
another one:
<div ng-controller="myCtrl" ng-init="someinitfunc()"></div>

How about using ng-init() directive on your next page ?

In Ember 1.x, how do I use a modal in willTransition()

I'm trying to open a modal dialog when someone tries to navigate away from a page with a form that isn't complete. I have the modal template built, but I can't figure out how to implement it. Here's what I have:
actions: {
willTransition: function( transition ){
var model = this.currentModel;
if( model.get( 'isDirty' ) ){
this.render( 'my-modal', {
into: 'application',
outlet: 'modal'
} );
if(!this.get(abortConfirmed) {
transition.abort();
} else {
model.rollback();
}
}
}
}
NOTE: The dirty checking works and I can generate a prompt, but this modal thing is not working

So here's the workflow I use.
1). in the willTransition(transition) hook, do the check to see if you should show the modal.
2). If you should show the modal (in your case, when the model isDirty), call transition.abort(). You must do this to prevent the transition from happening. You also though need a second property on your controller that determines whether or not the transition has been authorized. So really, you check model.get('isDirty) && this.controller.get('transitionAuthorized')
3). You need a way to pass state to your modal or for your modal to be able to communicate back with the page that has created the modal. I personally pass a continueFn and a cancelFn to my modals that close over the current context. Something like
var continueFn = this.createUnsavedDialogContinueFn(this, transition);
where that function is:
createUnsavedDialogContinueFn: function(context, transition){
return function(){
context.controller.set('transitionAuthorized', true);
transition.retry();
}
}
I pass this continueFn to the modal, whose I don't care if I have Pending changes button calls via an action. You can, though, delegate this work back to the controller/route if that feels easier for you. What's important is that you set the transitionAuthorized to true and call transition.retry()
4). calling transition.retry will pass back thru the willTransition but this time you have set transitionAuthorized to true and everything passes through.

You need to stop the transition from occurring. Add transition.abort() at the bottom of your 'isDirty' check.