Javascript - populating input box with some value received from ajax rest response

Question

I have an anchor tag in a page1.html which has an onClick event . This onClick makes a REST API call. The response of this REST API call is then passed to a javascript function , which loads page2.html and an input box on page 2 needs to be populated with the responses value.

Here is the code which loads the new page and tries to populate the input box present on the new page

function(response){
document.location="page2.html"; 
$( "#inputBoxID" ).val( response.text );    
}

The above code is not populating the input box with id "inputBoxID" present in page2.html. What could be the reason and possible solution?

Wouldn't it make more sense to just load the page2 an onload() make the ajax call and populate your stuff? — Jonas Grumann
– Jonas Grumann, Commented Jun 3, 2016 at 14:01
I dont want to load page2 if the REST API call fails, thats why I am making the ajax call first and on success i am loading page2 — Manas Saxena
– Manas Saxena, Commented Jun 3, 2016 at 14:03
document.location="page2.html"; you know that makes the browser navigate away from the current page, right? Any js after that call should not be relied upon to execute since the page is unloading — Patrick Evans
– Patrick Evans, Commented Jun 3, 2016 at 14:03
Going off @JonasGrumann - why not just just go to page2 in the onclick. Then inside page2, make an AJAX call to set the input that is on page2. If you don't want to go to page2 if it fails, then INSIDE page2, add a fail handler to the AJAX. And if the AJAX fails, do document.location = "other_page.html" — Don Cheadle
– Don Cheadle, Commented Jun 3, 2016 at 14:03
As Patrick said, once you leave the page the js is gone and reloaded. You could either save your rest response in the cookies or pass them over to the next page as GET parameters like in page2.html?param1=test&param2=test2 — Jonas Grumann
– Jonas Grumann, Commented Jun 3, 2016 at 14:04

b-d-b · Accepted Answer · 2016-06-03 14:05:13Z

4

From https://developer.mozilla.org/en-US/docs/Web/API/Document/location

"Though Document.location is a read-only Location object, you can also assign a DOMString to it. This means that you can work with document.location as if it were a string in most cases: document.location = 'http://www.example.com' is a synonym of document.location.href = 'http://www.example.com'."

You are in fact changing the page you are on. You've now lost the context of your API request. That code which lived in memory on page1.html is gone now, no way to get it back unless you start pushing that data into localStorage and getting it back on the subsequent call to load page2.html.

answered Jun 3, 2016 at 14:05

b-d-b

3151 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manas Saxena Over a year ago

So whats the solution , is there any way to load a new page without the data loss?

b-d-b Over a year ago

You can use an AJAX call to get page2.html. You'll have to do a $.AJAX GET request to it, then stuff the body of the response into the page. Then stuff the response.text from the original request into the input after that document is loaded. But to be honest, the solution is that you've pretty much over-thought this and designed your app incorrectly from the ground up. You should rethink your design or use a framework.

Collectives™ on Stack Overflow

Javascript - populating input box with some value received from ajax rest response

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related