I'm trying to echo out value from database with php for selectize.js.
Html code
<select id="type" placeholder="Type" name="type" required>
<!-- This option help to selected value from DB -->
<!--<option value="<?php echo $dataFromDB['type'] ?>" selected></option>-->
</select>
<button id="someType">Add Option</button>
Js code (example from selectizejs (with change))
var $select = $('#type').selectize({
maxItems: 1,
valueField: 'id',
labelField: 'days',
searchField: 'days',
options: [{
id: '1',
days: '5 days'
}, {
id: '2',
days: '2 days'
}, {
id: '3',
days: '1 days'
}],
create: true
});
var control = $select[0].selectize;
$('#someType').on('click', function () {
control.addOption({
id: '4',
days: 'New Days'
});
});
How to automatically add option from database value and set as selected option?
jsfiddle link
Note: I could echo out the value to option if there's a match between database value and options value.
Thanks in advanced.
Like this? http://jsfiddle.net/2zyp8jxn/1/
control.setValue("4");
Create a variable with php:
$php_test = "control.addOption({
id: '".$dataFromDB['type']."',
hari: '".$dataFromDB['type']."'
});
control.setValue('".$dataFromDB['type']."');
";
and add this jquery code
var control = $select[0].selectize;
$(function() {
<?php echo 'var someOptions ='. $php_test ?>
});
I dont know if create a variable someOptions is necessary or not but it works for me.
Thanks
Related
I wanted to create a highchart using a dropdown and the selected value should be used in the where clause in a select statement. But if I click on the button then the chart is printed but with no values (e.g. dbsize, or timestamp...). If I change the $db variable to "postgres" or something like that, the chart will be printed normally.
Here is the html code:
<iframe name="hideframe" id="hideframe" style="display: none;"></iframe>
<form action="printchart.php" method="post" target="hideframe" >
<div class="dropdown" >
<select class="form-control" name="thenumbers" >
<option value="postgres">postgres</option>
<option value="template1">template1</option>
<option value="testdb">testdb</option>
</select>
</div>
<button name="Button5" id="Button5">click</button>
<div id="container" style="height: 400px; min-width: 310px">
<?php include("printchart.php"); ?>
</div>
And here is the printchart.php File including js for highchart:
<?php
require("00connection.php");
$db = $_POST['thenumbers'];
//$db = "postgres";
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$('#Button5').click(function () {
$(document).ready(function() {
var options ={
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'x',
setSize: 400
},
title: {
text: "DB-Size"
},
xAxis: {
categories: [
<?php
$sql = $conn->query("SELECT dbname,dbsize, epoch_time FROM dbstats WHERE dbname = '$db' ORDER BY epoch_time;")->fetchAll();
foreach ($sql as $row) {
?> '<?php //echo (date('Y-m-d h:i:sa',$row['epoch_time']))
$date = $row['epoch_time'] / 1000;
echo (date('Y-m-d H:i', $date)) ?>',
<?php
}
?>
],
title: {
text: "Datetime"
},
type:'datetime',
labels: {
format: '{value:%Y-%m-%d %H:%M}',
}
},
yAxis: {
title: {
text: 'DB-Size'
}
},
rangeSelector: {
enabled: true,
inputEnabled: false,
buttonPosition: {
allign: 'left'
},
labelStyle: {
display: 'none'
},
buttons: [{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 3,
text: '3m'
}
]
},
tooltip: {
//crosshairs: true,
shared: true,
valueSuffix: 'MB',
xDateFormat: '%Y-%m-%d %H:%M'
},
series: [{
name: 'DB-Size',
data: [
<?php
$sql = $conn->query("SELECT dbname, dbsize, epoch_time FROM dbstats WHERE dbname = '$db' ORDER BY epoch_time;")->fetchAll();
foreach ($sql as $row) {
?>
<?php echo $row['dbsize'] ?>,
<?php
}
?>
]
}]
};
var chart = new Highcharts.Chart(options);
});
});
</script>
The sql statements are executed normally in both cases (if i get the value using $_POST from the form or if I create a variable and initialize it with postgres (like $db="postgres") but if I assing $db=$_POST['thenumber'] then the chart will not be printed although the select statements are executed.
I hope anybody can help me :)
Here is the image:
highcharts_img
Best regards
I have a filter drop down for some tabular data that reads data from a local storage item, the select tag is shown below, and below that is the code to add items to the select tag and the model for the filter.
The issue is that whilst the data filtered is correct when you refresh the page, the selected item only shows the correct value if the local storage value is true.
No matter what value the local storage item is selected="selected" is always added to the "Excluded from Search" option.
Can't for the life of me work out why, any help advice appreciated.
<select class="form-control form-control-sm" ng-model="filterSearch" ng-change="setFilterS()" id="theFilterS" >
<option ng-selected="{{option.value == filterSearch}}" ng-repeat="option in filterSearchOptions" value="{{option.value}}" >{{option.DisplayName}}</option>
</select>
$scope.filterSearch = localStorage.getItem("FilterSearch");
$scope.filterSearchOptions = [{
value: '',
DisplayName: 'All',
}, {
value: 'false',
DisplayName: 'Included in Search',
}, {
value: 'true',
DisplayName: 'Excluded from Search',
}];
You should try with the ng-options directive which IMO gives a simpler approach then ng-repeat
angular.module('app',[]).controller('testCtrl',function($scope){
$scope.filterSearch = 'true';
$scope.filterSearchOptions = [{
value: '',
DisplayName: 'All',
}, {
value: 'false',
DisplayName: 'Included in Search',
}, {
value: 'true',
DisplayName: 'Excluded from Search',
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="testCtrl">
<select
class="form-control form-control-sm"
ng-model="filterSearch"
ng-change="setFilterS()"
id="theFilterS"
ng-options="option.value as option.DisplayName for option in filterSearchOptions">
</select>
{{filterSearch}}
</div>
I have the follow ajax code (using jquery and x-editable plugin) for updating a select field.
<a href="#" id="days" data-pk="<?php echo $id; ?>" data-url="post.php" data-title="days" data-type="select" class="editable editable-click">
<?php
if (!empty($days)) { echo $days;
} else { echo "Please Select";
}
?>
</a>
<script>
$(function() {
$('#days').editable({
source : [{
value : '',
text : 'Please select'
}, {
value : '1',
text : '1 day'
}, {
value : '30',
text : '1 month'
}, {
value : '360',
text : '1 year'
}]
});
});
</script>
After field is updated, it displays the select text '1 day', '1 month' or '1 year' as the way I want.
But after a page refresh, it displays the select value, as '1', '30' or '360'.
What I need to do display the text from select?
Thank you!!!
To remember and display the option user selects you need to store it in session variable in ajax call.
Sample high level example:
$.ajax{(
url:../store.php,
data: optionselected:selected,
method:post
});
In store.php set it to a session variable and use this for display while user reloads page.
I am using a jquery calendar that looks like this:
$(document).ready(function () {
$('#calendar').eCalendar({
weekDays: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
months: ['Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre'],
textArrows: {previous: '<', next: '>'},
eventTitle: 'Evenements',
url: '',
events: [
{ title: 'title', description: 'description', datetime: new Date (2015,07,01)}
]});
});
</script>
To get the events, I connect to a mysql database and store the result in a php variable such as:
$event={ title: 'title', description: 'description', datetime: new Date: (2015,07,01)};
I can't figure out how to put this $event into the jquery script so that it reads it.
I tried for exemple:
$(document).ready(function () {
$('#calendar').eCalendar({
........
........
events: [
<?php echo $event ?>
]});
});
Which doesn't work. Any idea?
Thanks
You have to be sure that $event is a string.
I bet it is an array, please provide a vardump($event);to be sure of that.
If it is an array, try this in place of <?php echo $event; ?>;:
<?php echo serialize($event); ?>;
Perhaps the problem is an error, excess colon after new Date:
$event="{ title: 'title', description: 'description', datetime: new Date: (2015,07,01)};"
I am working with Cakephp 2.4, Select2 3.4 and Jquery 1.10.
In my app, I have a table with 3 columns - product code, product description and product price.
I have Select2 set up so that the user can select either via product code or via product description. What I want to achieve is:
if the users selects via product code, set the product description and price and if he selects via description, set product code and price.
My data gets returned as follows:
[{"id":1,"text":"10001","description":"Test Product Name","unitPrice":"1.25"}, {"id":2,"text":"10002","description":"product 2","unitPrice":"5.00"}, {"id":3,"text":"10003","description":"Product 3","unitPrice":"2.74"}]
I am able to set the value of the second select2 box using plain jQuery:
$(".productCode").on('change', function (product){
$(".description").select2("data", {id: '1', text: 'Test'});
});
What do I have to use to set the .description select2 value to the "description" value returned?
You forget initialize the select elements. Do it like this:
<!DOCTYPE html>
<html>
<head>
<title>jquery select2 test</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<link href="select2/select2.css" rel="stylesheet"/>
<script src="select2/select2.js"></script>
</head>
<body>
<input type="hidden" class="productCode" />
<select class="description" >
</select>
<script type="text/javascript">
$(document).ready(function() {
var $productCode = $(".productCode"),
$description = $(".description"),
product = [{"id":1,"text":"10001","description":"Test Product Name","unitPrice":"1.25"},{"id":2,"text":"10002","description":"product 2","unitPrice":"5.00"},{"id":3,"text":"10003","description":"Product 3","unitPrice":"2.74"}];
//should initilize two select first
$productCode.select2({
'placeholder' : 'input to search',
"width" : '200px',
"query": function(query){
var data = {results: product};
query.callback(data);
}
});
$description.select2({
'width' : '200px'
});
$productCode.on('change', function (product){
$description.select2("data", {id: '1', text: 'Test'});
});
});
</script>
</body>
</html>
If you use hidden inputs to back your Select2 controls, like this:
<input type="hidden" class="product" id="productCode" data-text="text" data-placeholder="code" />
<input type="hidden" class="product" id="description" data-text="description" data-placeholder="description" />
<input type="hidden" class="product" id="unitPrice" data-text="unitPrice" data-placeholder="unit price" />
And you have data like this:
var PRODUCTS = [
{ id: 1, text: '10001', description: 'Product 1', unitPrice: '1.25' },
{ id: 2, text: '10002', description: 'Product 2', unitPrice: '5.00' },
{ id: 3, text: '10003', description: 'Product 3', unitPrice: '2.74' }
];
You can populate your Select2 controls using the "data" option, like this:
$('.product').each(function() {
var $this = $(this);
$this.select2({
allowClear: true,
data: { results: PRODUCTS, text: $this.attr('data-text') }
});
});
And you can use the Select2 "val" function to get and set the values, like this:
$('.product').change(function() {
var selecteId = $(this).select2('val');
$('.product').select2('val', selecteId);
});
jsfiddle demo