Basically, I referred to some sources, and found this:
“Yah, that’s easy, just create a div on your page, put the form in there, and make that your dialog.” Well that’s great, but what if you’re trying to achieve maximum compatibility? What happens if for whatever reason a user has JavaScript disabled in their browser? Suddenly that entire ‘add’ functionality is lost.”
I downloaded the original script to modify and try. After modification, not working.
What I want to achieve is as follow:
onclick to popup dialog-form (ok),
I need to pass in value into the new.php for internal data query.
When click the save button on the form, I need to php echo the value into $.ajax success:
At the same time show progress bar loading screen, until user verification finish and popup closed.
Second thing is what else I missed out at the $.getJSON the results won’t show at #profile
Full code reference:
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>
To pass parameter, use this format:
PARAM is in form of
key: value, key2: value2.To submit form, consider using malsup’s jQuery form plugins.
To use AJAX, the URL must be in same domain. So using
getJSONto other domain, such asiplocationtools.comfrom other domain will failed. There are several way to do cross domain AJAX.