Gallery View of Images taken from DB in html - javascript

I have almost 200 images in my List.
$rings = $db->query("SELECT * FROM rings WHERE id > ". $ringId ." LIMIT 100");
I want to display them in a Gallery form with a Checkbox to each. Each Row must contains atleast 4 images with their checkboxes.
I have tried, making a for loop with adding div but that only adds vertically with on Ring at a time. How can i give it some sort of gallery look.
<div>
<?php
echo "<table><tr>";
$i =0;
foreach( $rings as $ring )
{
$i++;
echo '<td><input type="image" src="http://thevowapp.com/iphoneapp/vowstore/rings/'. $ring['imagePath'] .'" name="checked" value="' . $ring['id'].'" data-my-info="'. $ring['ringSetName'] .'" style="width:280px; height:280px;"></td>';
echo '<input type="checkbox">';
if( $i % 3 == 0 )
{
echo "</tr><tr>";
}
}
echo "</tr></table>";
?>
</div>

Your need to control the output so that it outputs horizontally until you have 4 images in that row, then start a new row.
Also, might I suggest a table structures for this.
echo "<table>
<tr>";
$i=0;
foreach( $rings as $ring ):
$i++
echo "<td><img src='{$ring['thumb']}' /></td>";
if( $i % 4 == 0 ){
echo "</tr><tr>";
}
}
echo "</tr></table>";

Consider incrementing a variable at each loop, for instance:
<?php
$loop = 0;
foreach ($items as $item) {
$loop++;
?>
<div class="col-md-3"><!-- My content --></div>
<?php
if ($loop == 4) {
$loop = 0;
?>
<div class="clearfix"></div>
<?php
}
}

Related

I had an issue with bootstrap's datetime picker on MozilaFirefox

Hello guys I had an issue with datetimepicker on FF. In other browsers its doing good with the code I wrote. The problem is I have three drop down options. In each one I had, time is inserted by the user using datetimepicker but unfortunately the picker works only on one of the three of them. Any idea why this is happening
PHP CODE
<?php
echo '<div class="table-rsponsive overlap">';
echo '<table class="table" >';
$workingDaysNum = array();
$counter = 0;
for ($i = 0; $i < 3; $i++) {
echo '<tr>';
for ($j = 0; $j < 7/* count($spec) */; $j++) {
if ($i == 0) {
echo '<td>' . $days[$j] . '</td>';
} else {
$counter++;
$workingDaysNum[] = 'datetimepicker' . $counter;
?>
<td>
<div class="input-group date datetimepicker" id="<?php echo $workingDaysNum[$counter - 1] ?>">
<input class="form-control " id="filter-date" size="16" type="text" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</td>
<?php
}
}
echo '</tr>';
}
JQUERY CODE
$(function () {
<?php
foreach ($workingDaysNum as $workDay) {
echo '$(' . $workDay . ').datetimepicker({';
echo 'format: \'HH:mm\',';
echo 'stepping: 30';
echo '});';
}
?>
<?php
foreach ($workingDaysNum as $workDay) {
echo '$("' . $workDay . '").on("dp.change",function (e) {';
echo 'saveSpec1Modal("' . $workDay . '", $("' . $workDay . '").data(\'date\'))';
//echo 'console.log($("#'.$workDay.'").data(\'date\'))';
echo '});';
}
?>
});
Ditch the loops in the jQuery.
Instead of activating datetimepicker by ID, you have already given them all a class, so you can run it once instead of looping.
$(function () {
$('.datetimepicker').datetimepicker({
format: 'HH:mm',
stepping: 30
});
});
Same applies to the change function.

Get ID automatically in input-field after <SELECT> without button click

