Home » Php » php – When I use jQuery AJAX to submit tinyMCE forms on my page, it takes two clicks to actually submit to database

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

Posted by: admin July 12, 2020 Leave a comment

Questions:

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);
How to&Answers:

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

Answer:

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

Answer:

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

Answer:

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.