My page get loaded from ajax (jquery). Editor works well but load control twice.
When the page loads without ajax, it works perfect. But when the editor load in ajax loaded page, it loads control twice.
My code is as follows :
<script type="text/javascript" src="assets/admin/js/wysiwyg/jquery.wysiwyg.js"></script>
<link rel="stylesheet" href="assets/admin/js/wysiwyg/jquery.wysiwyg.css" type="text/css"/>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
//$('#wysiwyg').wysiwyg();
$('.wysiwyg').wysiwyg({
controls: {
strikeThrough: { visible: false },
insertTable: { visible: false },
superscript: { visible: false }
}
});
});
})(jQuery);
</script>
<textarea class="wysiwyg" name="description" cols="50" rows="4" ></textarea>
Related
I'm creating a mobile app using KendoUI in the Telerik AppBuilder. I created a blank view to hold my chart and then went in to start adding the code. I cannot get the chart to appear.
These are the scripts referenced in my index.html:
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="app.js"></script>
<script src="lib/progress/progress.all.min.js"></script>
<script src="dataProviders/progressDataProvider.js"></script>
Here is the code of my chart view:
<div data-role="view" data-title="Audit Tracker" data-layout="main" data- model="app.auditTracker" data-show="app.auditTracker.onShow" data-after-show="app.auditTracker.afterShow">
<div id="chart">
</div>
</div>
And here is the code in the associated JavaScript file:
'use strict';
app.auditTracker = kendo.observable({
onShow: function () {},
afterShow: function () {}
});
(function(parent) {
$("#chart").kendoChart({
title: {
text: "Audit Tracker"
},
series: [
{name: "Audits Completed", data: [5,10,15,3]}
],
categoryAxis: {
categories: ["January", "February", "March", "April"]
}
});
})(app.auditTracker);
What am I doing wrong here? This seems like it should be simple!
Thanks in advance for the help.
My problem was that I did not have the correct framework files referenced in my index.html.
Here are the files that I ended up using as far as the framework goes:
<script src="cordova.js"></script>
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
<link rel="stylesheet" href="kendo.common.min.css" />
<link rel="stylesheet" href="kendo.default.min.css" />
<link rel="stylesheet" href="kendo.mobile.all.min.css"/>
I am using Kendo UI - Editor.
If I click on Show Message link, "Click Success!" message should appear inside Editor
I want to show Custom Text inside Editor on Clicking on "Show Message" link...
Pleae Help !!!
$(document).ready(function(){
$(".importeditor").kendoEditor({
tools: [
"bold",
{
name: "custom",
myText: "Show Message",
template: $("#toolTemplate").html()
},
]
});
});
jQuery('#ClickMe').on('click', function () {
jQuery(".importeditor").data('kendoEditor').val('Click Success!');
});
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.timezones.min.js"></script>
<div class="textedit1">
<textarea rows="10" cols="45" name="textarea" class="txtarea importeditor"></textarea>
</div>
<script id="toolTemplate" type="text/x-kendo-template">
#= myText #
</script>
Use the value method IE
jQuery(".importeditor").data('kendoEditor').value('Click Success!');
Also you might want to fix your href in the a tag
#= myText #
Below code has been thankfully provided by machun for toggling between RTL and LTR directions in Kendo UI widgets.
The code consists of:
HTML:
kendo autocomplete form plus a button to activate support for RTL and LTR language.
Script:
k-rtl class container
datasource (json file)
kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab
k-rtl class
The problem is that links don't open correctly. It shows a 404 Not Found error plus a /undefined at the end of the URL.
Live demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="container">
<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
<input id="autocomplete" type="text" />
</div>
</body>
</html>
<script>
/*------k-rtl class container----------*/
function createAutoComplete(){
if($("#autocomplete").data("kendoAutoComplete") != null){
$("#autocomplete").parent().remove();
$("#container").append("<input id='autocomplete' type='text' />")
}
/*------datasource (json file)---------*/
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "json.txt",
dataType: "json",
data: {
q: "javascript"
}
}
},
schema: {
data: "results"
}
});
/*------kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab----------*/
$("#autocomplete").kendoAutoComplete({
dataSource: dataSource,
dataTextField: "name",
template: '<span><img src="/kendo-autocomplete-test/img/#: id #.jpg" /></span>' + '<span data-href="#:link#">#:name#</span>',
select: function(e) {
var href = e.item.find("span").data("href");
location.assign(href);
}
});
}
/*------k-rtl class----------*/
createAutoComplete();
$('#toggleRTL').on('click', function(event) {
var form = $('#container');
console.log(form);
if (form.hasClass('k-rtl')) {
console.log("test1");
form.removeClass('k-rtl')
} else {
console.log("test2");
form.addClass('k-rtl');
}
createAutoComplete();
})
</script>
I advice to debug your function first then simply check the variable and make sure it contain the right thing. You overlooked a simple thing that your jquery dom selector isn't quite right resulting var href contain "undefined".
Change
var href = e.item.find("span").data("href");
To
var href = e.item.find("span[data-href]").attr("data-href");
Take a look here
I am attempting to dynamically load a page of product info, that has an accordion menu for the user to browse. I bring in the content for the accordion dynamically using AJAX after a button click. The HTML for the accordion is showing up in the manner that it should, but the accordion "method" isn't being executed to modify the content into an accordion.
Imports:
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media"screen" />
<link rel="stylesheet" href="css/NewSite.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/development-bundle/ui/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
<script type="text/javascript" src="js/jquery.ModalWindow.js"></script>
Accordion Call in the JQuery:
<script type="text/javascript">
jQuery(document).on('click', '.subMenuItem', function()
{
event.preventDefault();
var subMenuItemID = '#' + $(this).attr('id');
var menuItemContent = $('#MenuItemContent');
var mainCategory = $(this).attr('id').split('xx')[0];
var subCategory = $(this).attr('id').split('xx')[1];
$.ajax({
url: '/php/SubMenuItemContent.php',
data: {
MainCategory: mainCategory,
SubCategory: subCategory
},
success: function(result) {
menuItemContent.html(result);
}
});
$('.accordion').accordion({
heightStyle: "content",
active: false,
collapsible: true
});
}
});
</script>
The resultant Markup from the AJAX is correct, but the accordion doesnt display properly, it displays as a normal block of H3's and divs.
Two things, first you have an extra } at the end of your script.
Second, the accordion content isn't loaded correctly because the accordion DOM elements are not yet loaded (they are loaded in your AJAX call), so put the following your SubMenuItemContent.php file:
<script>
jQuery(document).ready(function($) {
$('.accordion').accordion({
heightStyle: "content",
active: false,
collapsible: true
});
})
</script>
to init the accordion that is loaded.
Alternatively you could try moving the accordion() call inside your success callback like so:
success: function(result) {
menuItemContent.html(result);
$('.accordion').accordion({
heightStyle: "content",
active: false,
collapsible: true
});
}
But I've had more success with the previous method, for whatever reason.
I set up video lesson site with moodle. I will share my video with jwplayer my code is shown below.
<p>
<script src="jwplayer/jwplayer.js" type="text/javascript"></script>
<script type="text/javascript"> jwplayer.key="KEY";</script>
</p>
<div id='player'>
<img src='jwplayer/preview.jpg' alt='RTSP Link' /><br />
</div>
<script type="text/javascript">
jwplayer('player').setup({
id : 'playerID',
fallback: false,
width: '920', height: '518',
image: 'jwplayer/preview.jpg',
sources: [{
file: "http://WowzaAdress:1935/vod/smil:Lesson1.smil/jwplayer.smil?protocol=rtmpe"
},{
file: "http://WowzaAdress:1935/vod/Lesson1.mp4/playlist.m3u8"
}],
rtmp: {
bufferlength: 3
},
});
</script>
I want to hide this code when users view with right click "Page source".
How can I do it?
I would use a tool like - http://www.dynamicdrive.com/dynamicindex9/encrypter.htm
So then you get:
<script>
<!--
document.write(unescape("%3Cp%3E%0A%20%20%3Cscript%20src%3D%22jwplayer/jwplayer.js%22%20type%3D%22text/javascript%22%3E%3C/script%3E%0A%20%20%3Cscript%20type%3D%22text/javascript%22%3E%20jwplayer.key%3D%22KEY%22%3B%3C/script%3E%0A%3C/p%3E%0A%3Cdiv%20id%3D%27player%27%3E%0A%20%20%3Ca%20href%3D%22rtsp%3A//WowzaAdress%3A554/vod/mp4%3ALesson1.mp4%22%3E%3Cimg%20src%3D%27jwplayer/preview.jpg%27%20alt%3D%27RTSP%20Link%27%20/%3E%3Cbr%20/%3E%3C/a%3E%0A%3C/div%3E%0A%3Cscript%20type%3D%22text/javascript%22%3E%0Ajwplayer%28%27player%27%29.setup%28%7B%0Aid%20%20%3A%20%27playerID%27%2C%0Afallback%3A%20false%2C%0Awidth%3A%20%27920%27%2C%20height%3A%20%27518%27%2C%0Aimage%3A%20%27jwplayer/preview.jpg%27%2C%0Asources%3A%20%5B%7B%0Afile%3A%20%22http%3A//WowzaAdress%3A1935/vod/smil%3ALesson1.smil/jwplayer.smil%3Fprotocol%3Drtmpe%22%0A%7D%2C%7B%0Afile%3A%20%22http%3A//WowzaAdress%3A1935/vod/Lesson1.mp4/playlist.m3u8%22%0A%7D%5D%2C%0Artmp%3A%20%7B%0Abufferlength%3A%203%0A%7D%2C%0A%7D%29%3B%0A%3C/script%3E"));
//-->
</script>