javascript - how to show results in semantic-ui api -
i have problem semantic-ui api use on multiple select element retrieve item server here javascript code
$('select[name=problems]').dropdown('destroy').dropdown({ mincharacters: 3, saveremotedata: false, apisettings: { on: 'change', url: '/ajax/contest.getproblemquery/', method: 'post', data: { argv: { page: 0, limit: 1000 } }, beforesend: function (settings) { settings.data.argv.q = settings.urldata.query; return settings; }, beforexhr: function (xhr) { console.log('xhr'); console.log(xhr); xhr.setrequestheader('x-requested-with', 'xmlhttprequest'); xhr.setrequestheader('x-csrftoken', $.cookie('csrftoken')); return xhr; }, onresponse: function (response) { console.log('onresp'); if ( response != 'f' && response.length != 0 ) { var list = {results: [], success: true}; ( var = 0; < response.items.length; ++i ) { list.results.push({ value: response.items[i][0], name: response.items[i][1] + ' - ' + response.items[i][2], text: response.items[i][1] + ' - ' + response.items[i][2] }); } return list; } else return {success: false}; }, successtest: function (response) { return response.success || false; }, oncomplete: function (response, element, xhr) { // called after xhr complete }, onsuccess: function (response, element) { console.log('suc'); console.log(response); // valid response , response.success = true }, onfailure: function (response, element) { console.log('fail'); }, onerror: function (errormessage, element, xhr) { // invalid response }, onabort: function (errormessage, element, xhr) { // navigated new page, cors issue, or user canceled request } } });
my problems:
- it not send request until put "{query}" in side url.
- when sends request , receives data, data stores in browser session storage. set 'saveremotedata' false after each request checked storage , found new record on that.
- after receives response change format said in sematic-ui.com/modules/dropdown.html#/examples [remote content] not show me items in dropdown section.
when sends request , receives data, data stores in browser session storage. set 'saveremotedata' false after each request checked storage , found new record on that.
probably it's api's bug. i've had same issue, , couldn't find solving in internet. wrote own kludge.
html:
<div id="my_dropdown" class="ui multiple search selection dropdown select-city"> <input type="hidden" name="city"> <i class="dropdown icon"></i> <div class="default text">select city</div> <div class="menu"></div> </div>
and js inside dropdown({}):
beforesend: function(settings) { /** * mincharacters option doesn't work form me dropdown, * i'm checking length manually , clear search result in dom * , reject request if search string short */ if ($("#my_dropdown").find("input.search").val().length < 3) { $("#my_dropdown").find(".menu.transition.visible").html(""); return false; } /** * here i'm manually clearing cache in localstorage */ if (typeof(storage) !== "undefined") { var sstorage = window.sessionstorage; //console.log(sstorage.getitem("/my/request/url/")); sstorage.removeitem("/my/request/url/"); } /** * standard actions */ settings.data.str = $("#my_dropdown").find("input.search").val(); console.log(settings.data); return settings; }
looks bit ugly, works me.
Comments
Post a Comment