Develop Reference

Passing PHP variable embedded in SVG to Javascript function

I am writing a web application which pulls data from a MYSQL database using php. No problem with that side. The selected data is used to create ultimately an SVG image showing sports exercises for coaching. Works well so far.
Now I want to be able to use an SVG "onMouseOver" mouse call from the embedded svg code to a Javascript function to display textual information regarding the coaching points for the exercise. The svg code is embedded in a php sprintf function.
$ID="E".$yourArray[$y-1]['ExerciseID'];
echo "Exercise ID is....". $ID."<br>";
$tablesvg=$tablesvg .sprintf('<use xlink:href="#table" id="%3$s" onMouseOver="showID()" fill="beige" x="%1$d" y="%2$d"/>',$tb1xcoord, $tbycoordoffset,$ID);
Problem is that no data from the php variable displays within the javascript function shown below. Function is stable as the Alert text displays.
<script type="text/JavaScript">
function showID()
{
var jsvar = '<?php echo $ID;?>';
var test=document.getElementById(jsvar).getAttributeNS(null,"fill");
alert("Exercise ID is:" + test);
}
</script>
As long as I don't try to pass the PHP variable it does work - the DOM part in the JS function works if I hard code the value (E1).

Pass the element as an argument to the function, rather than using the ID from the variable and then calling getElementById
$ID="E".$yourArray[$y-1]['ExerciseID'];
echo "Exercise ID is....". $ID."<br>";
$tablesvg=$tablesvg .sprintf('<use xlink:href="#table" id="%3$s" onMouseOver="showID(this)" fill="beige" x="%1$d" y="%2$d"/>',$tb1xcoord, $tbycoordoffset,$ID);
Then change the JS to:
<script type="text/JavaScript">
function showID(elt)
{
var test=elt.id;
alert("Exercise ID is:" + test);
}
</script>

javascript set variable from .text method

I'm new in javascript development and I want to ask how to set variable from text method.
Example: in this code have a text method
$('.phone').text(theRestaurant.phone);
$('.location').text(theRestaurant.location);
$('.info').text(theRestaurant.info);
in the Html file, when I create any class from these will print the value from JSON file.
Example :
<div class='phone'></div>
Output: (000)000-9999
source code:
<div class='phone'>(000)000-9999</div>
I try to set this in variable but it doesn't work.
My try:
var phone = theRestaurant.phone
I want to set it in variable because I need to put it inside href value like so:
<script>
var phone = 'tel:' + phone
document.getElementById("phone").href = phone;
</script>
I hope everything clear. and If have an other solution please tell about it.
Thanks

Have you wrapped your jQuery code in a document.ready() wrapper?
If not, then the javascript might run before the page has had time to create the elements in the DOM, and nothing will work.
<script>
$(document).ready(function(){
//all javascript/jQuery code goes in here
});
</script>
Also, see my comment above about mixing up "ByClassName" and "ByID"

Answer came from #itsgoingdown
this code in main javascript file:
var phone=document.getElementById('phone').innerHTML; document.getElementsByClassName("phone")[0].href = phone;

Link for printing image

Actually I need a bit of Java Script, but I am definitely not good at it. So I would really need your help.
My problem is, that I would need a script, which saves me the url from an id to a variable and outputs the variable something like this: LINK.
Note, that the ID, where I would like to get the link from, is somewhere in the page and the script likely at the bottom.
EXAMPLE OF WHAT I MEAN:
<div id="http://www.example.com" name="url">
<p>Some content</p>
</div>
.
.
.
.
LINK
.
.
.
<script>
variable = getIdWhereNameIsURL;
....
</script>
Would really appreciate your help!

First of all, id="http://www.example.com" may seems odd, but it should be OK per the HTML 5 specs. It is also unusual to have a NAME attribute for a DIV element.
Second, it will be easier to specify another id for your LINK, perhaps something like <a id="link_id">LINK</a>.
Then, you can have the below in your script block
var theDIV = document.getElementsByTagName("div")[0];
// here assuming it is the first DIV, otherwise, loop through the elements
// document.getElementsByName("url")[0].id may not work
if (theDIV.name == "url") {
var theLink = document.getElementById("link_id");
theLink.href = theDIV.id;
}

How can I pick up a value from php to put it into input-element via javascript?

I am a pure beginner of Javascript. I got some advanced experience with php but until now I refused to work with JS.
So now I have a question. I wanted to make possible to pickup date-value from a php-generated calendar and put it into a form input field just below of the same page / script.
My idea was to create an onlick-event for each date data. So in my calendar I have this:
$date = date('Y-m-d',$daystamp);
$post = '<div class="cal_day">'.$day.'</div>';
What I thought to do with Javascript is the following:
function dateclick(var x)
{
document.getElementById("date_entry").innerHTML = var x;
}
And my html-input field where I like to have the choosen date-values:
<input type="text" id="date_entry" name="abs_date" size="15" max-length="15"/>
I am sure the solution is simple. At W3Schools I saw that the output of JS doesn't require a return all the time? Should I add it?
Thank you for any answer or help.
UPDATE:
So I tried what you mentionned as solution/s:
- I removed the "var" before the x.
- I have encapsed the $date.
It is still not working. When I look up the element with OPERA it tells me it is a event handler but source file missing. But I have included the functions.js and another function in the same file is working well.
I tried the same thing in the try-field on W3Schools and it worket there..
So I guess that there is something in my structure around it that isn't working.
The calendar source line is included above the form element. Is this a problem?
I don't know if I zapped something.
GOT IT
The problem was that I needet to put the value into an input element.
The following code works:
function dateclick(x)
{
document.getElementById('date_entry').value=x;
return false;
}
Thanks for all your help!

Your php should be:
$date = date('Y-m-d',$daystamp);
$post = '<div class="cal_day">'.$day.'</div>';
And you javascript should be:
function dateclick(x)
{
document.getElementById("date_entry").innerHTML = x;
return false; // This will force the browser not to load the url.
}

You don't have to go through all that trouble, this should work:
<script>
var phpDate = "<?php echo $date; ?>";
</script>

Javascript id question

I have a beginner question. I have a shoutbox, an Ajax shoutbox.
I made a form where i can update the users depending on them being a DJ or not.
If that option is selected then a small image appears after the user's name.
Is working but I can't make it work but my problem is, that if I set it on my profile, it adds the image to everybody's name.
Here is my code:
var radios = document.getElementById("radios");
if(radios.innerHTML == 'yes') {
radios = "<img src='http://www.site/pic/radios.gif'>";
}
My question is: How to insert the current user's id in this if statement?

In the code sample you've included, there appears to be an error.
With this line of code:
var radios = document.getElementById("radios");
you get the DOM object that has an id="radios". Then, you try to set that same variable to be a piece of HTML:
radios = "<img src='http://site/pic/radios.gif'>";
That won't accomplish anything other than setting a variable that you were previously using to store a DOM object to now be a string. That line of code does not modify the DOM in any way. Did you mean to write it this way?
radios.innerHTML = "<img src='http://site/pic/radios.gif'>";