I have an SQL-database with many tables. Now I would like to create an input-form to be able to get data into the db without writing the entire sql-code every time. And this should work as follows:
All table names are listed in a drop-down menu. After having selected a table name, a new table with 4 columns is created automatically:
The first column of this table simply contains an increasing number.
The second column contains the field-names of the selected table.
In the third column there are empty input fields to enter the values for the database. Only in the third line (=product name) there is a drop-down menu with all product names from the main-table of the db.
The fourth column contains the data type (e.g. int or varchar)
All tables in the database have the same structure in the first 3 columns: the first column contains the table-id, the second column the foreign-key (=master_id) and the third column the product_name.
Up to this point, the script works well with the following 2 php-files (javasql.php and getuser.php):
javasql.php:
enter code here
<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
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 (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="" class="optdrugs">please select</option>
<?php
include("files/zugriff.inc.php"); // database Access
$sql = "SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE
TABLE_TYPE = 'BASE TABLE' AND TABLE_SCHEMA = 'product'";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_assoc($result)) {
echo '<option class="optdrugs" value="'. $row['TABLE_NAME'] . '">' .
$row['TABLE_NAME']. '</option>';
echo '<br>';
}
?>
</select>
</form>
<br>
<div id="txtHint"><b>Bitte Tabelle auswählen:</b>
<br>
<?php
if (isset($_POST["submit"])) {
$sent = $_POST['sent'];
$q = $_POST['tablename'];
$column_passed = unserialize($_POST['column']); // content of array
$column is passed from getuser.php
foreach ($_POST["insertvalue"] as $key => $value) {
echo $value . "<br>";
$werte[] = "'$value'";
}
$sql="INSERT INTO $q ($column_passed) VALUES (" .
implode(", ", $werte) . ")"; // data entry
mysqli_query($db, $sql);
if (mysqli_affected_rows($db) > 0) {
echo "<h3 style='color:blue'>successful</h3>";
} else {
echo "<h3 style='color:red'>not
successful</h3>";
}
}
?>
</div>
</body>
</html>
enter code here
getuser.php:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<form id="formdatabase" name="formdatabase" action="javasql.php"
method="post">
<input type="hidden" name="sent" value="yes">
<?php
$q = strval($_GET['q']);
$con = mysqli_connect('localhost','root','','product');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM $q";
$result = mysqli_query($con,$sql);
$numcols = mysqli_num_fields($result); // gets number of columns in result table
$field = mysqli_fetch_fields($result); // gets the column names from the result table
$data_type_array = array(
1=>'tinyint',
2=>'smallint',
3=>'int',
4=>'float',
5=>'double',
7=>'timestamp',
8=>'bigint',
9=>'mediumint',
10=>'date',
11=>'time',
12=>'datetime',
13=>'year',
16=>'bit',
252=>'text',
253=>'varchar',
254=>'char',
246=>'decimal'
);
$data_type_array = array_flip($data_type_array);
echo "<table>";
echo "<tr>";
echo "<th>" . 'Nr' . "</th><th>" . 'Column names' . "</th>
<th>" . 'Values for db-entry' . "</th><th>" . 'Type' . "</th>";
echo "</tr>";
echo "<tr>";
$nr = 1;
for($x=0;$x<$numcols;$x++):?>
<td><?= $nr; ?></td>
<td><?= $field[$x]->name; ?></td>
<?= $column[] = $field[$x]->name; ?>
<td>
<?php
if ($field[$x]->name == 'Name') { // if-Beginn
?>
<select name="insertvalue[<?= $x; ?>]" id="insertvalue<?=
$x; ?>" size="1" onchange = "javascript:getSelectedRow()">
<?php
include("files/zugriff.inc.php");
$sql = "SELECT * FROM product_main ORDER BY Name";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_assoc($result)) {
echo '<option class="optdrugs" value='. $row['Name'] . '>' .
$row['Name'] . '</option>';
echo '<br>';
}
?>
</select>
<?php
$name_option = "";
} else {
$name_option = "<input type='text' id='insertvalue" . $x . "'
name='insertvalue[" . $x . "]' size='50'>";
echo $name_option;
}
?>
</td>
<?php
$key = array_search($field[$x]->type, $data_type_array);
if($key !== false){
echo "<td>" . $key . "</td>";
}else{
echo "<td>" . $field[$x]->type . "</td>";
}
?>
<td><?= $field[$x]->type; ?></td>
<?= $nr = $nr + 1; ?>
</tr>
<?php endfor;
echo "</table>";
mysqli_close($con);
?>
<input type="hidden" name="tablename" value="<?= $q; ?>">
<input type="hidden" name="column" value="<?php echo htmlentities
(serialize($column)); ?>">
<input type="submit" value="Enter values" name="submit">
</form>
</body>
</html>
Since I need the master_id (= foreign key) in addition to the product-name for database entry, I would like to extend my script, so that the respective master_id is automatically sent to the input field in line 2, when a product-name is selected in line 3 ... without clicking a button. I tried to do this with javascript but it didn´t work. As far as I know, the solution would be to use AJAX but unfortunately, I am not very used to AJAX.
I would be more than happy, if someone could help me to solve this problem!

show/hide table in PHP code

