I would like to create a knockout setup that will allow the user to select a subset of one list into another list. I select items in the first list using jquery UI selectable. When the selection runs, I push the data from the selected item into a second observable array. I have a tag which is bound to that second array, but it doesn't seem to update when I do the push.
Here's my code
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.min.css"></link>
<style>
.ui-selected
{
border: 1px dotted red;
}
</style>
<script type="text/javascript" src="knockout-2.3.0rc.js"></script>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
function init()
{
function AppViewModel()
{
this.cars = ko.observableArray(
[
{year: 2004, make: "Chevy", model: "Malibu"},
{year: 1995, make: "Honda", model: "Civic"},
{year: 2004, make: "Chevy", model: "Malibu"},
{year: 1985, make: "Honda", model: "Civic"},
{year: 1984, make: "Chevy", model: "Malibu"},
{year: 1960, make: "Ford", model: "Ram"}
]);
this.selectedCars = ko.observableArray();
this.test=ko.observable("Bob");
}
ko.applyBindings(new AppViewModel());
$("#cars tbody").selectable(
{
filter: "tr",
selected: function( event, ui )
{
var selectedCarRow = ui.selected;
var bindingContext = ko.contextFor(selectedCarRow);
var observableCarData = ko.dataFor(selectedCarRow);
bindingContext.$parent.selectedCars().push(observableCarData.make);
//alert(bindingContext.$parent.selectedCars().length);
//alert(bindingContext.$parent.test());
}
});
}
</script>
</head>
<body onload="init()">
<table id="cars">
<thead><tr><th>Year</th><th>Make</th><th>Model</th></tr></thead>
<tbody data-bind="foreach: cars">
<tr>
<td data-bind="text:year"></td>
<td data-bind="text:make"></td>
<td data-bind="text:model"></td>
</tr>
</tbody>
</table>
<ul data-bind="foreach:selectedCars">
<li data-bind="text:$data"></li>
</ul>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</body>
</html>
For the most part your code is correct. There is one small issue though. In the selectable selected function you write bindingContext.$parent.selectedCars().push this pushes the object into the standard array and not the observable array. To push into the observable array where these changes will fire knockout events you would drop the () on the array object.
bindingContext.$parent.selectedCars.push(observableCarData.make);
Example Fiddle: http://jsfiddle.net/n27QL/1/
Related
i am creating a simple crud system for my studies. I am a beginner of Asp.net MVC.i am tring to load the data from the database but i could do the task.what i tried so far i attached below. i am created database which name is skill and have a table course tried to load it dataTable.while run the progam i got the error of
Error
Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (Index:81)
at e (jquery-3.4.1.min.js:2)
at t (jquery-3.4.1.min.js:2)
Controller page
public ActionResult Index()
{
return View();
}
public ActionResult GetSkill()
{
using (skillEntities sk = new skillEntities())
{
var course = sk.courses.OrderBy(a => a.id).ToList();
return Json(new { data = course }, JsonRequestBehavior.AllowGet);
}
}
View Page
#{
ViewBag.Title = "Home Page";
}
<html>
<head>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<div style="width:90%; margin:0 auto" class="tablecontainer">
<a class="popup btn btn-primary" href="/home/save/0" style="margin-bottom:20px; margin-top:20px;">Add New Employee</a>
<table id="myDatatable">
<thead>
<tr>
<th>ID</th>
<th>Course Name</th>
<th>Fee</th>
</tr>
</thead>
</table>
</div>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
var oTable = $('#myDatatable').DataTable({
"ajax": {
"url": '/home/GetSkill',
"type" : "get",
"datatype": "json"
},
"columns": [
{ "data": "id", "autoWidth": true },
{ "data" : "coursename", "autoWidth" : true},
{ "data": "fee", "autoWidth": true }
]
})
})
</script>
</body>
</html>
you have included jquery library twice, try removing below line, use min.js only
<script src="~/Scripts/jquery-3.4.1.js"></script>
I have created a table which is draggable and droppable using jQuery and I have also created textbox, which is draggable. When my textbox is dropped on a table cell, I want the cell to adjust its size according to the size of the textbox. Is this possible? Please help?
This is the code I have tried:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('input').draggable({
cancel: null
});
$('tr>td').droppable({
drop: function(event, ui) {
$(this).html('droped');
}
});
$('table').draggable({
cancel: null
});
});
</script>
<input type="text" id="draggable"></input>
<table id="droppable" border="1" style="height: 100px;width: 200px">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
This can be done like so:
https://jsfiddle.net/dqg2r6xx/
jQuery
$(document).ready(function() {
$('input').draggable({
cancel: null
});
$('#droppable td').droppable({
accept: "input",
drop: function(event, ui) {
$(this).html('droped');
}
});
$('table').draggable({
cancel: null
});
});
Problem here is that it does not attach to the table. So if you move it around, the input is still in position.
In regards to the sizing, it's adjusting the cell but not the table size. The input is wider than 100px so it stretches the cell to it's max and can do no more.
i am starting to learn to use angular's ui bootstrap library and trying to get a popover working. Am i missing something in my setup?
i've provided a plunker example. my requirement is to have a popover over cells in a table that gets refreshed by $interval every second.
http://plnkr.co/edit/hF3EDIRfKA1VOfSennZq?p=preview
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>angular-test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
var app = angular.module("test", ['ngAnimate', 'ui.bootstrap']);
app.controller("testCtrl", function($scope, $interval) {
var stats = [{
"name": "john",
"stat1": 3,
"stat2": 5
}];
var count = 0;
$scope.getTestInfo = function() {
$scope.count = count++;
$scope.stats = stats;
}
$interval(function(){$scope.getTestInfo();}, 1000);
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" ng-controller="testCtrl" ng-init="count=0">
<table id="table1" class="table table-hover table-condensed">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody class="bg-info">
<tr ng-repeat="stat in stats">
<td uib-popover="testcolumn1">{{stat.name}}</td>
<td uib-popover="{{stat.stat1}}">{{stat.stat1 + count}}</td>
<td uib-popover="testcolumn3">{{stat.stat2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
You just need to add the metadata (popover-trigger etc.) for the popover modal. I forked your plunkr to demonstrate. http://plnkr.co/edit/d1eAf2NEAA9mCXmNN5LC?p=preview
I am using GGTS: 3.6.4,
Grails: 2.4.4
jdk 1.7.51
google-visualization:1.0
I am trying to pass data from a domain class to my view to display a map using the Google Visualization plug-in. I believe I am passing this data to my GSP incorrectly. I can make the data render on screen, in text, in the acceptable format, please see my GSP for def mapData.
When I use
def mapData =[<g:each in="${places}" var="place" status="i">[${place.lat}, ${place.lon}, "${place.name }"],</g:each>]
I get this error:
Message:Attribute value quote wasn't closed (elementId="map" columns= "${mapColumns}" data= "[
Any tips on how I can change my GSP to get the data from my domain class?
Domain Class:
package zmapapp
class ThingLoc {
String name
Float lat
Float lon
static constraints = {
lat()
lon()
name()
}
}
Controller:
package zmapapp
class ThingLocController {
def scaffold = true
def map (){
def places = ThingLoc.list()
[places: places]
}
}
GSP:
<html>
<head>
<title>Google Visualization API plugin</title>
<meta name="layout" content="main" />
<gvisualization:apiImport/>
</head>
<body>
<%
def mapColumns = [['number', 'Lat'], ['number', 'Lon'], ['string', 'Name']]
def mapData = [[37.4232, -122.0853, 'Work'], [37.4289, -122.1697, 'University'], [37.6153, -122.3900, 'Airport'], [37.4422, -122.1731, 'Shopping']]
%>
<script type="text/javascript">
function selectHandler(e) {
alert('A table row was selected');
}
function readyHandler(e) {
console.log('Table is ready');
}
</script>
<h2>See Map Below </h2>
<gvisualization:map elementId="map"
columns= "${mapColumns}"
data= "${mapData}" />
<table cellpadding="2" cellspacing="0">
<td>
Map
</td>
<td>
<div id="map" style="width: 400px; height: 300px"></div>
</td>
</tr>
</table>
[<g:each in="${places}" var="place" status="i">[${place.lat}, ${place.lon}, "${place.name }"],</g:each>]
</body>
I ended up not using the def mapColumns or mapData and instead used the google syntax found here: https://developers.google.com/chart/interactive/docs/gallery/map
here's my update gsp:
<html>
<head>
<title>Dat Map tho</title>
<meta name="layout" content="main" />
<gvisualization:apiImport/>
<script type="text/javascript">
google.load('visualization', '1', { 'packages': ['map'] });
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
<g:each in="${places}" var="place" status="i">[${place.lat}, ${place.lon}, "${place.name }"],</g:each>
]);
var options = { showTip: true };
var map = new google.visualization.Map(document.getElementById('chart_div'));
map.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div"></div>
<br><br>
Map Visualization Information
</body>
</html>
I'm about to try and implement the JQuery slider into an old Classic ASP store, where the slider would control the price range. So have a price between say $40 and $80 and you could use the slider to go between $50 and $60...
Anyone know of any examples of using the slider with ASP in this way? I'm guessing I store the values in hidden values, and then make the page post the values async back on itself?
Thanks
the slider gives you the chance to add a minimum, maximum values as well the a step...
try this code below and implement it in your ASP code
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#slider { margin: 10px; width: 300px; }
body { font-size: 20px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("pre a").bind("click", function() { // show current hidden value
alert($("#prdRange").val());
});
$("#slider").slider({
min: 40, // minimum amount
max: 80, // maximum amount
step: ((80 - 40) / 10), // steps ...
slide: function(event, ui) { // fire this when change
$("#lbl").text(ui.value + ",00 €");
$("#prdRange").val(ui.value);
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
<span id="lbl">40,00 €</span>
<input type="hidden" id="prdRange" value="40" />
<pre>min: 40 Euros, max: 80 Euros, range chosen</pre>
</body>
</html>
all you have to do is change the values with the asp value when you load the page like
$("#slider").slider({
min: <%= ProductMinValue %>, // minimum amount
max: <%= ProductMaxValue %>, // maximum amount
step: <%= ProductStepValue %>, // steps ...
slide: function(event, ui) { // fire this when change
$("#lbl").text(ui.value + ",00 €");
$("#prdRange").val(ui.value);
}
});
see this code live in JSBin (you can edit it by adding /edit to the URL...)
This answer is for Ajaxing the base code...
Procedure:
The output for the slider changed. It now loads a productList.asp passing the value from the slider.
The productList.asp is a simple ASP page that picks up the Query String "value" and build a table of products using that value.
Right now it only get the QueryString and populates the 4 products with that value.
Code:
slider.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<style type="text/css">
#slider { margin: 10px; width: 300px; }
#lbl { font-size: 22px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("pre a").bind("click", function() { // show current hidden value
alert($("#prdRange").val());
});
$("#slider").slider({
min: 40, // minimum amount
max: 80, // maximum amount
step: ((80 - 40) / 10), // steps ...
slide: function(event, ui) { // fire this when change
var newValue = ui.value;
$("#lbl").text(newValue + ",00 €");
$("#prdRange").val(newValue);
$("#prdList").load("productList.asp #prdTableList", { 'value' : newValue }, function(){
//alert("products in range of " + newValue + ",00 € loaded");
});
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
<span id="lbl">40,00 €</span>
<input type="hidden" id="prdRange" value="40" />
<pre>min: 40 Euros, max: 80 Euros, range chosen</pre>
<div id="prdList"></div>
</body>
</html>
productList.asp
<%
Dim newValue
newValue = Request("value") & ",00 €"
%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="prdTableList">
<table style="width:100%;">
<tr>
<td style="width:50%;">Product</td>
<td>Price</td>
</tr>
<tr>
<td><a href="#">PRD 001<a></td>
<td><%= newValue%></td>
</tr>
<tr style="background-color:#ccc;">
<td><a href="#">PRD 002<a></td>
<td><%= newValue%></td>
</tr>
<tr>
<td><a href="#">PRD 003<a></td>
<td><%= newValue%></td>
</tr>
<tr style="background-color:#ccc;">
<td><a href="#">PRD 004<a></td>
<td><%= newValue%></td>
</tr>
</table>
</div>
</body>
</html>
Note: I'm only loading the #prdTableList output (load("productList.asp #prdTableList"...), and not the entire productList.asp page, so there will be no problem to have HTML tags and is a good way to debug, because all we need to do in that page is call it with the value query string like:
productList.asp?value=47
Output:
alt text http://www.balexandre.com/temp/2009-05-22_1311.png
Sure, just use the jQuery Slider: http://docs.jquery.com/UI/Slider or any of the sliders found with The Google. http://www.keepthewebweird.com/demo/slider/