We have some code for validating input on a CKEditor textarea that runs on blur. We add a class of ckeditor_textarea to all textareas that use CKEditor and run this code to attach the necessary functions to the blur event:
$("textarea.ckeditor_textarea").each(function(){
var textarea_id = $(this).attr("id");
CKEDITOR.instances[textarea_id].on('blur',function(){
// Validation functions here
});
});
This works to fire the validation functions when the blur event happens. But we also need to manually trigger the blur event when the submit button is pressed to run the validation functions on these CKEditor textareas before submitting.
How do you trigger the blur event on a CKEditor textarea? Using jQuery syntax (which of course doesn't work because the CKEditor instance isn't a jQuery object), I'm basically looking for something like this:
$("textarea.ckeditor_textarea").each(function(){
var textarea_id = $(this).attr("id");
CKEDITOR.instances[textarea_id].trigger('blur');
});
You should not mix jQuery events and CKEDITOR events. If you would like to have blur for CKEDITOR instance, register it:
ckeInst.on('blur', function(e){
});
And then, if you really want to trigger blur event, you do it like this:
ckeInst.focusManager.blur( true );
Editor is retrived from event (if you have it), or via CKEDITOR.instances['yourCkeName'];
For submit validation I would suggest using the updateElement() method within your submit handler, then run your validation code:
Following will update any and all elements using editor on a page:
$('form').on('submit', function(e){
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
// run validation code
});
This also makes sure that the form data is up to date with the editors themselves
The only way which reliably and properly worked for me is:
editor.window.$.frameElement.blur();
Based on #charlietfl's answer, I was able to come up with a solution for my situation.
First, I created a function to call that runs the validation code:
function ckeditor_blur_event(textarea_id){
// validation code
}
Then, I changed the first block of code in my question to use the new function:
$("textarea.ckeditor_textarea").each(function(){
var textarea_id = $(this).attr("id");
ckeditor_blur_event(textarea_id)
});
Finally, I trigger the same validation code when the form is submitted:
$("textarea.ckeditor_textarea").each(function(){
var textarea_id = $(this).attr("id");
CKEDITOR.instances[textarea_id].updateElement();
ckeditor_blur_event(textarea_id)
});
Related
I've got the following piece of code that will 'spread' an event to all my js modules. This is intended to be triggered when trying to move away from the current page. The issue is that I don't this to be triggered when the form is submitted (submit/cancel/save). Is there a way to check that?
main.js:
...
$(document).ready(function(){
$(window).on('beforeunload', function(){
var e = $.Event('webapp:page:closing');
$(window).trigger(e);
if (e.isDefaultPrevented()){
return e.message || 'You have unsaved stuff!';
}
});
}
...
Before submit/save/cancel, you can call below code which will remove the handler from all listeners
$(window).off('webapp:page:closing');
On form submit unbind the event:
$("#frm").submit(function(e) {
$(window).off('beforeunload');
});
From MDN: The .off() method removes event handlers that were attached with .on()
The only way that comes to mind is: In the page with the form, when it handles the webapp:page:closing event, it should not prevent the default if it has submitted a form (which it can track via a variable in the page).
I am trying to disable the default confirm box that fires onSubmit. I have been trying for a while now with no success. This is what I tried...
My Markup
<form method="post" action="special.php" id="myForm" onsubmit="return confirm('Are you sure you ready to submit this order?\n\n')">
//input fields
</form>
My JavaScript
$('.excelDL').click(function(){
$('#myForm').trigger('submit', function(e){
window.alert = function() {}; //overwrite default alert
$.post('mail.php', $(this).serialize(), function (data) {})
e.preventDefault();
});
});
The confirm box appears because of the onsubmit="return confirm(...)" attribute on your <form>. If you remove that, the confirm dialog will not appear when you submit the form via JQuery.
If you need this confirmation to appear except when submit the form using your $('#myForm').trigger(...) code, then remove your window.alert = function() {}; line and add the line $('#myForm').submit(function(){ return true; }); before you call .trigger(). This will remove the onsubmit handler for the form before submitting it.
It's generally a bad idea to try to override the built in methods (like confirm()) it's a much better idea to just not call them.
To begin with you're not firing an alert, you're firing a confirm. so change
window.alert = function() {};
to
window.confirm = function() {};
then move it outside the submit function so that it overwrites the native function before the submit happens.
The jQuery docs don't mention that you can pass a function to .trigger as second parameter and I don't believe it actually works.
If you just want to make the Ajax request without triggering .submit, you can make the call directly
$.post('mail.php', $('#myForm').serialize(), function (data) {});
or trigger only event handlers bound with jQuery using .triggerHandler. In both cases a native submit event won't generated and event handlers bound with other ways won't be triggered.
As others said, binding all event handlers with jQuery instead of using inline event handlers would improve the code as well.
just take this out
onsubmit="return confirm('Are you sure you ready to submit this order?\n\n')"
then you can manually decide when to use the alert in this function
$('#myForm').trigger('submit', function(e){
// cal the confirm here , or write your own pop up script that looks the way you want.
});
I have an ASP.NET Web Form application developed by another developer.
This developer made extensive use of ASP.NET controls therefore there are many automatically generated Javascript functions wired to HTML elements' event.
Now I have been asked to add a functionality: disable the submit button upon first stroke, in order to avoid the users to click several times on the button.
Here is the jQuery code that I use http://jsfiddle.net/2hgnZ/80/ and the HTML DOM is identical to the one I use:
$('#form1').submit(function(e) {
$(this).find('input[type=submit]').attr('disabled', 'disabled');
// this is to prevent the actual submit
e.preventDefault();
return false;
});
This script in my code does not work and after many attempts I am sure it depends on the JavaScript event wired to the onSubmit event of the button.
How can I postpone the execution of this Javascript on favour of the jQuery unobtrusive function?
hmm. Can you confirm that your event is firing? I cheked the submit docs, and it is bound rather than live, which is good.
How about wiring to the button, instead? It would not be perfect, because the enter key doesn't use the button, but if it works that way you'll learn something
Have you tried calling e.stopImmediatePropagation(); http://api.jquery.com/event.stopImmediatePropagation/
This piece of code delays the execution of function amount you want.
// delay code for one second
$(document).ready(function()
{
window.setTimeout(function()
{
// delayed code goes here
}, 1000);
});
This piece of code should help you get the original event and then trigger it after your desired code.
$(function(){
var $button = $('#actionButton'),
clickEvent = $button.data("events")['click'][0].handler; //saves the original click event handler
$button.unbind('click'); //and removes it from the button
//create a new click event.
$button.click(function(e){
// doWhatever we need to do
$.ajax({
url: url,
data: data,
success: function(){
$.proxy(clickEvent,$button)(e);//attach the original event to the button
}
});
});
});
I have an external library that's calling form.submit(). No matter what I do, I can't seem to catch the event when it's called directly like that.
Example: http://jsfiddle.net/cwolves/yXsWc/
Instead of intercepting the event, have you tried intercepting the submit() call itself? You could do something like replace the default submit() function with one of your choosing that only submits if some flag is set. For instance:
var formElem = document.getElementById("myForm");
formElem.oldSubmit = formElem.submit;
formElem.submit = function(myFlag) {
if (myFlag) {
document.getElementById("myForm").oldSubmit();
}
};
This might be a bit hack-ish, but you could unbind the click event from that certain element, then re-bind it to work the way you want it to.
$('button').unbind('click').click(form.onsubmit);
jsFiddle
I've got a page with a normal form with a submit button and some jQuery which binds to the form submit event and overrides it with e.preventDefault() and runs an AJAX command. This works fine when the submit button is clicked but when a link with onclick='document.formName.submit();' is clicked, the event is not caught by the AJAX form submit event handler. Any ideas why not or how to get this working without binding to all the a elements?
A couple of suggestions:
Overwrite the submit function to do your evil bidding
var oldSubmit = form.submit;
form.submit = function() {
$(form).trigger("submit");
oldSubmit.call(form, arguments);
}
Why not bind to all the <a> tags? Then you don't have to do any monkey patching, and it could be as simple as (assuming all the links are inside the form tag):
$("form a").click(function() {
$(this).parents().filter("form").trigger("submit");
});
If you are using jQuery, you should be attaching events via it's own event mechanism and not by using "on" properties (onclick etc.). It also has its own event triggering method, aptly named 'trigger', which you should use to activate the form submission event.
Thanks Eran
I am using this event binding code
this._form.bind('submit', Delegate.create(this, function(e) {
e.preventDefault();
this._searchFadeOut();
this.__onFormSubmit.invoke(this, new ZD.Core.GenericEventArgs(this._dateField.attr('value')));
});
but there is legacy onclick code on the HTML and I would prefer not to change it as there are just so many links.
This worked for me:
Make a dummy button, hide the real submit with the name submit,
and then:
$("#mySubmit").click(function(){
$("#submit").trigger("click"); });
set an event handler on your dummy to trigger click on the form submit button. let the browser figure out how to submit the form... This way you don't need to preventDefault on the form submit which is where the trouble starts.
This seemed to work around the problem.