How to store results of script url in Javascript variable - javascript

I am running a script in the 'head' element of a webpage that is a API call url and returns results in the form of a javascript array. The problem is that the API documentation gives me no reference to what the name of the javascript array is or how to access it, so I have no idea how to use the array in further scripts. I need a way to store the url API call results into a javascript array variable of my own that I can use.
So, is there a way to store the result of the 'head' script as a variable? Thanks, for any help.
<script lang="javascript" src="https://target_domain/db/
target_dbid?a=API_GenResultsTable&qid=5&jht=1&ticket=auth_ticket">
</script>

If you want to get the data as a javascript array: set the JSA parameter to 1. So replace jht=1 with jsa=1 in your request URL.
When you do this, it will generate a script that stores the result in a global variable called: qdb_data.
Note that the GenResultsTable call is intended to generate an HTML table and not to retrieve raw data. To get raw data I'd rather use https://help.quickbase.com/api-guide/do_query.html

Related

Pass and use data from json to javascript

I have a javascript function that I am calling in a php page. I also added a json method to this function that pulls data from the database. Here's what it looks like:
$this->registerJsFile('/js/restaurant-reserve.js', ['depends' => [JqueryAsset::class]]);
$this->registerJs('restaurantReserve.init('. Json::encode($restaurant->workHours) .')');
As a result, at the end of the page, I get this data in the form:
restaurantReserve.init([{"id":86,"restaurant_id":1,"day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-22 10:56:15"}])
But I want to use this data in the javascript file itself, where the restaurantReserve function is located.
Because now I have to do it manually:
let json = [{"id":86,"restaurant_id":1,"day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-22 10:56:15"}]
How can I make json data come to javascript so that I can use it? To not write it by hand.
update
One of the answers came up to me, it was to add this line, which will globally declare this variable:
$this->registerJs('let json = '. Json::encode($restaurant->workHours) .';');
But it turns out that this variable is declared after the execution of the script of this restaurant-reserve.js file where this variable is used, and I don’t understand a little how to make it higher.
Here is my final code in php file:
$this->registerJs('let json = '. Json::encode($restaurant->workHours) .';');
$this->registerJsFile('/js/restaurant-reserve.js', ['depends' => [JqueryAsset::class]]);
$this->registerJs('restaurantReserve.init()');
And what I get as a result on the page, first comes the file, then this variable:
<script src="/js/restaurant-detail.js"></script>
<script src="/js/share.js"></script>
<script>jQuery(function ($) {
let json = [{"id"...}]
</script>
What can be done??
The second argument in registerJs is related to this issue.
That is, The second argument determines at which position the script should be inserted into the page. Possible values are:
View::POS_HEAD for head section.
View::POS_BEGIN for right after opening <body>.
View::POS_END for right before closing </body>.
View::POS_READY for executing code on the document ready event. This will automatically register jQuery and wrap the code into the appropriate jQuery code. This is the default position.
View::POS_LOAD for executing code on the document load event. Same as the above, this will also register jQuery automatically.
The first argument is the actual JS code we want to insert into the
page. It will be wrapped into a tag. The second argument
determines at which position the script should be inserted into the
page.
For scriptFiles you can also specify the place and time to load it. According to the dependencies and ....
It is better to refer to this link.
You may add following line in the code
$this->registerJs('let json = '. Json::encode($restaurant->workHours) .';');
Updating the answer after reading your comments and further queries.
You may pass second one more parameters to registerJs function.
View::POS_READY or View::POS_BEGIN
Like :
$this->registerJs('let json = '. Json::encode($restaurant->workHours) .';', View::POS_READY);

How to pass value to another static page via javascript?

I am trying to pass value to another page and read the value in the another page. I use only JavaScript and jQuery. Not use others language as PHP. I don't want to be as like (http://www.example.com/?value=test). I am trying to use POST or GET method.
On first page:
$.post("second_page.html",{q:"test"});
window.location.replace("second_page.html");
On second page:
var location_query = window.location.search.substring(1);
var vars = location_query.split("&");
for (var i in vars) {
var param = vars[i].split("=");
params[param[0].toString()] = param[1];
}
If I pass value as like http://www.example.com/?q=test , the second page script is read the value, but I use this line: $.post("second.html",{q:"test"}); not read.
How to pass value from first page to another static page via JavaScript or jQuery or ajax?
See this post says:
POST data is data that is handled server side. And Javascript is on client side. So there is no way you can read a post data using JavaScript.
but you can use cookies to read and store values:
<script src="/path/to/jquery.cookie.js"></script>
you can get it from here
Try with reading the documentation and see if this works for you.
Without using GET or POST you can transfer the content using HTML5 Local Storage or
Web SQL
$.post and $.get send AJAX request and waiting response on current page, you cant send params for next window.location.replace by this.
Use url get-params window.location.replace("404.html?q=404"); and look this for get params on second page.

how to get http request without using XHR object in javascript

Is it possible to get information from URL without using the XmlHttpRequest .
I am trying to get document from my noSqlDatabase from URL
by the XHR object and It did not work . but If I type the URL in the browser I get the data.
If by 'get information' you mean load data from a 3rd party url without using XHR requests, the answer is yes, but with caveats.
One commonly used method to load json data cross-domain is called jsonp. Essentially, you define a function on your page:
var x = function(data){ //do something with data }
Then you create a script tag and append it to you page where the src attribute points to some other url that returns a js file like this:
x({ param: 'some data' });
The x function then executes on your page and has access to the 'param' data in the object. You can also pass a string or number using this method.
There is another method involving iframes and the window.name property of the iframe. This technique is a bit older but still works, but I won't go into a lot of detail about it here. You can read more about it here, http://skysanders.net/subtext/archive/2010/10/11/leveraging-window.name-transport-for-secure-and-efficient-cross-domain-communications.aspx, and other places.

How can one incorporate JSON data with the returned HTML on the first request to the home page?

My scenario is this - the user asks for the home page and then the javascript code of the page executes an ajax GET request to the same server to get some object.
The server keeps the home page as a jade template.
So, right now it takes two roundtrips to load the home page:
GET the home page
GET the JSON object
I am OK with it, but just out of curiosity - what are my options to incorporate the object requested later into the initial GET request of the home page?
I see one way is to have a hidden html element, which inner HTML would be the string representation of the object. A bit awkward, but pretty simple on the server side, given that the home page jade template is preprocessed anyway.
What are my other options?
Please, note that I am perfectly aware that sparing this one roundtrip does not really matter. I am just curious about the techniques.
Another option is to always return a JSON object, then the HTML for your home page would be the value of some property on this object. This would probably require some changes on your client-side logic, though.
One more option: instead of a hidden HTML input/textarea containing a JSON string, the home page code could contain a script block where an object literal is declared as a variable. Something like this:
<script>
var myObj = ... // Your JSON string here.
// myObj will be an object literal, and you won't need
// to parse the JSON.
</script>
The initial GET request will retrieve just that document. You can have additional documents loaded defined as scripts at the bottom of your page, so you don't need to do a XHR, for the initial load.
For instance:
GET /index.html
//At the bottom you have a <script src="/somedata.js"></script>
GET /somedata.js
//here you define you var myObj = {}.... as suggested by bfavertto
Depending on which server side technology are you using, this could be for instance in MVC3
public partial class SomeDataController : BaseController
{
public virtual ContentResult SomeData()
{
var someObject = //GET the JSON
return Content("var myObj = " + someObject, "application/javascript");
}
}
You can embed the Json data inside a hidden tag in your HTML. At runtime, your javascript reads the data from this hidden tag instead of making a Json call (or make the call if this data is not available).
<!--the contents of this div will be filled at server side with a Json string-->
<div id="my-json-data" style="display:hidden">[...json data...]</div>
on document ready:
var jsonStr = document.getElementById( "my-json-data" ).innerHTML;

I replace HTML using javascript, but that contains a form, want to keep value of that form

I have a page that I have a page I pull from the server every x seconds using some ajax, and then I replace some HTML on the site with the new HTML pulled from the server. The problem has always been that there is a form in that HTML. I want to know is there a way to preserve the value of the form (that the user has entered) when replacing the html in javascript.
Use two callback functions (you should use $.ajax), in the callback before sending (beforeSend(x){ /your code here/; }) you save the parameters (to an array or hashtable): saved = $(element).val(); then in the second callback (use success(x){}) you write them back in. using $(element).val(saved);
var save = document.getElementById('userForm').value;
//replace HTML
document.getElementById('userForm').value = save;
Two ways,
Send and then replace the value in the HTML on the server
Using JavaScript, save it in a session: http://www.webreference.com/authoring/languages/html/HTML5-Client-Side/
I'd say the best solution would be to combine the two and save a session on the server, then load it each time you load the HTML.
-Sunjay03

Categories

Resources