We Keep Coding

Get value from javascript onclick in php

I am making an page with every video I upload to the database.
They are filtered by date and ordered by date. There is an onclick on every video with JavaScript. With all the value's it has to show on the website.
But when I click on the video it has to filter all the video´s with the tags they have. The only thing it does now, it shows the right tag with the video but not the right tag when I want to filter it. Then it gives me the tag from the video that is posted first.
How do I get the right tag value when there clicked on? when I want to filter the tags?
<?php
$query = $connectie->prepare("SELECT v.VideoID,v.Titel,v.Link,v.Omschrijving,o.Bestandspath, o.Bestandsnaam,o.Onderwerp,t.Naam, DATE_FORMAT(`postDate`,\"%e-%m-%Y %H:%i\")as tijd FROM video v join opdracht o on v.OpdrachtID = o.OpdrachtID JOIN videotag vt on v.VideoID = vt.VideoID
JOIN tag t on vt.TagID = t.TagID order by `postDate` ");
$query->execute();
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
$link = $row['Link'];
$newLink = str_replace("watch?v=", "embed/", $link);
$data = file_get_contents('https://www.youtube.com/oembed?format=json&url=' . $link);
// echo $newLink;
$json = json_decode($data);
$thumbnail = $json->thumbnail_url;
$title = $json->title;
$onderwerp = $row['Onderwerp'];
$omschrijving = $row['Omschrijving'];
$filePath = $row['Bestandspath'];
$bestandsnaam = $row['Bestandsnaam'];
$videoid = $row['VideoID'];
$tagName = $row['Naam'];
echo 'tagname',$tagName;
echo
'
<div class="scrollbar">
<a id="videoList" name="video" href="#" onclick="getLink(\'' . htmlentities($newLink) . '\',\'' . htmlentities($title) . '\',\'' . htmlentities($onderwerp) . '\',\''.htmlentities($tagName) . '\',\'' . htmlentities($omschrijving) . '\',\'' . htmlentities($bestandsnaam) . '\',\'' . htmlentities($filePath) . '\')">
<img src="' .htmlentities($thumbnail) . '" width="235"/>
<p id="titelText"><b>' . htmlentities($title) . '</b></p>
</a>
</div>
<script>
function getLink(link,titel,onderwerp,tagNaam,omschrijving,bestandsnaam,bestandspath){
document.getElementById("videoFrame").src = link;
document.getElementById("videoFrame").style.display = "block";
document.getElementById("overzicht").style.width = "275px";
document.getElementById("panelInfo").style.display = "block";
document.getElementById("titelVideo").innerHTML = "<b>Titel</b>:"+titel+"<br>";
document.getElementById("onderwerp").innerHTML = "<b>Onderwerp</b>:"+onderwerp+"<br>";
document.getElementById("tagnaam").innerHTML = "<b>Tag</b>:" + tagNaam + "<br>";
document.getElementById("omschrijving").innerHTML = "<b>Omschrijving</b>:"+omschrijving;
document.getElementById("bestand").download = bestandsnaam;
document.getElementById("bestand").href = bestandspath;
}
</script>';
}

Displaying the other values in the table on select option from database

i have a select option, after selecting a brand I successfully get/display the brand name but I want also the other values be displayed like price, with or without refreshing the page.
<?php
require_once 'config.php';
echo '<select class="form-control action" name="tran_description" value="<?
php echo $tran_description; ?>" style="background-color:#F0F0F0">';
$sql = mysqli_query($mysqli, 'SELECT * FROM products order by product_id');
while ($row = $sql->fetch_assoc()){
echo '<option id="' . $row['product_id'] . '"';
echo ' value="' . $row['description'] . '" ';
echo ' value="' . $row['price'] . '" ';
if($row['description'] == $tran_description) {
if($row['price'] == $tran_price) {
$tran_price = $row['price'];
echo ' selected="selected"';
}
}
if($row['product_id'] == $row['description']) {
echo ' selected="selected"';
}
echo '>';
echo $row['description'];
echo '</option>';
}
echo '</select>';
?>
I can get the value of the description but the price I couldnt. In one select option representing the brand or description I want also the price value of that brand I selected be assign to a variable so I can do arithmetic operation in the back code without seeing it.Thanks.