I need to hide a table using if condition inside my following PHP code. I'm trying to use CSS for this but it seems CSS cannot read the if condition and it always runs and overrides.I want to implement it without taking table creation tags inside the if condition. Thanks
<?php
$arr=array(array(1,2,3,4,5),array(6,7,8,9));
foreach ($arr as $val)
{
echo '<table border="1" id="table1" align="center" style="float:center;">';
for($i=0;$i<sizeof($val);$i++)
{
echo '<tr><td>'.$val[$i].'</td></tr>';
if($val[$i]>5)
{?>
<style>
#table1 { visibility:hidden; }
</style>
<?php
}
else
{?>
<style>
#table1 { visibility: visible !important;}
</style>
<?php
}
}
echo'<br/>';
echo '</table>';
}
?>
<?php
$arr = array(array(1,2,3,4,5), array(6,7,8,9));
$id = 1;
?>
<html>
<head>
<style type="text/css">
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<?php
foreach($arr as $val) :
for($i = 0; $i < sizeof($val); $i++) :
if($val[$i] > 5) :
$hidden = true;
else :
$hidden = false;
endif;
endfor;
?>
<table border="1" id="table' . $id++ . '" align="center" class="<?php if($hidden) : ?>hidden<?php endif; ?>">
<?php for($i = 0; $i < sizeof($val); $i++) : ?>
<tr><td><?php echo $val[$i]; ?></td></tr>
<?php endfor; ?>
<br/>
</table>
<?php endforeach; ?>
</body>
</html>
I'm not completely sure why I am attempting to answer this. I'm not even sure which table you're trying to hide. You're also not creating a well defined relationship between the data in one table and the table that should be hidden based on the value of that data.
Your inline CSS isn't going to work as you're using the same ID multiple times. You can't do:
#table1 { visibility: hidden; }
#table1 { visibility: visible !important; }
The browser will apply the last rule to both tables. Instead use a CSS class that you generate in your loop.
.table-0 { visibility: hidden; }
.table-1 { visibility: visible !important; }
Something like this:
<?php
$arr = array( array( 1, 2, 3, 4, 5 ), array( 6, 7, 8, 9 ) );
$c = 0;
foreach ( $arr as $val ) {
$tClass = 'table-' . $c;
echo '<table border="1" class="' . $tClass . '" align="center" style="float:center;">';
for ( $i=0; $i < sizeof( $val ); $i++ ) {
echo '<tr><td>' . $val[ $i ] . '</td></tr>';
if ( $val[ $i ] > 5 ) {
?>
<style>.table-0 { visibility:hidden; }</style>
<?php
}
}
echo '<br>';
echo '</table>';
}
?>
Though this will get you what you want, there's still a lot to be desired. Mainly not injecting the CSS where you are - you're going to output a <style> for each value in the second array. Also, I'm pretty sure <style> is not an allowed child of <table>, the align and border attributes are depreciated and there is no float: center;.
I'm also wondering if you meant to use visibility: hidden; vs display: none;.
Consider doing something along these lines, could still use some improvement but better. We're not outputting more <style> than we need to.
<?php
$arr = array( array( 1, 2, 3, 4, 5 ), array( 6, 7, 8, 9 ) );
$c = 0;
$toHide = '';
foreach ( $arr as $val ) {
$tClass = 'table-' . $c;
echo '<table border="1" class="' . $tClass . '">';
for ( $i=0; $i < sizeof( $val ); $i++ ) {
echo '<tr><td>' . $val[ $i ] . '</td></tr>';
if ( $val[ $i ] > 6 ) {
$toHide = $tClass;
}
}
echo '<br>';
echo '</table>';
}
echo '<style>.' . $toHide . ' { visibility: hidden; }</style>';
?>
Some improvements could be to convert $toHide to an array and push each class into the array and then implode later if you had to handle multiple classes.

Sortable and hidden information through nested accordion in HTML/PHP page?

