基本上,我提到了一些來源,並發現這一點:JQuery-用戶界面對話框返回值iplocation數據檢索
「耶,很簡單,您只需建立網頁div,擺在那裏的形式,和做你的對話。「那很好,但是如果你試圖達到最大的兼容性呢?如果出於某種原因,用戶在其瀏覽器中禁用JavaScript,會發生什麼情況?突然,那整個「加」功能喪失「
我下載的原始腳本的修改和嘗試修改後,不能正常工作
我想實現的是如下:。
的onclick到彈出的對話框形式(OK),
我需要的值傳遞到new.php內部數據查詢。
當點擊保存表單按鈕,我需要PHP的echo價值爲$ .ajax成功:
同時顯示進度條加載畫面,直到用戶驗證完成並彈出關閉。
第二件事是還有什麼我錯過了在$ .getJSON結果不會在#profile
的完整代碼引用顯示:
的index.php
<head>
<title>jQuery AJAX-Enabled Forms in Modal Dialog</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(dialogForms);
function dialogForms() {
$('a.dialog-form').click(function() {
//how to pass in additional parameter value into new.php for local processing?
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {submitFormWithAjax($(this).find('form'));},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
width: 'auto'
});
}, 'html');
return false;
});
}
function submitFormWithAjax(form)
{
form = $(form);
//if dataType: 'script' then must echo output in javascript alert format
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'script'
//after adding the commented line below, the popup not working, instead it will go directly to new.php
//suspect due to dataType and form method thing.
/*
beforeSend: function(){
//the modal popup show loading bar
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
},
success: function(output) {
if(output==1){ //login success
//close modal popup
window.reload(); //to detect SESSION['user'] stored inside php. If exist, then prefill this master form with user details
}
else{
//put message into modal popup as div, message is something like invalid login...
}
},
complete: function(){ }
//close modal popup
});
*/
});
return false;
}
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<a href="new.php" class="dialog-form" title="login">Existing user login here</a>
<div id="profile">
<span id="ip"></span>
<span id="country"></span>
</div>
</body>
</html>