When redirected to another page, the query string parameter cannot be retrieved

Greetings! I am currently working on a JavaScript application that consists of two pages: default.aspx and addnewitem.aspx. The default.aspx page contains an HTML table and a button. My goal is to redirect to the addnewitem.aspx page when the button is clicked, passing along some parameters in the query string. However, despite my best efforts, I keep encountering a "page not found" error after redirection, and I'm uncertain about the cause. Here's what I've been trying:

function getValues() {
    var Title = "dfd";
    var PrimarySkills = "fdfd";
    var SecondarySkills = "dfdf";
    var url = "http://sites/APPSTEST/JobRequisitionApp/Pages/AddNewItem.aspx?Title=" + encodeURIComponent($(Title)) + "&PrimarySkills=" + encodeURIComponent($(PrimarySkills)) + "&SecondarySkills=" + encodeURIComponent($(SecondarySkills));
    window.location.href = url;
}

In addnewitem.aspx, I have implemented the following logic to handle the query string:

<script type="text/javascript">
        var queryString = new Array();
        $(function () {
            if (queryString.length == 0) {
                if (window.location.search.split('?').length > 1) {
                    var params = window.location.search.split('?')[1].split('&');
                    for (var i = 0; i < params.length; i++) {
                        var key = params[i].split('=')[0];
                        var value = decodeURIComponent(params[i].split('=')[1]);
                        queryString[key] = value;
                    }
                }
            }
            if (queryString["Title"] != null && queryString["PrimarySkills"] != null) {
                var data = "<u>Values from QueryString</u><br /><br />";
                data += "<b>Title:</b> " + queryString["Title"] + " <b>PrimarySkills:</b> " + queryString["PrimarySkills"] + " <b>SecondarySkills:</b> " + queryString["SecondarySkills"];
                $("#lblData").html(data);
                alert(data);
            }
        });
</script>

"http://sites/APPSTEST/JobRequisitionApp/Pages/AddNewItem.aspx?Title=%5Bobject%20Object%5D&PrimarySkills=%5Bobject%20Object%5D&SecondarySkills=%5Bobject%20Object%5D"

I have put in a significant amount of effort to resolve this issue without success. Any insights on where I might be going wrong would be greatly appreciated. Thank you for your assistance.

Answer №1

To avoid a 404 error, it is recommended to use relative paths in your URL instead of hard-coding the entire folder structure. When you hard-code the URL, you will need to update it every time you publish the site to the hosting environment.

For example:

var url = "http://sites/APPSTEST/JobRequisitionApp/Pages/AddNewItem.aspx?Title=...

You should change this to:

var url = "/AddNewItem.aspx?Title=...

If both pages are located in the same folder. If AddNewItem.aspx is in the Pages folder, make sure to include that folder in the path like this:

var url = "/Pages/AddNewItem.aspx?Title=...

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

Choose an option within a row of a table

