Push States (navigate)

Push States

The library provides intuitive navigation options to seamlessly transition between pages and initiate GET, POST, PUT and DELETE requests.

Page Navigation / GET Request

Initiating a GET request or navigating to a new page is straightforward. Such actions will correspond to a get router, with the request parameter converting into an instance of URLSearchParams for the request.

Arguments

• path (string): Specifies the URI, which can be a regular path or a hash.

• request (object): Sends a GET request or query string to the dispatcher. This will be transformed into an instance of URLSearchParams. When executed in a browser, the query string will also be appended to the URL in the address field.

Make GET Request

// URI hash (fragment with hashtag) navigation
container.get("dispatch").navigateTo("#articles/824/hello-world", { test: "A get request" });

// URI path navigation
container.get("dispatch").navigateTo("/articles/824/hello-world", { test: "A get request" });

Note: You can access the container inside all your controllers and component views, meaning you can also access the dispatch!

The Navigation Result

The above navigation will trigger the result for the matching router:

// GET: example.se/?test=A+get+request#articles/824/hello-world
router.get('/articles/{id:[0-9]+}/{slug:[^/]+}', function(http, container, helper, builder) {
    const id = http.vars.id.pop();
    const slug = http.vars.slug.pop();
    const test = http.request.get.get("test"); // Get the query string/get request "test"
    console.log(`Article ID: ${id}, Slug: ${slug} and GET Request ${test}.`);
});

POST Request

Creating a POST request is similarly efficient, targeting a post router. The http parameter will be an object to facilitate the request.

Arguments

• path (string): Defines the URI, which can be a regular path or a hash.

• request (object): Submits a POST request to the dispatcher. This will be an object, allowing for detailed and structured data transmission.

Make POST Request

container.get("dispatch").postTo("#post/contact", { firstname: "John", lastname: "Doe" });

The HTTP POST Request Result

The above post will trigger the result for the matching router:

// POST: example.se/#post/contact
router.post('/post/contact', function(http, container, helper, builder) {
    const firstname = http.request.post.firstname;
    const lastname = http.request.post.lastname;
    console.log(`The post request, first name: ${firstname}, last name: ${lastname}`);
});

PUT and DELETE

You can of course also make PUT and DELETE requests.

// PUT - Like POST, it will pass arguments as parsed body
container.get("dispatch").putTo("#post/contact", { firstname: "John", lastname: "Doe" });

// DELETE - Like GET, it will pass arguments as query string
container.get("dispatch").deleteTo("#post/contact", { id: 98862 });

What is Really Cool

What is really cool is that if you have bound the Stratox Fetch library to the main or to a router that matches the request method and the state path, it will actually also make an Ajax fetch request as specified!

Example of Ajax Fetch Request for Routes

You can bind an Ajax fetch request directly to a route. Here's how it works:

// Binding the fetch request to the router
router.put('/contact', [PagesController, "contact"], {
    url: "https://example.se/backend-location/", // Main URL
});

In this example, the state will be /#contact , show the right controller page and will also make a PUT ajax request with the Fetch API to the specified URL and router path (https://example.se/backend-location/contact).

This demonstrates how easy it is to integrate asynchronous data fetching within your Stratox application, making your routes even more dynamic.