I'm using backbone.js with react.js. I am using backbone routers to navigate.
Before navigating from one page to another page I'm creating a backbone event and passing some data through it. I'm listening to the same event in the next page. Till this point everything is fine. After that I'm moving from that page to other by using backbone routers only. But then I'm trying to go back with browser back button. Navigation working properly but data is not being displayed.
Related
how can I do without reloading page load all data in react js?
I am creating treeview and in this node selected node value display in right-side view but refreshing page after showing the results.
For this i would be the best practice to user Redux in combination with SocketIO.
For a good example read this: Using socket.io in React-Redux app to handle real-time data.
I need to reload my page when I render certain component using react router. I need this because I need a JavaScript script to load again and detect a certain form tag with a particular id. If I don't reload the page, the script never detects the form's id. (This script makes some validation on the form).
If I go to the contact component from my home component (root) the script doesn't work (I can send the form with empty fields). But if I go to the contact component from home, and I reload the page, the script starts working.
This is the error I get when home is rendered and the script doesn't detect the form id:
form-submission-handler.js:162 Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLDocument.loaded (form-submission-handler.js:162)
And this is what is used to detect the id:
function loaded() {
console.log('contact form submission handler loaded successfully');
// bind to the submit event of our form
var form = document.getElementById('gform');
form.addEventListener("submit", handleFormSubmit, false);
};
document.addEventListener('DOMContentLoaded', loaded, false);
So, if I reload the page, form-submission-handler script can detect the form.
Here is a page where you can replicate what is happening. Just go to "Contacto" section, it's in the Navbar.
The form submission handler script is inside a script tag before the tag in my index.html file, where the app is rendered.
It is possible to reload page with react and react router. To reload, you would simply provide anchor link to the url with contacts, and when user clicks on that anchor, page with that url would be fetched again from the server (you do have to make sure that your server would respond to that url and return your react app)
However, people generally go to the lengths to prevent react apps from reloading, since on reload all state of your react app is lost. Also I can not think of any situation in which I actually needed to reload react app, especially not for something as ordinary as form validation and submission. So, while your need to reload might still be justified, there is strong indication that you are trying to use react in some rather strange way, and that your problem might be resolved by getting more used to react and its usual usage patterns.
My project is a journey of three react applications, User finish steps from application 1 then redirected to application 2 and then redirected to application 3.
When user press back button and lands in previous application, since page reloads while navigating from one application to another, state of previous application is lost and user see first page of application than last page of previous application.
I tried to call another react application as a component of separate react application by rendering generated js in component will mount.
When application loads it renders another application inside it but page gets stuck in some infinite loop resulting in page kill.
Any idea how can i achieve this?
Angular using ui router
If I load data from the srv with ajax, click on a link that change the state, and then go back to the previous link/state (by clicking back or a link) then the ajax data is lost from the $scope.
What is the correct way to store the data and avoid re running the ajax call?
We are using backbone/marionette to build a large application that is split up into many independent modules. The main application manages the header, menus, notifications and footers. It also instantiates the router of each module and passes to it the central region of the app page, so that the module can render itself.
We have a router in the main app that responds to the default url by initializing and showing the menus, etc. The menu routes to a module by adding a hash tag to the url. Each module's router watches for the appropriate hash and responds by showing its contents in the region it was given by the main app.
This all works fine until the user wants to bookmark (or simply refresh) the module page. When this happens the module router correctly responds to the url with the hash on it, but the main router doesn't get invoked to reinitialize the menus and footers, so the module renders itself on the full page (without any headers/footers).
I think that the main router should fire the default route before the module router fires its event. This isn't happening.
Does anyone have any idea how I should implement this? TIA.
This may be of some help/inspiration:
Backbone.Marionette Change Region when Route changes
Basically, bind a handler to Backbone/Marionette's route change event, and update menus from that handler.