Is there a way to display the div element with the .mynote class when clicking on the input that has an id of title? I attempted the code below, however, it does not seem to be functioning as expected. $("#title").click(function() { $(".mynote").show( ...

Is there a way to utilize Javascript to retrieve elements without specifying an id?

I am faced with a challenge of accessing an element without an id but with a shared classname using Javascript. How can I accomplish this task successfully? My attempt to use the document.getElementsbyClassName property was unsuccessful due to the shared ...

Spin the text inside an <li> element generated by JavaScript

I am currently working on a unique script designed to create a custom number of slices for a circle. The items in the circle are being displayed as shown in this generated circle image. This is the Javascript code I have been using: for () { men ...

Is it possible to include a button in a search bar while maintaining the keypress functionality in Vue?

My search function is operational, but it currently requires the user to press the enter key to display results. I am interested in adding a button option for users as well. Users should be able to find results by either pressing enter or clicking the bu ...

Display or conceal columns based on their index

<div ng-controller="checkBoxController"> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="moda ...

What's the best way to handle JSON response when making an ajax call?

As a newcomer to AJAX/JavaScript, I am trying to handle the response from the following AJAX request: function callMediationWebApi(requestQuery) { var responseData; var request = $ .ajax({ type : "POST", url : "API_URL", ...

Generate a Jbuilder template and set the content to be stored in gon

Gon integration with Jbuilder is seamless. According to the documentation, the recommended approach is to use it as follows: gon.jbuilder template: 'path/to/template.json.jbuilder' While this method works well, I wanted to optimize by caching t ...

Oops! You can only have one parent element in JSX expressions

I'm working on creating a password input box, but I keep encountering an error when integrating it into my JS code. Here's the snippet of my code that includes TailwindCSS: function HomePage() { return ( <div> <p className=&q ...

Obtaining the Unix timestamp within Firebase: A step-by-step guide

Within my chess application, I utilize Firebase.ServerValue.TIMESTAMP to document the timing of each move. If a user fails to make a move within 24 hours, they forfeit the game. It is important for me to indicate how much time the user has left to make th ...

Do not reveal result of coin flip using Javascript and API

Even though I meticulously copied my professor's parsing process, the display isn't turning out as expected. It seems like something is off in my code. <div class="main"> <p>Heads or tails? click to toss the coin</p> & ...

How to Utilize Claims in a Blazor App Server Like ASP.NET Core MVC?

I implemented the following code snippet in Blazor: if (UserAccont.LoginUser(loginuser) != null) { if (UserAccont.UserIsBlocked(loginuser.Mobile)) { UserIsBlocked = true; } else ...

Performing AJAX requests in SvelteKit using the fetch function

Within my SvelteKit application, I am utilizing AJAX calls to interact with my API endpoints. An example of this can be seen in the following code snippet: +page.svelte <script> async function get_card() { const url = '/api/card/?cat ...

Tips on extracting attributes from a Backbone model utilizing the Django authentication backend API

In a current project, I am utilizing the Django auth backend, Django REST framework API, and Backbone. var User = Backbone.Model.extend({ urlRoot: host + 'api/users/' }); // django auth response var isAuthenticated = {{ request.user.is_authen ...

An innovative countdown clock for WooCommerce that dynamically displays delivery time as a customizable shortcode

After successfully creating a Wordpress shortcode with a JavaScript counter, I encountered an issue: Back End - Counter functions properly: https://i.stack.imgur.com/qyHIL.png Front End - Counter not working (no console errors...): https://i.stack.imgu ...

Tips for obtaining and storing multiple inputs within the same readline.question prompt in separate variables

Seeking to gather multiple user inputs in a single readline question and assign them to different variables? You're not alone! Ran into this challenge myself while trying to figure out the solution. Code import * as readline from 'node:readline&a ...

Instructions for creating a select box with checkboxes:

I am currently working on incorporating a Selectbox that includes checkboxes within the selectbox itself, similar to the image shown below. However, I am encountering an issue where clicking on the select box does not open the checkboxes from another div. ...

Is it possible to utilize the same Context in multiple forms within React?

Is it possible to utilize React Context to store the state of multiple forms, or should each form have its own unique Context? Below is a snippet of code that showcases the use of React Hooks API: In FormContext.js ... import {FormReducer} from './ ...

Displaying and concealing a div based on the scroll position

I have implemented a script that hides a div and then shows it when I scroll past a certain point on the page. It is working correctly, but once I scroll back up to the top, the div remains visible. Can someone suggest a modification to the code that will ...

The custom configuration file for SailsJS does not seem to be loading properly

After following the documentation and advice on StackOverflow, I attempted to load custom configuration for my application. However, I faced a failure. I went ahead and created a new file named /config/application.js In this file, I added the followi ...

Issue with Reddit example in Mozilla Addon SDK documentation on the second page

While developing my own addon, I encountered a problem that also occurred with the Reddit example. To simplify things, I will refer to the Reddit example in this explanation. When using the code provided in the example found here, this is the issue that a ...