1
我有一張表格,列出了每條記錄的名稱,屬性和註釋。我希望能夠在工具提示中顯示評論,並且能夠通過Ajax更新這些評論。我想通過點擊鏈接來顯示工具提示或模式。這個模式將會有一個textarea,並且預裝了註釋。用戶可以修改註釋並通過Ajax將其提交給操作頁面。成功提交後,現有的工具提示內容也需要更新。qTip2中的Ajax表單
任何幫助將不勝感激。
我正在使用qtip2和醉酒插件。
我正在通過ajax在qTip2工具提示onclick中加載表單。表單的鏈接從rel標籤中移除。現在,當我提交表單時,它不會通過ajax提交,而是直接提交操作頁面。這是我的JS代碼:
$('.commentsedit').each(function()
{
// We make use of the .each() loop to gain access to each element via the "this" keyword...
$(this).qtip(
{
content: {
// Set the text to an image HTML string with the correct src URL to the loading image you want to use
text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
ajax: {
url: $(this).attr('rel') // Use the rel attribute of each element for the url to load
},
title: {
text: $(this).attr('title'), // Give the tooltip a title using each elements text
button: true
}
},
position: {
at: 'bottom center', // Position the tooltip above the link
my: 'top right',
viewport: $(window), // Keep the tooltip on-screen at all times
effect: false // Disable positioning animation
},
show: {
event: 'click',
solo: true // Only show one tooltip at a time
},
hide: 'unfocus',
style: {
classes: 'my_width_setting_class qtip-wiki qtip-light qtip-shadow'
},
events: {
render: function(event, api) {
// Capture the form submission
$('form', this).bind('submit', function(event) {
// Grab and store input elements
var inputs = $(':textarea', this);
// Common ajax error handler
function errorHandler(jqXHR, message) {
// Set the error and show/hide it
$('.error', api.elements.tooltip).html(message || '').toggle(!!message);
}
// Setup AJAX request
$.ajax({
url: 'commentsform.cfm',
data: $(this).serialize(),
type: 'post',
dataType: 'json',
success: function(data, status, jqXHR) {
// On success, show message and refresh after 2 seconds
if(data.status === 'success'){
api.set('content.text', data.message + ' Redirecting...');
setTimeout(function(){ window.location.reload() }, 2000);
}
// Call error handler on error status too.
else { errorHandler(jqXHR, data.message); }
},
error: errorHandler,
// Disable/Enable input elements
beforeSend: function() { inputs.attr('disabled', 'disabled'); },
complete: function() { inputs.removeAttr('disabled'); inputs[0].focus(); }
});
// Prevent normal form submission
event.preventDefault();
});
}
}
})
})
儘管此鏈接可能回答問題,最好包括答案的基本部分[這裏](http:// meta .stackoverf low.com/a/8259)並提供供參考的鏈接。如果鏈接頁面更改,則僅鏈接答案可能會失效。 – bummi 2014-05-06 14:01:40
完全同意。我會盡快編輯。非常感謝您指出。 – 2014-05-06 14:06:16