Databases
StackOverflow2013
Postsdbo
POSet selected option for select not working via $get jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSet selected option for select not working via $get jQuery
    text
    copied!<p>I'm having this problem regarding setting the selected value of a select option using AJAX or more specifically, the $get function of jQuery. I can't seem to make it work. Setting the textbox works fine, but I don't understand why setting the select option won't work.</p> <pre><code>$(document).ready(function() { $youth_id = $('#youth_id').attr('id'); $.get("./php-scripts/json-get-youth-details.php", { youth_id: $youth_id }, function(data) { $('input[name="lastname"]').val(data.lastname); $('select[name="cellgroup_id"]').val(data.cellgroup_id); }, "json"); }); </code></pre> <p>I think the problem lies with the order of loading. I think the jQuery loads even before the PHP script in the body section loads. I don't get it because the jQuery script is below the body tag so the body must be loaded even before the script is loaded.</p> <p>I tried removing the additional scripts to be loaded after the $(document).ready script (see code below) and surprise, surprise, it works. However, I can't remove those scripts since I need them, and I can't put them in front because the UI tags will be changed (because of bootstrap). Oh, I can't find the solution elsewhere!</p> <pre><code>&lt;script src="./js/jquery.js"&gt;&lt;/script&gt; &lt;script src="./js/jquery-ui-1.10.0.custom.min.js"&gt;&lt;/script&gt; &lt;script&gt; // Insert $(document).ready script here &lt;/script&gt; &lt;script src="./js/jquery.tagsinput.js"&gt;&lt;/script&gt; &lt;script src="./js/bootstrap-tooltip.js"&gt;&lt;/script&gt; &lt;script src="./js/jquery.placeholder.js"&gt;&lt;/script&gt; &lt;script src="http://vjs.zencdn.net/c/video.js"&gt;&lt;/script&gt; &lt;script src="./js/application.js"&gt;&lt;/script&gt; &lt;script src="./js/jquery.dropkick-1.0.0.js"&gt;&lt;/script&gt; </code></pre> <p>This is the code that loads the select option:</p> <pre><code> &lt;select class="span3" tabindex="0" name="cellgroup_id"&gt; &lt;option value="NULL"&gt;N/A&lt;/option&gt; &lt;?php $cellgroupOptions = ""; include_once("./classes/cellgroup.php"); $cellgroup = new CellGroup(); $cellgroupList = $cellgroup-&gt;getCellGroupList(); foreach( $cellgroupList as $cellgroupDetail ) { $cellgroup_id = $cellgroupDetail['cellgroup_id']; $cellgroup_name = $cellgroupDetail['cellgroup_name']; $cellgroupOptions .=&lt;&lt;&lt;EOT &lt;option value="$cellgroup_id"&gt;$cellgroup_name&lt;/option&gt; EOT; } echo $cellgroupOptions; ?&gt; &lt;/select&gt; </code></pre> <p>As requested, below is the output of the select in HTML after the scripts are loaded (both PHP and Bootstrap). The Bootstrap script changed a lot in the HTML.</p> <pre><code>&lt;div class="dk_container span3 dk_shown dk_theme_default" id="dk_container_cellgroup_id" tabindex="0"&gt; &lt;a class="dk_toggle"&gt; &lt;span class="dk_label"&gt;N/A&lt;/span&gt; &lt;span class="select-icon"&gt;&lt;/span&gt; &lt;/a&gt; &lt;div class="dk_options"&gt; &lt;ul class="dk_options_inner"&gt; &lt;li class="dk_option_current"&gt;&lt;a data-dk-dropdown-value="NULL"&gt;N/A&lt;/a&gt;&lt;/li&gt; &lt;li class=""&gt;&lt;a data-dk-dropdown-value="1"&gt;Arrows of God&lt;/a&gt;&lt;/li&gt; &lt;li class=""&gt;&lt;a data-dk-dropdown-value="2"&gt;Fishmen&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt; &lt;/ul&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

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