Show Square and Select

[treeleaf20]

All,

I have the following code:

function createSquare(event) {
var x = parseInt(event.clientX);
var y = parseInt(event.clientY);

var left = x - 50;
var top = y - 50;

var d = document;
var div = event.target.parentNode.lastChild;
//alert(div.nodeType)
if (div.nodeType != 1)
	div = d.createElement('div');
div.style.width = "100px";
div.style.height = "100px";
div.style.position = "absolute";
div.style.left = left + "px";
div.style.top = top + "px";
div.style.zIndex = 5;
div.style.border = "10pt solid black";

var leftbox = x - 80;
alert(x);
alert(leftbox);
divselect = d.createElement('select');
divselect.style.position = "absolute";
divselect.style.top = top + "px";
divselect.style.left = leftbox + "px";

var sel = d.getElementById('tagged_person');
sel.style.display = 'block' //or block if you have a hidden div
var tagged_user = d.tag.tagged_person;
tagged_user = tagged_user.value;
var picture_id = d.tag.picture_id;
picture_id = picture_id.value;
divselect.appendChild(sel);

event.target.parentNode.appendChild(div);
event.target.parentNode.appendChild(divselect);

 

This shows me a square and a select but the select isn't populated with anything. i do have a form later on down the page. The form code is (which I try and pull in the info from the select in the form in the select in the createSquare:

<form action="" name="tag" method="post">
<input type="hidden" name="picture_id" value="4">
<select name="tagged_person" id="tagged_person">
<?php
$qryfav = "Select * from favorites where user_name='creep'";
$resultfav = mysql_query($qryfav);
while($resultsetfav = mysql_fetch_array($resultfav)){
echo "<option value=\"$resultsetfav[favorite_user]\">$resultsetfav[favorite_user]</option>";
}
?>
</select>
</form>

 

Thanks for the help in advance.

 

[treeleaf20]

If there is any question, I'm trying to create a square and a select box when I click on an image. I want the select to be filled in with the select in the form and then have both the square and select disappear and reappear when the image is clicked again.

[seanlim]

Your select isn't populated because you didn't populate it. Try using d.tag.tagged_person.innerHTML to retrieve the options, not sure if it will work though. If it doesn't work, loop through all the options in the select and create the options individually through the DOM.

 

I don't know what you are trying to achieve in the following line, but i don't think this will work:

tagged_user = tagged_user.value;

 

it should be

tagged_user = tagged_user.options[tagged_user.selectedIndex].value;

[treeleaf20]

ok, so I changed the code for the select to this:

var leftbox = x - 150;
divselect = d.createElement('select');
divselect.style.position = "absolute";
divselect.style.top = top + "px";
divselect.style.left = leftbox + "px";

var sel = d.getElementById('tagged_person');
sel.style.display = 'block' //or block if you have a hidden div
var tagged_user = d.tag.tagged_person.innerHTML;
var picture_id = d.tag.picture_id;
picture_id = picture_id.value;
divselect.appendChild(sel);

event.target.parentNode.appendChild(sel);

 

When I click the first time only the square shows up. If I click again another square shows up with the text box inside of it. How can I get the select to show up the first time. Anyway to position it so it always shows up directly to the left of the square?

 

Thanks for the continued help.

 

As a reference, the complete code is:

function createSquare(event) {
var x = parseInt(event.clientX);
var y = parseInt(event.clientY);

var left = x - 50;
var top = y - 50;

var d = document;
var div = event.target.parentNode.lastChild;
//alert(div.nodeType)
if (div.nodeType != 1)
	div = d.createElement('div');
div.style.width = "100px";
div.style.height = "100px";
div.style.position = "absolute";
div.style.left = left + "px";
div.style.top = top + "px";
div.style.zIndex = 5;
div.style.border = "10pt solid black";

var leftbox = x - 150;
divselect = d.createElement('select');
divselect.style.position = "absolute";
divselect.style.top = top + "px";
divselect.style.left = leftbox + "px";

var sel = d.getElementById('tagged_person');
sel.style.display = 'block' //or block if you have a hidden div
var tagged_user = d.tag.tagged_person.innerHTML;
var picture_id = d.tag.picture_id;
picture_id = picture_id.value;
divselect.appendChild(sel);

event.target.parentNode.appendChild(div);
event.target.parentNode.appendChild(sel);	
}

[seanlim]

Why do you do:

event.target.parentNode.appendChild(sel);

 

Shouldn't it be appendChild(divselect)? Try fixing that first...

[treeleaf20]

I tried to fix that. The select shows up first and then when I click it it shows another select inside of that. When I try and see what's in that select it shows the rows that should be in there but there isn't any data.

[seanlim]

Ok, i'm quite lost. I don't really know what you are trying to do. Can you provide your HTML code?

 

Just a wild guess, you need to set the innerHTML of your select too.

divselect.innerHTML = d.tag.tagged_person.innerHTML;

[treeleaf20]

Sure, here is the complete code:

<?php
include ("config.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function createSquare(event) {
var x = parseInt(event.clientX);
var y = parseInt(event.clientY);

var left = x - 50;
var top = y - 50;

var d = document;
var div = event.target.parentNode.lastChild;
//alert(div.nodeType)
if (div.nodeType != 1)
	div = d.createElement('div');
div.style.width = "100px";
div.style.height = "100px";
div.style.position = "absolute";
div.style.left = left + "px";
div.style.top = top + "px";
div.style.zIndex = 5;
div.style.border = "10pt solid black";

var leftbox = x - 150;
divselect = d.createElement('select');
divselect.style.position = "absolute";
divselect.style.top = top + "px";
divselect.style.left = leftbox + "px";

var sel = d.getElementById('tagged_person');
sel.style.display = 'block' //or block if you have a hidden div
var tagged_user = d.tag.tagged_person.innerHTML;
var picture_id = d.tag.picture_id;
picture_id = picture_id.value;
divselect.appendChild(sel);

event.target.parentNode.appendChild(div);
event.target.parentNode.appendChild(divselect);
}
</script>
</head>

<body>
<div style="position: relative;">
<img src="yankess_rascal.jpg" onclick="createSquare(event);" usemap="#Map" />
<map name="Map" id="Map" >
<?php
$getcoords = "Select * from tags where picture_id='4'";
$resultcoords = mysql_query($getcoords);
while($resultsetcoords = mysql_fetch_array($resultcoords)){
echo "<area shape=\"rect\" coords=\"$resultsetcoords[height1],$resultsetcoords[width1],$resultsetcoords[height2],$resultsetcoords[width2]\" class=\"map\" href=\"$resultsetcoords[tag_id]\" id=\"area$resultsetcoords[tag_id]\"/>";
echo "<span id=\"whoisit\" align=\"center\">$resultsetcoords[tagged_user]</span>";
}
?>
</map>
<form action="" name="tag" method="post">
<input type="hidden" name="picture_id" value="4">
<select name="tagged_person" id="tagged_person">
<?php
$qryfav = "Select * from favorites where user_name='user'";
$resultfav = mysql_query($qryfav);
while($resultsetfav = mysql_fetch_array($resultfav)){
echo "<option value=\"$resultsetfav[favorite_user]\">$resultsetfav[favorite_user]</option>";
}
?>
</select>
</form>
</div>
</body>
</html>

 

Basically I'm trying to have a photo and when it's clicked a square shows up where you clicked and a select box. I'd ideally like to submit the information obtained in the square and select box that gets created but I'm trying to learn how to walk before I run. I get the information that I want populated in the select that is created when the image is clicked with PHP. Like I said I'll most likely have to hide this later. Does that help?

 

Thanks.

[seanlim]

try replacing your script with this:

 

function createSquare(event) {
var x = parseInt(event.clientX);
var y = parseInt(event.clientY);

var left = x - 50;
var top = y - 50;

var d = document;
var div = event.target.parentNode.lastChild;
div = d.createElement('div');
div.style.width = "100px";
div.style.height = "100px";
div.style.position = "absolute";
div.style.left = left + "px";
div.style.top = top + "px";
div.style.zIndex = 5;
div.style.border = "10pt solid black";

var leftbox = x - 150;
divselect = d.createElement('select');
divselect.style.position = "absolute";
divselect.style.top = top + "px";
divselect.style.left = leftbox + "px";
divselect.innerHTML = d.tag.tagged_person.innerHTML;
alert(divselect.innerHTML);
alert(div.innerHTML);

var picture_id = d.tag.picture_id;
picture_id = picture_id.value;


event.target.parentNode.appendChild(div);
event.target.parentNode.appendChild(divselect);
}

[treeleaf20]

Now, that is a beautiful thing. That worked great. Two more questions:

 

1) When i click on the picture again, it creates a whole new square and select. How can I make the other one disappear?

