Develop Reference

Check multiple buttons with same id with JavaScript

I'm trying to build a website where people can make a reservation, I'm using a database to collect the times and php to display it. It displays all times within 5 days, including the ones that aren't available. They are displayed as buttons, all sharing the same id. I got stuck at the last step, disabling the buttons with unavailable times.
Since the only difference between these buttons is their background color (grey for unavailable and green for available) I figured I'd use a javascript function in which it checks the background colors of the boxes in a condition and then the grey ones get disabled and the green ones give a form. However: it'll only check the color of the first button and all buttons give the same result as that one.
My page will always display 50 buttons, so I thought I could just use a while loop with an auto-decrement at the end, however I can't seem to find out how to check the next button, it will now only check the same button again and again. Here's a part of the php-code to show the buttons with the right color (I've take some irrelevant parts out):
while($row = $results->fetch_assoc()){
$color = "##8fd6a5";
if (!empty($row['unavailable'])){
$color = "##9b9393";
}
$time= new DateTime($row['time']);
if ($time->format('H') == '08'){
echo '<button id="myBtn" onload="disablebuttons()" class="buttonstyle"
style="background-color: '.$color.'">'.$time>format('m/d H:i').'</button>';
}
}
This works entirely, but since all buttons have id="myBtn" when disablebuttons() executes, it only looks at the first button, following this code:
function disablebuttons() {
var amountButton = 50;
while (amountButton > 0){
var buttondisable = document.getElementById("myBtn");
if (buttondisable.style.backgroundColor == "rgb(155, 147, 147)"){
document.getElementById("myBtn").disabled = true;
amountButton--;
}
}
}
I've tried to delete the variable at the end of the while loop and place the "var buttondisable = document.getElementById("myBtn");" inside the loop, however this did not work.

IDs need to be unique so you need to use different ids for each button. To group them, give then same class say available if they are available unavailable if its not available. Something like this:
while($row = $results->fetch_assoc())
{
$color = "##8fd6a5";
$class= 'available'
if (!empty($row['unavailable']))
{
$color = "##9b9393";
$class= 'unavailable'
}
$time= new DateTime($row['time']);
if ($time->format('H') == '08')
{
echo '<button id="myBtn" onload="disablebuttons()" class="buttonstyle '.$class.'" style="background-color: '.$color.'">'.$time>format('m/d H:i').'</button>';
}
}
Now on javascript you can target specific buttons only like this:
var buttondAvailable = document.getElementByClassName("available");
OR
var buttondUnavailable = document.getElementByClassName("unavailable");

The id attribute should be unique in the same document, so use common classes instead of id's for your buttons like :
if ($time->format('H') == '08'){
echo '<button onload="disablebuttons()" class="buttonstyle myBtn"
style="background-color: '.$color.'">'.$time>format('m/d H:i').'</button>';
}
Then in your JS code loop through all the buttons using getElementsByClassName() :
var buttons = document.getElementsByClassName('myBtn');
for(var i = 0; i < buttons.length; i++)
{
//Your logic here
var button = buttons[i];
if (button.style.backgroundColor == "rgb(155, 147, 147)")
{
button.disabled = true;
}
}
Hope this helps.

if you get the parent element and loop their childrens, you can check each element and his background and disable it.
$('#mydiv').children('button').each(function () {
// "this" is the current element in the loop
if($(this).css("background-color") == "rgb(155, 147, 147)"){
$(this).disabled = true;
}
});

jQuery hover multiple ID's from php generated DIV

I'm having some troubles with a jQuery script.
I get my div's generated with PHP based on data from SQL.
echo "<div class='order' id='a$i' runat='server' draggable='true' >";
On mouseover it shows a different div also generated from PHP and SQL.
echo "<div class='position' id='b$i2' runat='server' draggable='true'>";
Then i have a jQuery script that has the hover function for the second div.
Every div get's it's ID from php. Menu div's get a1, a2, a3.... and hover div's get b1, b2, b3....
$(function() {
var moveLeft = 20;
var moveDown = 10;
var r = 1;
$('div#a'+r).hover(function(e) {
$('div#b'+r).show();
}, function() {
$('div#b'+r).hide();
});
$('div#a'+r).mousemove(function(e) {
$("div#b"+r).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
});
The code works for the first div, or the div i specify with the r variable.
I'm having troubles with code working for all the ID's on the page. They get generated based on SQL data.
https://postimg.org/image/ooqnfkx3n/
Is there a way to do this using LOOP function? Or getting the ID from generated div's?
Thanks for all the help in advance.

Use starts with selector
$("div[id^='a']").hover(function(event) {
//Do your thing
}
Documentation: Attribute Starts With Selector [name^=”value”]

How about you add the hover event on class instead of div but add logic based on div.
$(".theclassofA").hover(function(event) {
var id = $(this).attr('id');
var temp_rel = //then get the integer 'r' from this id
var temp_id = "b"+temp_rel;
//use this temp_id to show/hide your elements
}

Retaining order of moving elements in a list

I've created a section of spans that when clicked on move into another html element and when clicked on while within the target element returns back to the section of spans.
My question is, how can I return the clicked span back to it's ORIGINAL position in the list of spans?
I can think of one way that might work and would involve using CSS child selectors, but that can become very complicated and I'm looking for a more intuitive way.
As it happens now, the span in question returns to the end of the list.
<div id="genres">
<?php
$query = 'SELECT * FROM genres ORDER BY genre DESC';
$genres = mysqli_query($db, $query);
while($row = mysqli_fetch_assoc($genres)){
echo "<span class='genre'>";
echo ucfirst($row['genre']);
echo "</span>";
The above simply outputs the data into seperate spans styled to be clickable elements that look similar to buttons.
When a span is clicked on it is moved into an empty div.
My Jquery:
$("span.genre").click(function(){
// remove the span and move it to the empty div
$(this).remove().appendTo('div#genres_select');
// remove span from the empty div and puts it back in the list
$('div#genres_select span.genre').click(function(){
$(this).remove().appendTo('div#genres');
});
What is interesting and that I like is that when a clicked span is moved out of the list, all the other elements conform to fill it's space.
Ideally, I'm looking for the exact reverse action of clicking on a span, as if you pushed the rewind button.
Thanks in advance

Add the position to the dom.
$pos = 0
while($row = mysqli_fetch_assoc($genres)){
echo "<span orgPos='".$pos."' class='genre'>";
echo ucfirst($row['genre']);
echo "</span>";
$pos++
}
The javascript looks for the lower neighbor
$('div#genres_select span.genre').click(function(){
var pos = $(this).attr("orgPos");
var neighbor = false;
$('#genres span.genre').each(function(){
if (!neighbor && ($( this ).attr("orgPos") < pos ))
neighbor = $( this );
})
$(this).remove();
sibling.after(this)
}
You will need to figure out what to do if it is the first element or only one element in the list.

Javascript Code to show div boxes not working in Firefox

I have this piece of Javascript Code that works great on Chrome and Internet Explorer but I can't get it to work in Firefox
<script src="jquery-1.10.2.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function aufklappen(id, arr) {
$('.3').attr("src", "images/leftarrow.png");
var style = $("div[id='" + id + "']").attr("style");
$('.2').hide();
if (style == "display: none;") {
var elem = document.getElementById(id);
elem.style.display = "block";
$("#" + arr).attr("src", "images/downarrow.png");
} else {
var elem = document.getElementById(id);
elem.style.display = "none";
$("#" + arr).attr("src", "images/leftarrow.png");
}
}
</script>
I have a code getting data out of a mysql database displaying some basic data.
What I am trying to do is to show a hidden div box, which contains more details, when I click on an image. In addition I want to change this picture to show an arrow that's pointing down.
If someone clicks on one of these images I first want to hide all divs so that there is only one hidden div box shown at a time.
Every image has class="3" and every hidden div box class="2". The ID's are created dynamically so I can show the div box I want.
I call the function with this code:
<a onclick='aufklappen("<? echo $flightnum;?>2", "<? echo $flightnum;?>arr")'><img class="3" id="<? echo $flightnum;?>arr" src="images/leftarrow.png" /></a>

I'd struggle to answer without a demo to work through. However, I can provide you with a couple of pointers and see what comes of it.
a. I can see that you've used three different techniques of selecting by Id. For consistency, choose one.
1. var style = $("div[id='" + id +"']").attr("style");
2. var elem = document.getElementById(id);
3. $("#" + arr).attr("src","images/downarrow.png");
b. Replace this
var style = $("div[id='" + id +"']").attr("style");
with
var style = $("div[id='" + id +"']").css("display");
then change this
if (style == "display: none;")
to
if (style === "none")
See how you get on.

Javascript Custom Alert Box with Image alignment

I Have created Custom Alert Box in Javascript . I Have added text with images. but It is not align proberly. It came some thing like this.
I am trying to add the correct mark and text with same line, how can I achieve this. can anyone please help me. I have added my Custom alert box Function below.
function createCustomAlert(txt, string_url,fd) {
// shortcut reference to the document object
d = document;
// if the modalContainer object already exists in the DOM, bail out.
if (d.getElementById("modalContainer")) return;
// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";
// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if (d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth) / 2 + "px";
// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
btn2 = alertObj.appendChild(d.createElement("img"));
btn2.id = "fd";
btn2.src = fd;
// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
// create an anchor element to use as the confirmation button.
//btn = alertObj.appendChild(d.createElement("a"));
//btn.id = "closeBtn";
//btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
//btn.href = "";
btn = alertObj.appendChild(d.createElement("img"));
btn.id = "closeBtn";
btn.src = 'new-go-next2.png';
btn.href="#ss";
//btn.height="30px";
//btn.width="30px";
//btn.href="#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function () { removeCustomAlert(); window.location = string_url; return false; }
}

well yes creating a table would be a great approach to solve your problems , btw u can also try some internal divs with proper position anf the element having correct float attribute

Rather creating div element create table with two Columns. First of which will contain 'Image' for OK and Second one will contain your 'Text'.
Check if this helps.