奇妙な問題があります。PHPでJQueryを使うのは初めてです。
JQuery ロードを使用してモーダル php ページをロードします。
$("#dialog").load(e.target.href);
モーダル ページが読み込まれ、すべてのリストが (mySQL を介して) 開始されますが、すべてのフォーム要素が欠落しています。私はなぜなのか理解していない。要素は、画面に表示されるとおりにあります。多分彼らは形になっていませんか???
を使用してフォーム内のすべての要素を取得しようとしましたが、フォームは見つかりましたが要素がありません。(????)。
var formsCollection = document.getElementsByTagName("form");
for(var i=0;i<formsCollection.length;i++)
{
alert(formsCollection[i].name);
var theForm = formsCollection[i];
alert("number of elements in form "+theForm.elements.length); // shows 0
}
ページをプレーンphpファイルとして実行すると、すべて正常に動作します。これがフォームです。
<form name="eventForm">
<input type="hidden" name="uid" value="<?php echo $uid?>">
<tr>
<td nowrap valign="top" align="right" nowrap><span class="form_labels"></span></td>
<td><?php monthPullDown($m, $lang['months']); dayPullDown($d); yearPullDown($y); ?></td>
</tr>
<tr>
<td nowrap valign="top" align="right" nowrap>
<span class="form_labels"><?php echo $lang['activity']?></span></td>
<td>
<?php
if ($mode == "Add"){
include("../php/list_activities.php");
}
else{
echo $activity;
}
?>
</td>
</tr>
<tr>
<td nowrap valign="top" align="right" nowrap>
<span class="form_labels"><?php echo $lang['title']?></span></td>
<td><input type="text" name="title" size="29" value="<?php echo $title ?>" maxlength="50"></td>
</tr>
<tr>
<td nowrap valign="top" align="right" nowrap>
<span class="form_labels"><?php echo $lang['text']?></span></td>
<td><textarea cols=22 rows=6 name="text"><?php echo $text ?></textarea></td>
</tr>
<tr>
<td nowrap valign="top" align="right" nowrap><span class="form_labels"><?php echo $lang['starttime'] ?></span></td>
<td><?php hourPullDown($stime_vals['hour'], "start"); ?><b>:</b><?php minPullDown($stime_vals['minute'], "start"); amPmPullDown($stime_vals['pm'], "start"); ?></td>
</tr>
<tr>
<td nowrap valign="top" align="right" nowrap><span class="form_labels"><?php echo $lang['endtime'] ?></span></td>
<td><?php hourPullDown($etime_vals['hour'], "end"); ?><b>:</b><?php minPullDown($etime_vals['minute'], "end"); amPmPullDown($etime_vals['pm'], "end"); ?></td>
</tr>
<tr><td></td><td><br><input type="button" value="<?php echo $buttonstr ?>" onClick="formSubmit()"> <input type="button" id="closebutton" value="<?php echo $lang['cancel'] ?>" onClick="window.close();"></td></tr>
</form>
そして formSubmit メソッド。
<script language="JavaScript">
function formSubmit() {
alert('SUBMIT');
var formsCollection = document.getElementsByTagName("form");
for(var i=0;i<formsCollection.length;i++)
{
alert(formsCollection[i].name);
var theForm = formsCollection[i];
alert("number of elements in form "+theForm.elements.length);
}
var eventForm = document.getElementById("eventForm");
// results in undefined??
if(document.eventForm.title.value == ""){
alert("<?php echo $lang['titlemissing'] ?>");
return;
}
//alert("form submit called "+document.eventForm.title.value);
if(document.eventForm.activity.value == ""){
alert("<?php echo $lang['activitymissing'] ?>");
return;
}
document.eventForm.method = "post";
document.eventForm.action = "eventsubmit.php<?php echo $qstr ?>";
document.eventForm.submit();
}
</script>
呼び出し元の php ファイルから。これは Jquery 呼び出し元メソッドです
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
// alert("i was fired "+id);
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({
'width' : maskWidth,
'height' : maskHeight
});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$('#dialog').css('top', winH / 2 - $('#dialog').height() / 2);
$('#dialog').css('left', winW / 2 - $('#dialog').width() / 2);
$("#dialog").load(e.target.href);
//transition effect
$('#dialog').fadeIn(2000);
});
});
</script>
これがdivです。
<div id="boxes">
<div id="dialog" class="window">
</div>
</div>
ほとんどのコードは、この例の jquery modal チュートリアルからのものです
助けてくれてありがとう、コーエン