I have this website with a list of names of objects. An object can be a chair, a table, a door etc. The object itself is in another div on the page and I need it rotated when a button is clicked on from the list.
Every object on the list has a button attached to it, which rotates that specific object.
However, my problem is that no matter what button you click on, it rotates the last item on the list, in my example the door. So clicking rotate on the chair, will result in rotating the door and always the door.
I have quite a lot code but I basically need someway for the button to recognize what button was clicked on. So if I click on the button that is attached to the chair, it has to find the src for that chair, and change that.
I have added a lot comments in the code which explains somewhere the same as I just did, I hope that makes it easier to understand the code and my problem.
tl;dr:
page.php:
//This query selects the rotation and src for the specific object
$stmt->prepare('SELECT z, rotation, src, name FROM house_room1 INNER JOIN objects ON house_room1.object_id=objects.object_id WHERE house_room1.ref_id = ?');
$stmt->bind_param('i', $i);
if ($stmt->execute()) {
$stmt->bind_result($z, $rotation, $src, $name);
while($stmt->fetch()) {
$results = 1;
$itemArray['number'] = $item_number; //Number of the object/item, (1,2,3)
$itemArray['name'] = $name; //Name of the object (Oak chair)
$itemArray['ref_id'] = $z; //Position of the element on the z axis (z-index)
$itemArray['rotation'] = $rotation; //Rotation of the object, can be (0,1,2,3)
$itemArray['src'] = $src; //Src of the object image (image.png)
array_push($finalArray, $itemArray);
}
}
ajax.php
var img_src = "<?php echo $arr['src']; ?>";
This ajax.php code always outputs the last src in the array. I need it to display the specific src for the object which corresponds to the button that is attached to it.
I have much time and therefore I wanna read all your code:
page.php:
// Number of the objects
$item_number = 0;
//Number of rows, this is just set to 12 atm
$rowsize = 12;
$itemArray = array();
$finalArray = array();
$results = 0;
//White the $rowsize is less than $i, get a new object from the query
for ($i = 0; $i < $rowsize; $i++) {
$stmt = $mysqli->stmt_init();
//This query selects the rotation and src for the specific object
$stmt->prepare('SELECT z, rotation, src, name FROM house_room1 INNER JOIN objects ON house_room1.object_id=objects.object_id WHERE house_room1.ref_id = ?');
$stmt->bind_param('i', $i);
if ($stmt->execute()) {
$stmt->bind_result($z, $rotation, $src, $name);
while($stmt->fetch()) {
$results = 1;
$itemArray['number'] = $item_number; //Number of the object/item, (1,2,3)
$itemArray['name'] = $name; //Name of the object (Oak chair)
$itemArray['ref_id'] = $z; //Position of the element on the z axis (z-index)
$itemArray['rotation'] = $rotation; //Rotation of the object, can be (0,1,2,3)
$itemArray['src'] = $src; //Src of the object image (image.png)
array_push($finalArray, $itemArray);
}
}
else {
echo 'Something went terribly wrong' . $mysqli->error;
}
$stmt->close();
$item_number++; //Next object/item!
}
if($results == 1){
aasort($finalArray,"ref_id");
//Inserting all 12 objects from the query in a list which has a button corresponding to each object
foreach($finalArray as $arr){
echo '<li id="item-' . $arr['number'] . '" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' . $arr['name'] . '
<img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg" onclick="rotateObject(this)">';
}
}
//create a function for sorting
function aasort (&$array, $key) {
$sorter=array();
$ret=array();
reset($array);
foreach ($array as $ii => $va) {
$sorter[$ii]=$va[$key];
}
asort($sorter);
foreach ($sorter as $ii => $va) {
$ret[$ii]=$array[$ii];
}
$array=$ret;
}
ajax.php:
<script type="text/JavaScript">
function rotateObject(e)
{
//e is handler which contains info about the item clicked. From that we can obtain the image id.
//since the id are of the form img_123(some number), we need to extract only the number.
var img_id = e.id.split("_")[1];
//var img_src = "<?php echo $arr['number'][0]['src'];?>"; //Tried this
//This variable (img_src) is currently the same no matter what.
//It's equal to the last src element in the array.
//This img_src has to know what button was clicked on and change the src that corresponds
//to that specific object. Probably by regonizing it's item_number? But I don't know how... Hmm
var img_src = "<?php echo $arr['src']; ?>";
var img_rotate = <?php echo (($arr['rotation'] + 1) % 4); ?>;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//Changing the current src from whatever it is, to the src that corresponds to the button clicked on.
var getEle = document.getElementsByClassName('item' + img_id)[0];
var imagePath = img_src + ".png";
getEle.src = imagePath + xmlhttp.responseText;
}
}
//Don't think about this; It does something else that works fine
xmlhttp.open("POST","database/update_settings_rotate.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("item_id="+encodeURIComponent(img_id));
}
</script>
Thank you very much for looking at my code, I have been looking for a solution for 2 weeks now and it seems impossible to me. However it seems pretty simple if I could just call the src for a specific place in the array. Any help and advice are appreciated a lot.
