我有一个奇怪的问题。我对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 tutorial
感谢您的帮助, 科恩