在YUI3中为什么Y.one返回null?

发布于 2024-09-08 06:15:39 字数 6904 浏览 2 评论 0原文

我有一个经过 XHTML 1.0 Strict 验证的网页。我正在使用 YUI3,并且正在使用基于种子文件的实例化。在我的 javascript 代码中的几个地方,我正在做类似的事情:

YUI().use("node", function(Y){
  var node = Y.one("#my_element_id");
});

它在几乎所有情况下都运行良好,跨平台,跨浏览器等。不过我昨天测试的时候发现有一次不行。这对我来说毫无意义,我试图抓住的元素是:

<form id="component_form" method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
...
</form>

我确信它是格式良好的标记,所以这不是问题。如果我这样做:

YUI().use("node", function(Y){
  var node1 = Y.one("#component_form");
  var node2 = document.getElementById("component_form");
  var node3 = Y.one(document.getElementById("component_form"));
});

node1为null,node2是我要查找的元素,node3也是。

有人有类似的经历吗,或者知道这是YUI3的bug还是什么?

这是一个完整的标记示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
    <!-- metadata -->
    <title>Inventory Management System</title>      
    <script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
    <script src="./util.js" type="text/javascript"></script>    
    <style type="text/css">
      td{
        vertical-align:text-top;
      }  

      legend{
        border: 2px #D4D0C8 groove;
        padding: 2px;       
        font-weight: bolder; 
      }

      fieldset{
        border: 2px #D4D0C8 groove;
        padding-bottom: 12px;              
        padding-left: 10px;
        padding-right: 10px;
      }

      label{
        font-weight: bold;
      }

      #err_container{
        color: red;
        display: none;
        visibility: hidden;
        margin: 10px;
      }

      #status_container{
        color: green;
        display: none;
        visibility: hidden;
        margin: 10px;
      }      
    </style>

  </head>
  <body>
    <div id="canvas">
      <form id="st_frm" method="post" action="" style="display:none; visibility: hidden;">        
        <fieldset style="border:none; margin:0; padding:0;">          
          <input type="hidden" name="state" id="st" value=""/>            
        </fieldset>
      </form>

      <div id="navbar">
              <a href="#" onclick="goToState(0); return false;">home</a> 
       | components |         <a href="#" onclick="goToState(2); return false;">products</a> 
            </div>


              <h1 id="main_h1">

            Update Component
                  </h1>
        <form id="component_form" method="post" action="/inventory/index.php">
          <fieldset>            
            <legend id="component_form_legend">Component Information</legend>
            <input type="hidden" id="component_form_id" name="id" value="8"/>
            <input type="hidden" name="state" value="1"/>
            <table>

              <tr>
                <td><label for="manufacturer_name_id">Manufacturer:</label></td>
                <td><input type="text" id="manufacturer_name_id" name="manufacturer_name" value="Vishay"/></td>
              </tr>
              <tr>
                <td><label for="manufacturer_part_number_id">Part Number:</label></td>
                <td><input type="text" id="manufacturer_part_number_id" name="manufacturer_part_number" value="1123114123"/></td>
              </tr>

              <tr>
                <td><label for="ct_id">Component Type:</label></td>
                <td>
                  <select id="ct_id" name="component_type">
                    <option value="0">New Type</option>                    
                                        <option value="5" >sfkd</option>
                                        <option value="6" >qwrqew</option>

                                        <option value="7"  selected="selected" >Resistor</option>

                  </select>
                  <input id="nct_id" type="text" name="new_component_type" size="10"  style="visibility:hidden; display: none;" />
                </td>
              </tr>
              <tr>
                <td><label for="description_id">Description:</label></td>
                <td>

                  <textarea id="description_id" name="description" rows="3" cols="25">limits the flow of current...</textarea>
                </td>
              </tr>
              <tr>
                <td>&nbsp;</td>                                  
                <td>
                                    <input id="component_form_submit_button" type="button" value="Update Component"/>
                  <span id="component_form_hide_when_new" >
                    <input id="component_form_delete_button" type="button" value="Delete Component"/>

                    <input id="component_form_new_button"    type="button" value="New Component"/>
                  </span>                  
                  <input id="component_form_delete" name="delete" type="hidden" value="0"/>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div id="error_container">&nbsp;</div>
                  <div id="status_container">&nbsp;</div>                  
                </td>

              </tr>
            </table>
          </fieldset>
        </form>

        <ul id="component_form_list">        
          <li>
            <a href="#" onclick="setNodeValue('component_form_id', 8); submitForm('component_form'); return false;">Vishay 1123114123</a>
          </li>

        </ul>        


    </div>

  </body>
</html>

编辑 IE 8 在 var s = ... 行崩溃,因为 frm 为 null。

function submitForm(frmId){
  YUI().use("node", function(Y){
    var frm = Y.one("#" + frmId);    
    var s = typeof frm.submit;
    if(s === 'function'){
      frm.submit();
    }
  });    
}

但是....

function submitForm(frmId){
  YUI().use("node", function(Y){
    var frm = Y.one(document.getElementById(frmId));    
    var s = typeof frm.submit;
    if(s === 'function'){
      frm.submit();
    }
  });    
}

