Implementing multiple URL parameters in AngularJS using ui-router

After receiving the URL from the payment gateway, this is the format:

#/app/booking/details?id=25&success=true&paymentId=123&token=xx2311&PayerID=QSWAA

My route configuration currently looks like this:

.state('app.booking.details', {
                url: '/details/:id/:paymentId',
                views: {
                    'mainView@app': {
                        templateUrl: 'views/details_booking.html'

                    }
                },
                css: ['assets/css/styles.css','assets/css/plugins.css'],
                resolve: loadSequence('bookingCtrl')


            })

I am facing an issue where I am unable to separate the URL and pass it to the server. The only parameter that is successfully passed through is id. Here is my Laravel 5.1 method so far:

public function getBookingDetailAPI(Request $request)
    {

        $oid = $request->input('paymentId'); --> null
        $oid = $request->input('id'); --> 25
        dd($oid);
  }

Answer №1

To ensure that you can retrieve query parameters from the URL, adjust your state's url options as follows:

url: '/details?id&paymentId&token&PayerID'

With this modification, you will be able to access the URL parameters using the $stateParams service in your controller through variables such as $stateParams.id, $stateParams.paymentId, and so on.

Once you have obtained these parameters, you can proceed to send your request to your Laravel server either within your controller or resolve method like this:

$http.get('/backend/route',{params:$stateParams}).then(function(data){
  console.log(data); // This is the response from Laravel
});

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

Rendering with ReactDom in a SharePoint Framework application

Our current project requires us to generate a PDF file using the <div></div> elements. Most of the code I've seen renders from ReactDom.Render() instead of the render class: Take for instance React-pdf: import React from 'react&apo ...

React component showcasing live data based on the URL's input

I'm looking to develop a dynamic component that can retrieve and display data from a JSON file based on the URL path, rather than creating separate pages for each dataset. For instance: https://jsonplaceholder.typicode.com/posts If the page route is ...

Unexpected parameter value in directive when using controllerAs syntax

Apologies for my hesitation, but I've been struggling for hours to find the cause of this perplexing issue. It's a simple directive where I'm just passing a parameter one way. When I use $scope in the controller, the parameter value is acce ...

Efficiently sending data to Service Bus from an HTTP-triggered function

How can I link the output to service bus? I've configured an out binding in my Azure function: { "queueName": "testqueue", "connection": "MyServiceBusConnection", "name": "myQueueItem", "type": "serviceBus", "direction": "out" } I started ...

Using PHP with the CodeIgniter framework, learn how to use Javascript to delete specific values in an HTML table row

Within my CodeIgniter project, I have a table that is being dynamically generated by Ajax. Each row in the table has a button to delete the corresponding entry from both the HTML table and the MySQL table. I have already found a way to remove the HTML tab ...

Is it better to choose "_this" over "self" in JavaScript?

The Airbnb JavaScript Style Guide recommends using "_this" when saving a reference to the object, as seen in their Style Guide. // bad function() { var self = this; return function() { console.log(self); }; } // bad function() { var that = th ...

Tips for interacting with a custom web component using Selenium WebDriver

As a newcomer to writing selenium tests, I am attempting to create an automated test for a carousel feature on our homepage. The objective is to click on one of the carousel navigation buttons and then confirm that a specific inline style has been applied ...

iOS - A clever trick for manually setting focus on an input/textarea

Recently, there have been numerous discussions about the issue in iOS where focusing on an input/textarea element cannot be achieved through manual means. (Check out the threads here and here) It appears that iOS necessitates a genuine tap or click for foc ...

Pressing "Enter" initiates the submission of the form

My webpage contains a stylish GIF displayed as a button within a div. The script inside the div triggers a click event when the ENTER key is pressed, using $(this).click(). This click action has its own functionality. Everything functions smoothly in Fire ...

When a barcode scanner is used, it will trigger a "keypress" event only if the user is currently focused on an input box. Is there a specific event to monitor when the user is not on an input

Scenario: In the development of my web application, I am utilizing a barcode scanner device that allows users to scan barcodes for navigation to specific pages. Challenge: The current barcode scanning device is set up to only trigger "keypress" events w ...

The Laravel echo server integrated with socket.io is displaying a 404 error due to CORS blocking

I am currently working on incorporating Laravel Echo Server with Socket.io for my chat applications. However, I encountered an error message as shown in the following image: https://i.stack.imgur.com/cnSkk.png When testing on my local device, the server f ...

Showing navigation items in Vuejs based on authentication status

In my current project, I am developing a Single Page Application (SPA) using vuejs with vuetify and integrating authentication via a laravel/passport API. The challenge I'm facing is related to conditional rendering of navigation icons based on user a ...

How to properly handle string escaping within a JSON object

When I send this object as JSON response, it includes double backslashes in the URL. {"__type":"http:\/\/example.com\/contracts\/documents\/rendering\/instructions\/1\/0"} My desired response is: {"__type":"http:& ...

Tips for pulling information from two different services using an identification number and showcasing the data

Looking for a way to select data in AngularJS (JavaScript) similar to PHP's SELECT "message" FROM "users" WHERE id = $id? Here is my current setup: app.service("users", function() { this.userList = [ { userId: 1, u ...

Making changes to a database model (updating or replacing)

When making changes to a model in the database, is it more efficient to only update a specific field or replace all objects at the same level with that field? ...

Obtaining the date for the previous month using JavaScript or jQuery

I need to retrieve a specific date in JavaScript. My goal is to obtain the current date based on a variable named frequency, which can have values of Daily, Weekly, or Monthly. if(frequency=="daily") { date='current_date -2 days'; } e ...

What is the significance of declaring a constant array in JavaScript?

Does declaring an array as a constant in JavaScript prevent it from changing size, or does it mean that the values inside the array cannot be modified? handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState( ...

Bootstrap Tags Input is unable to function properly with data stored locally

I am currently working on developing a Project Manager tool that allows for the addition of multiple individuals to a single project. To accomplish this, I decided to incorporate the use of Bootstrap Tags Input by following the examples provided for Typeah ...

Aptana - Expose the Declaration

After hearing rave reviews about Aptana being the best IDE for JavaScript, I decided to download it. I grabbed a project from GitHub, found a method call in the code, right clicked on it, and saw 'open declaration - F3'. However, when I tried bot ...

Connect the drawer state in Vuetify when the navigation drawer and app bar are separate components

Currently, my Dashboard consists of two components: Dashboard <template> <v-app> <Toolbar :drawer="app.drawer"></Toolbar> <Sidebar :drawer="app.drawer"></Sidebar> </v-app> </template> ...