I am looking for some help autosaving tinyMCE. I want to save the content within tiny into its respective textarea after content has been updated. So that when I make an ajax call the content is in the textarea ready to be posted.
Currently I have this little bit of code but it only updates the text area when you press a button in tiny (like bold, italics, underline, etc). I also have the link where I found the code. Any help would be appreciated.
$('.AjaxEdit textarea.tiny').tinymce({
//other init options
//need this function to save tiny data before Ajax call
//http://www.webmasterkitchen.com/article/tinymce-ajax-form-submission/
setup : function(ed) {
ed.onChange.add(function(ed) {
tinyMCE.triggerSave();
});
}
});
You're best bet is to adjust your AJAX call so it pulls the content straight from TinyMCE or triggerSave just before the AJAX call rather than trying to constantly have the textarea in sync with the editor content. Serialising and filtering the entire document so it can be stored on every change is a major performance hit.
If you really need to keep the textarea in sync, you'd have to add DOM modification listeners to the document in the iframe that TinyMCE creates to store the content - you can retrieve it with the getDoc() function (see http://tinymce.ephox.com/documentation/api/index.html#class_tinymce.Editor.html-getDoc). You are going to have major performance problems here though.
Regards,
Adrian Sutton
http://tinymce.ephox.com
Though the question is quite old, I've came accross while searching for a plugin. At the end I've implemented my own plugin.
I have written a plugin that sends the form data to the specified url every x seconds. I have blogged it here.
In short, the idea is to create an iframe, change the target and action of the form dynamically, and submit the form to stimulate an ajax effect. Once saved, I am putting the form element into its initial state so that if the user wants to save manually he or she will not have any difficulties.
Please note that the plugin I've written is for tinymce4. You'll have to change the source code a bit for older versions.
You should take a look at this autosave plugin http://code.google.com/p/tinyautosave/
FYI, I have done it like this:
$('textarea.wysiwyg').tinymce({
...
onchange_callback : function(inst) {
// Prints the DOM element (textarea) to the console.
console.log( inst.getElement() );
// Prints the content of tinyMCE to the console.
console.log( inst.getBody().innerHTML );
}
});
Official documentation on the onchange_callback event
Related
I am moving from 1 page to other in html, passing the form elements and their values.
In creating the values I show/hide certain elements based on the need.
Now when on next page I click EDIT, I come back to this page but the view is the default view.
How can I modify the view using a jQuery/javascript from default to something based on the values saved, on form re-loading for edit?
if(jQuery('#UPLOADFILE').prop('checked') == true) {
jQuery('.FILEVIEW').show();
jQuery('.OTHERVIEW').hide();
}
Could you please give me a js example how to activate the above code. Everytime I re-load the page this piece of code doesn't execute, although #UPLOADFILE is checked.
Thanks in advance.
You know, instead of using JQuery, you can always save it to a database and then edit it to update the values. Seeing that you're trying to save something anyways(after you edit it, in my understanding), why not save what you entered and then edit it if you want to? Simplifies things a lot, imo. Just saying.
I would go with #Lloyd Francis answer but in case you don't want to do DB save and fetch then you have following options on client side.
Save the state in
Cookies
Pass the date in URL between pages ( not recommended )
Local Storage http://www.w3schools.com/html/html5_webstorage.asp
In the document ready event handle the logic appropriately.
I'm using the ck-editor(4.4.6). In Ck-editor's textarea I want to update my text, for that I use setData("hai"); that text updating correctly but some plugin functionality not working after use this setData(); (eg. restrict multiple enter if I reload the page it's working correctly).
editorInstance.setData("test text");
Anyway first time and after reload the page it working fine.
ruby on rails with jquery things are I'm using.
How can I solve this?
I don't know about ck-editor(4.4.6) but i can give you a way to solve it. You have to use based on your parent class. First time it works because it was same but after that it did't find the class/your specific term/attribute. So you have to use by calling parent class/id and under your activity.
You will need to call the update element function after setting the data, this will actually set the value in the field.
And, also you will need to specify the id of the textarea as given below.
CKEDITOR.instances.id_of_textarea.setData('hai');
CKEDITOR.instances.id_of_textarea.updateElement();
Finally, I got the answer instead of set data I just add my content to CKEditor text area as link this its working fine:
$('#cke_editor1 iframe').contents().find('body').html("Your text");
I'm creating a webform using a marketing automation platform. I want to add a field that functions with jquery to do an autocomplete. Unfortunately, the forms are generated through a WYSIWYG editor in the software, and then generated and put into the page when it renders. The only code for the form that appears in the HTML for the page is a simple variable placeholder - %%FORM::DEFINITION%% - which is then replaced with the form code when you visit the URL. The software support team tells me that making the change I want to make is impossible, which I see as a challenge.
The only thing I need to be able to do is add an id="autocomplete-dynamic" attribute to the input on the form. I had two ideas how I could achieve this.
The first, and most preferable option, would be some script that runs at the bottom of the page that simply inserts the attribute into the input tag after the page renders out. This would only be a client-side change, but since all this does is make the text field capable of looking up values out of another table, it should be fine. If someone had a script blocker in place, they would not be prevented from typing into the text field normally, it's just that the auto-lookup wouldn't work. We're trying to make it easier to select an item from a list of thousands of possibilities, but if someone had to type in their own entry without the autocomplete, it would not be a disaster. This seems like a clean solution, but I am not sure if it can be done.
The other possibility is to get the form code out of the software and embed it in a separate HTML document, and make the change there. You can extract the raw HTML for the form for use on another page, but pasting this code right back into the landing page causes errors. So, the thought then was that if I have taken the code generated by the software and put it in an HTML page on a separate web server, I could modify it as needed, and then turn around and use an iframe to stick it right back in the landing page. The software shouldn't complain because the form is being used on an external site like it's supposed to be... I have just hidden that external site back inside the platform-hosted page.
Option 1 would still be much easier to implement, I think, provided it is actually possible.
Thanks in advance.
Your first solution seems completely appropriate.
$(function() {
$('#myForm input').attr('id', 'autocomplete-dynamic');
});
This can be added anywhere inside a script tag because it's wrapped in a shorthand document.ready function, which waits to run until the DOM is ready.
In languages such as Java or GUI frameworks such as Qt for C++, it is possible to get a handle to some block of text (e.g. a label widget) the user cannot change, but which the program can modify based upon some condition being satisfied. I'd like to be able to do the same thing on an HTML web page from within some JavaScript code.
For example, consider a web page for entering user credentials. If the credentials are invalid, I'd like to display a message on the current web page without having to load a completely new page.
I've gotten it to work using an HTML text box or textarea, set to disabled, read only with some display style changes (via CSS). Changes induce some JavScript code to run which may result in changes to the value field of these text boxes or textareas. While this works okay, it just doesn't seem right. Is there a more orthodox way of accomplishing this?
Sure. There are a few libraries to handle this.
You may be asking for form validation. If so, try jQuery and jQuery's validate extension library: demo
Or you may be asking for a more generic-use observer pattern. If so, try one of the many MVVM/MVC libraries for JavaScript such as backbone.js or knockout.js (also ember, agility, angular, and spine): jsfiddle
edit: also note that if your need is just standard form validation, you can accomplish it in jQuery validate without any code to speak of - just add properties directly on the HTML elements themselves indicating what the validation rules are. Unfortunately, HTML5 data attributes weren't around when it was written, so you apply the validation rules as CSS classes.
edit 2: also note that jQuery validate out-of-the-box supports remote validation, such as the credentials or username-already-exists scenario: demo or documentation
Use jQuery's .submit(), using this you can Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
Example:
$("form").submit(function() {
if ($("input:first").val() == "correct") {
$("span").text("Validated...").show();
return true;
}
$("span").text("Not valid!").show().fadeOut(1000);
return false;
});
You can also use jQuery's .toggle() to show/hide any div.
Read this W3C article for better understanding of recommendation by W3, Providing client-side validation and adding error text via the DOM (slightly outdated)
You should try jQuery's .change();
Assuming your HTML input has an ID:
<input type='text' id='idOfTheField' name='email'>
You should try:
$('#idOfTheField').change(function(){
//Do stuff with the value.
//Wich is $('#idOfTheField').value() by the way.
});
To manipulate the data with a webserver, you have to perform an AJAX call, following:
$.ajax({
url: "parse.php",
data: {
email:$('#idOfTheField').value()
}
}).done(function() {
// Add the CSS class ".valid" that makes the text field green, for example.
$('#idOfTheField').addClass("valid");
});
I've been researching this on and off for a number of months now, but I am incapable of finding clear direction.
My goal is to have a page which has a form on it and a graph on it. The form can be filled out and then sent to the CGI Python script (yeah, I'll move to WSGI or fast_cgi later, I'm starting simple!) I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that. I have a form and a graph now, but they're on separate pages and work as a conventional script.
I'd like to avoid ALL frameworks except JQuery (as I love it, don't like dealing with the quirks of different browsers, etc).
A nudge in the right direction(s) is all I'm asking for here, or be as specific as you care to.
(I've found similar guides to doing this in PHP, I believe, but for some reason, they didn't serve my purpose.)
EDIT: The graph is generated using Flot (a JQuery plugin) using points generated from the form input and processed in the Python script. The Python script prints the Javascript which produces the graph in the end. It could all be done in Javascript, but I want the heavier stuff to be handled server-side, hence the Python.
Thanks!
I'm assuming that you have two pages at the moment - a page which shows the form, and a page which receives the POST request and displays the graph.
Will a little jQuery you can do exactly what you want.
First add to your form page an empty div with id="results". Next in your graph plotting page put the output you want to show to the user in a div with the same id.
Now attach an onclick handler to the submit button (or to the individual parts of the form if you want it to be more dynamic). This should serialize the form, submit it to the plotting page snatch the contents of the id="results" div and stuff them into the id="results" div on the the form page.
This will appear to the user as the graph appearing on the page whenever they click submit.
Here is a sketch of the jQuery code you will need
$(function(){
// Submit form
// Get the returned html, and get the contents of #results and
// put it into this page into #results
var submit = function() {
$.ajax({
type: "POST",
data: $("form").serialize(),
success: function(data, textStatus) {
$("#results").replaceWith($("#results", $(data)));
}
});
};
$("form input[type=submit]").click(submit);
// I think you'll need this as well to make sure the form doesn't submit via the browser
$("form").submit(function () { return false; });
});
Edit
Just to clarify on the above, if you want the form to redraw the graph whenever the user clicks any of the controls not just when the user clicks submit, add a few more things like this
$("form input[type=text]").keypress(submit);
$("form input[type=checkbox], form select").change(submit)
If you'll be loading HTML and Javascript that needs to be executed, and your only reason for not wanting to load a new page is to preserve the surrounding elements, you could probably just stick the form in an IFRAME. When the form is POSTed, only the contents of the IFRAME are replaced with the new contents. No AJAX required either. You might find that the answers here give you sufficient direction, or Google for things like "form post to iframe".
I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that.
The general pattern goes like that:
Generate an XMLHttpRequest (in form's onsubmit or it's 'submit' button onclick handler) that goes to your Python script. Optionally disable the submit button.
Server side - generate the graph (assuming raw HTML+JS, as hinted by your comment to another answer)
Client side, XmlHttp response handler. Replace the necessary part of your page with the HTML obtained via the response. Get responseText from the request (it contains whatever your Python script produced) and set innerHtml of a control that displays your graph.
The key points are:
using XMLHttpRequest (so that the browser doesn't automatically replace your page with the response).
manipulating the page yourself in the response handler. innerHtml is just one of the options here.
Edit: Here is a simple example of creating and using an XMLHttpRequest. JQuery makes it much simpler, the value of this example is getting to know how it works 'under the hood'.
Update img.src attribute in onsubmit() handler.
img.src url points to your Python script that should generate an image in response.
onsubmit() for your form could be registered and written using JQuery.