I have text-field on which i have attached the Auto-complete plugin (Y.Plugin.AutoComplete)
what I do is to render it once other fields above it are checked.
My question is once the above fields are checked and the Auto-Complete is rendered but again if the user goes back and enters something incorrect then this time i have to stop the Auto-Complete from displaying suggestions again.
I have tried render:"false" but that did no help.
You can remove the Autocomplete plugin by using node.unplug().
input.ac.render();
otherNode.on('click', function () {
if (someCondition) {
input.unplug(Y.Plugin.Autocomplete);
}
});
Related
I am adding menu buttons to a tinymce editor. In this interface there are multiple tinymce editors loaded on the page at once. The menu buttons I am adding all do some custom styling either using the formatter or by applying custom css classes to selected elements. As part of one of the items I need to also "remove all formatting" from the selection as well as add some text around the selection. There is already a built-in plugin that does this, so I would like to just call that function from my plugin.
I got this working by using jQuery to click the "remove all formatting" button, however since there are multiple editors on the page, this makes the page scroll from where the user is at, depending on which button actually gets clicked by jQuery.
I would rather not use this approach because i feel like it would be much cleaner and provide a better result to execute the remove formatting code from my plugin, but I am unsure how to access the function I need to call.
{
type: 'menuitem',
text: 'Sample Answer',
onAction: function() {
$('button[title|="Clear formatting"]').click(); //I would like to call this function here instead of jQuery clicking a button.
editor.formatter.apply('sample_answer');
}
},
So after some more digging, it appears that a certain amount of tinymce commands can be executed using editor.execCommand RemoveFormat is one of the commands you can use, so they made it easy on me for what I need to do.
It would still be nice to know if there was a way to execute other functions if I wanted to, but the execCommand function definitely solves this issue.
{
type: 'menuitem',
text: 'Sample Answer',
onAction: function() {
editor.execCommand('RemoveFormat');
editor.formatter.apply('sample_answer');
}
},
I have multiple fields including text,checkbok box, drop-down etc in jsf form, which is showing values from DB.I would like the submit button to be disabled by default and to only be clickable if the user made changes to any of the fields in the form. Please help !!
For a simple form you can use this jQuery plugin that a user mentioned here.
Edit:
The plugin is quite simple to use, and powerful, because for example you will have your buttons disabled again if you revert changes inside an input field.
Just make sure that you include the js file:
<h:outputScript name="path/jquery.are-you-sure.js"/>
And for using it, you have to add the line:
$('#idofyourform').areYouSure();
After that, for enabling and disabling submit buttons you have to add:
//All disabled by default
$('#idofyourform').find('button[type="submit"]').attr('disabled', 'disabled');
//Enabled all when there are changes
$('#idofyourform').bind('dirty.areYouSure', function () {
$(this).find('button[type="submit"]').removeAttr('disabled');
});
//Disable all when there aren't changes
$('#idofyourform').bind('clean.areYouSure', function () {
$(this).find('button[type="submit"]').attr('disabled', 'disabled');
});
Both codes inside your document ready function.
Note that I used button[type="submit"], which is what p:commandButton renders by default. You can use input if it's your case.
NOTE: This plugin also adds an extra functionality the OP didn't ask for (the dialog check when you navigate without saving changes). You can disable this if you want by doing:
$('#idofyourform').areYouSure( {'silent':true} );
Not tested, but I would simply use something like this :
$(document).ready(function() {
$('#formId input[type="submit"]').attr('disabled','disabled');
$('#formId').change(function(){ $('#formId input[type="submit"]').removeAttr('disabled'); });
});
If you don't use any jQuery functions already in the view (any PrimeFaces ajax buttons for example), you might need to add :
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I am creating a CKEditor plugin, using version 4.2.1. I am trying to follow the tutorial on a Simple Plugin. However, the text inputs in my dialog window are not editable / clickable in the dialog, even when I just copy in the entire abbr plugin from the tutorial with no changes.
I can still click the dialog tabs, OK / Cancel buttons, and drag the dialog around. I have added in other elements (like selects) to the dialog in my custom version, and I can interact with those.
When I check the text input elements in Chrome's Dev Tools, I can add text via the Console / jQuery and it appears. I get no failures in the Console.
$('#cke_229_textInput').val('help');
Will add text to the text input and display it on the screen. But I can't interact with the element via mouse / keyboard / browser. Is there something obvious in the CKEditor configuration that I am missing? Sorry if this is a really stupid question--first time working with CKEditor. I have also searched the CKEditor forums and Google, without finding any related issues.
This happens in both Chrome 30 and FF 24.
My call to create the editor:
var me = document.getElementById('resource_editor_raw');
editor = CKEDITOR.replace(me, {
fullPage: true,
removePlugins: 'newpage,forms,templates',
extraPlugins: 'abbr',
allowedContent: true
});
Thanks for any tips or hints!
Update #1
Thinking this might be related, I have also tried setting the z-index of the text element to very high, using Chrome's Dev Tools. No luck, it is still not editable / highlightable...
Update #2
This seems to be this conflict with jQuery UI. The suggested fix doesn't work for me yet, but will poke around...leaving this up for anyone who might stumble across it.
Final Update
So Brian's tip helped me. Both the Bootbox modal backdrop (what I am using to generate the original dialog) and the CKEditor dialog backdrop have tabindex=-1, so they conflict somehow. Manually turning off the Bootbox backdrop (i.e. setting tabindex='') works with Chrome dev tools, so I think I can hack something together with jQuery or whatnot. Amazing stuff...thanks for the help!! Not sure why I got this working in a jsFiddle...if I recall correctly, I might not have had a backdrop on those dialogs.
Also, for reference, a tabindex of -1 makes things untabbable, which makes sense for a backdrop.
The modal html attribute tabindex='-1' is what seems to be causing the issues for me.
The tabindex='-1' is actually in the bootstrap documentation and is needed for some reason that I am unaware of.
Use the 100% working script..
<script type="text/javascript">
// Include this file AFTER both jQuery and bootstrap are loaded.
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
</script>
Note: Include this file after both jQuery and bootstrap are loaded.
OMG I have been googling this for hours and finally fond some code that works!!
Stick this in your dialog page that will have a ckeditor in it:
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
I found the fix here:
https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog
Not sure if anyone else is having this issue now. I was ripping my hair out trying to create a hack. It was a pretty simple solution after a while of digging and search the web. This fix helped me. Just place it on the same page where you want to place your editor - when loading from jQuery. The issue is conflicting tabindex, so I simply removed that attribute from the modal.
<script>
$(function(){
// APPLY THE EDITOR TO THE TEXTAREA
$(".wysiwyg").ckeditor();
// FIXING THE MODAL/CKEDITOR ISSUE
$(".modal").removeAttr("tabindex");
});
</script>
I am using Semantic UI and fix this problem by create an instance of CKEDITOR after create Modal.
$('#modal-send').modal('attach events', '.btn-close-modal').modal('show');
var ckeOptions = {
entities: false,
htmlEncodeOutput: false,
htmlDecodeOutput: true
}
CKEDITOR.replace('message', ckeOptions);
CKEDITOR.config.extraPlugins = 'justify';
I also faced this issue when I updated the CKEditor into 4.14
I found the fix in here - http://jsfiddle.net/kamelkev/HU8Qt/3/
In this case,
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function (event) {
return !!$(event.target).closest(".cke").length || this._super(event);
}
});
It will return false, so the textbox gets disabled/ unfocused (losing focus)
As a solution, we need to return true or need to modify the class .cke in the return statement into .cke_dialog
return !!$(event.target).closest(".cke").length || this._super(event);
I tried to upload images to server from CK Editor[without CKFinder] and on positive side i am able to do. whenever we are trying to create some dialog, they are creating one div on the fly which will hold your dialog box. Better you check the CSS property for your text box using chrome and change it. Hope this will help you.
First of all, this is not about the tinyMCE.triggerSave();
Sometimes when editing content, I switch to the textarea mode with the following
$('#id').tinymce().hide(); // from the official example
which temporarily hides the rich editor from view so I can see the HTML codes.
But if I submit the form right after editing without switching back to rich editor [ using .show() ], the content will not be updated.
My question is how can I save the content of textarea to iframe?
Please do not offer me the "use the code window" option, I have a customized show/hide button outside of TinyMCE.
Switching by mceAddControl/mceRemoveControl will solve the problem. But when submitting, the content inside the textarea will not be formatted.
Well, I just figured out a way to update content
$('#id').blur(function() {
$('#id').html(document.getElementById('id').value);
});
UPDATE
this might be even better, for all instances
$('textarea.tinymce').blur(function() {
var this_id = $(this).attr('id');
$('#' + this_id).html(document.getElementById(this_id).value);
});
Any other solutions are really appreciated.
I have an issue where I am using Jqueryui autocomplete. The auto-suggest feature works fine, however, when you click to select one of the items in the list the textbox value is deleted and the list disappears, rendering the autocomplete useless.
I cna only assume its conflicting with something else on the page but I am stumped on this and wonder if anyone can help?
This functions correctly in Firefox and Chrome but in IE it does not.
The issue is occurring on this page: http://www.norfolktastesgood.com/
Thanks in advance.
Possibly the onClick="this.value='';" attribute on line 83 called cause of bubbling????
try adding an event handler to the input, remove the onclick attribute to test
$( "#LocationSearch" ).autocomplete({
source: SearchList
}).click( function(e){
if ( $(e.target).is('#LocationSearch'){
$(this).val('');
}
});
I'm on a linux machine so can't test this at the minute
Hope it works, let me know