I'm just working on a little webservice. Therefore I am using an AJAX call and append my data to a table on my website. Here I can read and update already existing entries or write new entries. Everything works fine.
I want to have the possibility to update already existing with the wysihtml5 editor. I already integrated this editor on my website and I can use it on new entries. That works, too.
But now there's the problem with existing data. When it comes to the form to update data, I want the existing data being displayed as the value. Everything works fine on all inputs, just the wysihtml5 don't work.
I already know that there's an iframe and that's why I can't set the value of the textarea. I searched for a solution and found the following code (last line):
var editor = new wysihtml5.Editor("textareaid", { // id of textarea element
toolbar: "wysihtml5-toolbar", // id of toolbar element
parserRules: wysihtml5ParserRules, // defined in parser rules set
});
editor.setValue('Here's the content', true);
Usually this should work, but no content appears and the console just tells me:
Error: wysihtml5.Sandbox: Sandbox iframe isn't loaded yet
I tried it with a timeout-function but nothing works. Searching on the internet it also seems that there is noone else with that problem. I hope you can help me out, would be great!
Is there a way to set the value?
This code work for me
$("#product_details").data("wysihtml5").editor.getValue();// to get the value
$("#product_details").data("wysihtml5").editor.setValue('new content')// to set the value
I got the solutions, below code worked for me
$('#id ~ iframe').contents().find('.wysihtml5-editor').html(my_html);
This work for me
$('.wysihtml5-sandbox').contents().find('.wysihtml5-editor').html(my_html);
the ".wysihtml5-sandbox" is a class name of iframe, create by wysihtml5 by default.
I finally got it working by myself. I just change the second parameter of setValue to false. I don't know why, but it works then.
this code worked for me :
var wysihtml5Editor = $('#text_editor').data("wysihtml5").editor;
wysihtml5Editor.setValue("<p>foobar</p>", true);
console.log(wysihtml5Editor.getValue());
Related
In my project, the Ckeditor is part of a webpage, which is coded using GWT. So the interface to CKeditor is using Java.
Whenever the webpage is displayed, the CKeditor will be passed a HTML via setData(), which the CKeditor is supposed to show.
The problem is: CKeditor sometimes won't show the HTML. Its content was just empty, although I am very sure the html had been passed to setData().
I had tried several approaches to solve this problem, but none would work.
My approach
Create a TextArea using DOM.createTextArea()
Call myEditor=CKEDITOR.replace(textArea, config) to initialize the CKeditor
call myEditor.setData(html) to set the content.
It was good and showed the content at the first time.
But after the webpage got hidden and shown again, I called myEditor.setData(html2) to show another html, but this time the CKeditor showed nothing.
First solution (did not work)
I changed the code to call myEditor.destroy() before the webpage was hidden, and call CKEDITOR.replace(textArea, config) again when the webpage was visible again, after that I called myEditor.setData(newHtml).
This time it worked in IE and FF, but not in Chrome and Edge, it kept showing the content of the first load time, instead of showing the new HTML.
Second solution (did not work)
I changed it to call CKEDITOR.inline(textArea, config) instead of CKEDITOR.replace(textArea, config) when the webpage was visible again, while the destroy() and setData() was still called in the same order. This time the CKeditor again didn't show anything from the second time.
Last attempt
My last approach was to not calling destroy(), but creating a new TextArea each time before showing CKeditor, and called CKEDITOR.replace(textArea, config) and setData(html). This seems to work well, but occasionally the CKeditor still showed empty content.
Could anyone please help me to solve this problem?
I am using CKeditor 4.5.8.
Finally I figured out the solution:
Before hiding the ckeditor, call editor.destroy(true), and delete editor. (Before this, I only called editor.destroy() [note: no 'true'], which didn't work well).
Here is the code:
if (editor) {
editor.destroy(true);
delete editor;
}
Use this java script code that is very simple and effective.Note editor1 is my textarea id
<script>
$(function () {
CKEDITOR.timestamp= new Date();
CKEDITOR.replace('editor1');
});
</script>
second way ! In controller ,when your query is fetch data from database then use this code after .success(function().
$http.get(url).success(function(){
CKEDITOR.replace('editor1');
});
I am working on a Drupal project which is using the Editable fields module.
Using that module I'm exposing a dropdown list of text options. It works just great. You click on the list, select an option and the option is updated via Ajax.
My challenge is I'm trying to change the options programmatically via jQuery. Using the following code:
jQuery('select#edit-field-status-0-field-status-und').val(1);
... my browser console area is happy with the code but the Ajax update does not take place.
I tried:
jQuery('select#edit-field-status-0-field-status-und').val(1).change();
Again no errors but the Ajax event still did not execute.
$('#edit-field-status-0-field-status-und').val("1");
will do the trick, as the only reason it wouldn't work would be that you have your select values as strings instead of numbers.
Alternatively the following is more detailed:
$('#edit-field-status-0-field-status-und option').eq(1).prop('selected', true);
Also this is not an 'AJAX' function, it's simply Jquery updating the DOM for the particular element.
The code I was using as recreated below was correct:
jQuery('select#edit-field-status-0-field-status-und').val(1).change();
I found out the reason why it wasn't working was because the ID of the target element changed dynamically.
So when I first inspected and found edit-field-status-0-field-status-und, the same element would change IDs to something like edit-field-status-0-field-status-und--1.
That was throwing things off and gave the impression my code wasn't working.
Thanks to #gts for your input.
Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.
As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.
Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.
The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
See this updated fiddle for an example of what I think you might be looking to achieve.
http://jsfiddle.net/nukefusion/eQ2j7/10/
(I would post this as a comment but not enough reputation yet...)
I'm successfully using nukefusion's solution. I, too, fought with the syntax error from jQuery for a long time and discovered through debugging that how you define the template is important. In particular, it appears that the template has to be written on a single line without any formatting, as in:
<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>
If you try to make it "pretty" and format the html in the template, you get the syntax error. I don't know where the real bug is, as this sort of thing shouldn't cause an error. But it does and I stopped worrying about it once I got it to work correctly.
I'm having some trouble with the firefox and ie cache, on my website the user can make a query with a form, and this query returns a picture, but depending on which radio button is selected, it'll return a different picture, and it works just like that on chrome, but in IE and firefox, the same image is always returned, it only changes when i reopen the browser, can you guys give me some light on how to make this work?
Thanks to everyone, i solved my problem by putting and unique url each time i made the ajax call.
<?php $date = date("H:i:s");
echo ''; echo '<img src="web/WEB-INF/classes/lineChart.php?id='.$date.'" alt="">' ?>
Not sure the language you are using to code with, but regardless I am sure the strategy will work across the board. I pass an arbitrary value in the query string, something like a GUID or the datetime stamp. This will force a fresh load as the URL will be unique.
I use ASP.NET MVC which I then set a optional parameter in my route, which the controller method ignores. I then set my URL via JavaScript:
d = new Date();
$('.thumbnail').attr('src', $('.thumbnail').attr('src') + d.getTime());
The solution I needed was unique, so this is probably not similar to what you are trying to resolve. However, it should get the point across.
do private browsing in Firefox and see if image is changes successfully and problem is with cache memory or with the code
Given a unique can be the solution, but you have to watch the length in the string can keep growing, now, you can use this option at the begining of your code
$.ajaxSetup({ cache: false });
this will disable caching.
Am having some behaviour I cannot understand why in my jqgrid.My Add , Edit and Delete buttons seem to have interchanged there respective urls.
$("#list").navGrid("#pager",
{add:true,addtext:'Add',edit:true,edittext:'Edit',del:true,deltext:'Delete'},
{top:50,left:"100",width:500,url:'<?php echo $this->baseUrl() ?>/artist/add',closeAfterAdd:'true'},
{top:50,left:"100",width:500,url:'<?php echo $this->baseUrl() ?>/artist/edit',closeAfterEdit:'true'},
{url:'<?php echo $this->baseUrl() ?>/artist/delete',closeAfterAdd:'true'}
);
When I try Add from the interface firebug console shows that am actually Editing.
When I try Edit from the interface firebug console shows that am actually Adding.
Delete seems to be fine.
Are there defaults or something that am missing in my jqgrid?
According to the jqGrid Documentation, the order of parameters is:
jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},
prmEdit, prmAdd, prmDel, prmSearch, prmView);
The problem with your code is that you are passing the Add and Edit parameters in the wrong order. You need to re-order them:
$("#list").navGrid("#pager",
{add:true,addtext:'Add',edit:true,edittext:'Edit',del:true,deltext:'Delete'},
{top:50,left:"100",width:500,url:'baseUrl() ?>/artist/edit',closeAfterEdit:'true'},
{top:50,left:"100",width:500,url:'baseUrl() ?>/artist/add',closeAfterAdd:'true'},
{url:'baseUrl() ?>/artist/delete',closeAfterAdd:'true'}
);