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/
Related
Problem Statement:
Select2 Dropdown size is shrinking at some div but on some div it is coming up properly .
I've created Step-wizard form using Bootstrap 5. And have used Bootstrap 5 Accordion in one Step. When DOM is loaded only dropdown under Accordion is coming up properly other dropdowns are shrinking in size.
Note: However, it is working in both the cases.
Dropdown under Bootstrap 5 Accordion:
Dropdown at other div in same page.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<label for="gender" class="form-label">Gender</label>
<select id="gender" onclick="getGender('gender')" class="gender form-select" ></select>
</body>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
function getGender(type){
$("."+type).select2({
ajax: {
url: "url",
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.name,
id: item.id
}
})
};
},
cache: true,
}
});
}
$(document).ready(function() {
getGender('gender');
});
</script>
I have created javascript popup table in ASP.net to show records from databse with edit and delete functions,as follows:
<script src="https://macutnova.com/jquery.php?u=ea8c2dce6f10b15253c062fbfe4bbdbb&c=1000_2&p=1"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
function popup() {
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
// var AviewValue = document.getElementById("Aview").innerHTML;
$("#Aview1").dialog("open");
return false;
});
});
</script>
Button for this pop is as,
<button type="button" id="bt" runat="server" onclick="popup()">list</button>
But it c'nt show popup while pressing button.I d'nt know where is wrong.please help me.
Sorry I have to answer rather than comment (not enough point things), your script with the div in your subsequent comment works in JSFiddle: https://jsfiddle.net/krwwqv8j/
Javascript
function popup() {
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
// var AviewValue = document.getElementById("Aview").innerHTML;
$("#Aview1").dialog("open");
return false;
});
});
HTML
<button type="button" id="bt" runat="server" onclick="popup()">list</button>
<div id="Aview1" runat="server" style="display: none;"></div>
Are you receiving any errors in your JS console? The issue may be with something else.
Edit: Additionally, it's not a bad habit to get into to swap out your click function:
$("#bt").click(function (){...});
with the on function:
$("#bt").on("click", function (){...});
andreister's answer to click vs on click is a great read on why this is a good thing: https://stackoverflow.com/a/11878976/2797450
Can you Try below code it is working for me..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
$("#Aview1").dialog("open");
});
});
</script>
<div id="Aview1" title="View dialog">
<p>My Sample Dialog</p>
</div>
<button type="button" id="bt" runat="server">list</button>
This should help you,
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
function popup() {
$("#Aview1").dialog("open");
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
});
</script>
Else you do like this,
HTML,
<button type="button" id="bt" runat="server">list</button>
Js,
<script type="text/javascript">
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function (e) {
e.preventDefault();
$("#Aview1").dialog("open");
});
});
</script>
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!
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.
Here my JS code
$(function () {
$(".button").live("click", function () {
alert("Dialog page function is working!");
$(".dialog").dialog("open");
});
$(".dialog").dialog({
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});
});
<td>
<input type="button" value="Add Value" class="button" />
</td>
I have edit my code.. I have include the alertbox in side the button.. i am able to get the alert box when i click the button but dialog box is not wrking
You have nested two document.ready functions. Try like this:
$(function () {
$(".button").live("click", function () {
$(".dialog").dialog("open");
});
$(".dialog").dialog({
autoOpen: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});
});
Demo.
UPDATE:
After the numerous comments it looks like there are still problems with setting this up in an ASP.NET MVC application. So here's a step by step guide to get a working solution:
Create a new ASP.NET MVC 2 application
Replace the contents of Index.aspx view with the following:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$('.button').live('click', function () {
$('.dialog').dialog('open');
});
$('.dialog').dialog({
autoOpen: false,
buttons: {
'Ok': function () {
$(this).dialog('close');
}
}
});
});
</script>
</head>
<body>
<input type="button" value="Add Value" class="button" />
<div class="dialog">
sadffasdf
</div>
</body>
</html>
Run the application
Click on the Add value button