当我使用jQuery AJAX在页面上提交tinyMCE表单时，需要两次单击才能实际提交到数据库 [英] When I use jQuery AJAX to submit tinyMCE forms on my page, it takes two clicks to actually submit to database

问题描述

一个多星期以来，我一直在尝试其他选择，但似乎没有任何效果.使这稍微复杂一点的是，页面上有多个表单，所有表单都需要绑定到同一提交函数.它们都有不同的ID.

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.

以下是我的jQuery的简化版本:

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;
});

我也尝试过使用$('form').submit()获得相同的结果.

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

process.php的相关部分:

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);

推荐答案

在拉了很多头发之后，我解决了这个问题.

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

TinyMCE编辑器实例不会直接编辑textareas，因此，为了提交表单，我需要先从TinyMCE API .因此，工作代码如下:

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;
});

这篇关于当我使用jQuery AJAX在页面上提交tinyMCE表单时，需要两次单击才能实际提交到数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！