We Keep Coding

Adding javascript onclick event to php array?

I recently started coding and I'm trying different things such as PHP and JavaScript. I'm sorry if this question has an easy solution. I couldn't find it anyway.
Context
I'm working on a project for school where we need to make a playlist with album specifics in HTML table. The page looks like this:
Playlist page
Question
I have three javascript onclick events. One of them looks like this.
<a id="songcolor" onclick="document.getElementById('audioone').src='songs/californication.mp3';
player = document.getElementById('audioone');
player.play();
">Play song 1 -</a></td>
When you click the anchor tag (play song 1, play song 2, play song 3) in the page I'm building a audio element starts playing. This is working as of now. But in the assignment requirement I need to get the code above out of PHP array and into HTML table using a for loop. How do you go about this?
What I've tried?
I've tried a couple of things.
I tried to add the onclick event into my PHP array and tried to loop it out using for loop. This didn't work. This is a snippet of the array i'm talking about:
array(1, "Californication", "3:45", )
This is the for loop i use for putting it in a table:
for ($row = 4; $row <= 7; $row++)
{
echo "<tr>";
for ($col = 0; $col <= 3; $col++)
{
echo "<td>" . $multiArray[$row][$col] . "</td>";
}
echo "</tr>";
}
echo "</table>";
?>
I tried storing the onclick event into JavaScript variable and using that variable into PHP array. This didn't work.
Again I'm new to all of this so please help me understand.

You should simplify the readability of your code using array elements that are more obvious to you and others using associative arrays. In your case, an array of associative arrays:
<?php
$media_array = array(
array('elementId' => 'audioone',
'source' => 'songs/californication.mp3'
),
array('elementId' => "audiotwo",
'source' => 'songs/californication.mp3'
),
array('elementId' => "audiothree",
'source' => 'songs/californication.mp3'
)
);
?>
<table>
<?php
$index = 1;
foreach ($media_array as $mediaKey => $mediaObject) {
?>
<tr>
<td>
<a id="songcolor<?php echo $index; ?>" onclick="document.getElementById('<?php echo $mediaObject['elementId']; ?>').src='<?php echo $mediaObject['source']; ?>'; player = document.getElementById('<?php echo $mediaObject['elementId']; ?>'); player.play();">Play song <?php echo $index; ?></a>
</td>
</tr>
<?php
$index++;
}
?>
</table>

Open a new function with PHP

I have a page in PHP and I would open a function with a click.
Function shows me a query result, but when I write this code it doesn't work
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Frequenza <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<?php
$query_frequenza="SELECT DISTINCT FREQUENZA FROM Dettagli_macchina WHERE macchine_id='$macchine' and Email='$_SESSION[login_user]'";
$result=mysqli_query($conne,$query_frequenza);
while($row=mysqli_fetch_array($result)){
$frequenza=$row['FREQUENZA'];
echo"<li><a href='#?frequenza=$frequenza' onclick='showfiltro2()'>$frequenza</a></li>";
}
?>
</ul>
</div>
<script type = "text/javascript">
function showfiltro2() {
document.getElementById("filtro2").style.display = "block";
document.getElementById("filtro1").style.display = "none";
}
</script>
<div id = "filtro2" style="display:none">
<?php
$filtro2=$_GET['frequenza'];
$query="SELECT DISTINCT * FROM Dettagli_macchina WHERE macchine_id='$macchine' and Email='$_SESSION[login_user]' and FREQUENZA='$filtro2' ";
$result=mysqli_query($conne,$query);
echo 'Found '. mysqli_num_rows($result) .'results';
echo "<table><tr>";
while ($row = mysqli_fetch_array($result)) {
echo "<tr><td>";
echo $row['COMPONENTE'];
echo "</td>";
echo "<td>";
echo $row['DETTAGLIO ATTIVITA'];
echo "</td>";
echo "<td>";
echo $row['FREQUENZA'];
echo "</td>";
echo "<td>";
echo $row['DATA-PREVISTA'];
echo "</td>";
echo "</tr>";
}
echo"</tr></table>";
?>
</div>

Your question stems from a misunderstanding of how PHP and HTML work, and how data flows between the two.
First off it's important to remember that PHP and HTML are two completely separate parts, which do not interact with each other outside of the "request->reply" chain.
This means that all of the PHP code gets executed on the server, before the client gets the output of this processing. The server (PHP) doesn't care about what kind of output it is, nor does it understand how to parse it; For all PHP knows, it's all simple text.
After the PHP code has been completely parsed, the client receives the resulting text. Then it notices that it can understand this text as HTML, and parses it as a web-page. At this point the PHP code doesn't exist in the code at all, and the web browser (client) doesn't know anything about it.
It is unfortunate that so many tutorials keep mixing PHP and HTML code like you've done above, as this further confuses the two and makes it look like they're inter-communicative. What I recommend is to move all of your PHP code above any HTML-code, and do all of the processing before sending anything to the browser.
Not only will this make it a lot easier to actually keep track of, and understand, what's happening and why; But it will also allow you to add more functionality to your code, without trying to break the laws of physics. (For example: Deciding that you don't want to show a form to the user after all, half-way through the generation of said form.)
All this means that you don't "open a function" with a click. You send a request to the server with said click, and then the PHP code checks the incoming data for some predetermined condition (GET-parameter, etc), and then calls the function of said condition is fulfilled.
Something like this, in other words:
// First off we should use PDO, as mysql_*() is deprecated and removed in PHP7.
$db = new PDO ($dsn);
// Using prepared statements here, to prevent SQL injections.
$stmt = $db->prepare ("SELECT DISTINCT FREQUENZA FROM Dettagli_macchina WHERE macchine_id=:machineID and Email=:email");
$data = array (':machineID' => $macchine, ':email' => $_SESSION['login_user']);
if (!$stmt->exec ($data)) {
// Something went wrong, handle it.
}
// Initialize a variable to hold the generated menu, and a template to use when creating it.
$menuOut = $searchOut = '';
$menuTemplate = "<li><a href='#?frequenza=%s' onclick='showfiltro2()'>%s</a></li>";
// Using prepared statements we can iterate through all of the results with foreach().
foreach ($stmt->fetchAll () as $row) {
// Using htmlspecialchars() and rawurlescape() to prevent against XSS, and other HTML-injection attacks/mistakes.
// Notice where and in what order I've used the different functions, as one protects the URL as well.
$menuOut .= sprintf ($menuTemplate, htmlspecialchars (rawurlencode ($row['FREQUENZA'])), htmlspecialchars ($row['FREQUENZA']));
}
// Since this is probably the "function" you want to execute with said click, this is where we check if it
// has been sent by the client.
if (!empty ($_GET['frequenza'])) {
// Here you want to check to see if the parameter is actually something you'd expect, and not some random(?) garbage.
$filtro2 = $_GET['frequenza'];
// Again, prepared statements as your code was open to SQL injections!
$query = "SELECT DISTINCT * FROM Dettagli_macchina WHERE macchine_id=:machineID and Email=:email and FREQUENZA=:frequency";;
$stmt = $db->prepare ($query);
$data = array (
':machineID' => $macchine,
':email' => $_SESSION['login_user'],
':frequency' => $filtro2);
if (!$res = $stmt->exec ($data)) {
// Somethign went wrong with the query, handle it.
}
// Initialize a variable to hold the output, and the template to use for generating it.
$searchOut = '<table>';
$searchTemplate = '<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>';
$count = 0;
foreach ($stmt->fetchAll () as $row) {
// Again, protection against XSS and other HTML-breaking mistakes.
$searchOut .= sprintf ($searchTemplate,
htmlspecialchars ($row['COMPONENTE']),
htmlspecialchars ($row['DETTAGLIO ATTIVITA']),
htmlspecialchars ($row['FREQUENZA']),
htmlspecialchars ($row['DATA-PREVISTA']));
}
$searchOut = "<p>Found {$count} results</p>{$searchOut}</table>";
}
?>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Frequenza <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<?php echo $menuOut; ?>
</ul>
</div>
<script type="text/javascript">
function showfiltro2() {
document.getElementById("filtro2").style.display = "block";
document.getElementById("filtro1").style.display = "none";
}
</script>
<div id="filtro2" style="display: none">
<?php echo $searchOut; ?>
</div>
I've added some comments to explain what and why I've done things, as well as changed over from the old(!), deprecated and obsolete mysql_*() functions to PDO.
You can read more about how to use PDO in the PHP manual

PHP - Append text into html element with certain id

I have a pre Element with id output and try to append multiple elements to it
<pre id="output"></pre>
Now in my PHP Code i run a for loop which simply outputs the counter variable (for the purpose of this example).
<?php
for ($i = 0; $i < 100; $i = $i + 1)
{
echo $i;
}
What is the best way to append these values to the pre element with id output by using PHP?
EDIT: I search for a solution which works if the for loop is not inside the pre tags. It should work no mather where in the code i call the for loop e.g. below the <pre> tags or above the <pre> tags, both should work.
Is this possible with PHP only?

Since the php is rendered on page load, you don't need to append it - just have it in the div and echo it into output directly
<pre id="output">
<?php
$numbers=range (1,100);
foreach ($numbers as $number) {
echo "$number <br/>";
}
?>
</pre>

Not entirely sure if you want to use PHP to append stuff to it, or javascript. Considering your use of tags in this question
But for PHP you should do it at render time like this:
<?php
$output = '';
for ($i = 0; $i < 100; $i++) {
$output .= '<div>' . $i . '</div>';
}
?>
<pre id="output"><?=$output?></pre>
In javascript you can use getElementById()
var output = document.getElementById('output');
for(var i = 0; i < 100; i++) {
output.appendChild(document.createElement('div'));
}

Here's a version that does appends the numbers to the #output, with the php outside of that div as requested by the OP. Still happens at runtime, but this time creates a string and then appends it to the <pre> element as requested. I prefer the first one that I did though, with the php inside the element, unless there is a definitive reason for not using it, I would suggest hat one first.
<pre id="output"></pre>
<?php
$numbers=range (1,100);
$str="";
foreach ($numbers as $number) {
$str .= $number . "<br/>";
}
echo "<script>$('#output').append('$str')</script>";
?>

<?php ob_start(); ?>
<html>
<head></head>
<body>
<pre id="output">###MARK_PRE###</pre>
</body>
</html>
<?php
$html = ob_get_contents();
ob_end_clean();
$loop_result = "";
$arr = ['apple', 'orange', 'bananas'];
foreach($arr as $value)
{
$loop_result .= "$value <br/>\n";
}
$html = trim(str_replace('###MARK_PRE###', $loop_result, $html));
echo $html;
This does the job. It works as you can see no matter if you place the for loop below or above your html.
If it is enough to have the loop above the html it gets much simpler. You should stick to the answer of PierreDuc in this case.
IF you really want to place the html above your php code, then you actually should better use a MVC-Framework like symfony.
I told you the quick and dirty way above.
I just want to note in the end that I actully don't see any reason of placing your php-logic above your html. Since only your html depends on the php and not the other way around what precise advantage do you promise yourself from placing the html above the php?
One last option: It would be even better if you separated your html and php-code entirely and use include. You would end up with two files:
template.html.php:
<html>
<head></head>
<body>
<pre id="output"><?= $pre_tag; ?></pre>
</body>
</html>
logic.php:
$arr = ['apple', 'orange', 'bananas'];
foreach($arr as $value)
{
$pre_tag.= "$value <br/>\n";
}
include('template.html.php');
But the clean and solid solution is to use a MVC-Framework.

Assist with javascript functions being contained within a loop (PHP)

I am working on a project where I have divisions stored in mysql database with the "division id" and the "division name";
what I want to have is so that i use php to do a "while" loop and go through all the divisions;
then for each division it creates a button which will trigger a javascript function…
I have done a lot of testing on this so I know certain parts are working…; here is my code:
<p id="id57512">How are you?</p>
<script>
var g_myobj = {};
</script>
<?php
$result_g1 = mysql_query("SELECT * FROM divisions");
while($row = mysql_fetch_array($result_g1, MYSQL_BOTH))
{
$div_id=$row[div_id];
$div_name=$row[div_name];
$button_id="b";
$button_id.=$div_id;
$function_id="f";
$function_id.=$div_id;
?>
<button id=<?php echo $button_id; ?>><?php echo $div_name; ?></button>
<script>
var f_id='<?php echo $function_id; ?>';
var b_id='<?php echo $button_id; ?>';
var div_id='<?php echo $div_id; ?>';
var newFieldName = f_id;
var newFieldValue = function() {document.getElementById("id57512").firstChild.nodeValue=gman_code1(div_id);};
g_myobj[newFieldName] = newFieldValue;
var gman_code1 = function(number) {
var result1 = number*2;
console.log(result1);
return result1;//add return statement
}
//define the behavior
document.getElementById(b_id).addEventListener("click", g_myobj[f_id] , false);
</script>
<?php
}
the function names need to be a variable; but I figured out how to do that by making it an object; and so can access the different functions that way…
I basically tested this all when it was not in a loop; where I manually had it do everything twice (even creating the functions in the object) and it all worked fine…
basically when you click on a button it is supposed to send a number to that "p" container and multiply it by 2
when I did it manually and not in loop i just had it create the object g_myobj first and then just started adding items to the object…
but now that i am doing this in a loop - I felt I could not have the statement that creates the empty object in the loop or it would just keep recreating it; so I went above the loop and had the object created there in its own "script" tags all by itself…
that part may be a problem with this, not sure at all…
another potential problem is that I am not sure if I can do all this in a loop like this
it is a "php loop" and so maybe this just all cannot be done in a loop like that…
What is going on is the first button works but none of the others do…
So, I am hoping someone can advise me on what I am doing wrong on this…
Thanks so much...

