声明导致div内容不显示

时间:2012-05-04 15:32:22

标签: php jquery html5 html doctype

我有一个html页面,其中包含一个显示来自外部php文件的html的div。 在我向html页面添加DOCTYPE声明之前,它很有用。该页面继续运行,但外部内容未出现在div中。

<!DOCTYPE HTML>
<html dir="ltr" lang="en-US">
<head>

<title>Test Page</title>

<!--meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<script type="text/javascript" src="./inc/jquery.js"></script>
<script type="text/javascript">

    function getinfo()
        {
        $.post('prodinfo.php', { prodcode: prodcodeform.prodcodevar.value},
            function(output)
            {
            $('#prodinfo').html(output).show;
            });
        }

    function hideinfo()
        {
        $('#prodload').hide();
        $('#openprodinfo').show();
        }

    function showinfo()
        {
        $('#prodload').show();
        $('#openprodinfo').hide();
        }
</script>
</head>
<body>
<input style="position:relative;" type="button" class="button" id="openprodinfo" title="Open" value="INFO" onclick="showinfo();">
<DIV id="prodload" style="position:absolute;margin-left:auto;margin-right:auto;display:none;text-align:center;background-color:#000000;z-index:200;border:1px solid #4e443b;">

    <div id="prodinfo" style="position:relative;display:block;top:0;width:1000px;height:820px;background-color:#ffffff;margin-left:auto;margin-right:auto;">
    </div>

    <form name="prodcodeform">
    <input type="text" readonly="readonly" id="prodcodevar" name="prodcodevar" value="nil" >
    </form>

    <div ID="prodinfobutton" style="position:relative;">
    <input  style="position:relative;" type="button" class="button" id="closeprodinfo" title="Close" value="CLOSE" onclick="document.getElementById('prodcodevar').value='nil'; hideinfo(); ">
    </div>

    <input type="button" id="button001" value="ONE" onclick="document.getElementById('prodcodevar').value='item1'; getinfo();">

    <input type="button" id="button002" value="TWO" onclick="document.getElementById('prodcodevar').value='item2'; getinfo();">


</DIV>


</body>
</html>

2 个答案:

答案 0 :(得分:2)

您正在切换到标准模式,因此您的浏览器不再玩与Internet Explorer 4兼容的游戏。

prodcodeform.prodcodevar.value会出错,因为prodcodeform未定义。

您没有为文档中具有id或名称的每个元素获取全局变量。

变化:

<form name="prodcodeform">

<form id="prodcodeform" method="post" action="prodinfo.php">

...并且在发布非Ajax请求时让它做一些理智的事情(移动它使它围绕按钮,使它们提交按钮,并在JS成功时取消默认事件)。

然后添加:

var prodcodeform = document.getElementById('prodcodeform');

在尝试使用变量之前。

答案 1 :(得分:0)

您使用</body>代替<body>开始了您的身体。