Cannot for the life of me figure out how to get the semantic-ui search component to work correctly...
Many, many examples (semantic-ui.com, jsfiddle, etc) make it look simple. Following this simple pattern does not produce the same results as with said examples.
I've tried inserting debugger statements and using the console to check that the variables exist when needed, tried linking the search component js and css files alongside the rest of the semantic js and css, also tried setting the source, and so on, on the search method manually – no luck all around.
Here's my search input:
<div class="ui search">
<div class="ui icon input" style="width: 100%;">
<input class="prompt" type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
Here's the js on same page below:
<script type="text/javascript">
window.onload = function() {
// Setup search
var content = [
{ title: 'Andorra' },
{ title: 'United Arab Emirates' },
{ title: 'Afghanistan' },
{ title: 'Antigua' },
{ title: 'Anguilla' },
{ title: 'Albania' },
{ title: 'Armenia' }
];
$('.ui.search')
.search({
type: 'standard',
source: content,
searchFields : ['title'],
});
}
</script>
Please help. Thank you.
UPDATE 1:
I get some kind of resemblance of functionality when I change the jQuery selector to the .ui.input like so
$('.ui.input')
.search({
type: 'standard',
source: content,
searchFields : ['title'],
});
But it looks like this...
UPDATE 2:
If I keep the jQuery selector $('.ui.search'), the DOM is updated with the search results, but still is not presented correctly...
Following code working fine for me:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="js/search.css">
<script src="js/search.js"></script>
<script type="text/javascript">
window.onload = function() {
// Setup search
var content = [
{ title: 'Andorra' },
{ title: 'United Arab Emirates' },
{ title: 'Afghanistan' },
{ title: 'Antigua' },
{ title: 'Anguilla' },
{ title: 'Albania' },
{ title: 'Armenia' }
];
$('.ui.search')
.search({
type: 'standard',
source: content,
searchFields : ['title'],
});
}
</script>
</head>
<head>
<title> Test </title>
</head>
<body>
<div class="ui search">
<div class="ui icon input" style="width: 100%;">
<input class="prompt" type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</body>
</html>
Turns out to be a css conflict. I had added the following at some point to handle displaying some tabular data with many fields. Simply removing it fixed everything.
*, body {
overflow-x: scroll;
}
TAKE AWAY: semantic-ui likes to be the only css in town!
Related
I want to filter KendoDropDownList datasource data by presenting an ID in array.
As far as I know there is no such built-in filters that's why I decided to created CSV list with identifiers and use contains filter. But unfortunately this approach seems to be not working. Please see my fiddle below: https://dojo.telerik.com/igEREXUT
Can anybody explain why contains is not working? I would expect to see first and third item.
$(document).ready(function() {
var data = [{
text: "Black",
value: "1",
Clients: "-100-,-101-,-103-" //this should be displayed after filtering
},
{
text: "Orange",
value: "2",
Clients: "-200-,-101-,-303-"
},
{
text: "Grey",
value: "3",
Clients: "-300-,-102-,-103-" //this should be displayed after filtering
}
];
// create DropDownList from input HTML element
$("#color").kendoDropDownList({
dataTextField: "Clients",
dataValueField: "value",
dataSource: data,
index: 0
});
var color = $("#color").data("kendoDropDownList");
color.select(0);
setTimeout(function() {
console.log('count before filtering: ' + color.dataSource.view().length);
color.dataSource.filter([{
field: "Clients",
op: "contains",
value: "-103-"
}]);
console.log('count after filtering: ' + color.dataSource.view().length);
}, 1000);
});
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/dropdownlist/index">
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="cap-view" class="demo-section k-content">
<h4>Customize your Kendo Cap</h4>
<h4><label for="color">Cap Color</label></h4>
<input id="color" value="1" style="width: 100%;" />
</div>
</div>
</body>
</html>
You have to use operator property instead of op in color.dataSource.filter method.
Refernce link
I created an Autocomplete form. I followed this simple documentation to create a button together with its click handler script. Clicking this button shall toggle RTL support for the form.
I have a problem. When I click the button, it does not toggle RTL support for the form.
demo
<body>
<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
<script>
$('#toggleRTL').on('click', function(event) {
var form = $('#speakerForm');
if (form.hasClass('k-rtl')) {
form.removeClass('k-rtl')
} else {
form.addClass('k-rtl');
}
})
</script>
<input id="autocomplete" type="text" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: {
data: [
{name: "Google"},
{name: "Bing"}
]
},
dataTextField: "name",
})
</script>
</body>
I think you missing some point from the tutorial :
you need to put all of your component to a container element and apply the k-rtl class to the container
you have a problem on your js where you dont have element with id speakerForm
UPDATE
3. as your comment i, i observe the behavior of the k-rtl and kendo autocomplete widget and the result is the suggestion will be still on the left side if we create the widget first then adding the k-rtl clas. So what do we need is the container having the k-rtl class first then initializing the widget.
4. i updated my code so that every time you click the button the #autocomplete div will be removed with its parent( result from kendo autocomplete which is a span) then append new element and re-initializing the kendo autocompelete widget
I think it's working if you follow it like this
function createAutoComplete(){
if($("#autocomplete").data("kendoAutoComplete") != null){
$("#autocomplete").parent().remove();
$("#container").append("<input id='autocomplete' type='text' />")
}
$("#autocomplete").kendoAutoComplete({
dataSource: {
data: [{
name: "Google"
}, {
name: "Bing"
}]
},
dataTextField: "name",
});
}
createAutoComplete();
$('#toggleRTL').on('click', function(event) {
var form = $('#container');
console.log(form);
if (form.hasClass('k-rtl')) {
console.log("test1");
form.removeClass('k-rtl')
} else {
console.log("test2");
form.addClass('k-rtl');
}
createAutoComplete();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="container">
<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
<input id="autocomplete" type="text" />
</div>
</body>
</html>
I have updated your dojo.
http://dojo.telerik.com/AfeNi/4
But as #machun has stated you are missing some elements of the mechanics of this process.
I have added the missing form element speakerForm and then added some additional console.log() statements showing the actions being performed.
if you need any more info let me know.
My goal is to accomplish a feature where a user types in some text into an input field and while they're typing, <li> elements appear below based on what the user's typing in.
For example, there's a text input field and the user types in red - the following results would appear:
red chair
red apple
red floor
Or if they typed in blue, the following results would appear:
blue surface
blue car
blue computer
I currently have this code, however no autocomplete results seem to be appearing:
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source :
[ { value: "http://foo.com",
label: "Spencer Kline"
},
{ value: "www.example.com",
label: "James Bond"
},
],
select: function( event, ui ) {
window.location.href = ui.item.value;
}
});
});
</script>
<input type="text" id="autocomplete" style="width: 75%;">
</body>
</html>
You need to include jQuery UI JS, jQuery UI CSS and jQuery libraries.
Also, your code needs some change. It should look like this:
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: [{
value: "www.foo.com",
label: "Spencer Kline"
}, {
value: "www.example.com",
label: "James Bond"
}
],
select: function(event, ui) {
window.location.href = ui.item.value;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<input type="text" id="autocomplete" style="width: 75%;">
I am using Kendo Grid in my web app and including kendo.all.min.js file. The version of this js file is 2012.1.515.
In the grid, columns are not resizeable in IE 10 and IE 11 though it works fine in all other browsers.
I have created a sample of grid and included the same file but grid columns are not resizeable in IE 10 and IE 11.
Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.silver.min.css" rel="stylesheet" />
<link href="/kendo-ui/content/shared/styles/examples.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
</head>
<body>
<div id="main">
<h1 id="exampleTitle">
<span class="exampleIcon gridIcon"></span>
<strong>Grid /</strong> Column resizing </h1>
<div id="theme-list-container"></div>
<div id="exampleWrap">
<script>preventFOUC()</script>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
gridDataSource = new kendo.data.DataSource({
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
scrollable: true,
resizable: true,
columns: [
{
field: "OrderDate",
title: "Order Date"
},
{
field: "ShipCountry",
title: "Ship Country"
},
{
field: "ShipCity",
title: "Ship City"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShippedDate",
title: "Shipped Date"
},
{
field: "OrderID",
title: "ID"
}
]
});
});
</script>
</div>
</div>
</div>
</body>
</html>
Thanks
I think, you need to specify width for every columns to resize. Something like:
columns: [
{
field: "OrderDate",
title: "Order Date",
width: 50px
}
I hope this is helpful.
I had some problems with clicking in ie10 and 11. Telerik advised me to update my js and css with latest edition. Which eventually solved my problem. Try update your kendo version to something on 2013. They have 4/5 updates on 2013, go for 3/4th one.
I had no problem working with bootstrap-slider (http://www.eyecon.ro/bootstrap-slider/) work using the simplest example provided on that site. However, I was intending to use one in a bootstrap popover as part of a more extended set of settings. The simplest example I could think of is here:
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/slider.css">
<script src="js/vendor/jquery-1.9.1.js"></script>
<script src="js/vendor/less-1.4.1.min.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/bootstrap-slider.js"></script>
<script>
$(function () {
$('#rangeSlider').slider({
formater: function(value) {
return 'Current value: '+value;
tooltip: 'show';
}
});
$("#popoverbutton").popover({
html: true,
placement: 'bottom',
title: 'Options',
content: function(){
return $("#popover-content").html();
}});
});
</script>
</head>
<body>
<h4> This is a test! </h4>
<div class="row">
<i class="icon-cog icon-white"></i>
</div>
<div id="popover-content" class="hide">
<div class="well"> Range: <input type="text" class="span2" value="50"id="rangeSlider" data-slider-min="10" data-slider-max="100" data-slider-step="5" data-slider-value="50">
</div>
</div>
</body>
</html>
As you can see, if you try to load this, it doesn't work. The slider is rendered correctly, but cannot be interacted with, no tooltip appears, etc.
A diff between the generated html for the slider component inside and outside of a popup reveals them to be identical, so I fail to understand the holdup. Anyone have experience with this particular issue?
Try to move your slider definition in the click function of the popover, so it will be fired after the static content rendering of the popover.
Code:
$(function () {
$("#popoverbutton").popover({
html: true,
placement: 'bottom',
title: 'Options',
content: function () {
return $("#popover-content").html();
}
}).click(function () {
$('#rangeSlider').slider();
});
});
Demo: http://jsfiddle.net/IrvinDominin/uTwM8/
EDIT
I see, I think is because the popover reinit its content you can handle it manually like using slide event and setValue method.
Code:
var sliderVal;
$(function () {
$("#popoverbutton").popover({
html: true,
placement: 'bottom',
title: 'Options',
content: function () {
return $("#popover-content").html();
}
}).click(function () {
$('#rangeSlider').slider().on('slide', function (ev) {
sliderVal = ev.value;
});
if (sliderVal) {
$('#rangeSlider').slider('setValue', sliderVal)
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/uTwM8/2/