So i am trying to display data in sql server using PHP. I am using a sortable library i found online and this is my code:
echo "<table id='report' class='sortable'>";
echo "<thead><tr>";
echo "<th>A</th>";
echo "<th>B</th>";
echo "<th>C</th>";
echo "<th>D</th>";
echo "<th>E</th>";
echo "<th>F</th>";
echo "<th>G</th>";
echo "<th>H</th>";
echo "<th>I</th>";
echo "</tr></thead>";
echo "<tbody>";
for($i=0; $i<$tablerows; $i++)
{
echo "<tr>";
echo "<td>".$result[$i]['A']."</td>";
echo "<td>".$result[$i]['B']."</td>";
echo "<td>".$result[$i]['C']."</td>";
echo "<td>".$result[$i]['D']."</td>";
echo "<td>".$result[$i]['E']."</td>";
echo "<td>".$result[$i]['F']."</td>";
echo "<td>".$result[$i]['G']."</td>";
echo "<td>".$result[$i]['H']."</td>";
echo "<td>".$result[$i]['I']."</td>";
echo "<td><div class='arrow'></div></td>";
echo "</tr>";
echo "<tr>";
echo "<td colspan='5'>";
echo "<div id='nestedAccordion'>";
echo "<h2>COLUMN 1 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 2 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 3 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 4 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 5 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "</div>";
echo "</td>";
echo "</tr>";
When my page is loaded, it can be sorted by the A-I headings in <th> tag. As you can see, in my 'for' loop my last tag has an arrow. I want that so if the user wants more information about the row, he can view that by clicking that arrow, and information that will be displayed is in: <td colspan='5'>
Here is the javascript/jquery:
$(document).ready(function () {
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$(".arrow").click(function(){
$(this).parents("tr").next("tr").toggle();
$(this).toggleClass("up");
});
var parentDivs = $('#nestedAccordion div'),
childDivs = $('#nestedAccordion h3').siblings('div');
$('#nestedAccordion h2').click(function () {
parentDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
$('#nestedAccordion h3').click(function () {
childDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
});
The question and the problem i have is only either sortable for table or arrow will work. When i load the page, and i click on the arrow to view more information i can view it, but if i sort afterward, the data under the arrow is taken as its own row rather than part of the row it was selected from.
If i sort at start, and then click on arrow, the row below is hidden. I think the problem is in this chunk of code:
$(".arrow").click(function(){
$(this).parents("tr").next("tr").toggle();
$(this).toggleClass("up");
});
Since the next tr is for colspan? But how do i fix it?

Script to sequentially number form input fields

I have some fairly large forms who's inputs need to be sequentially numbered. I need the use the sequential number twice for each field, for example...
<label>Label for 17</label>
<textarea name="q[17]"><?=$dataarray['q17']?></textarea>
<label>Label for 18</label>
<input type="text" name="q[18]" value="<?=$dataarray['q18']?>">
<label>Label for 19</label>
<textarea name="q[19]"><?=$dataarray['q19']?></textarea>
Is it possible to replace each number with a script call that will add the numbers for me? The main issue I'm having is if I need to update the forms with new fields, I need to re-number every following input manually.
I can't use a php loop as the input types vary, and I have other text and labels etc between the fields.
You say "I can't use a loop". I doubt that actually, as you could do something like:
<?php for($i = 0; $i < $max; $i++):
<?php if($fieldtype == 'text'): ?>
<input type="text" .... />
<?php elseif($fieldtype == 'select'): ?>
<select name="name">
... options
</select>
<?php else: ?>
etc....
<?php endif; ?>
<?php endfor; ?>
But anyway, if you insist, you could do this:
<?php $num = 1; ?>
<label>Label for <?php echo $num; ?></label>
<textarea name="q[<?php echo $num; ?>]"><?=$dataarray['q'. $num++]?></textarea>
<label>Label for <?php echo $num; ?></label>
<input type="text" name="q[<?php echo $num; ?>]" value="<?=$dataarray['q'. $num++]?>">
etc..
The trick is the $num++, use it the last time you want to print out the 'current number'. It is a post-incrementor, meaning it will be incremented by 1 after it's used.
Sure, you can use a for() loop inside PHP as follows:
function outputFields($num, $values)
{
$html = '';
for($i = 0; $i < $num; $i++)
{
$html.= '<textarea name="q['.($i + 1).']">'.$values['q'.($i + 1)].'</textarea>';
}
return $html;
}
Now, you just need to echo the returned value of this function, and pass in the number of fields to be generated, and also include the $datearray variable as a parameter.
For example, to output 20 fields, you can use:
<?php echo outputFields(20, $datearray) ?>
Try with:
for ($i = 0; $i < 20; $i++) {
echo '<textarea name="q[' . $i . ']">' . $dataarray['q' . $i] . '"></textarea>';
}
You could
$max = 19; //Or whatever
for( $i = 0; $i <= $max; $i++){ ?>
<textarea name="q[<?php echo $i; ?>]"><?=$dataarray['q' . $i]?></textarea><?php
}
But you might be better doing a foreach over $dataarray. Depends on your data structures.

Categories

Resources