IDs not working as expected in a while loop in PHP - javascript

I am trying to create a while loop that echoes a button for each $version value. shell_exec() returns a value from a Python file and is responsive to a unique $version value. To that end, the basic goal is to create a page where the quantity of buttons is dependent on the version value.
Then, the user can click any specific button and access data for that one specific button(version). To do this, I tried to mix variables with IDs but it did not seem to work. What can I do to fix this? None of the buttons are responsive right now.
Code:
<?php
while ($version != 0) {
echo '
<br>
<br>
<button id="toggle-' . $version . '">TOGGLE</button>
<div style= "display:none;" id="content-' . $version . '">
';
$command = escapeshellcmd("C:/Python38/python.exe C:/xampp/htdocs/Ensemble/login/test.py $email $version");
$output = shell_exec("$command 2>&1");
echo($output);
echo '
</div>
<script>
var toggle = document.getElementById("toggle-' . $version . '");
var content = document.getElementById("content-' . $version . '");
toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});
</script>
'
;
$version--;
}
?>
Edit
A new issue arose. Only one of the buttons work. Both buttons when clicked output the same thing instead of different versions. In SQL all versions are different so this is an error most likely with the html/JS.


Perhaps the following might help - though it is not tested as far as the Python call is concerned but I think the other code should work OK if I understood correctly.
Every ID must be unique in the DOM which I guess is why you tried to make them so by adding the $version number to each. This is not really necessary if you utilise querySelectorAll with a suitable expression. Doing this in conjunction with one or more of the parent/sibling selectors that exists in vanilla javascript allow fairly easy DOM navigation and manipulation. It also means you can use the same piece of code for all the buttons... hope it helps.
<?php
while( $version > 0 ) {
$command = escapeshellcmd( "C:/Python38/python.exe C:/xampp/htdocs/Ensemble/login/test.py $email $version" );
$output = shell_exec("$command 2>&1");
printf('
<br />
<br />
<button data-version="%d">Toggle</button>
<div style="display:none">%s</div>',
$version,
$output
);
$version--;
}
echo "
<script>
Array.from( document.querySelectorAll('button') ).forEach( bttn=>{
bttn.addEventListener('click', function(e){
let version=this.dataset.version;
let div=this.nextElementSibling;
div.style.display=div.style.display=='block' ? 'none' : 'block';
});
})
</script>";
?>


Replace
<div style= "display:none;" "id="content-' . $version . '">
to
<div style= "display:none;" id="content-' . $version . '">
and try.

Related

Problems with PHP variables in the URL of a JavaScript function

