So i am having trouble sending the value of the textareas that are dynamically generated and have summernote applied to them.
Here is a link that will reproduce the problem:
http://jsfiddle.net/jk6pjnt7/1/
so basically, i am trying to add a new textarea dynamically when i click the "add Step-textarea" because i don't know how many "step" the user will need. the problem is that when i submit the form, i won't get the value of the new textarea. they will have a blank value.
If i do the same and i remove summernote plugin form the process everything works fine.
I have this small pice of coed that prevents the form from submitting and will display what would be submitted in the console, so you might need to open your devtools to see the debugging info.
$('form').submit(function () {
//console.log($(this));
console.info($('form').serializeArray())
return false;
});
Since the DOM is being dynamically changed, we cannot 'watch' these new elements in the typical way. In jquery what we use is called delegation and in particular jQuery.fn.on. We bubble up from the dynamically altered container (in this case, being <form>) to an element that will exist and guaranteed not to change. In this specific case in particular, your line $(next_input).val(''); I changed to $(next_input).html(''); as we're dealing with delegated textarea's which work a bit differently from input boxes in the way they take data.
Here is the fixed code: http://jsfiddle.net/jk6pjnt7/3/
Related
I have a textarea that as the user enters data into the textarea, the data is displayed at the bottom of the form as a display of how their data may appear (much in the same way that StackOverflow gives a preview display of the users question as the user types it).
I have installed CKEditor 4.3.1 to this textarea and the preview display no longer appears.
I assumed that this was because the id of the text area had been replaced by the id of the CKEditor, so I tried replacing the id of the text area with the id of the CKEditor, but this approach did not work.
Is my thinkg wrong? I have read the CKEditor docs, but found nothing to help me.
What approach should I use to display the data as the user enters their data into the CKEditor?
This is because CKEditor runs next to your <textarea> in DOM (hides it first) and, in a matter of fact, it doesn't update contents of your <textarea> unless you request it or destroy the editor. That's how CKEditor works.
Call editor.updateElement to synchronize <textarea> with rich editor contents. You can use editor#change event to updateElement periodically and keep things in sync.
What might be the problem is that, quite likely, your existing code observes keyboard events (onkeyup, onkeydown) fired in <textarea> and updates the preview at the bottom of your page. You need to re-attach those callbacks to editor#change event because CKEditor doesn't trigger any events in <textarea> (as I mentioned, it doesn't interact with it at all). So there are two ways of solving your problem:
On editor#change call editor.updateElement and fire keyboard event from code on <textarea> (see the fiddle).
CKEDITOR.replace( 'editor', {
plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar,undo',
on: {
instanceReady: function() {
// Show textarea for dev purposes.
this.element.show();
},
change: function() {
// Sync textarea.
this.updateElement();
// Fire keyup on <textarea> here?
}
}
} );
Attach existing preview update callbacks to editor#change.
I'm for 2. since 1. is a kind of hack. But it's up to you, of course.
I have a node add form with a field that has an 'add more' button. This particular field needs to be populated dynamically. Why doesn't it work to trigger a jquery click on the 'add more' button ($('#edit-field-roof-area-und-add-more').click();)? If I do that in the console, it returns an empty array.
What is the simplest way to create one or two fields in a node add form that I can add an unlimited amount to dynamically from the client side (the values come from a JS application.)
found it!! jQuery('#edit-field-phone-no-und-add-more').trigger('mousedown') Also, the ID changes each time the button is clicked.
when adding nodes you might want to look into using context in your handler:
$('#edit-field-roof-area-und-add-more', 'body').click();
since the elements i dynamically created after the DOM is loaded.. try that, since the body tag is already present in the DOM when the page loads
and/or provide a jsfiddle or codepen example to better help you more...
EDIT:
you could also try this jQuery trigger():
$('#edit-field-roof-area-und-add-more', 'body').trigger("click");
or jQuery triggerHandler():
$('#edit-field-roof-area-und-add-more', 'body').triggerHandler("click");
the difference between the two is that triggerHandler does not bubble up the DOM
also do have an example jsfiddle or codepen.. of your click event handler you are trying to trigger?
Okay, so I need for an input element to be automatically focused when it shows up in the DOM. This is what I am currently trying to do:
modal.fadeIn('fast', function(){
$('input.cm_modal_input_elem').focus();
});
This isn't working. What is the official way to do this?
That is the official way of doing it, and if it's not working something else besides the posted code must be causing the problem. Like say you are inserting the element dynamically and expecting a function you called on page load to execute later on when the element is inserted or that there are other elements that receive focus later in your script etc.
Here's a fiddle to show it working !
Can anyone suggest me a javascript function to set the text box to readonly on pressing the submit button. So that the contents cannot be modified.
To disable an input you'll want to set its disabled attribute. If you can use jQuery then something like this would be what you're looking for:
$('#idOfYourInput').attr('disabled', true);
If jQuery isn't an option, then you'll want to use the setAttribute function. Take a look at the MDN documentation for it. Something like this:
var d = document.getElementById('idOfYourInput');
d.setAttribute('disabled', 'true');
(Both of these code samples assume that you're identifying your input by its id attribute. If that's not the case, these would need to change. The jQuery one would be trivial to change, you'd just need to update your selector to identify the target attribute. The latter code sample would need to use some other DOM navigation/selection functions to find your input element.)
You'd want to include this within the handler for your submit button. Understand, however, that this will only matter on the current context of the page. So I'm assuming your submit button is being used to perform a submit via AJAX and not actually POST the whole page, correct? Because if you're POSTing the whole page then, when the page refreshes, you'll be on an entirely new page context. (Which means any code associated with a button click event will not yet have run.)
I'm handling the "onChange" event of an HTML input file field by using jQuery's "change" function. This works as intended, and does indeed trigger when the element's value changes. However, not in the following scenario:
The user specifies a file to upload. We call this file "file.dat".
jQuery later sets the value of the file field to "", by using the
val-function.
The user specifies the exact same file to upload, "file.dat".
In the above scenario, "onChange" doesn't get called at step 3. However, if the user at step 3 specifies a different file, it does indeed get called.
Is it because I am using jQuery's val-function to change the value? What other alternatives do I have if I want to reset the input file field to its base/default value?
For security reasons, JavaScript is unable to affect the value of a file input. It does appear that the value has been cleared, but it hasn't really.
You can get around this by either resetting the entire form, or creating the element again and inserting it into the DOM, in place of the old one.
Here's a working example. Note the use of the jQuery live function to bind the change event. This is required because we are inserting a new element into the DOM every time the Clear button is clicked.
Have you tried .reset() instead of .val() ?