2) Is there a way to add a submit button to the whole function? I want to submit the coordinates or the box etc.

 

Really appreciate the help. That worked great.

[seanlim]

1) Store a global reference to the DIV and SELECT you create. Then, use the removeChild function to remove both of them before the entire createSquare function is run.

 

2) Of course there is a way. But you will have to put your submit button and the SELECT box in a <FORM> element created dynamically in the createSquare function. You should have planned for that when you designed the function

 

However, I would suggest using AJAX and the onChange event handler on the SELECT box, which will remove the need for a submit button.

[treeleaf20]

For the AJAX part, I can do this and I have a function to be able to do it. I like the idea of the onChange event. Would the onChange event go to the form that gets called by the innerHTML or is it actually in the createSquare function? If it's in the form that is called by the innerHTML how do I get the square variables so I can submit the coordinates?

[seanlim]

What the script does now is to *copy* the contents of your SELECT below and "pasting" it into the SELECT that is floated next to the square. The event handler will thus have to be attached to the SELECT that is floating (i.e. the one created in the createSquare function).

 

Just off the top of my head, it would look something like:

 

// within the createSquare function
divselect.onchange = submitForm;

...

function submitForm(){
var user = this.options[this.selectedIndex].value;
// using the global reference to the DIV here, obtain the style.top and style.left value
// submit the form via AJAX
}

[treeleaf20]

I tried to do this:

function submitForm(){
var user = this.options[this.selectedIndex].value;
alert(user);
var xdiv = tagSelect.x.value;
alert(xdiv);
// using the global reference to the DIV here, obtain the style.top and style.left value
// submit the form via AJAX
}

 

I'm guessing this is what you meant by naming the variables globally?:

div.id = 'tagSquare';
divselect.id = 'tagSelect'

 

It alerts me of the user value but not the x value.

 

[seanlim]

not really what i meant. but you could use IDs too. however, u can't simply use tagSelect.x.value like you did. instead, use

 

var xdiv = document.getElementById("tagSelect").x.value;

 

(i'm not sure about the .x.value part. don't recall having seen it done tt way before)