适用于两者...

I've got a webpage that validates as XHTML 1.0 Strict. I'm using YUI3 and I'm using the seed-file-based instantiation. In several places in my javascript code, I'm doing something like:

YUI().use("node", function(Y){
  var node = Y.one("#my_element_id");
});

It works great, cross-platform, cross-browser, etc. in almost every case. However, I was testing yesterday, and I came across one time it didn't work. It made no sense to me, the element I was trying to grab was:

<form id="component_form" method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
...
</form>

I know for sure it is well-formed markup, so that's not the issue. If I do:

YUI().use("node", function(Y){
  var node1 = Y.one("#component_form");
  var node2 = document.getElementById("component_form");
  var node3 = Y.one(document.getElementById("component_form"));
});

node1 is null, and node2 is the element I was looking for, and so is node3.

Anyone have a similar experience, or know if this is a YUI3 bug, or what?

Here is a full markup example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
    <!-- metadata -->
    <title>Inventory Management System</title>      
    <script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
    <script src="./util.js" type="text/javascript"></script>    
    <style type="text/css">
      td{
        vertical-align:text-top;
      }  

      legend{
        border: 2px #D4D0C8 groove;
        padding: 2px;       
        font-weight: bolder; 
      }

      fieldset{
        border: 2px #D4D0C8 groove;
        padding-bottom: 12px;              
        padding-left: 10px;
        padding-right: 10px;
      }

      label{
        font-weight: bold;
      }

      #err_container{
        color: red;
        display: none;
        visibility: hidden;
        margin: 10px;
      }

      #status_container{
        color: green;
        display: none;
        visibility: hidden;
        margin: 10px;
      }      
    </style>

  </head>
  <body>
    <div id="canvas">
      <form id="st_frm" method="post" action="" style="display:none; visibility: hidden;">        
        <fieldset style="border:none; margin:0; padding:0;">          
          <input type="hidden" name="state" id="st" value=""/>            
        </fieldset>
      </form>

      <div id="navbar">
              <a href="#" onclick="goToState(0); return false;">home</a> 
       | components |         <a href="#" onclick="goToState(2); return false;">products</a> 
            </div>


              <h1 id="main_h1">

            Update Component
                  </h1>
        <form id="component_form" method="post" action="/inventory/index.php">
          <fieldset>            
            <legend id="component_form_legend">Component Information</legend>
            <input type="hidden" id="component_form_id" name="id" value="8"/>
            <input type="hidden" name="state" value="1"/>
            <table>

              <tr>
                <td><label for="manufacturer_name_id">Manufacturer:</label></td>
                <td><input type="text" id="manufacturer_name_id" name="manufacturer_name" value="Vishay"/></td>
              </tr>
              <tr>
                <td><label for="manufacturer_part_number_id">Part Number:</label></td>
                <td><input type="text" id="manufacturer_part_number_id" name="manufacturer_part_number" value="1123114123"/></td>
              </tr>

              <tr>
                <td><label for="ct_id">Component Type:</label></td>
                <td>
                  <select id="ct_id" name="component_type">
                    <option value="0">New Type</option>                    
                                        <option value="5" >sfkd</option>
                                        <option value="6" >qwrqew</option>

                                        <option value="7"  selected="selected" >Resistor</option>

                  </select>
                  <input id="nct_id" type="text" name="new_component_type" size="10"  style="visibility:hidden; display: none;" />
                </td>
              </tr>
              <tr>
                <td><label for="description_id">Description:</label></td>
                <td>

                  <textarea id="description_id" name="description" rows="3" cols="25">limits the flow of current...</textarea>
                </td>
              </tr>
              <tr>
                <td> </td>                                  
                <td>
                                    <input id="component_form_submit_button" type="button" value="Update Component"/>
                  <span id="component_form_hide_when_new" >
                    <input id="component_form_delete_button" type="button" value="Delete Component"/>

                    <input id="component_form_new_button"    type="button" value="New Component"/>
                  </span>                  
                  <input id="component_form_delete" name="delete" type="hidden" value="0"/>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div id="error_container"> </div>
                  <div id="status_container"> </div>                  
                </td>

              </tr>
            </table>
          </fieldset>
        </form>

        <ul id="component_form_list">        
          <li>
            <a href="#" onclick="setNodeValue('component_form_id', 8); submitForm('component_form'); return false;">Vishay 1123114123</a>
          </li>

        </ul>        


    </div>

  </body>
</html>

EDIT
IE 8 crashes on the var s = ... line because frm is null.

function submitForm(frmId){
  YUI().use("node", function(Y){
    var frm = Y.one("#" + frmId);    
    var s = typeof frm.submit;
    if(s === 'function'){
      frm.submit();
    }
  });    
}

but....

function submitForm(frmId){
  YUI().use("node", function(Y){
    var frm = Y.one(document.getElementById(frmId));    
    var s = typeof frm.submit;
    if(s === 'function'){
      frm.submit();
    }
  });    
}

works in both...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

不爱素颜 2024-09-15 06:15:39

你错过了一个双引号吗?

<form id="component_form" method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">

...

Did you miss one double quote?

<form id="component_form" method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">

...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文