If all you are trying to do is send a number to <p> and multiply it by 2, see this one liner function. I assume you are trying to accomplish more than just the multiplying thing otherwise you probably would have just done a simple function like below...
Also, I'm sure you will get lots of comments on it, but you should not be using the mysql_ functions anymore. They are both deprecated and potentially unsafe. You should use mysqli or PDO prepared statements.
On your button, you should probably put quotes around the id="yadayada" instead of id=yadayada. jQuery may be a good option for your js to handle functions or what-have-you.
<p id="id57512">How are you?</p>
<?php
$result_g1 = mysql_query("SELECT * FROM divisions");
while($row = mysql_fetch_array($result_g1, MYSQL_BOTH)) {
$div_id = $row[div_id];
$div_name = $row[div_name];
$button_id = "b$div_id";
$function_id = "f$div_id"; ?>
<button id="<?php echo $button_id; ?>" onClick="MyRadFunction('<?php echo $div_id; ?>')">
<?php echo $div_name; ?></button>
<?php } ?>
<script>
function MyRadFunction(DivId) {
$("#id57512").html(DivId*2);
// var NewNum = $("#id57512").text();
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

When rendering your button, you should wrap the id in quotes, e.g.
<button id='<?php echo $button_id; ?>'><?php echo $div_name; ?></button>

Creating JavaScript object from MySQL DATABASE (ie multiple tables)

Sorry to add another JavaScript object to the mix. I'm just having a little trouble wrapping my head around this as it is a little more complex than i have ever dealt with.
Like the title states, i'm trying to create a JavaScript Object or perhaps a multidimensional array of a MySQL Database. For testing purposes i'm only using three tables from my database even though eventually it will store tens of tables. These tables are called "Interfaces", "IPAM", and "DNSF".
The reason i would like to complete this task is that, i am trying to create a heavy ajax page which dynamically knows when tables are added, updated, deleted etc, and automatically reflects this without having to add more code. I am doing this by writing javascript with php in addition to various other ajax callbacks spitting out html and variables.
Let me start out with my hardcoded HTML. All other html is created dynamically. This too will soon be created dynamically to add buttons to my website without adding code.
<body>
<div class = "form">
<button type="button" class = "formbutton" value = "Interfaces" onclick="inputChoice('Interfaces')">Interfaces</button>
<button type="button" class = "formbutton" value = "IPAM" onclick="inputChoice('IPAM')">IPAM</button>
<button type="button" class = "formbutton" value = "DNSR" onclick="inputChoice('DNSR')">DNSR</button>
</div>
<div class = "tableDiv" id="myTableDiv" style="height:1000px;width:1000px;border:1px solid #ccc; overflow: scroll;"><table id = "myTable"></table></div>
</body>
Before any buttons or events are executed, the first thign my page does is issue ajax requests within a $( document ).ready(function() { function. My issue is that i have to code a seperate ajax request for every single table. I'll show an example here where i fetch interface table data:
$.ajax({
url:"/ryan/nonEmber/ajax.php?table=Interfaces",
beforeSend: function(XMLHttpRequest){},
success: function(data, textStatus) {
InterfacesCols = data.split(" ");
InterfacesCols.pop();
$.getJSON("/ryan/nonEmber/getJson.php?table=Interfaces", function( data ){
var items = [];
$.each(data.post, function(key, val){
items.push(val);
});
for(i = 0; i < items.length; i++){
var myString = '<tr id = "visibleRow">';
for(j = 0; j < InterfacesCols.length; j++){
if(InterfacesCols[j] != null){
myString = myString + '<td id = "visibleDef">' + items[i][InterfacesCols[j]] +'</td>';
}
}
myString = myString + '</tr>';
Interfaces.push(myString);
}
});
}
});
This ajax request ultimately creates an array of html strings that are used to create the table. Interfaces[] contains each html row. InterfacesCols contains the names of each column. I have to write this block of code for every single table.
What i want to do is put my "Interfaces[]" like arrays and "InterfacesCols[]" like arrays within a master array so that i can create a template and not have tons of the same code.
Lets call this master array tables. This would allow me to put my ajax in a for loop and loop through every table array rather than hardcode it.
tables[0] would be interfaces[], tables[1] would be ipam etc.
In addition to my ajax request blocks where i initially gather my data from the database. I also have my function "inputChoice(string)", where i actually generate a table from this data. I do so by changing inner html of my table. I dont wan't to have to redirect my page. This works fine, but once again i have to create a new block of code for every single table. These blocks of code are massive right now because they include garbage collection for the DOM and also the code for handling massive data sets(>10,000) without browser slow down. I will refrain from posting that block unless necessary. The ajax calls require the same thing.
Here is the php where i originally create the empty array variables by generating javascript:
<?php
$sql= "SELECT
TABLE_NAME
FROM information_schema.TABLES
WHERE
TABLE_TYPE='BASE TABLE'
AND TABLE_SCHEMA='NJVCtestDB'";
$stmt = $DBH->prepare($sql);
$stmt->setFetchMode(PDO::FETCH_ASSOC);
echo '<script>';
try{
$stmt->execute();
echo 'var tables = [];';
while($row = $stmt->fetch()){
echo 'var '.$row['TABLE_NAME'].' =[];';
echo 'tables += '.$row['TABLE_NAME'].';';
echo 'var '.$row['TABLE_NAME'].'Cols =[];';
}
echo 'console.log(tables[1]);';
}catch(PDOException $e){
echo $e;
}
echo '</script>';
?>
The above php is only called by using an statement on my index. No Ajax.
The link my ajax calls is this:
<?
$sql = "DESCRIBE ".$_GET['table'];
$stmt = $DBH->prepare($sql);
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$colnames;
try{
$stmt->execute();
//$stmt2->execute();
$colnames = $stmt->fetchAll(PDO::FETCH_COLUMN);
}
catch(PDOException $e){
echo $e;
}
foreach($colnames as $value){
print $value ." ";
}
?>
The above ajax servers only the purpose of fetching column names and returning the names in a space delimeted string to be parsed and turned into an array via javascript, which you can see in my ajax call.
My getJson ajax code is here:
<?php
include "connect.php";
$sql = "DESCRIBE ".$_GET['table'];
$stmt = $DBH->prepare($sql);
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$colnames;
try{
$stmt->execute();
$colnames = $stmt->fetchAll(PDO::FETCH_COLUMN);
}
catch(PDOException $e){
echo $e;
}
$sql = "SELECT * FROM ".$_GET['table']." LIMIT 17000";
$stmt2 = $DBH->prepare($sql);
$stmt2->setFetchMode(PDO::FETCH_ASSOC);
try{
$stmt2->execute();
while($row = $stmt2->fetch()){
foreach($colnames as $value){
if($row[$value] == null){
$row[$value] = "";
}
}
$row = array('id' => $i) + $row;
$items['post'][]=($row);
$i++;
}
}
catch(PDOExcetipn $e){
echo $e;
}
print json_encode($items);
?>
The above php seems slightly redundant to me as i fetch the column names again. However this time i also include the actual data. Line by line.
This is basically all of my code i have written for this project. The only code i did not include was my javascript inputChoice() function. Which as i stated above is very bulky and really doesnt do anything the ajax doesnt do when it comes to utilizing the arrays. This is a massive post, so i apologize for the wall of text. I am not sure exactly what the next step is for me to code this better in the way i described. Any input would be very much appreciated!

If I'm correct you want to automate the table generating.
Your index php block retrieves all tables from the DB.
$sql= "SELECT
TABLE_NAME
FROM information_schema.TABLES
WHERE
TABLE_TYPE='BASE TABLE'
AND TABLE_SCHEMA='NJVCtestDB'";
So we need to add those to a master table pseudo code:
tables = [];
for (table in tableSQL)
{
tables[table] = tableSQL[table];
tables[table]['cols'] = [];
}
Now you have a master table array containing all your tables.
Let's loop through these. pseudo code:
for (table in tables)
{
retrieveColsWithData(table);
}
function retrieveColsWithData(tableKey)
{
//table = key = table name in DB
$.ajax({url:"/ryan/nonEmber/ajax.php?table="+table, etc.
//rest of the ajax call you're doing. Pass the key var to the JSON function
});
}
The function above loops through all the tables and retrieves the colls. When the JSON request returns you simply add the colls to table[key]['cols'].
Now you can simply iterate over the tables master with a for in or Object.keys and draw the HTML containing the data.
You can reuse retrieveColsWithData connected to your inputChoice to reload the data.