I'm using the following script to use a popup window to load a $_GET address:
while ($row1 = $sth1->fetch(PDO::FETCH_ASSOC)){
if($_SESSION['scontact_id'] == 'scontact_id' && $row1['shared_id'] != '' && $row1['shared_id'] != '0'){
echo "<td> <center><button onclick='myFunction()'><img border='0' alt='Contacts' src='/Welcome/modules/mod_crmsearch/images/peoplesmall.png'></button></center>
<script>
function myFunction(shared_id) {
window.open('". $mywebsite . "vcontact_id=" . $row1['shared_id'] ."' +shared_id, '_blank', 'toolbar=no,scrollbars=yes,resizable=yes,top=200,left=500,width=400,height=400');
}
</script> </td>";
However, it only loads the first row in the loop correctly. After that, it displays the same $_GET address, regardless of where it is in the while loop. It does the same thing if I convert the row to a php variable and pass the PHP variable, to the script, as a JavaScript variable. It works fine, without the popup, like this:
echo "<td>"."<a href='" . $mywebsite . "vcontact_id=" . $row1['shared_id'] . "' target='_blank', '_blank', 'toolbar=no,scrollbars=yes,resizable=yes,top=200,left=500,width=400,height=400'><center><img border='0' alt='Contacts' src='/Welcome/modules/mod_crmsearch/images/peoplesmall.png'></center></a>" . "</td>";
I'm not very familiar with JavaScript. Any help would be greatly appreciated.

Chage this part:
echo "<td> <center><button onclick='myFunction()'>
for this:
echo "<td> <center><button onclick='myFunction(\"" . $row1['shared_id'] . "\")'>
EDIT: Or make it one line instead of using a function:
echo "<td> <center><button onclick='window.open(\"". $mywebsite . "vcontact_id=" . $row1['shared_id'] ."\", \"_blank\", \"toolbar=no,scrollbars=yes,resizable=yes,top=200,left=500,width=400,height=400\");'><img border='0' alt='Contacts' src='/Welcome/modules/mod_crmsearch/images/peoplesmall.png'></button></center></td>";

myFunction is being overwritten each time in the loop. You could always rewrite the code with an increment counter to change the function name. It's typically better to not mix javascript in php in my opinion. You could always just pass these in as additional parameters into your function where you are outputting php / js.

You are continuously redefining the function: myFunction(). you should output the script tag once, outside the loop, and change the onclick attribute on your button to ...<button onclick='myFunction(" . $row1['shared_id'] . ")'>..., if I am reading your problem correctly

Please try below code:
<?php
while ($row1 = $sth1->fetch(PDO::FETCH_ASSOC)){
if($_SESSION['scontact_id'] == 'scontact_id' && $row1['shared_id'] != '' && $row1['shared_id'] != '0'){
echo "<td> <center><button onclick='myFunction(".$row1['shared_id'].")'><img border='0' alt='Contacts' src='/Welcome/modules/mod_crmsearch/images/peoplesmall.png'></button></center></td>";
}
}
?>
<script>
var mywebsite = "<?php echo $mywebsite ?>";
function myFunction(shared_id) {
window.open(mywebsite+"vcontact_id="+shared_id, '_blank', 'toolbar=no,scrollbars=yes,resizable=yes,top=200,left=500,width=400,height=400');
}
</script>

I believe you simply need to move your script outside the if loop, yet maintain it in the while loop and you need to add your (shared_id) that is required by the function, to the click event.
<?php
while ($row1 = $sth1->fetch(PDO::FETCH_ASSOC)){
if($_SESSION['scontact_id'] == 'scontact_id' && $row1['shared_id'] != '' && $row1['shared_id'] != '0'){
echo "<td> <center><button onclick='myFunction(".$row1['shared_id'].")'><img border='0' alt='Contacts' src='/Welcome/modules/mod_crmsearch/images/peoplesmall.png'></button></center></td>";
}
echo "
<script>
function myFunction(shared_id) {
window.open('". $mywebsite . "vcontact_id=" . $row1['shared_id'] ."' +shared_id, '_blank', 'toolbar=no,scrollbars=yes,resizable=yes,top=200,left=500,width=400,height=400');
}
</script>
";
}
If you care at all about page optimization, it would be far wiser instead of looping the script in the while statement, to set a data variable and a class on the button and use an onclick event to determine the values so you don't have 20 instances of the same script with different values on the page.
For example:
Inside your button:
class='clicked' data-id='".$row1['shared_id']."'
Then use jquery for the script
<script>
$( ".clicked" ).click(function() {
var data = $(this).attr('data-id');
window.open('". $mywebsite . "vcontact_id='+data', '_blank', 'toolbar=no,scrollbars=yes,resizable=yes,top=200,left=500,width=400,height=400');
}
</script>
This looks for a click event on the class "clicked" which we assigned to the button. When button is clicked, we get the value of "data-id" and set it as a variable "data". We then call that variable instead of echoing a php variable. This allows us to take the script out of the loop and not write it to the page multiple times.

Adding a javascript function and removing it from the HTML instantly

I'm trying to add a script element to the HTML from the PHP code and instantly remove it so it won't be visible in the HTML. The script only contains things to execute at the same moment and not functions. Generally, I'm trying to replicate ASP.NETs runat property, so I'll be able to set values of elements (inputs for now) right from the PHP code.
This is what I tried so far (which I found in a different question, with some changes of mine) and it adds the script properly, but won't remove it.
function JSSetValue($id, $value) // Input 'value' only
{
echo '<script>
var input = document.getElementById("' . $id . '");
input.value = "' . $value . '"
</script>';
$html = <<<HTML
...
HTML;
$dom = new DOMDocument();
$dom->loadHTML($html);
$script = $dom->getElementsByTagName('script');
foreach($script as $item)
{
$item->parentNode->removeChild($item);
break;
}
$html = $dom->saveHTML();
}

Thanks for everyone who were trying to help. Anyway, I found a solution to my question, which is this:
function JSSetValue($id, $value) // Input 'value' only
{
echo '<script id="phpjs">
var input = document.getElementById("' . $id . '");
input.value = "' . $value . '";
document.getElementById("phpjs").remove();
</script>';
}
It adds the script and removes it, so it won't be visible when inspecting elements anymore.

PHP form dynamic inputs

Very new to php... bear with me!
I'm creating a photography website and am stuck on a particular page. Ultimately I need the page to be a form with a dynamic number of inputs. It will be a dynamic visual representation of folders (or "galleries") on my web host server. Each div block will contain the first image from the folder along with the name of the folder - the heading text and image should both be clickable and act as a submit button to continue to the album.php page, passing the name of the folder via a GET method.
The first problem I had was trying to get rid of the submit button from a form, and replace with my album thumbnail and album title in an <a> tag. Apparently via javascript, and I managed to get this to work - kind of. I've gotten the page to a state where there is a form, with multiple inputs, but every single folder name is now being passed in the URL (e.g. mywebsite.com/album.php?name=album1&name=album2&name=album3) and I'm absolutely stuck!
The code is included, so if someone could have a look over and offer some guidance or point me in the right direction (and offer any other newbie tips!) it would be much appreciated.
Cheers
Lee
<form id="album" method="get" action="album.php">
<?php
$basepath = 'images/portfolios/public/';
$results = scandir($basepath);
foreach ($results as $result) {
if ($result === '.' or $result === '..') continue;
if (is_dir($basepath . '/' . $result)) {
//create new gallery for each folder
?>
<div class="gallery">
<?php
//get count of images in folder
$i = 0;
$path = 'images/portfolios/public/' . $result;
if ($handle = opendir($path)) {
while (($file = readdir($handle)) !== false){
if (!in_array($file, array('.', '..')) && !is_dir($path.$file))
$i++;
}
}
//create array, and choose first file for thumbnail
$files = array();
$dir = opendir($path);
while(($file = readdir($dir)) !== false)
{
if($file !== '.' && $file !== '..' && !is_dir($file))
{$files[] = $file;}
}
closedir($dir);
sort($files);
//form input - album name for next page
echo '<input type="hidden" name="name" id="name" value="'.$result.'" />';
//the headline and image link for gallery
echo '<a href="javascript: submitform()">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';
?>
</div> <!-- end gallery -->
<?php }
}
?>
</form>
<script type="text/javascript">
function submitform(){document.forms["album"].submit();}
</script>

change your code from:
echo '<a href="javascript: submitform()">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';
to this code:
echo '<a href="admin.php?name='.$result.'">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';

Why wont javascript get values of php generated html?

im using ajax to query my mysql to my database.
But im stock at issue with my php generated html form input - javascript/jquery will simply not pick up the value. From normal html is no issue of course.
php (works fine, all echos are good)
<?php
function getAge() {
$age = "<select name='age'>";
$result = $mysqli->query("select * from ages");
while ($row = $result->fetch_row()) {
$age.="<option value=" . $row[0] . ">". $row[1] ."</option>";
}
$age.="</select>";
return $age;
}
?>
html
<form id="myform">
<input name='name' value='Nick'>
<input name='sport' value='Football'>
<?php echo getAge(); ?>
<input type='submit'>
</form>
javascript
$("form#myform").on('submit', function(e){
e.preventDefault();
var json = {}
$.each(this.elements, function(){
json[this.name] = this.value || '';
});
}
Everything works well except it wont get the value of the <select>. If i make a normal html select it works.. ?!
Also anybody know how to delete the submit button from the json object? :-)

Any dynamically generated HTML will not have the events applied to them, as those events are applied on page load. So if you apply the events to the document, you will be able to pull values from dynamically generated html. Like so:
var json = {};
$(document).on('submit', 'form#myform', function(e){
$('*', this).each(function(){
json[$(this).attr('name')] = $(this).val();
});
});
Hope this helps!

change this line:
$age.="<option value=" . $row[0] . ">". $row[1] ."</option>";
to this:
$age.="<option value='" . $row[0] . "'>". $row[1] ."</option>";
//----------------^---------------^------put quotes
And i think you can make use of .serializeArray() which does the same you want but in a different way like multiple objects with multiple [{ name : value}] pairs:
$(function(){ //<-----put this block too
$("form#myform").on('submit', function(e){
e.preventDefault();
var json = $(this).serializeArray();
}); //<----checkout the closing
}); //<---doc ready closed.

Javascript not acquiring field value

I have 2 php pages, htmldisp.php and classfn.php. And an alert used in hrmldisp.php is not working. It should actually give a dropdown value.
htmldisp.php is
<?php include("classfn.php"); $obj=new hello;?>
<script language="javascript">
function submitted(){
var select=document.getElementById('newdrop').value;
alert(select);
}
</script>
<?php
$id="newdrop";
echo $obj->hellofn($id); ?>
<input type="submit" onclick="submitted();"
classfn.php is
<?php
class hello{
function hellofn($id){
$s="select `Name`,`Value` from `Days`;
$q=mysql_query($s);
$p='<td>'.'<select id="$id">';
while($re=mysql_fetch_array($q)){
$value=$re["Value"];
$name=$re["Name"];
$p.='<option value="' . $value . '"' . ( $selected==$value ? ' selected="selected"' : '' ) . '>' . $name . '</option>';
}
$p.='</select>'.'</td>';
return $p;
}
?>
The problem is alert(select) not working. Thanks

As far as I can tell you never call the function submitted. On top of that your HTML is completely malformed. You have a bunch of html and javascript outside of your html tag. And you have 2 opening html tags with no close...

Categories

Resources