Fondamentalement, je faisais référence à des sources et trouvé ceci:JQuery- valeur de retour de dialogue ui et iplocation la récupération des données
« Yah, c'est facile, il suffit de créer un div sur votre page, mettez la forme là-dedans, et fais que ce soit ton dialogue. " Eh bien c'est génial, mais que faire si vous essayez d'obtenir une compatibilité maximale? Que se passe-t-il si, pour une raison quelconque, un utilisateur a désactivé JavaScript dans son navigateur? Tout à coup, que toute « ajouter » la fonctionnalité est perdue «
J'ai téléchargé le script original de modifier et essayer Après modification, ne fonctionne pas
Ce que je veux atteindre est comme suit:...
onclick forme de dialogue pop-up (ok),
Je dois passer de la valeur dans la new.php pour la requête de données interne.
Lorsque cliquez sur le bouton enregistrer sur le formulaire, je dois php echo la valeur en $ Succès .ajax:
Dans le même temps, affichez l'écran de chargement de la barre de progression, jusqu'à ce que la vérification de l'utilisateur se termine et que la fenêtre contextuelle soit fermée.
chose deuxième est ce que je manqué au .getJSON $ les résultats ne seront pas visibles à #profile
Référence code complet:
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>