When I use jQuery AJAX to submit tinyMCE forms on my page, it takes two clicks to actually submit to database

Question

I've been trying different options for over a week now and nothing seems to work. What makes this slightly more complicated is that I have multiple forms on the page that all need to be tied to this same submit function. They all have different IDs.

The following is a simplified version of my jQuery:

$('form').on('submit', function(form){
    var data = $(this).serialize();
    $.ajax({
        type:       'POST',
        cache:      false,
        url:        'inc/process.php',
        data:       data,
        success:    function(){
                        // The following fires on first AND second submit
                        console.log("Updates have successfully been ajaxed");
        }
    });
    return false;
});

I have also tried using $('form').submit() with the same results.

Relevant sections of process.php:

$query =    'UPDATE     pop_contents
            SET     ';
$id = $_POST['content_id'];
/* to avoid including in MySQL query later */
unset($_POST['content_id']);

$length = count($_POST);
$count = 0;
foreach($_POST as $col => $value){
    $value = trim($value);
    $query .= $col."='".escapeString($value);
    // don't add comma after last value to update
    if(++$count != $length){ $query .= "', "; }
    // add space before WHERE clause
    else{ $query .= "'  "; }
}
$query .= 'WHERE        id='.$id;

$update_result = $mysqli->query($query);

is it necessary to have many forms in one page and not some jquery code that can add elements to 1 form? — Gntem, Jul 18 '12 at 18:51
I believe the problem is in your PHP, as the sucess callback function is being called. Have you already tried to use that PHP sending dummy data? Like hardcoding your $_post[content_id] and acessing that PHP directly on browser? — Marcelo Assis, Jul 18 '12 at 18:53
@GeoPhoenix, yes it is necessary for my design to work efficiently. Multiple forms shouldn't be an issue, as I've seen solutions that handle this (and work) in the past. I just can't get mine to work. — Dan, Jul 18 '12 at 19:21
@MarceloAssis, can you elaborate? I'm not quite sure I understand the test you're suggesting. The PHP definitely works the second time, but I'm not sure if that's relevant to your comment or not. — Dan, Jul 18 '12 at 19:25
@Dan, What I mean is for you test your PHP isolated from that Jquery. Test the PHP directly on browser, or create another HTML with only one form and test it too. Just to ensure the problem is not with PHP, understand my point? — Marcelo Assis, Jul 18 '12 at 19:29
@MarceloAssis: Gotcha. Alright, I'll play with that real quick and let you know. — Dan, Jul 18 '12 at 19:32
@MarceloAssis, I set the form action to inc/process.php and it worked on first run so that should mean the problem resides with my jQuery. — Dan, Jul 18 '12 at 19:46

score 26 · Accepted Answer · answered Aug 02 '12 at 16:47

26

After much hair pulling and swearing, I've solved the problem.

TinyMCE editor instances do not directly edit textareas, so in order to submit the form, I needed to first call tinyMCE.triggerSave() from the TinyMCE API. So, the working code looks like this:

$('form').on('submit', function(form){
    // save TinyMCE instances before serialize
    tinyMCE.triggerSave();

    var data = $(this).serialize();
    $.ajax({
        type:       'POST',
        cache:      false,
        url:        'inc/process.php',
        data:       data,
        success:    function(){
                        console.log("Updates have successfully been ajaxed");
        }
    });
    return false;
});

answered Aug 02 '12 at 16:47

Dan

3,246
1
32
52

Great simple answer. Exactly what I was running into and this worked perfectly. I love this website! – JCisar Nov 19 '12 at 21:27
If you asked me, I'd say this is something the guys behind tinyMCE should be taking care of under the hood! – Ifedi Okonkwo Feb 24 '15 at 10:14
Many years later, comes to the rescue. Thanks – PHPer Feb 20 '17 at 11:06

score 3 · Answer 2 · edited Dec 07 '12 at 09:42

I was confused when i pass the Ajax String data via tinyMce ..but it is not save to database with php...then i use the

tinyMCE.triggerSave();
event.preventDefault();

then fine.........

$("#save").click(function() {
tinyMCE.triggerSave();
event.preventDefault();
var data = $(this).serialize();
 var position = $("#position").val();
 var location = $("#job_location").val();
|
|
|
|
 var end_date = $("#end_date").val();
 var dataString = '&position='+ position + '&job_location=' + location + '&job_category=' + category + '&job_des=' + job_des +'&job_res='+ job_res + '&job_requ='+ job_requ + '&start_date='+ start_date + '&end_date='+ end_date;
alert(dataString);
 $.ajax({
 type: "POST",
 url: "regis.php",
 data: dataString,
 success: function(data){

 }
 });
 return false;
 });

score 0 · Answer 3 · answered Jul 18 '12 at 18:50

0

i believe the problem is that you don't prevent the default action of the form. try this

$('form').bind( 'submit', function(event) {
   event.preventDefault(); // added
   console.log("Binding"); // changed to console.log
    $.ajax({
      type: "POST",  
      url: "inc/process.php",
      data: $(this).serialize(),
      success: function() {
        console.log("Your updates have successfully been added."); // changed to console.log
      }
    });
});

answered Jul 18 '12 at 18:50

Gntem

6,949
2
35
48

Thanks for the suggestion, but no luck. Seeing the same behavior as before. I like the console better than alert though. Thanks for that! – Dan Jul 18 '12 at 19:19

score 0 · Answer 4 · answered Mar 16 '15 at 18:37

Another neat trick to go along with this is setting the progress state on the tinymce editor, giving you a very simple way to add a loading icon. This article in the TinyMCE docs explains how to do that.

Also from that article, using ed.setContent() will allow you to set the text showing in the editor. I used it to blank the editor, but only after a successful post.

When I use jQuery AJAX to submit tinyMCE forms on my page, it takes two clicks to actually submit to database

4 Answers4

Linked