![](/img/trans.png)
[英]Use jQuery to submit 1 Ajax form on page with several unique forms
[英]When I use jQuery AJAX to submit tinyMCE forms on my page, it takes two clicks to actually submit to database
我已经尝试了一个星期以上的其他选择,但似乎没有任何效果。 使这稍微复杂一点的是,页面上有多个表单,所有表单都需要绑定到同一提交函数。 它们都有不同的ID。
以下是我的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()
获得相同的结果。
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);
经过大量的头发拉扯和咒骂之后,我已经解决了这个问题。
TinyMCE编辑器实例不会直接编辑textareas
,因此,为了提交表单,我需要首先从TinyMCE API调用tinyMCE.triggerSave()
。 因此,工作代码如下所示:
$('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;
});
当我通过tinyMce ..传递Ajax字符串数据时,我感到困惑,但是它没有用php保存到数据库...然后我使用
tinyMCE.triggerSave();
event.preventDefault();
那很好.........
$("#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;
});
我相信问题是您不会阻止表单的默认操作。 尝试这个
$('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
}
});
});
与此配合的另一个巧妙技巧是在tinymce编辑器上设置进度状态,从而为您提供了一种非常简单的添加加载图标的方法。 TinyMCE文档中的这篇文章解释了如何做到这一点。
同样从该文章开始,使用ed.setContent()将允许您设置在编辑器中显示的文本。 我用它来清空编辑器,但仅在成功发布之后。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.