По сути, я сослался на некоторые источники и обнаружил следующее:
"Да, это просто, просто создайте div на своей странице, вставьте туда форму и сделайте это своим диалогом".Ну, это здорово, но что, если вы пытаетесь достичь максимальной совместимости?Что произойдет, если по какой-либо причине у пользователя отключен JavaScript в браузере?Внезапно вся эта функция добавления теряется. "
Я загрузил исходный скрипт, чтобы изменить и попробовать. После модификации не работает.
Я хочу добиться следующего:
нажмите на всплывающую диалоговую форму (ок),
Мне нужно передать значение в new.php для внутреннего запроса данных.
При нажатии на кнопку сохранения в формеМне нужно php echo значение в $ .ajax success:
В то же время показывать экран загрузки индикатора выполнения, пока не завершится проверка пользователя и не закроется всплывающее окно.
Во-вторых, что еще япропущенный в $ .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>