{"id":830,"date":"2022-08-30T15:07:53","date_gmt":"2022-08-30T15:07:53","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/puzzled-by-dom-behavior-dynamically-loaded-select-undefined-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:07:53","modified_gmt":"2022-08-30T15:07:53","slug":"puzzled-by-dom-behavior-dynamically-loaded-select-undefined-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/puzzled-by-dom-behavior-dynamically-loaded-select-undefined-collection-of-common-programming-errors\/","title":{"rendered":"Puzzled by DOM behavior dynamically loaded select = undefined-Collection of common programming errors"},"content":{"rendered":"<p>Below is the following code that works perfectly for dynamic loading of a select drop down. The code is called in the documents ready function to pre-load data into a page. The code works just fine. However, I got puzzled over the fact that it seems &#8220;undefined&#8221; in the DOM. ie.. .change event etc&#8230;when I attempt to select a value&#8230;.<\/p>\n<p>In the HTML, the is set simply:<\/p>\n<pre><code>\n<\/code><\/pre>\n<p>The jquery code is as follows. It works. Feel free to use it in your codes<\/p>\n<pre><code>var optionsValues = '';\n                optionsValues += '';\n                $.each(result, function() {\n                    optionsValues += '' + this.chaa_name + '';\n                });\n                optionsValues += '';\n\n                var options = $('#optionsChaa');\n                options.replaceWith(optionsValues);\n\n                $('#optionsChaa').change(function() {\n\n                   \/\/ Alert returns undefined...\n\n                    alert($(this).val() );\n\n                });\n<\/code><\/pre>\n<p>So why is it &#8220;undefined&#8221; after the DOM?<\/p>\n<ol>\n<li>\n<p>I think there&#8217;s something wrong with the <code>this.chaa_id.val<\/code> part. In <code>each<\/code>, &#8220;this&#8221; refers to the &#8220;current&#8221; element (i.e. a member of the <code>results<\/code> array).<\/p>\n<\/li>\n<li>\n<p>Could you show what&#8217;s in your <code>result<\/code> variable?<\/p>\n<p>I tried your code setting <code>result<\/code> as:<\/p>\n<pre><code>var result = [\n    { 'chaa_id' : { 'val' : 1 }, 'chaa_name' : 'name1'},\n    { 'chaa_id' : { 'val' : 2 }, 'chaa_name' : 'name2'}\n]\n<\/code><\/pre>\n<p>And the <code>alert()<\/code> seems to work.<\/p>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-11-09 22:47:59. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>Below is the following code that works perfectly for dynamic loading of a select drop down. The code is called in the documents ready function to pre-load data into a page. The code works just fine. However, I got puzzled over the fact that it seems &#8220;undefined&#8221; in the DOM. ie.. .change event etc&#8230;when I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-830","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=830"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/830\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}