如何在语义UI API中显示结果 [英] how to show results in semantic-ui api
问题描述
我对语义UI API有问题 我在多个选择元素上使用它来从服务器检索项目 这是我的JavaScript代码
i have problem with semantic-ui api i use it on multiple select element to retrieve the item from the server here is my 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};
for ( var i = 0; i < 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) {
// always called after XHR complete
},
onSuccess: function (response, element) {
console.log('suc');
console.log(response);
// valid response and response.success = true
},
onFailure: function (response, element) {
console.log('fail');
},
onError: function (errorMessage, element, xhr) {
// invalid response
},
onAbort: function (errorMessage, element, xhr) {
// navigated to a new page, CORS issue, or user canceled request
}
}
});
我的问题:
- 直到我在网址旁边加上"{query}"后,它才会发送请求.
- 发送请求并接收数据时,所有数据存储在浏览器会话存储中.我将'saveRemoteData'设置为false,但是在每个请求之后,我都检查了存储并发现了新的记录.
- 在收到响应后,我将格式更改为 sematic-ui.com/modules/dropdown.html#/examples [远程内容] 但它没有显示下拉部分中的项目.
- it does not send the request until i put "{query}" in side the url.
- when it sends the request and receives the data, all data stores in browser session storage. i set 'saveRemoteData' to false but after each request i checked the storage and i found the new record on that.
- after it receives the response i change the format to what is said in sematic-ui.com/modules/dropdown.html#/examples [remote content] but it does not show me the items in dropdown section.
推荐答案
在发送请求并接收数据时,所有数据存储在浏览器会话存储中.我将'saveRemoteData'设置为false,但是在每个请求之后,我都检查了存储并发现了新的记录.
when it sends the request and receives the data, all data stores in browser session storage. i set 'saveRemoteData' to false but after each request i checked the storage and i found the new record on that.
可能是API的错误.我遇到过同样的问题,但是我在互联网上找不到解决方法.所以我写了我自己的歌.
Probably it's the API's bug. I've had the same issue, and I couldn't find solving in internet. So I wrote my 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>
和JS内部下拉列表({}):
and JS inside dropdown({}):
beforeSend: function(settings) {
/**
* minCharacters option doesn't work form me with dropdown,
* so I'm checking length manually and clear the search result in DOM
* and reject request if search string is too short
*/
if ($("#my_dropdown").find("input.search").val().length < 3) {
$("#my_dropdown").find(".menu.transition.visible").html("");
return false;
}
/**
* here I'm manually clearing the cache in localStorage
*/
if (typeof(Storage) !== "undefined") {
var sStorage = window.sessionStorage;
//console.log(sStorage.getItem("/my/request/url/"));
sStorage.removeItem("/my/request/url/");
}
/**
* some standard actions
*/
settings.data.str = $("#my_dropdown").find("input.search").val();
console.log(settings.data);
return settings;
}
看起来有些丑陋,但对我有用.
Looks a bit ugly, but works for me.
这篇关于如何在语义UI API中显示结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!