From bfc4ba755155e13a75475d36571b64a3a27dbfe4 Mon Sep 17 00:00:00 2001 From: Mads Jensen Date: Mon, 19 Nov 2018 15:47:11 +0100 Subject: [PATCH] [FEATURE] Added an optional onDomReady() callback, as well as mrhewitt's commit (https://github.com/blazeworx/flagstrap/pull/35) --- README.md | 23 +++++++++++++++-- dist/js/jquery.flagstrap.js | 44 ++++++++++++++++++++++++--------- dist/js/jquery.flagstrap.min.js | 2 +- 3 files changed, 55 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index ad727f1..b4f94b1 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,19 @@ This example will create a Flagstrap Dropdown giving the input field the name of ``` +##### Setting value of widget after creation +You cannot set the value of the widget using the val() method on the underlying select, as this does not notify the plugin of the change. + +Passing a string value to the plugin instead of an object will change value of the underlying select and update the UI display. The string passed should be the country code of the country to select. + +The example below will take the flagstrap widget created in the example above and change its selected value to the United States. + +```html + +``` + ### Options @@ -154,8 +167,14 @@ This example will create a Flagstrap Dropdown giving the input field the name of - - + + + + + + + + diff --git a/dist/js/jquery.flagstrap.js b/dist/js/jquery.flagstrap.js index 8b546d7..954c1e0 100644 --- a/dist/js/jquery.flagstrap.js +++ b/dist/js/jquery.flagstrap.js @@ -268,14 +268,13 @@ }; $.flagStrap = function (element, options, i) { - let plugin = this; let uniqueId = generateId(8); plugin.countries = {}; - plugin.selected = { value: null, text: null }; - plugin.settings = { inputName: 'country-' + uniqueId }; + plugin.selected = {value: null, text: null}; + plugin.settings = {inputName: 'country-' + uniqueId}; let $container = $(element); let htmlSelectId = 'flagstrap-' + uniqueId; @@ -319,15 +318,28 @@ }; + plugin.val = function (country_code) { + // set the underlying select to the new value + $(htmlSelect).val(country_code); + // update the UI of the flag widget to show the new country selection + let html = ''; + if ( country_code === plugin.settings.placeholder.value ) { + html = ' ' + plugin.settings.placeholder.text; + } else { + html = $container.find('li a[data-val='+country_code+']').html(); + } + $('.flagstrap-selected-' + uniqueId).html( html ); + }; + let buildHtmlSelect = function () { let htmlSelectElement = $('").attr("id",m).attr("name",j.settings.inputName);return a.each(j.countries,function(s,t){let u={value:s};void 0!==j.settings.selectedCountry&&j.settings.selectedCountry===s&&(u={value:s,selected:"selected"},j.selected={value:s,text:t}),r.append(a("
function null This callback gets called each time the select is changed. It receives two parameters, the new value, and the select element.
onDomReady (optional)functionnullThis callback gets called as the last thing, before the plugin returns, thus multiple selects can be rendered and when they're all done, this is called.
placeholder bool|object {value: "", text: "Please select a country"}