I am trying to open ckeditor in jQuery dialog first time it opens with the ckeditor box perfect I click it again the jQuery dialog loads with textarea with no editor.
I am assuming its because I am not destroying it properly or reinitializing I have no idea Here is a few snippets of what I have tried.
<script type="text/javascript">
if (CKEDITOR.instances['ContentText']) {
CKEDITOR.remove(CKEDITOR.instances['ContentText']);
}
CKEDITOR.replace('ContentText',
{
disableObjectResizing: true,
resize_enabled: false,
shiftEnterMode: CKEDITOR.ENTER_BR,
toolbarCanCollapse: false,
forcePasteAsPlainText: true
});
</script>
<script type="text/javascript">
if (CKEDITOR.instances.ContentText) {
CKEDITOR.instances.ContentText.destroy();
}
CKEDITOR.replace('ContentText',
{
disableObjectResizing: true,
resize_enabled: false,
shiftEnterMode: CKEDITOR.ENTER_BR,
toolbarCanCollapse: false,
forcePasteAsPlainText: true
});
</script>
This is code at the end of the form in the partial view I have tried in the dialog close function in the view
tried editor destroy.. if you want to see the code in action I can deploy it.
What is probably happening is that you're not initializing the CKeditor the second time you open the dialog. The first time it happens on page load. But the second time the modal dialog probably refreshes the dom (html) elements, and these new elements don't have the ckeditor attached to it.
You can solve this by running the initialize code when clicked to open the dialog. Best way is to throw your ckeditor code in a function and add that to the click event that triggers the dialog.
But since you're not posting the code that opens the dialog I could be wrong.
Try using:
CKEDITOR.editor.prototype.destroy
instead of
CKEDITOR.remove
Also you should write a function that is called when the dialog is opened that encompasses your CKE code (both destroying and re-instantiating the the instance).
If both of these things doesn't help you can rename the textarea and call it with the new name you created:
var newCKname = "ContentText" + Math.floor((Math.random()*50)+1);
$('#ContentText').attr('id',newCKname);
[instantiate CKE again with the newCKname]
Related
I have a link and a css hidden div:
Click me
<div class="bio">Your bio</div>
When I click the link, it shows the div. Refresh the page, and it's hidden again. I want the 'bio' div to stay open even when refreshing the page if the link was clicked and the div shown. I also want the opposite, that if I clicked the link again and the 'bio' div get hidden, to stay hidden on page refresh.
Basically, I am trying to "persist" the toggle state of the div in Laravel, and not sure how to do it.
I am using jquery for the show/hide functionality.
$('.bio-toggler').click(function(){
$('.bio').toggle();
});
Any ideas on how to do this?
Just do an AJAX POST to an endpoint within your application which sets the variable. When you're showing you're HTML, just check for that.
jQuery:
$.ajax({
type: "POST",
url: 'http://localhost:8000/api/profile/toggle',
success: function() {}
});
Controller:
public function toggle()
{
Session::set('toggled', true);
}
View:
#if (Session::get('toggled'))
Click me
<div class="bio">Your bio</div>
#endif
This is just boilerplate. You would probably have to tune it, like check if there is an older value to toggle in PHP, etc.
When editing my grid, if I click outside the grid, the box I was editing is still editable. How do I get the edited cell to "complete" the edit when it looses focus?
The following code will save the current edit.
Slick.GlobalEditorLock.commitCurrentEdit();
You'll need to place this inside an event handler that you think should trigger the save. For example, if you're using the sample text editor plugin, I believe an editor-text CSS class is added to the input field that's created when you're editing a cell so something like this should work:
$('#myGrid').on('blur', 'input.editor-text', function() {
Slick.GlobalEditorLock.commitCurrentEdit();
});
I found that I needed to wrap clav's handler in a timeout:
$("#myGrid").on('blur', 'input.editor-text', function() {
window.setTimeout(function() {
if (Slick.GlobalEditorLock.isActive())
Slick.GlobalEditorLock.commitCurrentEdit();
});
});
to avoid errors like:
Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
when using the keyboard to navigate. Presumably the new blur handler fires before SlickGrid can do its own handling and this causes problems.
Unfortunately, probably due to differences in event processing, Grame's version breaks keyboard navigation in chrome.
To fix this, I added another check to only commit the edit, if the newly focused element is not another editor element within the grid (as the result of keyboard navigation):
$('#grid').on('blur.editorFocusLost', 'input.editor-text', function() {
window.setTimeout(function() {
var focusedEditor = $("#grid :focus");
if (focusedEditor.length == 0 && Slick.GlobalEditorLock.isActive()) {
Slick.GlobalEditorLock.commitCurrentEdit();
}
});
});
This seems to work in current versions of firefox, chrome and ie.
I have a problem with the Dojo Dijit Dialog .hide() method during the animation sequence. I am using Dojo 1.7 with Tundra theme. I have a cancel button in my dialog that closes the dialog.
var global_welcome = new Dialog({
id: 'global_welcome',
style: "width: 750px",
draggable: false,
content: '<button type="button" id="global_welcomeCancel"> Cancel </button>',
onShow : function () {
on(dojo.byId('global_welcomeCancel'), "click", function (evt) {
dojo.stopEvent(evt);
global_welcome.hide();
});
});
}
});
This produces the following error on Firebug:
exception in animation handler for: onEnd fx.js (line 152)
TypeError: this._fadeOutDeferred is undefined
this._fadeOutDeferred.callback(true);
Previous answers to this error but with destroyRecursive instead of hide suggests it has to do with the dialog being destroyed before the animation finishes. I tried using dojo.hitch() and setTimeOut but that didn't seem to work. Also what is puzzling is that the first time I open this dialog using global_welcome.show() (called by another button), and press the cancel button, it works without error. The second time and afterwards, it produces the above error message. Additionally, the default close button for dojo dialogs on the top right corner never causes this error. Perhaps I could just have onShow call the methods that the close button calls?
Can someone help me out please? Thanks in advance!
The problem is in your onShow method. You wire up to the click event to hide, but never disconnect it. When you open the dialog the again, you wire the click method to hide the dialog again. The result is that hide will be called twice when you try to close the dialog for the second time. The error gets thrown with the second call to hide because the animations have already been destroyed.
Try this:
var signal = on(dojo.byId('global_welcomeCancel'), "click", function (evt) {
dojo.stopEvent(evt);
signal.remove();
global_welcome.hide();
});
I have a web application that loads javascript on page load:
$(function() {
$('.modal-delete').click(function() {
alert();
});
});
I have a html page with a series of buttons which alert a blank message box when they're clicked:
<button class="modal-delete btn danger"></button>
which works fine.
However, a have some AJAX calls that generate more buttons just like the ones above but NOT on page load! They can be created at any time. These buttons do not do anything but they're meant to load the alerts. They're identical but because they never existed on page load, the Jquery code doesn't work on these buttons. How do I attach the same code to these buttons too?
Many thanks :).
I think you'll want jQuery's 'live()' function:
$('.modal-delete').live('click', function() {
alert();
});
This binds to the elements which match but also rebinds when new elements are added in the future:
"Attach an event handler for all elements which match the current selector, now and in the future"
Change the ready code to this...
$(function() {
$("document").on("click", ".modal-delete", function() {
alert("click");
});
});
I have an image that is in my apex application with the id tag of submit_button. I want to display an alert when the user tries to click this image but for some reason nothing is happening. In my header on the page I have this code
<script type="text/javascript">
$(document).ready(function() {
$('#submit_button').click(function) {
alert('hi');
}
});
</script>
Any ideas?
I don't know why that doesn't work (it doesn't work for me either, I just tried), but it is very simple to do via a dynamic action with the following properties:
Event = click
Selection Type = DOM Object
DOM Object = submit_button
"True" Action = Execute Javascript Code
Fire on page load = (unchecked)
Code = alert('hi');