I am building a shopping cart using backbone.js . When some one clicks on 'add to cart' I am making an ajax call using jQuery. Backend is rails. In response I get the new json value for the cart. However if I display the cart view then car view comes up , however the url does not change.
To make the url change I after receiving the response from jQuery I need to do something so that router catches the new url and things proceed from there.
How do I navigate to the #cart url?
You can update the URL by calling the navigate method on your router, like this:
router.navigate('cart');
Most likely your view doesn't have access to the router you can do this:
Backbone.history.navigate('cart', {trigger:true}); // router handles view change
Backbone.history.navigate('cart'); // only url is updated
Related
I have the following case: I have a web page with antd tabs and I need to refresh each of these tabs separately in a service worker push event. When I use client.navigate() or client.openWindow() in the event listener the whole page is refreshed. I have found a solution with React Router to pass parameters in the url, but I don't like it because I don't want the url to change and also I need to pass further props to the page that are shared in both tabs. Also how can I manage to call a Route render or a component with props from the service worker file. I use React, Typescript and antd.
The structure is the following:
Main.tsx - page with Router Routes
service-worker.ts - service worker methods and functions
SomePage.tsx - page I need to refresh
Other pages components etc.
Solved...
After a little exploring I have used client.postMessage in the service worker and on the resulting page I used navigator.serviceWorker.addEventListener('message', (ev)) where I could get the data from the service worker and use it in my component for what I needed and more.
I have this scenario
When web page load I am getting user location. And on basis of that location show some services like A,B,c etc etc.
When user click on service then URL should be go to localhost/3000/Service-name
Any helpful link ?
import Router from "next/router";
....
inside onClick
router.push(pathname :'/service' query:{service-id:service-name},`/service-${service-name})
the pathname is the filename, the query gets the service-names and the third parameter to the router will display how you want the user to see the URL.
in your case, if the user selects Europe option then URL will be displayed as /service-Europe. this work when you are making use of one component to display for all your routes.
if you want to create a unique page then you can specify the pathname explicitly for each service link.
Programmatically navigate using react router
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.
I am developing an app in NativeScript with Angular
When I want to navigate to another route I simply programmatically declare:
this.router.navigate(['/my-details']);
However, when I am on the my-details route and I want to refresh the route.
I have tried calling the route again with the same method as above, as adding a parameter to the route such as /refresh, but they both do not work.
How do I refresh/navigate to the current route?
Couldn't you just use pullToRefresh? Although you have a detail view and not a list view it is possible to implement it there: https://github.com/bradmartin/nativescript-pulltorefresh#html
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?