StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POExecute jQuery Function on change and page load?
text
Body
copied!<p>here is my situation. I have a select box that is populated from a database SELECT command with PHP. The same select which is a select of countries has a jQuery event bind on it and on change it goes and load the flag of each country.</p> <pre><code>$("#CountryA").change(function () { var countryname = this.options[this.selectedIndex]; var fileExist = $.ajax({ url: './../theme/_images/flags/' + $.trim($(countryname).text()) + '.png', type: 'HEAD', error: function () { $("#flag").html('<img src= "./../theme/_images/flags/notFound.png" />'); }, success: function () { $("#flag").html('<img src= "./../theme/_images/flags/' + $.trim($(countryname).text()) + '.png" />'); } }); }) </code></pre> <p>and this is the PHP</p> <pre><code><?php while ($data = $connection->dbFetchArray($resultCountry)) { if ($data["Description"] == @$_GET['country']) echo "<option value='" . $data["Description"] . "' selected='selected'>" . $data["Description"] . "</option>"; else echo "<option value='" . $data["Description"] . "'>" . $data["Description"] . "</option>"; } ?> </code></pre> <p>Also with php I managed to remember the selected value of the user before the sumbit. BUT after the user sumbits the form (I am using PHP_SELF so I remain in the same page) the flag dissapears. </p> <p>Can I make the function to be executed again after the sumbit button? On pageload or something in order to have the flag of the selected country displayed to the user???</p> <p>Thanks in advance!</p> <p>======================EDIT===========================</p> <p>Ok, thank you very much augustknight and everyone that took the time to respond... :D</p> <p>I made some minor changes to your code because these lines </p> <pre><code> var country_name = $("#CountryA :selected").val(); set_country_flag_image(this.options[this.selectedIndex]); </code></pre> <p>were giving me some weird HTMLOptionElement instead of the selected name. So here is the final code for future reference. :D THanks again!!!</p> <pre><code>$(function () { // Initialize the flag to the selected country (could also be done server-side) var country_name = $("#CountryA").val(); set_country_flag_image(country_name); // Update the flag image when a country is selected $("#CountryA").change(function () { alert($("#CountryA").val()); set_country_flag_image($("#CountryA").val()); }); }); function set_country_flag_image(country_name) { $.ajax({ url: './../theme/_images/flags/' + country_name + '.png', type: 'HEAD', error: function () { $("#flag").html('<img src= "./../theme/_images/flags/notFound.png" />'); }, success: function () { $("#flag").html('<img src= "./../theme/_images/flags/' + country_name + '.png" />'); } }); } </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