No Angularjs redirection without the "onload" event

In my search for a solution, I came across this answer but it did not quite fit my needs:

  • Pass onload event through redirect

The issue I'm facing is that I want the AngularJS section of my application to reload something when the user is redirected back to the page. The login flow is as follows:

a.php -> [FB Magic] -> callback.php -> a.php

The problem lies in the fact that <body onload="foo()"> only triggers once. This holds true for DOMContentLoaded and window.onload as well.

For a.php, it appears as though the user never left the page.

How can I make AngularJS execute a function (defined within a controller) when the user is redirected back? (I am using PHP to handle the redirection)

EDIT: Here is what my controller looks like:

pwm.controller('EventListController', ['$scope', 'pwmApi',
function EventListController($scope, pwmApi) {
    $scope.fetched = false;
    $scope.events = [];
    let update = function () {
       <!-- Does stuff, is a bit long ->
    };
    update();
}]);

So, the update(); method is called upon construction of the controller. However, when I am redirected back, the update function is NOT executed - Refreshing the page resolves the issue temporarily.

I hope this clarification sheds some light on the situation. Reloading the page after being redirected back helps, but still nothing happens...

Answer №1

I came across a method to achieve this using PHP ()

Instead of my initial redirect solution which was header("Location: $url"); and

header("Location: $url?redirect=true");
, I have switched to using header("refresh: 0;url=$url"); and it is working as intended.

My question now is, can the same be done in AngularJS with the Location header?

Answer №2

To create a redirection with a URL, you can follow this format: $url = "abc?redirect='true';

When using redirect='true', it indicates that a redirection is taking place.

Within your AngularJS controller, implement the following:

Controller

.controller('controller',function($location){
   var queryParameters = $location.search();

   // Verify if the redirect value is true
   if(queryParameters.redirect === 'true'){
      // Execute a function
      myFunction();
   }
});

Note - In the query string, all values are considered strings so even a boolean value of true will be represented as 'true' and should be treated accordingly as a string.

Answer №3

Implementing a listen-onload strategy may not integrate seamlessly with Angular's framework.

When utilizing routing through ngRoute, ui-router, or ng-controller, the controller linked to the route will run again. To enhance this functionality, consider using event listeners provided by the routing modules such as $routeChangeSuccess and $stateChangeSuccess.

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

Can AdonisJS 4.1.0 support conditional queries?

I am exploring the capabilities of AdonisJs query builder by referring to their documentation at Currently, I am attempting to replicate a scenario similar to the one demonstrated under the 'Conditional Queries' section: const query = Database. ...

Automated tool for generating random JSON objects

Looking for a tool that can generate random JSON objects? I'm in need of one to test my HTTP POST requests and incorporate the random JSON object into them. Any recommendations? ...

Enhance your slideshow with a stylish fade effect

I found this slideshow on codepen and decided to customize it to make it my own. While everything is working well, I wanted to incorporate a fade effect into the transition between slides. I'm unsure whether I should add something to the CSS file or m ...

Using jQuery, apply the ng-style attribute to an element once it has been created

Using CodeMirror in combination with Angular has been a helpful tool. The CodeMirror element is dynamically created by invoking the following code: myCodeMirror = CodeMirror.fromTextArea( document.getElementById("paper"), opts ); This specific line of co ...

Can you provide guidance on how to divide a series of dates and times into an array based

Given a startDate and an endDate, I am looking to split them into an array of time slots indicated by the duration provided. This is not a numerical pagination, but rather dividing a time range. In my TypeScript code: startDate: Date; endDate: Date; time ...

Handling Exceptions in Node.js and Express

Having recently delved into the world of javascript and node, I've been working on creating an application using node.js and express. While I've implemented appropriate error callbacks in my code, there are instances where the node.js server abr ...

Custom Component in React Bootstrap with Overflowing Column

I am working on a custom toggle dropdown feature in my React application: import React from 'react'; import 'react-datepicker/dist/react-datepicker.css'; const DateRange = props => ( <div className="dropdown artesianDropdo ...

Adjust the div class to align with its content

I am looking to modify the code in order to copy the text of a div to its own class. Currently, the code provided copies text from all sibling div elements, but I specifically want each individual div's text to be its own class. For example, with the ...

Tri-party class switch-up

I successfully implemented two radio buttons to toggle between alternative texts: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

Looking to activate a button upon clicking a button on a different page using php and javascript

Is it possible for the first user logged in on one page to have a button, and when clicked, enable a disabled button on another page where the second user is logged in? This functionality needs to be implemented using PHP/JavaScript. Thank you in advance ...

The range slider's color value is not resetting correctly when using the <input>

Before repositioning, the slider is at this location: (both thumb and color are correctly positioned) https://i.stack.imgur.com/J3EGX.png Prior to Reset: Html <input id="xyzslider" class="mdl-slider mdl-js-slider" type="range" min="0.0" max="1.0" va ...

Mastering the art of resolving a dynamic collection of promises with '$.all'

Imagine having 3 promises and passing them to $q.all. This results in a new promise that resolves when the 3 promises are resolved. But what if I realize before the 3 promises resolve that I also want a 4th promise to be resolved? Can this be achieved? I ...

Find all elements within JSON data using lodash.js

Hello friends, I'm dealing with a JSON object: var companies = [ { id: 1, name: "Test Company", admin: "Test Admin" }, { id: 2, name: "Another Company", admin: "Test Admin", country: 'Spain' }, { id: 3, name: "New Company", ad ...

The vertical scroll position of a container with overflowing content does not correspond to the height of its elements

I have a div that has a fixed height of 155px and is set to scroll vertically when overflow occurs. Inside this div, there is an unordered list with a height of 338px. I am attempting to determine when a user reaches the bottom of that div. $('.myD ...

The componentDidUpdate method is functioning by comparing the previous state with the current state on different triggers

I have a primary element that is invoking another element with specific attributes. // Primary Element <SecondaryElement className="EnterNumber-input" submitClicked={this.state.submitClicked} /> Upon clicking a button, I am modify ...

How to extract the HTML content from specific text nodes using Javascript

I have a piece of HTML that looks like this: <div id="editable_phrase"> <span data-id="42">My</span> <span data-id="43">very</span> <span data-id="1">first</span> <span data-id="21">phrase< ...

Ways to restrict input text to a specific set of values

When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...

Eliminate any null strings from an object by comparing the object's previous state with its updated state

I am currently implementing an exemptions scheduler using react-multi-date-picker. The react-multi-date-picker component is integrated within a react-table in the following manner: const [data, setData] = useState(0); const [dateValues, setDateValues] = us ...

AngularJS handles API errors by resolving them on a case-by-case basis

My project involves using AngularJS along with UI-Router to create a Single Page App that interacts with a REST API to fetch json data. In my app.config, I have defined the following: .state('project', { url: '/project/:projectId/&apos ...

Floating division element above responsive divisions

element, I am in the process of developing a straightforward online card interface. In this interface, there will be a user profile picture displayed above some details about that user. However, to achieve this layout, the profile picture must appear hove ...