You are using wrong HTML structure only the first attribute is being used while the other is being ignored in the DOM .The right way to store multiple values in a single select can be like this:
<select name="">
<option value="{'num_sequence':[0,1,2,3]}">Option one</option>
<option value="{'foo':'bar','one':'two'}">Option two</option>
</select>
In your case it should be like this:
echo '<option id="' . $row['product_id'] . '"';
// echo ' value="{ /"description:/"' . $row['description'] . ', /"price:/"' . $row['price'] . ' }" ';
echo ' value="' .
json_encode(['description'=>$row['description'], 'price'=>$row['price']) .
'">";
Then to get the value you'll do is:
$description = $_POST['NameOfSelectInput']['description'];
$price = $_POST['NameOfSelectInput']['price'];
If you want to get the value in javascript, using jQuery, for example, you could do:
var value = JSON.parse($('#select_id').val()); // use id of your select control
var price = value.price;
var description = value.description;
You should do appropriate error checking...
For more details refer here:
Can an Option in a Select tag carry multiple values?

My javascript code result is blinking

When I am clicking on the Bengali button its showing data for few seconds and hiding it again, whereas I wrote the same code for the Assamese button, it displaying fine:
<script>
function be(){
var x= document.getElementById('ben');
if (x.style.display==='block'){
x.style.display='none';
}
else
{
x.style.display='block';
}
}
</script>
<button class= "button" onclick="be()">BENGALI</button>
<div id="ben">
<?php
$dir = '/home/test/data/Bengali/';
if (!isset($_POST['submit'])) {
if ($dp = opendir($dir)) {
$files = array();
while (($file = readdir($dp)) !== false) {
if (!is_dir($dir . $file)) {
$files[] = $file;
}
}
closedir($dp);
}
if ($files) {
echo '<form action="' . $_SERVER['PHP_SELF'] . '" method="post">';
foreach ($files as $file) {
echo '<input type="checkbox" name="files[]" value="' . $file . '" /> '
.
$file . '<br />';
}
}
}
?></div>

You call the function when you click on a submit button.
So the JS runs, then the form submits, and you load a new page.
The new page doesn't set the default styles to what they were before, so it has the effect of resetting the page.

As already mentioned, a new page is opening because a button has been clicked. The best way to solve this is by modifying your button like this:
<button class= "button" onclick="be()" type="button">BENGALI</button>
This prevents the form from submitting and runs your JavaScript function

How to pass variables into dynamic UIkit Modal?

How do i pass variables into a UIkit Modal?
The Button:
<button type="button" class="uk-button" data-uk-modal="{target:'#info',center:true}" data-added="added-test" data-modified="modified-test"><i class="uk-icon-info"></i></button>
The Modal:
<div class="uk-modal" id="info">
<div class="uk-modal-dialog">
<h4 style="margin-bottom:5px;">Added:</h4>
<div id="added"></div><br>
<h4 style="margin-bottom:5px;">Modified:</h4>
<div id="modified"></div>
<div class="uk-modal-footer">
<button type="button" class="uk-button uk-modal-close">Close</button>
</div>
</div>
</div>
The Script:
$(document).ready(function () {
$('#info').on('uk.modal.show', function (event) {
var button = $(event.relatedTarget);
var added = button.data('added');
var modified = $(e.target).data('modified');
var modal = $(this);
modal.find('.uk-modal-dialog #added').text(added);
modal.find('.uk-modal-dialog #modified').text(modified);
});
});
This is not working. I do not get a error in the console. I´ve already tried a few other ways but all of them didn´t worked as they should.
Update #1
The following jquery works partially. I´ve added the id "infotrigger" to the button.
jQuery('#info').appendTo("body");
jQuery(document).on('click', '#infotrigger', infomodal_handler);
function infomodal_handler(e)
{
var added = jQuery(e.target).data('added');
var modified = jQuery(e.target).data('modified');
jQuery('#info').on({
'show.uk.modal':function(){
jQuery('#added', jQuery(this)).text(added);
jQuery('#modified', jQuery(this)).text(modified);
}
}).trigger('show.uk.modal');
}
The Problem now is that it´s only working partially. I think the reason is that the button is in a foreach loop. Mostly i have old data when opening the modal. If i open it again i have mostly the correct data.
Any ideas how to fix that?

The problem was that sometimes the icon was presssed instead of the button itself. So the data couldn´t be fetched. To fix this the variables need to be changed from:
var added = jQuery(e.target).data('added');
to:
var added = jQuery(this).data('added');
Now the correct dom element is the target.
To use the modal inside a loop i changed everything a bit. I´ve put the modal with the script into a function where i pass the element-id through and apply it to different elements:
function info_modal( $id ) {
return "
<script>
jQuery('#info" . $id . "').appendTo('body');
jQuery(document).on('click', '#infotrigger" . $id . "', infomodal_handler" . $id . ");
function infomodal_handler" . $id . "(e)
{
console.log(e);
var added" . $id . " = jQuery(this).data('added" . $id . "');
var modified" . $id . " = jQuery(this).data('modified" . $id . "');
jQuery('#info" . $id . "').on({
'show.uk.modal':function(){
jQuery('#added" . $id . "', jQuery(this)).text(added" . $id . ");
jQuery('#modified" . $id . "', jQuery(this)).text(modified" . $id . ");
}
}).trigger('show.uk.modal');
}
</script>
<!-- Info Modal -->
<div class='uk-modal' id='info" . $id . "'>
<div class='uk-modal-dialog'>
<h4 style='margin-bottom:5px;'>" . __( 'Added on', 'easy-code-placement' ) . ":</h4>
<div id='added" . $id . "'></div><br>
<h4 style='margin-bottom:5px;'>" . __( 'Last Modified on', 'easy-code-placement' ) . ":</h4>
<div id='modified" . $id . "'></div>
<div class='uk-modal-footer uk-text-right'>
<button type='button' class='uk-button uk-modal-close'>" . __( 'Close', 'easy-code-placement' ) . "</button>
</div>
</div>
</div>
";
}
Inside the loop i´ve placed the button and also apply the element-id to it and after it i call the function (the function is only for the better code readability - the script and modal can, of course, also be placed directly inside the loop):
<button type="button" id="infotrigger<?php echo $code->id; ?>" class="uk-button" data-uk-modal="{target:'#info<?php echo $code->id; ?>',center:true}" data-added<?php echo $code->id; ?>="added" data-modified<?php echo $code->id; ?>="modified"><i class="uk-icon-info"></i></button>
<?php echo info_modal( $code->id ); ?>

Assigning and getting value from same ID name

I'm using x-editable http://vitalets.github.io/x-editable/index.html a jquery inplace editor. Currently I have a working code like below:
<?php
$num_rows = 1;
// store the record of the "tblstudent" table into $row
while ($row = mysqli_fetch_array($result)) {
echo "<script type=\"text/javascript\">
$.fn.editable.defaults.mode = \"popup\";
$('#username$num_rows').editable();
</script> "; //assign num to element
// Print out the contents of the entry
echo '<tr>';
echo '<td><a href="#" id="username' . $num_rows . '" data-type="text" data-pk="' . $row['id'] . '" data-url="post.php" data-title="Edit website">';
echo htmlspecialchars($row['website'], ENT_QUOTES, 'UTF-8');
echo '</a></td>';
echo '</tr>';
$num_rows++;
}
?>
Which result in the following:
but as you can see I use $num_rows in assigning element ID and getting the ID with javascript. I prefer not to use loop to assign uniq ID to element or include the javascript in php tag. Is there any elegant solution than this?
Thanks in advance.

Keep the id as username or infact add class='username' instead of id.
<script type="text/javascript">
$.fn.editable.defaults.mode = "popup";
$('.username').click(function(){
$(this).editable();
})
</script>