CODEWITHSUNDEEP
ajaxtinymcesave
Sanjay Panchal
Sanjay Panchal

Reputation: 540

TinyMCE textarea and post form using ajax

I m using tinyMCE for textareas and POSTing form through AJAX.

But when I m trying to save textarea value, it is taking old values on first click, but it takes updated values on second click.

I have tried using tinyMCE.triggerSave() but it didn't work.

I have also tried tinyMCE.get('myid').getContent(), still it takes old values.

My code is as follows.

    $(".submit").live("click", function () {
            tinyMCE.triggerSave();
            var f = $(this).parents("form");
            var action = f.attr("action");
            var serializedForm = f.serialize();
            //tinyMCE.triggerSave(); also tried putting here
            $.ajax({
                 type: 'POST',
                 url: action,
                 data: serializedForm,
                 async: false,
                 success: function (data, textStatus, request) {
                     $(".divform").html(data);
                 },
                 error: function (req, status, error) {
                     alert&("Error occurred!");
                 }
            });
    return false;
    });

Please help, any help would be appreciated

Upvotes: 19

Views: 43617

Answers (7)

Alex Baigts
Alex Baigts

Reputation: 1

For multiple instances:

tinymce.init({
    mode : "specific_textareas"
    ,body_class: 'tinymceclass'
    ,setup: function (editor) {
        editor.onChange.add(function() {
            $('#' + this.id).html( tinymce.get(this.id).getContent() );
        });
    }
});

Upvotes: 0

Welcho
Welcho

Reputation: 35

I know time passed but i found this solution today.

Before serialize the form you must save the editor just using the method:

tinymce.activeEditor.save();
var serializedForm = f.serialize();

Maybe this helps some comrade.

Upvotes: 0

hdaleman
hdaleman

Reputation: 41

For me works fine with

tinymce.triggerSave();

Put it before the ajax post

Upvotes: 1

Nik Smith
Nik Smith

Reputation: 21

user this script before posting data by using Ajax. This is javascript code before use please load tiny mce js file and user it.

tinymce.triggerSave();

$.ajax({ 
    type: 'post', 
    url: 'autoSaveReport.php', 
    data: $('form').serialize(), 
    success: function (result) { 
        var redirectURL = window.location.pathname; 
        var redirectURL1 = redirectURL+"?incid="+result; 
        window.location = window.location+"?incid="+result; 
    } 
});

Upvotes: 2

HappyDog
HappyDog

Reputation: 1341

An alternative implementation to the one posted by Dan Malcolm, for TinyMCE 3.x, would be as follows:

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.onChange.add(function() {
            editor.save();
        });
    }
});

As well as working on 3.x, this version uses editor.save instead of tinymce.triggerSave, which means it only updates the current editor rather than all editors in the page.

Upvotes: 6

Dan Malcolm
Dan Malcolm

Reputation: 4432

You can configure TinyMCE as follows to keep the values of hidden textareas in sync as changes are made via TinyMCE editors:

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
});

With this in place, you can access up-to-date values directly from the textarea elements at any time.

This has been tested on TinyMCE 4.0

Demo running at: http://jsfiddle.net/9euk9/

Upvotes: 55

Thariama
Thariama

Reputation: 50832

Use this instead of tinymce.triggerSave();

$('#' + 'your_editor_id').html( tinymce.get('your_editor_id').getContent() );

Upvotes: 16

Related Questions