I have code for skype button and it is visible on user page but invisible in CKEditor. What to do to make it visible in CKEditor content?
<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
<div id="SkypeButton_Call_fasdf_1">
<script type="text/javascript">
Skype.ui({
"name": "dropdown",
"element": "SkypeButton_Call_fasdf_1",
"participants": ["fasdf"],
"imageSize": 24
});
</script>
</div>
Any javascript that you include in the CKEditor content won't be executed, so you'll have to create a plugin that detects that HTML and shows an icon for that code (and dialog to edit?)
Related
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 #
After hitting some of the limitations in a standard browser based application, I decided to convert it to a chrome App that doesn't use the browser.
Below are all the relevant parts. The problem I'm trying to solve is to add a load listener for a button that was working in the browser and doesn't work under the app architecture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>POS Data Entry Sheet</title>
<link href="./POS.css" rel="stylesheet" type="text/css" />
<script src="./POS.js"></script>
<script src="./POS.underDevelopment.js"></script>
<script src="./POS.generateTable.js"></script>
<script src="./POS.menu.js"></script>
<script src="./POS.portion.js"></script>
<script src="./POS.formula.js"></script>
<script src="./POS.dialog.js"></script>
</head>
<body>
<script>
addLoadListener(addHandlerForLoginButton);
</script>
<section id="login">
<h1>Please login:</h1>
<p>
<label>User ID:</label><input type="text" id="userID">
<label>Password:</label><input type="password" id="password">
<button type="submit" id="loginButton">Login</button>
</p>
</section>
<div id="main"></div> <!--Everything gets attached to this div.-->
</body>
</html>
Everything above works via the browser.
I created the manifest:
{
"name": "Point of Sale System",
"description": "Dual currency Point of Sale System",
"version": "0.1",
"app": {
"background": {
"scripts": ["POS.dialog.js",
"POS.formula.js",
"POS.generateTable.js",
"POS.js",
"POS.menu.js",
"POS.portion.js",
"POS.underDevelopment.js",
"background.js"]
}
}
}
This is my first attempt at the background.js
It brings up the rudimentary page, but the in line script wasn't working.
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('POS.html', {
'bounds': {
'width': screen.availWidth,
'height': screen.availHeight
}
});
});
So, I commented out the inline script and attempted to add a callback function
This also doesn't work. No event listeners are recorded as per the debug tool.
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('POS.html', {
'bounds': {
'width': screen.availWidth,
'height': screen.availHeight
}
}, function(win) {win.addEventListener('load', addHandlerForLoginButton, false);});
});
I'm at a loss after several hours of attempting everything I could think of. Why doesn't the original in line script work, and why doesn't the callback work in the Chrome App architecture?
I think you are running into CSP problems, which does not allow inline script or script blocks. See http://developer.chrome.com/apps/contentSecurityPolicy.html for details.
You should be able to convert your first attempt by simply creating a page.js file, including it via a script src='page.js' tag, and put the contents of your script block in it:
addLoadListener(addHandlerForLoginButton);
Your second versoin didn't work because the win parameter to your callback isn't a DOM window but is an AppWindow. It has a DOM window attached via the contentWindow attribute, see http://developer.chrome.com/apps/app_window.html#type-AppWindow for details.
Lastly, you don't need to list all of those scripts in the app.background.scripts field of the manifest, only the background script background.js. The others will be loaded as needed when you open your page.
How can I get Backbone router + Kendo UI Mobile (tabstrip) to work together?
I am just getting started with Backbone and have been looking at using it with a UI. I was able to do this with Backbone and jQuery Mobile (JQM) by disabling JQM's routing as outlined in this post: http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/
// Disable JQM routing
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
// Backbone Router
// Create backbone view, append it to the body, and then use JQM to change to that page
home: function () {
page = new HomeView();
page.render();
$('body').append( $(page.el) );
$.mobile.changePage( $(page.el), {changeHash:false} );
}
Working through the Kendo UI Mobile docs, I have this working page:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">My App</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip">
<a class="tab-a" data-icon="home" href="#home">Home</a>
<a class="tab-a" data-icon="bookmarks" href="#about">About</a>
</div>
</footer>
</section>
<div data-role="view" data-layout="default" id="home">Home Page</div>
<div data-role="view" data-layout="default" id="about">About Page</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script>
var app = new kendo.mobile.Application();
</script>
</body>
</html>
It has a tabstrip with 2 buttons that enables you to switch between the 2 views.
I can get it to work with a Backbone router - whereby the routes "home" and "about" are called as the tabstrip buttons are clicked, but cannot work out how to intercept the click events, enabling me to generate a view, append it to the DOM, and then ensure that the relevant tabstrip button class is changed to represent the selected state.
I tried adding a class to the tabstrip links - $('.tabstrip-link').click( function () { alert( 'Clicked' ); } ) - but to no avail (sporadically fired). How can I remove the views from between the body tags, and generate these via a Backbone route, append them to the Layout between the header and footer sections, and then let the tabstrip change go about it's business?
You may need to disable the Kendo Router if you wish to use the Backbone router. The Kendo Router in mobile is not designed to be disabled. However at first glance, the following worked for me, if placed before creating your application.
kendo.mobile.Application.prototype._startHistory = function() {};
kendo.mobile.Application.prototype.router = {destroy: function() {}};
It works because Pane has it's own History management if the router is not created.
I can't see where I'm going wrong. I've tried everything I could think of, reCAPTCHA is just not working with the Ajax API. Here's what my code looks like:
<!-- this is in <head> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Recaptcha.create("my key here", "recaptcha_widget", {
"theme": "custom",
"lang": "en",
"callback": function() { console.log("callback"); } // this doesn't get called
});
});
</script>
<!-- ... this is in <body> -->
<div id="recaptcha_widget" style="display: none">
<div id="recaptcha_image"></div>
<div id="recaptcha_links">
get another •
<a class="recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')">switch to audio</a>
<a class="recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')">switch to image</a> •
help
</div>
<dt>Type the words</dt>
<dd><input type="text" id="recaptcha_response_field" name="recaptcha_response_field"></dd>
</div>
Works for me? What is happening? What are you trying to do?
When I substitute and alert for the console.log it alters everytime the page loads or a new reCaptcha gets generated. Exactly like it is supposed to.
The callback is not where you submit it for validation, if that is what you are trying to do then look here: http://recaptcha.net/apidocs/captcha/
Sorry for answering my question again. Found the problem, apparently you can't use reCAPTCHA in locally stored files (accessed via file:///), they have to be on a http:// site. As soon as I put this on localhost it worked.
+1 durilai for letting me know it works with him/her, this way I was able to look at the problem from a different perspective.
I have the following code for a simple jQuery UI dialog box. When I place this on a webpage, it works beautifully. However, If I call I insert this code dynamically onto a page using an AJAX function, it doesn't work and the dialog div just appears on the page. Is there any way to make it work in dynamically inserted code?
File DialogBox.html:
<script type="text/javascript">
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#dialog").dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>
This is the default dialog which is useful for displaying information. The
dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
File index.html (calls DialogBox.html):
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url: "DialogBox.html",
success: function(html){
$("#SpanID").html(html);
}
});
</script>
Does this work better for you?
$("#SpanID").load("DialogBox.html");
In addition to being shorter, it should also allow the loaded JavaScript to be run. More info here: http://docs.jquery.com/Ajax/load