I'm using summernote component and what I want to do is I want to stop the user from adding characters if the text area is pre filled, but I couldn't figure out how to stop typing event. I tried this and it worked for me
$(document).ready(function() {
$('#summernote').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 64)
{
e.target.blur();
}
}
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Summernote Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="inner-container">
<div id="summernote1">
Hello Summernote ! please enter text.
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#summernote1').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 0)
{
e.preventDefault();
}
}
}
});
});
</script>
</body>
</html>
I simply added this code in my html page and it worked for me.
$(document).ready(function() {
$('#summernote1').summernote({
callbacks: {
onKeydown: function(e) {
if(e.keyCode > 0)
{
e.preventDefault();
}
}
}
});
});
Related
I'm using Kendo DataBound event to print the model from the row triggering the event, the problem I'm facing is the model is undefined when using DataBound different from using Edit event.
.Events(e => { e.DataBound(#<text>function(e) { alert(e.model); }</text>) })
The problem is that apparently e.DataBound is not handling the e argument as the Edit, Cancel, and the rest of events.
When trying with e.Edit(#<text>function(e) { alert(e.model); }</text>) the e.model object is loaded with the properties and values.
Is there a way to achieve this?
You can achieve that by using jQuery only:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script>
$(function() {
$('#grid').kendoGrid({
dataSource: {
data: [{ A: 1, B: 2 }, { A: 3, B: 4 }]
},
});
let grid = $("#grid").data("kendoGrid");
$("#grid").on('click', 'tbody td', function(e) {
let $td = $(e.target),
dataItem = grid.dataItem($td.parent()),
cellContent = dataItem[$td.data('field')];
console.log($td, dataItem, cellContent);
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo
Or by using the grid's change event. But in order to use that event you need to set your grid selectable to true:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script>
$(function() {
$('#grid').kendoGrid({
dataSource: {
data: [{ A: 1, B: 2 }, { A: 3, B: 4 }]
},
selectable: true,
change: function() {
let dataItem = this.dataItem(this.select());
console.log(dataItem);
}
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo
I am trying to use kendo UI validator over a textarea using validateinput but always returns false. This Dojo contains the script.
Thanks for your help.
https://dojo.telerik.com/ifIhEGIy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
<script>
function validateFormHecho() {
var validator = $("#hechoForm").kendoValidator({
rules: {
controlValidate: function(input) {
switch (input.attr('id')) {
case 'txtDescripcion':
return true;
break;
}
}
}
}).data("kendoValidator");
alert(validator.validateInput($("input[id=txtDescripcion]")));
}
$(document).ready(function() {
$("#txtDescripcion").kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
});
</script>
</head>
<form id="hechoForm">
<div><textarea rows="10" cols="30" id="txtDescripcion" name="txtDescripcion"></textarea></div>
<button onclick="validateFormHecho()">Click me</button>
</form>
</html>
you use <textarea rows="10" cols="30" id="txtDescripcion" name="txtDescripcion"></textarea>.
But in your alert you are searching for an input elem. Textarea is not a classic HTML input, so you have to edit this part:
alert(validator.validateInput($("input[id=txtDescripcion]")));
to
alert(validator.validateInput($("textarea[id=txtDescripcion]")));
Or use $("#txtDescripcion") as the id selector
PS: you misspelled txtDescrip t ion ;)
There simple is not input element with that id. If you search for any element with that id, you get your true: alert(validator.validateInput($("#txtDescripcion")));
I was testing out this demo on query-ui-maps:
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map
Everything is the same except for the head section of my index.html file:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.css" />
<link href="css/jquery.mobile-swatch.css" rel="stylesheet" type="text/css"/>
<link href="css/custom-icons.css" rel="stylesheet" type="text/css"/>
<link href="css/mapapp.css" rel="stylesheet" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script src="js/jquery.js"></script>
<script src="jquery-mobile/jquery.mobile.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-iphone.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="js/jquery-ui-autocomplete-1-8-15.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
The demo works in safari on my desktop but loads the screen attached whether I test in an ios5 simulator or an ios5 phone. No errors are logged to the console. I am testing in Xcode and using phone gap.
Please help.
This is the code:
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#directions_map').live('pageinit', function() {
demo.add('directions_map', function() {
$('#map_canvas_1').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.set('getCurrentPosition', function() {
self.refresh();
self.getCurrentPosition( function(position, status) {
if ( status === 'OK' ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
self.get('map').panTo(latlng);
self.search({ 'location': latlng }, function(results, status) {
if ( status === 'OK' ) {
$('#from').val(results[0].formatted_address);
}
});
} else {
alert('Unable to get current position');
}
});
});
$('#submit').click(function() {
self.displayDirections({ 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(response, status) {
( status === 'OK' ) ? $('#results').show() : $('#results').hide();
});
return false;
});
}});
}).load('directions_map');
});
$('#directions_map').live('pageshow', function() {
demo.add('directions_map', $('#map_canvas_1').gmap('get', 'getCurrentPosition')).load('directions_map');
});
</script>
</head>
<body>
<div id="directions_map" data-role="page">
<div data-role="header">
<h1>jQuery mobile with Google maps v3</h1>
<!--<a data-rel="back">Back</a>-->
</div>
<div data-role="content">
<div class="ui-bar-f ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas_1" style="height:300px; width:100%;"></div>
<p>
<label for="from">From</label>
<input id="from" class="ui-bar-f" type="text" value="Göteborg, Sweden" />
</p>
<p>
<label for="to">To</label>
<input id="to" class="ui-bar-f" type="text" value="Stockholm, Sweden" />
</p>
<a id="submit" href="#" data-role="button" data-icon="search">Get directions</a>
</div>
<div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">
<div class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-top ui-btn-up-undefined">Results</div>
<div id="directions"></div>
<div class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-bottom ui-btn-up-undefined"></div>
</div>
</div>
</div>
</body>
After much searching, this has proved to be the best answer:
http://code.google.com/p/jquery-ui-map/wiki/Examples#Example_get_user_position
i have script like this....
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="bbbbb" />
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<title>for testing works</title>
<style>
div{
height: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('div').click(function(){
$(document).load('load.html');
} );
});
</script>
</head>
<body>
<div id="init">Click Me</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</body>
</html>
in load.html i have a paragraph with with dummy content.
why this script is not changing my content of page...
loading a document object inside other is allowed or not?
You should change $(document).load('load.html'); to $('body').load('load.html');:
$(document).ready(function()
{
$('div').click(function(){
$('body').load('load.html');
return false;
});
});
i finished my app but when i test it on the other internet browsers, there was a problem
i will add my code. i couldnt see the error.as i said it works on opera but not in firefox :/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}
());
function lget(idd){
FB.api('/'+idd, function(response) {
document.getElementById(idd+"_a").innerHTML ="<a href='" + response.link + "' id='"+idd+"_und' style='color:#12566C;font-size:14px;' onmouseover=document.getElementById('"+idd+"').style.textDecoration=underline; onmouseout=document.getElementById('"+idd+"').style.textDecoration=none; target='_blank'><b>" + response.name + "</b></a>";
});
}
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
You are loading the Facebook JS SDK in async mode and thus the FB object is not ready when you call it inside lget, the async loading occurs after your calls to lget and even after the onload event in Firefox.
Try not loading the code asynchronously and note that it is working fine
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
function lget(idd){
FB.api('/'+idd, function(response) {
document.getElementById(idd+"_a").innerHTML ="<a href='" + response.link + "' id='"+idd+"_und' style='color:#12566C;font-size:14px;' onmouseover=document.getElementById('"+idd+"').style.textDecoration=underline; onmouseout=document.getElementById('"+idd+"').style.textDecoration=none; target='_blank'><b>" + response.name + "</b></a>";
});
}
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
if you want to see the execution order try something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body onload="console.log('onload event'); false;">
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
console.log('FB object ready');
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
console.log('This executed first');
}
());
function lget(idd){
console.log('lget - ' + idd);
};
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
this is the output you'll get in Firefox
This executed first
lget - 525864081
lget - 534018674
onload event
FB object ready