Databases
StackOverflow2013
Postsdbo
POIn YUI3 why does Y.one return null?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIn YUI3 why does Y.one return null?
    text
    copied!<p>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:</p> <pre><code>YUI().use("node", function(Y){ var node = Y.one("#my_element_id"); }); </code></pre> <p>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:</p> <pre><code>&lt;form id="component_form" method="post" action="&lt;?php echo $_SERVER["PHP_SELF"];?&gt;"&gt; ... &lt;/form&gt; </code></pre> <p>I know for sure it is well-formed markup, so that's not the issue. If I do:</p> <pre><code>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")); }); </code></pre> <p>node1 is null, and node2 is the element I was looking for, and so is node3. </p> <p>Anyone have a similar experience, or know if this is a YUI3 bug, or what?</p> <p>Here is a full markup example:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html;charset=UTF-8"/&gt; &lt;!-- metadata --&gt; &lt;title&gt;Inventory Management System&lt;/title&gt; &lt;script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"&gt;&lt;/script&gt; &lt;script src="./util.js" type="text/javascript"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; 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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="canvas"&gt; &lt;form id="st_frm" method="post" action="" style="display:none; visibility: hidden;"&gt; &lt;fieldset style="border:none; margin:0; padding:0;"&gt; &lt;input type="hidden" name="state" id="st" value=""/&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;div id="navbar"&gt; &lt;a href="#" onclick="goToState(0); return false;"&gt;home&lt;/a&gt; | components | &lt;a href="#" onclick="goToState(2); return false;"&gt;products&lt;/a&gt; &lt;/div&gt; &lt;h1 id="main_h1"&gt; Update Component &lt;/h1&gt; &lt;form id="component_form" method="post" action="/inventory/index.php"&gt; &lt;fieldset&gt; &lt;legend id="component_form_legend"&gt;Component Information&lt;/legend&gt; &lt;input type="hidden" id="component_form_id" name="id" value="8"/&gt; &lt;input type="hidden" name="state" value="1"/&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;&lt;label for="manufacturer_name_id"&gt;Manufacturer:&lt;/label&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" id="manufacturer_name_id" name="manufacturer_name" value="Vishay"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;label for="manufacturer_part_number_id"&gt;Part Number:&lt;/label&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" id="manufacturer_part_number_id" name="manufacturer_part_number" value="1123114123"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;label for="ct_id"&gt;Component Type:&lt;/label&gt;&lt;/td&gt; &lt;td&gt; &lt;select id="ct_id" name="component_type"&gt; &lt;option value="0"&gt;New Type&lt;/option&gt; &lt;option value="5" &gt;sfkd&lt;/option&gt; &lt;option value="6" &gt;qwrqew&lt;/option&gt; &lt;option value="7" selected="selected" &gt;Resistor&lt;/option&gt; &lt;/select&gt; &lt;input id="nct_id" type="text" name="new_component_type" size="10" style="visibility:hidden; display: none;" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;label for="description_id"&gt;Description:&lt;/label&gt;&lt;/td&gt; &lt;td&gt; &lt;textarea id="description_id" name="description" rows="3" cols="25"&gt;limits the flow of current...&lt;/textarea&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt; &lt;input id="component_form_submit_button" type="button" value="Update Component"/&gt; &lt;span id="component_form_hide_when_new" &gt; &lt;input id="component_form_delete_button" type="button" value="Delete Component"/&gt; &lt;input id="component_form_new_button" type="button" value="New Component"/&gt; &lt;/span&gt; &lt;input id="component_form_delete" name="delete" type="hidden" value="0"/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;div id="error_container"&gt;&amp;nbsp;&lt;/div&gt; &lt;div id="status_container"&gt;&amp;nbsp;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;ul id="component_form_list"&gt; &lt;li&gt; &lt;a href="#" onclick="setNodeValue('component_form_id', 8); submitForm('component_form'); return false;"&gt;Vishay 1123114123&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <hr> <p><strong>EDIT</strong> IE 8 crashes on the var s = ... line because frm is null.</p> <pre><code>function submitForm(frmId){ YUI().use("node", function(Y){ var frm = Y.one("#" + frmId); var s = typeof frm.submit; if(s === 'function'){ frm.submit(); } }); } </code></pre> <p>but....</p> <pre><code>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(); } }); } </code></pre> <p>works in both...</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload