Passing Variables to External Javascript - javascript

I have a view dynamic variables that I would like to pass to an external javascript.
in the HTML I am setting a few hidden input fields, as such:
<input type=hidden id="varID" value="sourceID">
and then calling them in my external Javascript file as such:
varID = document.getElementById("varID").value;
When I check to see if there is anything in there, I always get an undefined. In my HTML, I am setting the hidden input field before I even al to load the external javascript file.
Any ideas of what I'm missing?

Try this in your external JavaScript.
$(document).ready(function() {
var varID = document.getElementById("varID").value;
});

Try this:
window.onload = function () {
var varID = document.getElementById("varID").value;
}
Basically, the JavaScript code will only run once the page has loaded.

Related

Need to render variable from route to use in client-side javascript

I am currently able to use variables in the view that I render from the route but only in the HTML markup. How can I use these same variables in the client-side javascript?
I have this code:
<script>
var socket = io();
if ({{highestBidder}} === {{sessionID}}) {
socket.on('outbid', function () {
console.log('You have been outbid');
});
}
</script>
However, the variables are not being passed in correctly because I'm just getting an undefined.
As far as I know you can't ! Since most of the data is compiled in the server and rendered as HTML page. But there is work around for this :
Create AJAX call. Get whatever data you like with it.
Store the variables as hidden field and grab then using JS or jQuery [I don't suggest doing this.]

Changing Javascript within an HTML document to an external Javascript file

This Javascript Function..
function ClearTotals() {
document.getElementById("total1").value = "";
document.getElementById("total2").value = "";
}
sets resets the values in two form fields. However when I move this function, unchanged, to an external Javascript and reference it in the HTML page as below:
<script src="http://xxxxxxx.org/pkjs/js1.js/"></script>
it doesn't work.
Do I need to pass some reference to the document which is used in the function, or is there some other reason why this doesn't work. Thanks
The problem is js1.js - as the error message made clear ! For some reason only the first function was being read even though I can see no problems with the structure of the file. If I delete all the other functions, and test the function by typing the url in the browser, I see the javascript code for ClearTotals().
And when I submit the HTML form, the field values clear as they should. That's really good - there are no issues with putting internal js code into an external file. Thanks again to everyone for their input and apologies that the problem seems down to me !

obtain a js variable from an ajaxed page

My question is this, if I have a page say index.HTML that has some script in, something simple like...
<script type="text/JavaScript">
$(document).ready(function() {
Var buttonBox = {};
})
</script>
Obviously there would need to be more, I'm trying to make this simple.
Then I use ajax to retrieve some data from the db and fill in the contents of a div, but in my return page I have another script tag, something like...
<script type="text/JavaScript">
$(function() {
buttonBox.start = "some variable or string";
})
</script>
Along with the HTML content. Why is buttonBox.start not available in the main index.HTML page? Is there a way to make it available? Is formatting the output of my server page as a huge json object then parsing through it to set every needed variable along with the HTML content the best/only way to achieve this?
Thank you for the help, if you need more info I'll be happy to provide it, I was just minifying this for sake of ease.
you could add the buttonBox to the window and make it global:
$(document).ready(function() {
window.buttonBox = {};
});
$(function() {
window.buttonBox.start = "some variable or string";
});
for each function in each tag, if the function is not global, it can not be reused. to make a function become global, you should use window. Also, you can put this function into an external file and load with

How do I define a javascript variable as a div's id?

I am trying to define a var equal to the id of a div in the body. My non-functional idea was this:
var userid = $('.all').attr('id');
Since I need the variable to be defined as the id as soon as the page loads, I am not using an event and cannot use a technique like:
$('.all').click(){
var alldivIDvalue = $(this).attr('id');
}
Not sure if it makes a difference, but the id will equal a php output of sessions profile/username.
Propably you should declare somewhere in the top of your page (even in head) var userid and then after document.load append value to this variable.
var userid = []; //In html head
Then inside your jquery load:
$(document).ready(function () {
userid = $('.all').attr('id');
});
Place where you put load doesnt matter and doesnt affect on other html bacause this event is triggered when html document is loaded.
Edit
Thanks for comment.
If the id is known to PHP at the time the page's HTML is built, then you can write it directly into javascript like this:
<script>
var userid = '<?php echo $userID; ?>';
</script>
When available, this approach is more straightforward than writing a value into the HTML server-side (and thence the DOM) then reading it into javascript client-side.
Of course, there's nothing to stop you writing the same value into the HTML/DOM for some other purpose.

Get Javascript document.write Data into variable and show it

I have a remote Javascript which allow us to output data using a function, which returns the data by document.write(thedata).
See http://www.websnapr.com/implementations/. Here :
wsr_snapshot('http://URL', 'websnapr API Key', 'Size');
Function has document.writed the data at http://www.websnapr.com/js/websnapr.js. See source of this JS File.
Now I would like to store this Data(whatever is writed) into a variable and then assign it to some Div innerHTML.
I tried everything but it is just changing the page where I am implementing it. I do not want to change the page. It should not open new screen and write it. It should do it on same page and hence I want to store the document.write data by the function into a variable and use it in innerHTML of any DIV.
You could rewrite document.write prior to including the script and change it back to the original afterwards:
<script>
var oldwrite = document.write;
var text = '';
document.write = function(t) { text = t; }
</script>
<script src="jsfile"></script>
<script>
document.write = oldwrite;
//text now contains your text
</script>
Why not just copy the javascript file to your web server, and modify it to store the data instead of writing it?

Categories