AngularJS update route unsuccessful

I am currently working on an editing application that utilizes AngularJS for the client side and Symfony 2 for the server side (I believe using Symfony is essential for solving my issue).

Therefore, my URL consists of two parts: - The Symfony part to access the editor - The Angular part to navigate within the editor

When a user saves their changes via AJAX, I want to update the Symfony part by adding a generated ID. To accomplish this, I manually construct the new route using the following JavaScript code snippet:

var newRoute = $location.protocol() + '://' + $location.host();

// Retrieve the Symfony route (using FOSJSRouting)
newRoute += Routing.generate('innova_path_editor', {workspaceId: EditorApp.workspaceId, pathId: EditorApp.pathId});

// Add the Angular part
newRoute += '#' + $location.path();

$location.url($location.hash(newRoute));

Although the generated route appears correct when printed in the console and functions correctly when copied and pasted into the browser, setting the URL with 

$location.url($location.hash(newRoute));
causes Angular to redirect me to the 404 route.

Your assistance would be greatly appreciated.

EDIT

The generated route is:

http://localhost/Claroline/web/app_dev.php/innova_path/workspace/2/path/editor/37#/global

EDIT 2

If possible, I'd prefer to avoid reloading the page.

javascriptangularjssymfony

Answer №1

If you need to redirect to a different page or perform a full page reload, using $location may not achieve the desired result; instead, you should use window.location.

Replace

$location.url($location.hash(newRoute));

with

location = newRoute;

Update:

For modern browsers, consider utilizing pushState() from the HTML5 history API to avoid reloading the entire page.

Replace

$location.url($location.hash(newRoute));

with

$timeout(function() {
    history.pushState(null, null, newRoute);
}, 0);

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

Utilizing Angular to efficiently download and showcase PDF files

Presently utilizing https://github.com/stranger82/angular-utf8-base64 as well as https://github.com/eligrey/FileSaver.js/ for the purpose of decoding a base64 encoded PDF file that I am fetching from a rest API. It successfully decodes and downloads, ...

javascriptangularjspdf

Node.js - Request timeout issue: Headers cannot be set after they have already been sent

My node.js app is running with mongoose, express, mongodb. I have a 'team' page that displays teams from the database. Everything was working fine until I added the code below. Now, when I navigate to the page and refresh it or try to load it aga ...

javascriptnode.jsexpressmongoose

Are AngularJS Controllers functions or classes in nature?

The AngularJS ng-controller documentation specifies that ng-controller "attaches a controller class to the view" (source: angularjs.org). In contrast, the AngularJS Controllers documentation states that "When a Controller is attached to the DOM via the ng- ...

angularjsangularjs-controller

Adding a disabled internal Style node to the HTML5 DOM: A simple guide

According to this, the style tag can be turned off using the disabled attribute. I attempted the following: <head> <style>body { color: black; }</style> <style disabled>body {color: red; }</style> </head> <bo ...

javascriptcsshtml

Managing different Vue dynamic components: mastering prop passing, event emitting, and slot replacement techniques

Just have some basic understanding of dynamic components, but what if the component is complex or unique from each other, how should I manage emit, props, and slots in the parent component? Let's say I have 3 components: Component 1 <template> ...

javascripttypescriptvue.jsvue-dynamic-components

The slideshow feature on W3 Schools does not start automatically when the page loads

After following the W3Schools tutorial to create a slideshow, I found that the animations are working correctly. However, only three dots appear on the screen and I have to manually click on one of them to view the pictures. var slideIndex = 0; sh ...

javascripthtmlcss

Activate simultaneous HTML5 videos on iOS devices with a simple click

I am currently in the process of developing a webpage that will play various videos when specific elements are clicked. Although the functionality works perfectly on desktop computers, it encounters an issue on iOS devices. The problem arises when the elem ...

javascriptjqueryhtmlvideoios5

Is PHP loaded prior to the `html body`?

I'm facing a unique challenge where I am currently transferring variables from a PHP page to hidden HTML inputs. The values are extracted from these hidden inputs using a JavaScript function that is called in the following manner: <body onload=" ...

phpjavascripthtml

Phonegap-enabled web applications that utilize ad networks

Are there any ad networks similar to leadbolt or mobfox that provide HTML code for inserting into a phonegap app without requiring an SDK installation? For instance, leadbolt offers a script with the following format: script type="text/javascript" src="h ...

javascripthtmlcordovaleadboltmobfox

Can you explain the process that takes place when require("http").Server() is called with an Express application passed in as a parameter?

As I was exploring the Socket.io Chat Demo found at this link: http://socket.io/get-started/chat/, I came across their require statements which left me feeling confused. var app = require('express')(); var http = require('http').Server ...

javascriptnode.jsexpress

The specific model cannot be utilized for custom control within the ViewSettingsCustomItem

Exploring examples to enhance my SAPUI5 knowledge, I encountered an unusual behavior when utilizing the ViewSettingsDialog component with a ViewSettingsCustomItem filter. In my controller, I initiate the Dialog in this manner: onOrdersFilterPress ...

javascriptsapui5

Deleting Data with Django Rest Framework Datatables

Query I am trying to send a list of ID's to the default Django Rest Framework API URL using the rest_framework router. Everything seems to be in order until the point of submitting the ID's for deletion. Upon clicking the delete button, the DELE ...

javascriptpythonjquerydjangodatatables

What is the process for assigning one file input to another file input?

Quite an unusual question, I admit. The crux of the matter is my utilization of a fantastic tool known as cropit. With this tool, we have the ability to upload an image, preview it, and then manipulate it according to our preferences. HTML: <div align ...

javascriptjqueryhtmlcsscrop

Trigger a JavaScript function upon the playing of an audio file

Is there a way to trigger a javascript function whenever an HTML5 audio file is played? And can the same be done for videos as well? ...

javascripthtml

Click on a table cell in Vue to display its corresponding data in a modal

I have successfully implemented a modal in my Vue component that works well with static text inside it, confirming its functionality. However, when attempting to pass data from the table cell that is being clicked into the modal, I encountered an error st ...

javascriptvue.js

What is the best way to close the second Bootstrap modal upon submitting while maintaining the first modal open?

I am currently working with Laravel 5 and facing an issue with multiple bootstrap modals on the same PHP page, as shown in the image below. The problem arises when I hit submit on the second modal, it redirects to a blank page instead of closing the second ...

javascriptphpjqueryajaxlaravel

Access the JSON data containing sub array values and showcase them on an HTML page by utilizing ngFor

Greetings! I am currently working on a web application where I need to showcase student data that is being received in JSON format. Below is the TypeScript code snippet that outlines the structure of the student data: export interface studentData{ ...

javascriptangulartypescriptmat-tablemat-chip

Deciphering a JSON array by value or key

I have a JSON array that I need to parse in order to display the available locations neatly in a list format. However, I am struggling with where to start. The data should be converted to HTML based on the selected date. In addition, a side bar needs to s ...

javascriptjqueryarraysjsonajax

I've been stuck on this for the past hour, trying to figure out why /js/bootstrap.min.js can't be located

I'm having an issue with the code in base.html while trying to create a bootstrap starter template. I copied it from bootstrap but when I run it, I get an error related to /js/bootstrap.min.js. Can someone help me figure out what's wrong? Thank y ...

javascripthtmljquerydjangobootstrap-4

What is the most optimal location to retrieve data for authorized users in a Vue application?

Greetings! I am currently retrieving an array of posts from my express API in the Home.vue file, which is secured by route guards. <script> export default { created() { this.$store.dispatch('fetchPosts') } } </script> The fet ...

javascriptvue.jsvuex