In the event that the $state cannot be located, redirect to a different URL using Ui

Our platform is a unique combination of WordPress backend and AngularJS frontend, utilizing ui.router with html5 mode turned on and a base href="/" due to the stack sites being in the root of the site.

We are currently facing an issue:

1) Previously, when the otherwise("/") option was enabled and a state was not found (such as when a user clicked on a WordPress page or any other non-state defined page), the app would redirect to the main page "/"; 2) After removing this, everything seemed fine as we were able to access non-state pages directly through the URL like localhost/post/blah. However, now none of the links are working. Both ui-sref state links and regular a href="/whatever/whatever" links do not function. Although the browser's address bar changes to the appropriate link when clicked, nothing happens.

Our goal:

We aim to have the links work as originally intended - activate the state if one is found, and go to the intended link if no state exists.

We have tried various solutions found through Google searches and here, but have yet to find a fix. Most recently, we attempted:

$urlRouterProvider.otherwise(function() {
        window.location.href = 'localhost'+window.location.pathname;
    });

// This resulted in an endless loop of page reloads upon opening the page

We also tested:

$urlRouterProvider.otherwise(function() {
            window.location.href = 'http://google.com'
        });

//This code successfully redirected to another page, but the initial issue persisted. Therefore, we believe that the solution lies in firing the above function with the appropriate URL when no state is found, based on the link or address bar change. Any suggestions?

javascriptangularjs

Answer №1

When dealing with URLs that are not part of the state, you should utilize the following code snippet:

<a href="/link" target="_self">link</a>

Answer №2

My current setup is using "angular-ui-router": "0.2.18" and the code below is functioning flawlessly for me.

