jQuery datepicker を使用する日付と、送信前にすべてのフィールドが入力されているかどうかを確認する JavaScript コードを含む情報を要求するフォームを含む外部 php ファイルをロードするダイアログ ボックスを作成しようとしています。ダイアログボックスが正しくポップアップしますが、外部phpファイルのjavascriptが機能しません(カレンダーがポップアップせず、フォーム検証チェックが機能しません)。フォームの 1 つのセクションに入力する変数を渡すようにリンクが設定されているため、外部の php ファイルを使用しています。この情報が役立つかどうかはわかりませんが、通常のウィンドウ リンクに php ファイルをロードすることは完全に正常に機能します。javascript が機能していないのは、ダイアログ内にあるときだけです。
ダイアログ用のスクリプトは次のとおりです。
<script type="text/javascript">
$(document).ready(function() {
$('#order a').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + ' #content')
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 400
});
$link.click(function(){
$dialog.dialog('open');
return false;
});
});
});
</script>
これは、ダイアログをポップアップするコードです。
<div id="order">
<a href="package.php?code=NY1" title="Package Booking"><img src="images/order.png"></a>
</div>
PHP ファイル内の JavaScript コードとフォーム:
<head>
<script type="text/javascript">
$(function(){
// Datepicker
$('#pdate').datepicker({
inline: true,
minDate: 0,
});
</script>
<script type="text/javascript">
function packageValidator(){
var pdate = document.getElementById('pdate');
if(notEmpty(pdate, "Please enter a departure date.")){
return true;
}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div id="content">
<form action="send_package.php" method="post" onsubmit='return packageValidator()' >
<table>
//Form Information
<tr>
<td><input id="pdate" name="pdate" type="text"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</div>
</body>