I'm just starting to use Kendo UI and I'm having trouble getting one of the demos to work. I get Uncaught TypeError: Cannot read property 'observable' of undefined on line 43. How can I fix this? Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="./styles/kendo.common.min.css" rel="stylesheet" />
<script src="./js/jquery.min.js"></script>
<script src="./js/angular.min.js"></script>
<script src="./js/kendo.core.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-header">
<div class="box-col" style="width: 300px">
<h4>Change the value</h4>
<input data-role="slider"
data-min="0"
data-max="50"
data-small-step="5"
data-large-step="10"
data-bind="visible: isVisible,
enabled: isEnabled,
value: selectedNumber,
events: { change: onChange }"
style="width: 180px">
</div>
<div class="box-col console-section">
<h4>Console</h4>
<div class="console"></div>
</div>
</div>
<div class="box">
<div class="box-col" style="width: 300px">
<h4>Configuration</h4>
<div>
<label><input type="checkbox" data-bind="checked: isEnabled">Enable</label>
</div>
<div>
<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
</div>
</div>
</div>
<script>
var viewModel = kendo.observable({
selectedNumber: 0,
isEnabled: true,
isVisible: true,
onChange: function() {
kendoConsole.log("event :: change (" + this.get("selectedNumber") + ")");
}
});
kendo.bind($("#example"), viewModel);
</script>
</div>
</body>
</html>
You must have a script that is not loading. My guess is that your pathing is wrong. Be aware that when your href and src start with ./ that means look for a subdirectory of the current directory. There is a good chance you don't want the dot there.
I was able to recreate your example successfully here: http://jsfiddle.net/95w1e3s3/
You need to include kendo.all.min.js instead of kendo.core.min.js. It appears that .observable is not defined, so perhaps you need another script to bring in that part of the kendo framework or MVVM binding is not supported on the free version.
kendo.core.min.js has not observable property.
You have to add kendo.binder.min.js, kendo.data.min.js or kendo.all.min.js.
You can try fo this:
check your "jquery.min.js" version compatibility with kendo version. this might be the issue in you case.
most of the time you can use jquery 1.8 version with kendo 2015.x.x version
Related
I have searched stackoverflow but I couldn't find a solution for my case.
I am doing a simple interactive visualization with D3. I want to include a range slider for users to select a range. Then create a filter function that filters the data based on the selected range and updates the visualization. The range slider just does not show up in my browser (both Chrome and Safari).
Relevant code:
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="layout">
<div id="title">
<p>Stocks Scatterplot</p>
</div>
<div id="visualization">
<div id="controls">
<!--create the sliders here-->
<p>Assists</p>
<div id="assists" class="d3-slider"></div>
<label for="assistamount">Assists range:</label>
<input type="text" id="assistamount" readonly style="border:0; color:#f6931f;
font-weight:bold;">
</div>
</div>
</div>
</body>
jQuery:
$(function() {
$("#assits").slider({
range: true,
min: 0,
max: maxAssists,
values:[0,maxAssists],
slide: function(event, ui) {
$("#assistamount").val(ui.values[0]+"-"+ui.values[1]);
filterAssists(ui.values);}
});
$("#assistamount").val($("#assits").slider("values",0) + "-" + $("#assits").slider("values",1));
});
Any thoughts? Thanks in advance.
You have a typo!!
$("#assits") should be $("#assists").
I guess you have defined maxAssests before the slider definition as well.
Also use more up to date versions of jquery & ui. I got your code to work with these.
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I have a template, which is using hasFocus similar to example in docs: http://knockoutjs.com/documentation/hasfocus-binding.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>field test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
body {
margin-top: 1em;
}
</style>
<script src="https://cdn.jsdelivr.net/g/jquery#2.2.2,bootstrap#3.3.6,knockout#3.4.0"></script>
<script>
$(function() {
var VM = function() {
var model = {};
model = {
one: ko.observable(false),
two: ko.observable(false)
};
this.model = model;
};
ko.applyBindings(new VM());
});
</script>
</head>
<body>
<script type="text/template" id="first-template">
<input type="text" class='form-control' data-bind="hasFocus: model.one">
<p>one has<span data-bind="visible: !model.one()"> not got</span> focus now</p>
<input type="text" class='form-control' data-bind="hasFocus: model.two">
<p>two has<span data-bind="visible: !model.two()"> not got</span> focus now</p>
</script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div data-bind="template: { name: 'first-template' }"></div>
<!-- if I uncomment the next line, it stops working... -->
<!-- <div data-bind="template: { name: 'first-template' }"></div> -->
</div>
</div>
</div>
</body>
</html>
It all works as expected, updating the focus state on the model correctly when entering and leaving the field. However, if I apply the template a second time, the template appears to work ok with the exception of the focus state. Is this unsupported, or am I implementing wrong? How can I use template multiple times, and still use focus state?
The browser cannot have two <input> elements with focus. The hasFocus bind will try to give both elements a focused state. You can circumvent this behavior by using event bindings for both focus and blur events:
data-bind="event: {
focus: function() {
model.one(true)
},
blur: function() {
model.one(false)
}
}"
Check out this fiddle for a working example of your code: https://jsfiddle.net/77meefmf/
You need to make sure each copy of the template has its own viewmodel. The hasFocus binding is meant to represent the focus status a single field. If you bind it to more then one field, the results will be wrong.
I have a page with multiple controllers, one of the controller is being used in 2 different divs within the same page. I am not sure if it is a scope issue or I just miss something in my code.
here is the plunkr
http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview
I want to hide the textbox when the user clicks on 'Savings' link, display the box when clicking on 'Cost' link.
Same controller, but declared twice. therefor - two scopes.
Normally the solution is to move the ng-controller declaration one dom level higher (in your case, to the body element. once only), and have it only once. Otherwise, look into angular services.
see updated plunkr: http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview
Every time you use ng-controller, you make a new instance of said controller, with it's own scope. If you set subCCtrl on the body tag (or a new parent), and remove it from the two divs it is currently on, it works for me.
Other solutions you might want to look in to are by keeping "hideThisBox" on the root scope, broadcasting an event when clicking on save or by keeping it in a service.
You need to make some changes in controller and view.
var app = angular.module('plunker', []);
app.controller('subCCtrl', function($scope) {
$scope.hideThisBox = false;
$scope.update = function(label) {
if (label == 'Cost')
$scope.displaybox = true;
else
$scope.displaybox = false;
}
});
app.controller('subACtrl', function($scope) {
});
app.controller('subBCtrl', function($scope) {
});
HTML :
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="subCCtrl" class="row-fluid">
<div class="span6">
<a href="#" ng-click='update("Cost");displaybox=true;'>Cost</a>
<br />
<a href="#" ng-click='update("Savings");displaybox=fasle;'>Savings</a>
<br />
</div>
<hr />
<div ng-controller="subACtrl">Do stuff that uses subACtrl</div>
<div ng-controller="subBCtrl">Do stuff that uses subBCtrl</div>
<hr />
<div ng-controller="subCCtrl" class="row-fluid">
<div class="span3">
<label>If click on 'Savings', hide below box: </label>
</div>
<div ng-hide="hideThisBox" class="span6">
<input type="text" ng-model="test2" ng-show="displaybox"/>
</div>
</div>
</div>
</body>
</html>
I would recommend that you read up on Javascript scope. The issue with your code was the scope of ng-controllers.
You already got your answer i guess, but for those who will come next here is some tips ^^ (hope it will hep):
ng-controller="myCtrl"
will set a new instance of the "myCtrl" controller, with i'ts own scope
The used scope will be the one of the firt div's controller it means that if you have something like:
<div id="maindiv" ng-controller="myCtrl>
<div id="subdiv1">
<div></div>
<div>
<div>some text</div>
</div>
</div>
<div id="subdiv2" ng-controller="myCtrl">
<div>
<span>-</span>
<span>so</span>
<span>this</span>
<span>is</span>
<span>a</span>
<span>subdiv</span>
<span>.</span>
</div>
</div>
</div>
</div>
Subdiv1 will have the same scope as maindiv
But Subdiv2 will have it's own instance of the myCtrl controller's scope.
In a global way, Subdiv2's scope should have erited is data from the maindiv's scope.
Thats just a few easy tips and you will find more usefull ones on SO, or google, but anyway, if it can help some of you it will be cool.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I am creating an HTML page, Which is built using bootstrap. Here is the final HTML code and code of hello.js file:
document.getElementById("subm").onclick = function () {
alert("Hello WOrld");
}
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</html>
<body>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="javascripts/bootstrap.min.js"></script>
<script src="javascripts/hello.js"></script>
<h1>Calculator</h1>
<form class="form-horizontal center1">
<div class="control-group">
<label for="num1" class="control-label">Number1</label>
<div class="controls">
<input id="num1" type="number" placeholder="Enter an Integer">
</div>
</div>
<div class="control-group">
<label for="num2" class="control-label">Number2</label>
<div class="controls">
<input id="num2" type="number" placeholder="Enter an Integer">
</div>
<div class="control-group">
<label for="options" class="control-label">Options</label>
<div class="controls"><br>
<select id="options">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</div>
</div>
<div class="control-group">
<div class="controls"><br>
<button id="subm" type="submit" class="btn">Calculate</button>
</div>
</div>
<div class="control-group">
<div class="controls">
<input id="cal" type="text" placeholder="Calculator output" disabled="true">
</div>
</div>
</div>
</form>
</body>
When I click on the button using submit then instead of alert I am getting error
Uncaught TypeError: Cannot set property 'onclick' of null
Can anyone please tell me why I am facing this error?? Help to resolve it.
The problem seems to be you are executing the script before the element is loaded.
I assume this script is added in the hello.js file which is added before the DOM is created.
The solution here is to execute the script after the DOM is ready like:
window.onload = function(){
document.getElementById("subm").onclick=function(){
alert("Hello WOrld");
}
}
All JavaScript code which deals with DOM elements like the one above has to be executed only after the DOM is loaded.
Demo: Fiddle
window.onload() didn't solve my problem so i had to write code to wait for the element to get loaded. You can do something like this:
function waitForLoad(id, callback){
var timer = setInterval(function(){
if(document.getElementById(id)){
clearInterval(timer);
callback();
}
}, 100);
}
waitForLoad("subm", function(){
console.log("load successful, you can proceed!!");
document.getElementById("subm").onclick = function()
{
alert("I got clicked");
}
});
As I see you are using the JQuery then use the jQuery's function why are you using javascript.
Here is the code for you desire:
$(document).ready(function(){
$("#subm").click(function(){
alert("Hello World");
});
});
It is probably happening because the script runs before the DOM loads.
Try putting the script in
window.onload = function() {
{your code}
}
I had got a similar problem...For me it worked with following code
$(document).on('click','#subm',function() {
alert("Hello World");
});
I have a problem regarding checking checkbox by JS.When I checked the checkbox by JS it seems like in program that it's checked but in UI it's not updated .
if anyone have solution for this
<!DOCTYPE html>
<html>
<head>
<title>Check</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function getCheckedValue()
{
return ((document.getElementById("rock").checked));
}
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked="checked";
alert((document.getElementById(toBeChecked).checked))
alert($('#'+toBeChecked).attr('checked'))
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>What kind/s of music do you listen to?</h1>
</div><!-- /header -->
<div data-role="content">
<input type="checkbox" class="music" name="music" id="rock" value="rock" >
<label for="rock">Rock</label>
<input type="button" value="Get" onclick="alert(getCheckedValue())">
<input type="button" value="Set" onclick="setCheckedValue('rock') ">
</div>
</div>
</body>
</html>
Instead of using attr I would highly recommend you use prop.
The preferred cross-browser-compatible way to determine if a checkbox is checked is to check for a "truthy" value on the element's property using one of the following:
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.
$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");
I have worked after getting response from all of your efforts and the working code is below.
<!DOCTYPE html>
<html>
<head>
<title>Check</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function getCheckedValue()
{
return (document.getElementById("rock").checked);
//return $('input[name=music]').checked;
}
function setCheckedValue(checkboxName,toBeChecked){
$('input[name='+checkboxName+']').prop("checked", true).checkboxradio("refresh");
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>What kind/s of music do you listen to?</h1>
</div><!-- /header -->
<div data-role="content">
<input type="checkbox" class="music" name="music" id="rock" value="rock" >
<label for="rock">Rock</label>
<input type="button" value="Get" onclick="alert(getCheckedValue())">
<input type="button" value="Set" onclick="setCheckedValue('music','rock') ">
</div>
</div>
</body>
</html>
try
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked=true;
alert((document.getElementById(toBeChecked).checked))
alert($('#'+toBeChecked).prop('checked'))
}
Jquery-mobile appends classes for such things. Basically within that one input/label pair you have the following:
<div class="ui-checkbox">
<input type="checkbox" class="music" name="music" id="rock" value="rock">
<label for="rock" data-corners="true" data-shadow="false" data-iconshadow="true" data- wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-checkbox-on ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Rock</span>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span>
</span>
</label>
</div>
What you need to do is find a way to remove and add the classes to the label and span tags. I've done this for the label, but not for the span as I'm about to finally get some sleep.
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked="checked";
$("label[for='rock']").addClass("ui-checkbox-off");
$("label[for='rock']").addClass("ui-checkbox-on");
}
I did stumble across:
$("#checkbox-label").checkboxradio("refresh");
From: http://forum.jquery.com/topic/what-is-the-most-effective-way-of-unchecking-a-checkbox
Not entirely the same question, I know but slightly relevant. I didn't have the chance to finagle with it and get it to work...nor did I look much more into it to see if it does even work.
In short, the property is being set to "checked", however, the elements need to have their css refreshed in order to accommodate the new 'state'.
I hope this helps!