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.
Related
I have a PHP form to submit and I'm trying to get (vanilla) JavaScript to set the value of a hidden field. For some reason, the hidden field (deleteRowId) is coming through as blank. Any help would be much appreciated.
Here is my code:
<?php
if (isset($transcribercertifications)) {
echo form_open('user/deletecertification/' . $tid, 'id="deleteCert"');
echo '<table>';
$count = 0;
if ($transcribercertifications) {
foreach ($transcribercertifications as $transcribercertification) {
echo '<tr><td>' . $transcribercertification . '</td>';
echo '<input type="hidden" name="certification[' . $count . ']" id="certification[' . $count . ']" value="' . $transcribercertification . '">';
echo '<input type="hidden" id="deleteRowId" name="deleteRowId" value="">';
echo '</td><td title="Delete certification"><button data-row-id="' . $count . '" id="deleteCert" onclick="deleteRow(' . $count . ');">X</button></td></tr>';
$count++;
}
}
echo '</table>';
echo form_close();
}
?>
<script type="text/javascript">
function deleteRow(rowCount) {
event.preventDefault()
alert('This will delete the certification. Are you sure ?');
alert(rowCount); // This value comes through correctly.
document.getElementById('deleteRowId').value = rowCount;
document.getElementById('deleteCert').submit();
}
</script>
When the function gets called, deleteRowId is always blank. If there's another way to set the value of deleteRowId so the function knows which certification to delete, I would be interested in seeing that too.
First of all id="deleteRowId" must be unique
and you can use setAttribute method
worked exampe
<input type="hidden" value="111" id="uniqID1">
<input type="hidden" value="111" id="uniqID2">
<script>
let aaa = document.getElementById("uniqID1");
aaa.setAttribute('value',222);
console.log(aaa.value)
</script>
Id cannot repeat.
in foreach loop use as id="deleteRowId"'.$count.'"" id="deleteCert"'.$count.'""
foreach ($transcribercertifications as $transcribercertification) {
echo '<tr><td>' . $transcribercertification . '</td>';
echo '<input type="hidden" name="certification[' . $count . ']" id="certification[' . $count . ']" value="' . $transcribercertification . '">';
echo '<input type="hidden" id="deleteRowId"'.$count.'"" name="deleteRowId"'.$count.'"" value="">';
echo '</td><td title="Delete certification"><button data-row-id="' . $count . '" id="deleteCert"'.$count.'"" onclick="deleteRow(' . $count . ');">X</button></td></tr>';
$count++;
}
and in JS function
getElementByID('deleteRowId'+rowCount).
getElementByID('deleteCert'+rowCount)
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!
I have created two select boxes each have different country names with flag images using select2 plugin and values are fetching from Database below is the code.
JS CODE
$(".currencyconverterselect").select2({
templateResult: addflag,
templateSelection: addflag
});
function addflag(opt) {
if (!opt.id) {
return opt.text;
}
var $opt = $(
'<span><img src="./img/flags/' + $(opt.element).attr('data-country-code') + '.png" class="userPic" /> ' + $(opt.element).text() + '</span>'
);
return $opt;
};
HTML CODE
<label style="color:white">Currency from</label>
<select name="fromcurrency_cc" id="fromcurrency_cc" class="form-control charts_currency" style="width:100%" required="required">
<?php
$sql = "SELECT fc.country_id,fc.code,fc.name,cc.country_code AS countrycode FROM fx_currency fc LEFT JOIN fx_country cc ON fc.country_id = cc.id ";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
if ($row['code'] == 'AED')
{ ?>
<option data-country-code='<?php echo $row['countrycode']; ?>' value="<?php echo $row['code']; ?><?php echo $row['countrycode']; ?>" selected>
<?php echo $row['name']; ?>(
<?php echo $row['code']; ?> )</option>
<?php } else { ?>
<option data-country-code='<?php echo $row['countrycode']; ?>' value="<?php echo $row['code']; ?><?php echo $row['countrycode']; ?>">
<?php echo $row['name']; ?>(
<?php echo $row['code']; ?> )</option>
<?php }}
} else {
echo "0 results";
}
?>
</select>
I have also created a button below is the code
</i>
I want to swap the value of FROM currency to TO Currency and vice versa by clicking the button.
I have tried below code
$("#swapvalues_btn1").on('click', function() {
var pickup = $('#fromcurrency_cc').val();
$('#from').val($('#tocurrency').val());
$('#to').val(pickup);
});
Select2 will listen for the change event on the that it is attached to. If you make any external changes that need to be reflected in Select2 (such as changing the value).
Just use below code
$("#swapvalues_btn1").on('click', function() {
var fromcurrency = $('#fromcurrency').val();
var tocurrency = $('#tocurrency').val();
$('#fromcurrency').val(tocurrency).trigger('change');
$('#tocurrency').val(fromcurrency).trigger('change');
});
For More follow the link
https://select2.github.io/options.html#events
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
}
}
I have a table with 3 select option values; airdate_year, airdate_month, and airdate_day. Also a hidden field called episode_airdate[] to store all 3. The problem here is that the table tr is cloned using javascript therefore the values are not being sent to episode-airdate properly, any thoughts?
This is the script I use to combine the 3 select values to make the value for the hidden field.
<script>
function datepopulate(){
var day = document.getElementById('airdate_day').value;
var month = document.getElementById('airdate_month').value;
var year = document.getElementById('airdate_year').value;
var completedate = day+'-'+month+'-'+year;
document.getElementById('episode_airdate[]').value = completedate;
alert(document.getElementById('episode_airdate[]').value);
return true;
}
</script>
The php
<table id="template" style="display: none;" cellpadding="0px 20px" cellspacing="0px 20px">
<tr class="line">
<td width="100%">
<p>
<label><?php _e('Season:'); ?></label>
<?php
for($i=1; $i<=50; $i++)
$season_nums[]=$i;
echo '<select name="episode_season[]" select id="episode_season[]" class="season regular-text" style="width:50px; float:left; margin-right:10px;">';
echo '<option value="">' . __("0" ) . '</option>';
foreach($season_nums as $season_num){
$selected = '';
echo '<option value="' . $season_num . '" ' . $selected . '>' . $season_num . '</option>';
}
echo '</select>';
?>
</p>
<label><?php _e('Episode:'); ?></label>
<p>
<?php
for($i=1; $i<=50; $i++)
$episode_nums[]=$i;
echo '<select name="episode_number[]" select id="episode_number[]" class="number regular-text" style="width:50px; float:left;">';
echo '<option value="">' . __("0" ) . '</option>';
foreach($episode_nums as $episode_num){
$selected = '';
echo '<option value="' . $episode_num . '" ' . $selected . '>' . $episode_num . '</option>';
}
echo '</select>';
?>
</p>
<label><?php _e('Title:'); ?></label>
<p>
<input type="text" name="episode_title[]" id="episode_title[]" value="" class="title regular-text" style="width:400px;" />
</p>
<label><?php _e('Airdate'); ?></label>
<p>
<script>
function datepopulate(){
var day = document.getElementById('airdate_day').value;
var month = document.getElementById('airdate_month').value;
var year = document.getElementById('airdate_year').value;
var completedate = day+'-'+month+'-'+year;
document.getElementById('episode_airdate[]').value = completedate;
alert(document.getElementById('episode_airdate[]').value);
return true;
}
</script>
<?php
for($i=1910; $i<=2012; $i++)
$years[]=$i;
echo '<select id="airdate_year" onChange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;">';
echo '<option value="">' . __("2012" ) . '</option>';
foreach($years as $year){
$selected = '';
echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>';
}
echo '</select>';
for($i=1; $i<=12; $i++)
$months[]=$i;
echo '<select id="airdate_month" onChange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;">';
echo '<option value="">' . __("0" ) . '</option>';
foreach($months as $month){
$selected = '';
echo '<option value="' . $month . '" ' . $selected . '>' . $month . '</option>';
}
echo '</select>';
for($i=1; $i<=31; $i++)
$days[]=$i;
echo '<select name="airdate_day" id="airdate_day" onChange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;">';
echo '<option value="">' . __("10" ) . '</option>';
foreach($days as $day){
$selected = '';
echo '<option value="' . $day . '" ' . $selected . '>' . $day . '</option>';
}
echo '</select>';
?>
<input type="hidden" name="episode_airdate[]" id="episode_airdate[]" class="airdate regular-text" value="">
</p>
<p>
<label><?php _e('Plot:'); ?></label>
<textarea name="episode_plot[]" id="episode_plot[]" class="plot regular-text"value="" cols="100%" rows="10" tabindex="4" ><?php echo $_POST['episode_season'] ?></textarea>
</p>
</td>
<td width="10%" class="commands">
<a rel="delete" class="button">-</a> <a rel="add" class="button">+</a>
</td>
</tr>
</table>
<table id="attachments" style="border-spacing: 0px 30px;">
</table>
<script>
(function($)
{
lines = 0;
function items_init()
{
<?php $episodes = get_post_meta($post->ID, 'episodes', true) ?>
<?php if ( empty($episodes) ) : ?>
items_add();
<?php else: ?>
<?php
// Get serialized data
$episodes = unserialize($episodes);
// Compare episode numbers
function compare_number($a, $b) {
if ($a['season'] == $b['season']) {
return $b['number'] - $a['number']; }
return strnatcmp($b['season'], $a['season']);
}
// Sort by episode number
usort($episodes, 'compare_number');
// Show episodes
foreach ($episodes as $episode) :
?>
items_add({
title: '<?php echo base64_decode($episode['title']) ?>',
airdate: '<?php echo $episode['airdate'] ?>',
season: '<?php echo $episode['season'] ?>',
number: '<?php echo $episode['number'] ?>',
plot: '<?php echo base64_decode($episode['plot']) ?>',
});
<?php endforeach ?>
<?php endif ?>
// Delete the "-" button in first row
$('#attachments tr:first-child .commands a[rel="delete"]').remove();
}
function items_add()
{
obj = $('#template tr').clone().appendTo('#attachments');
lines++;
if (arguments.length > 0) {
options = arguments[0];
$('.title', obj).val( options.title );
$('.airdate', obj).val( options.airdate );
$('.season', obj).val( options.season );
$('.number', obj).val( options.number );
$('.plot', obj).val( options.plot );
}
}
$('#attachments').delegate('.commands a', 'click', function()
{
var action = $(this).attr('rel');
var confirm_delete = true;
// Add action
if ('add' == action) {
items_add();
}
// Delete action
if ('delete' == action) {
// La TR en la tabla
var oTr = $(this).parent().parent();
var episode_name = $('.title', oTr).val();
var episode_airdate = $('.airdate', oTr).val();
var episode_season = $('.season', oTr).val();
var episode_number = $('.number', oTr).val();
var episode_plot = $('.plot', oTr).val();
if (episode_name != '' || episode_number != '' || episode_plot != '') {
if ( !confirm('Are you sure you want to delete ' + episode_name + '?') ) {
confirm_delete = false;
}
}
if (confirm_delete) {
oTr.next().remove(); oTr.remove();
lines--;
}
}
});
$(document).ready(function()
{
items_init();
});
})(jQuery);
</script>
Since the document contains multiple episode_airdate[] elements, you can't use document.GetElementById, but you can use a different selector. Looking at how the DOM is structured, it seems airdate_year, airdate_month, and airdate_day are all siblings of the target element. So in this case the JQuery nextAll function should work: http://api.jquery.com/category/traversing/
$(this).nextAll("#episode_airdate[]").attr('value', completedate);
alert($(this).nextAll("#episode_airdate[]").attr('value'));