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

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.

Related

Unable to figure out why input parameter is becoming null

This is the script I have in my gsp page:
<script>
function getItemsLength(){
var id = document.getElementsByName("franchiseID")[0].value();
alert(id); //This displays the intended id
var itemLength = ${storeCommand.numOfBranches(id)}; //The id becomes null when sent here
}
</script>
This function is called onclick for a button, I cannot access the id through the store command itself, since the page hasn't been saved yet - it appears as null. Essentially I take in an ID the user gives me for the franchise, and I query to see how many stores have that franchiseID to display it on the screen.
I am new to grails and web development, so let me know if there is anything I am doing wrong!
The fundamental issue you have here is you are trying to mix client-side programming and server-side programming. ${storeCommand.numBranches(id)} is processed when the HTML is rendered and in that case id is not in scope.

can a PHP file injected by JQuery load() into a DIV find out anything about this DIV?

Suppose I go
$( '#' + subform_id ) .load( "subform.php" );
where '#' + subform_id is the ID of a DIV
... is there any way the PHP in subform.php can find out, within its PHP code, the identity of the DIV? (e.g. using its own JS code <script> section)
Or otherwise refer to it by some mechanism without knowing its ID? (e.g. to use JQ's append())
Obviously I could pass the subform_id as a param of the data object (2nd param of load()). But I'm just wondering...
later
followed up on what I thought Victor2748 was suggesting... but in fact it was the ID of a <SCRIPT> block in the injected file which I used to gain access to the existing JS DOM.
Victor2748: if you read this, I'm not sure how you could know the "id of the parent container of your subform.php page" without somehow passing this id as a param in the load() function's data object...
even later
Every comment in this thread says something intelligent! In fact, concerning the question of specifying that this is a PHP file, I'm still trying to get my head around something: obviously it is possible to access the DOM when JS runs in the client. But if your PHP code needs to know the name of the DIV into which it's being loaded I believe you do indeed have to pass this through _POST or _GET. I think there are many reasons why injected PHP code might need this sort of info, e.g. so it can contain code which at some point injects more PHP into the same DIV...
Although... clearly that injection code will inevitably use a JS/JQ script, so maybe that would be the appropriate time to find out what you need about where you are in the DOM.
In JavaScript, you can use this.parentNode to get the parent container, and use this.parentNode.id to get the parent div's id.
Here is an example how your loaded block can get itself as an object/node:
var loadedBlock = document.getElementById("nameOfYourDownloadedParentContainer")
Then you can use loadedBlock.parentNode to get its parent element, then you can get any parameter from it, to identify the element/div.
Update:
First you need to get the node of the current executing <script> tag:
var arrScripts = document.getElementsByTagName('script');
var currentScriptTag = arrScripts[arrScripts.length - 1];
Then, to get the parent of the script tag, use: currentScriptTag.parentNode
(I did not test it yet, please tell me if it helped)
I think so... if you have a script tag in subform.php and the file has the following HTML: Submit form, you should be able to:
var subformId = $('#mydiv').parent().id;
It would work because the script tag executes when the PHP file is included. Put the script tag at the end of subform.php to be sure.

Get ajax value from JavaScript function

I'm not an JS developer, so forgive me if this is a stupid question.
I have this web application, that uses ajax to keep the data update on the screen, but I'm not able to use the ajax value in my JS function, the code generated by my application is:
<span id="c0"></span>
In the web page I just see the numeric value, e.g. 5 and it's updated every second as expected, so I tried to use the same in my JS function:
<script type="text/javascript">
function getPoint()
{
console.log ('<span id="c0"></span>');
return 0;
}
</script>
But in the Chrome's log I just see <span id="c0"></span> instead of a numeric value.
Try the following:
<script type="text/javascript">
function getPoint()
{
var span_element = document.getElementById("c0");
var content = span_element.innerHTML;
console.log(content);
return content;
}
</script>
Explanation:
First you need to access the DOM element of javascript. You identified the element with the id: "c0". To access the element you need to use the function: document.getElementById("someID");
With the element you can do a lot of things. In this case you want to access whatever is inside the tag , so what you want is its inner HTML.
If you are using JQuery, you can also get its content like this:
var span_element = $("#c0");
var content = span_element.text();
Console.log simply logs whatever string you send it as a parameter. So what you are seeing is the expected behavior.
Assuming you are using jQuery, and the ajax returned value is being displayed in the span (id = "c0"), this console.log statement should work:
console.log($("#c0").text());
$("#c0") returns the jQuery object using the id selector (#).

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

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