app.config(['$stateProvider', '$urlRouterProvider', 

function($stateProvider, $urlRouterProvider) {
    "use strict";

    $stateProvider.state('page1', {
        url: "/page1",
        templateUrl: "page1/page1.tpl.html",
        controller: 'Page1Controller'

    }).state('page2', {
        url: "/page2",
        templateUrl: "page2/page2.tpl.html",
        controller: "Page2Controller"

    }).state('error', {
        url: "/error",
        templateUrl: "error/error.tpl.html",
        controller: "ErrorController"
    });

    $urlRouterProvider.otherwise('/error');

});

To transition out of Angular's context and perform a hard redirect to another website, you can include a redirect call in the error state controller.

app.config(['$stateProvider', '$urlRouterProvider', 

function($stateProvider, $urlRouterProvider) {
    "use strict";

    $stateProvider.state('page1', {
        url: "/page1",
        templateUrl: "page1/page1.tpl.html",
        controller: 'Page1Controller'

    }).state('page2', {
        url: "/page2",
        templateUrl: "page2/page2.tpl.html",
        controller: "Page2Controller"

    }).state('error', {
        url: "/error",
        controller: "ErrorController"
    });

    $urlRouterProvider.otherwise('/error');

}]);


app.controller('ErrorController', ['$window',

function($window) {
    "use strict";

    $window.location.href = "http://www.google.com";
}]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When is the best time and place to break out Yahoo's Mojito Manhattan cocktail mix?

Yahoo! made headlines earlier this month by unveiling their new Mojito framework, set to be open sourced in 2012. I've been eager to learn more about this promising framework but haven't had any success so far. Does anyone know where I can find ...

javascripthtmlnode.jscssyahoo

Prevent form submission once all tasks have been finalized

Hey there, I've been racking my brain for hours trying to solve this issue... I'm looking to disable my form after it's been submitted to prevent multiple submissions. However, every method I try seems to disable the button but also interfe ...

phpjavascriptjquerymysql

Ways to launch the React Material date picker while hiding the date input field

I am working with the react material (MUI-X) date picker and my specific requirement is to have the date picker open on button click without displaying the date text field. I simply want to show the calendar and allow users to select a date. I have explore ...

javascriptreactjsreact-nativematerial-uimui-x

Is there a way to verify if a React hook can be executed without triggering any console errors?

Is there a way to verify if a React hook can be invoked without generating errors in the console? For example, if I attempt: useEffect(() => { try { useState(); } catch {} }) I still receive this error message: Warning: Do not call Hooks i ...

javascriptreactjstypescriptreact-hookstry-catch

Turn off a feature

I'm having trouble disabling a tooltip that is being utilized from this specific website. The code for setting and calling the tooltip looks like this: this.tooltip = function(){....} $(document).ready(function(){ tooltip(); }); I've attempte ...

javascriptjquery

What is the easiest way to pass a chosen value to PHP?

My goal is to dynamically display photos based on the selected album without refreshing the entire page. Here is my current script: <script type="text/javascript"> function replaceContent(divName, contentS) { document.g ...

phpjavascriptajax

The onChange event for React select is being triggered twice, incorrectly using the old value the second time

I am currently implementing React Select to display a list of items. When an item is changed, I need to show a warning based on a specific flag. If the flag is true, a dialog box will be shown and upon confirmation, the change should be allowed. After each ...

javascriptreactjsreact-reduxreact-hooks

Is there a way to enable hover functionality on mobile devices? I wish for the hover effect seen on desktop to be triggered automatically on mobile devices

I attempted to implement @media (hover: hover) without success. In my design, I have three images in a row that reveal a text overlay when hovered over with a mouse. However, the issue arises when I try to switch to a mobile view, as the images remain un ...

javascripthtmljquerycssbootstrap-5

Create PDFs using PhantomJS when the HTML content is fully loaded and ready

I am a newcomer to utilizing phantomjs and encountering difficulties in rendering my website as a PDF file. Although I can successfully render a simple version of the page, issues arise when multiple images and web fonts are involved, causing the DOM not t ...

javascriptnode.jspdfphantomjs

Using d3 or ajax to read a local file containing tab-separated values may result in a syntax error appearing in the Firefox development console

The reading operation is functioning as expected. However, I encountered a syntax error in the Firefox console while going through multiple files, which can be quite tedious. These files are annotation files formatted like (time \t value) with no head ...

javascriptajaxd3.js

After the update, Material UI is causing a TypeError by throwing an error stating that it cannot read the property 'muiName' of an

After updating from "material-ui": "^1.0.0-beta.38" to "@material-ui/core": "^1.3.0", I made changes to imports, ran npm install, removed node_modules and even deleted package-lock.json. However, I continue to encounter the cryptic error message TypeError: ...

javascriptreactjsmaterial-ui

Pass the identical event to multiple functions in Angular 2

On my homepage, there is a search form with an input box and select dropdown for users to search for other users by location or using html5 geolocation. When a user visits the page for the first time, they are prompted to allow the app to access their loca ...

javascripthtmlangularangular2-formsangular4-forms

Getting a variable from an ajax call and using it in a Pug template

Currently, I am experimenting with Express and Pug to learn some new concepts. Upon making a request to a website, I received some dynamic information stored in an array. However, I am facing challenges when trying to iterate over this array using Pug. The ...

javascriptjqueryajax

Increase the value of a property within an array of objects based on certain conditions

My task involves incrementing the rank value by one until the name property changes. I am utilizing the page and rank properties to track when this change occurs. In addition, I want to increment it once whenever the type is not equal to none, and then re ...

javascriptarraysobject

What is the best way to access the element menu with element-ui?

I am looking for a way to programmatically open an element in my menu, but I haven't been able to find any information on how to do it. HTML <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/<a hr ...

javascriptvue.jselement-ui

Is it possible to modify a specific index within an array stored in Firestore?

How can I modify a specific index within an array stored in Firebase/firestore? export const editComment = (comment) => { return (dispatch, getState, { getFirebase, getFirestore }) => { const firestore = getFirestore(); firestore.collec ...

javascriptreactjsfirebasegoogle-cloud-firestore

Is there a way for me to retrieve the locator value of a webelement?

How can I retrieve the selector value used in a selenium webelement in javascript? Let's say I have the following object: var el = browser.driver.findElement(by.id('testEl')); I want to extract the text 'testEl' from this object ...

javascriptseleniumprotractor

How to retrieve the type of a computed keyof T as a generic type within TypeScript

I am working with two different interfaces: interface PersonRequirements{ user:string, password:string, id:number } export interface Requirement<R> { name: keyof R & string, save: () => any,/* I want this return type to be ...

javascripttypescriptgenerics

Can you tell me about some commonly used GUI widgets in Servlet-JSP?

I am new to working with Servlets, Tomcat, JSP, and I am curious about the common practices for incorporating GUI elements into JSP pages to enhance client-side interactivity. I have experience with jQuery, YUI, extJS, among others, for JavaScript scriptin ...

javajavascriptjspservlets

Unable to pass the jQuery value - troubleshooting tips for Laravel

JavaScript Issue return response()->json([ 'category' => $category, 'editRoute' => $artistCategoriesEditRoute ]); AJAX Response category Object { id: 1, title: "tt", parent_id: 0, … } id ...

javascriptjqueryajaxlaravel