I'm trying to create a image upload with the kendo editor.
I'm always getting an error:
ReferenceError: uid is not defined
...==E&&(E=1),g?(b&&(A+=-b),w&&(I+=-w),e=new
Date(Date.UTC(F,D,E,A,I,H,N))):(e=new ...
kendo.web.min.js (Zeile 11)
I'm using jQuery 1.8.3 and kendoui.web.2013.1.319.open-source
My code is as follow:
<div id="example" class="k-content">
<textarea id="editor" rows="10" cols="30" name="reply-content"></textarea>
</div>
<script>
$(document).ready(function () {
$("#editor").kendoEditor({
imageBrowser: {
messages: {
dropFilesHere: "Drop files here"
},
transport: {
read: "/images/ImageBrowser/Read",
destroy: "/images/ImageBrowser/Destroy",
create: "/images/ImageBrowser/Create",
thumbnailUrl: "/images/ImageBrowser/Thumbnail",
uploadUrl: "/images/ImageBrowser/Upload",
imageUrl: "/images/ImageBrowser/Image?path={0}"
}
}
});
});
</script>
Has someone experienced the same issue?
You are probably returning a list of string, but the editor is waiting for an json result (name, type, size). You can check the demo with a sniffer to see what kind of results is expected from read/thumbnail, etc. Not very sure if you really must implement an server class for Kendo's client equivalent, but, by default, the result for Read is expected as Json for sure.
New finaly i got it to work. I used some workarounds but see your self.
You can also test the functionality on the site: http://jonas.dnsd.me/forum/topic?id=113
But stil it has some bugs like the url: /imageBrowser/?path=/image.jpg. I remove '/?path=' with a javascript function, but it works just for 3 images.
If you upload a image the window will not refreseh.
I would appreciate some ideas about the issues.
Now it is working like a charm ... see at http://jonas.dnsd.me/forum/topic?id=113
I updated to new source code
Related
Hi I have a working FilteringSelect which reads from a URL. Entering names will query the database and return the appropriate JSON to populate the filtering select, I can select a value and it stores the ID.
<div data-dojo-type="ComboBoxReadStore" data-dojo-id="assignedUserIdstore"
data-dojo-props="url:'Welcome.do?call=JS&actionRefId=142',
requestMethod:'get'"></div>
<input id='assignedUserId' name='value(assignedUserId)'
data-dojo-type='dijit.form.FilteringSelect'
data-dojo-props="store:assignedUserIdstore, pageSize:5, labelAttr:
'label',queryExpr: '*${0}*', autoComplete: false" />
The issue comes with setting the default value. I have this
<script type='text/javascript'>dojo.ready(function(
{dijit.byId('assignedUserId').setValue('25');});
</script>
This appears to work after a fashion - it does call the server and the server returns this
{ "id":"25", "name":"John Smith" "label":"John Smith"}
However it does nothing to actually populate the filtering select with neither a display nor an actual value for the input. I tried to set the value to the name but that had no effect either. Having it return a collection instead of a single item does not help either.
The comboreadstore is defined as
<script type="text/javascript">
require([
"dojo/_base/declare",
"dojox/data/QueryReadStore",
"dojo/parser",
"dijit/form/FilteringSelect"],
function(declare, QueryReadStore){
declare("ComboBoxReadStore", QueryReadStore, {
fetch:function(request) {
// This results in a xhr request to the following URL (in case of GET):
// /url.php?q=<searchString>
request.serverQuery = {q:request.query.name};
return this.inherited("fetch", arguments);
}
});
}
);
</script>
Using dojo.ready doesn't guarantee that the data you're fetching is ready/loaded. It does fire when dojo is ready and all your required assets have been loaded. So i think you're trying to set the FilteringSelect to a value which doesn't exist in the store yet. You could solve this by waiting with setting the value untill the store is ready. How to do that depends on the store you are using which i can't really make up out of your code. I'm not familiar with ComboBoxReadStore. After some googling i found out it might be an extension of dojox.data.QueryReadStore, which is outdated and unfinished. If so i'de suggest you switch to using dojo.store if possible.
Furthermore: The setValue method on dijits is deprecated, you should be using set('key', val).
I've been trying to get TinyMCE to use a custom execcommand_callback handler to perform actions when the File Menu::New Document option is selected, but have been unable to get it to work at all, even on the most basic level. The project is on Rails 4, and I'm using the tinyMCE-rails gem from:
https://github.com/spohlenz/tinymce-rails
and following the example from:
http://www.tinymce.com/wiki.php/Configuration3x:execcommand_callback
I've put the following in tinymce.yml
execcommand_callback: "myCustomExecCommandHandler"
The resulting html:
<script>
//<![CDATA[
function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {
alert('hello');
}
//]]>
</script>
some html ...
<form accept-charset="UTF-8" action="" id="homepage_form" method="post">
<textarea class="tinymce" cols="10" id="editor" name="editor" rows="10"></textarea>
<script>
//<![CDATA[
tinyMCE.init({"selector":"textarea.tinymce","document_base_url":"/",
"theme_advanced_toolbar_location":"top","theme_advanced_toolbar_align":"left",
"theme_advanced_statusbar_location":"bottom",
"theme_advanced_buttons3_add":"tablecontrols,fullscreen,image,link",
"plugins":"table,fullscreen,image,link",
"execcommand_callback":"myCustomExecCommandHandler"});
//]]>
</script>
more form fields ...
</form>
To all appearances, this does nothing. Doesn't even raise a warning or error. What am I doing wrong?
Ok, I figure I should wrap this up for anyone else interested in this question, and thanks to Nishant for getting me on the right track.
Using TinyMCE 4 with the tinymce-rails gem (https://github.com/spohlenz/tinymce-rails) is straightforward and requires less configuration. Since I wanted the ability to embed links and images, my tinymce.yml file looks like:
document_base_url: /
plugins:
- image
- link
setup: "myNewDocumentHandler"
An my custom command handler looks like:
function myNewDocumentHandler(ed) {
ed.on('BeforeExecCommand', function(e) {
if (e.command === 'mceNewDocument') {
alert('New Document Command Handled');
}
});
}
You can see it work here: http://fiddle.tinymce.com/uRdaab/4
There is no problem in your callback . It works fine .
Check http://fiddle.tinymce.com/pRdaab
There is some problem here in plugins line , when you remove image and link it works . Check my fiddle and here is the code . I dont know why but try to figure that.
image is usually advimage , not sure about link plugin / feature however .
<script type="text/javascript">
function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {alert('hello');}
tinyMCE.init({"selector":"textarea",
"document_base_url":"/",
"theme_advanced_toolbar_location":"top",
"theme_advanced_toolbar_align":"left",
"theme_advanced_statusbar_location":"bottom",
"theme_advanced_buttons3_add":"tablecontrols,fullscreen",
"plugins":"table,fullscreen",
"execcommand_callback":"myCustomExecCommandHandler"});
</script>
<form method="post" action="dump.php">
<textarea>Foo</textarea>
</form>
So normally its good to use a classic TinyMCE init and then work on it . Its better to first get TinyMCE working properly and then examine add the call back functionality . One issue at a time saves a lot of troubleshooting . I am trying to implement that in my programming skills too !
I have tried all the options i found on the forum, but could not get it to work.
I even tried click event but that is also not getting called.
I wonder what is wrong with my code.
<script type="text/javascript">`enter code here`
$('#test.role.list').change(function(){
alert("here");
});
<div>
<form:select id="test.role.list" path="name">
<form:option value="none" label="none"/>
<form:option value="my none" label="none"/>
</form:select>
</div>
I have a list of permissions which are keys from the messageresource properties file, so the same thing i am using as id as well. The reason it is not working is correct as mentioned by the Lee. It considers the dots as different properties of the element with id "test" which is first string before dot and the next string as probably class. So i used the onchange event as
var Ele = document.geteElementByID("test.role.list");
ele.onchange = function(){
alert("here");
}
it is working fine now.
Yes the problesms are with dots in id.
You can use it as below,
$('#test\\.role\\.list').change(function(){
alert("here");
});
How can i use google earth API with backbone.js+jquery mobile ?
I have created application using backbone.js, underscore.js and jQuery Mobile.
For google earth API, I am using sample code listed at https://developers.google.com/earth/documentation/#using_the_google_earth_api
My template rendering, and all other pages are working fine But when i load google earth API in one tag, it's not loading and in js console i get message: "ERR_INVALID_DIV ".
Google.earth module never calls back initCallback, It's always calls failureCallback when google.earth.createInstance is invoked.
I explain some sample code of mine application as under, so based on that may be you get my code structure and it helps you to solve my issue.
my js code as under,
myjs1.js
var ge;
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
console.log(' init call back call ');
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCB(errorCode) {
console.log(errorCode);
}
Now my Backbone code as under,
myjs2.js
WebApp.MyPage= Backbone.View.extend({
initialize:function (result) {
this.template =_.template($('#myPage').html());
},
render:function (eventName) {
var self = this;
mydata = object dict of my data;
$(self.el).html(self.template({mydata:mydata}));
google.load("earth", "1");
init();
google.setOnLoadCallback(init);
}
Now my HTML code like as under,
<script type="text/template" id="myPage">
<div data-role="page">
<div data-role="content">
<div id="map3d" style="height: 400px; width: 600px;"></div>
</div>
</div>
</script>
myhtml.html
Is there any way to fix this?
Any help appreciated.
The Earth API works with the Google Earth Plugin, which is available only on Windows and Mac OSX. It is not available on mobile devices, sorry!
If you're testing on your Mac or Windows system, you should be able to get it working. The error code ERR_INVALID_DIV sounds like it isn't finding the map3d div. I would put a debugger; statement in the code just before the google.earth.createInstance() call, and then look around in the DOM inspector and see if map3d is in the DOM. It should be coming in from your template if that part is working.
But this won't help you when you try to load your site on a mobile device, because you won't have the Earth plugin available there.
I am trying to use the jquery ui autocomplete, and keep having the following error when you type into the input field that has the autocomplete on it:
Uncaught TypeError: Cannot read property 'PAGE_UP' of undefined
I have included the following files on my page:
jquery-1.7.2.min.js
jquery-ui-1.8.21.custom.min.js
jquery-ui-1.8.21.custom.css
Here is the code using the autocomplete:
$('input#searchFor').autocomplete({
source:function(req,add){
$.getJSON("/index.php/search/autoCompleteHandler?q=?§ion="+$('input#searchFor').attr("searchDesc"),req,function(data){
var suggestions = [];
$.each(data,function(i,val){
suggestions.push(val.name);
});
add(suggestions);
});
}
});
I have no idea what could be going wrong. Any help would be appreciated.
The jQueryUI example documentation for a remote data source shows the remote data source should be done like:
$(function() {
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
//the code to execute when an item is clicked on
}
});
});
It looks like source only needs to be a url. You could take a look at the ajax request in Chrome to figure out the $_GET or $_POST variable which is being populated with the search query.
It might not be a bad idea depending on your usage to use the remote data source with caching option.