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>
Related
This code its working okay but every time that I click on the checkbox it sends 1 post, then 2 posts, then 4 posts, then 8 posts etc.. to "insert.php". How can I prevent this error?
$(document).ready(function() {
$('#submiter').click(function() {
$("input:checkbox").change(function() {
if ($(this).is(":checked")) {
console.log('checked ' + $(this).val());
$.ajax({
url: "insert.php",
method: "POST",
data: {
test1: $(this).val()
},
success: function(data) {
$('#result').html(data);
}
});
}
});
});
});
<html>
<head>
<title>Ajax Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<input type="checkbox" value="PHP" id="submiter" />PHP <br />
<div id="result"></div>
</body>
</html>
Initially you have 1 handler for your input, an onclick handler.
When clicked, it adds an onchange listener to same element, from now on, you have 2 listeners for your input.
The next click, it adds one more onchange listener, and so on...
Do you really need an onclick listener? Maybe just the onchange isn't sufficient? See below code (I removed ajax part to avoid requests in this example)
$(document).ready(function() {
$("#submiter").change(function() {
if ($(this).is(":checked")) {
console.log('checked ' + $(this).val());
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<input type="checkbox" value="PHP" id="submiter" />PHP <br />
<div id="result"></div>
Hi I don’t understand what the meaning of the error is in the web console.
Uncaught TypeError: r.getClientRects is not a function jquery.min.js:2
I am trying to build an autocomplete search form in laravel Based on a bootstrap theme i downloaded.
It works but the dropdown is misaligned to the text box
I suspect JQuery because of that error and the fact that in a different bootstrap theme I had, it worked
I have my script links as follows
<link href="http://myurl.com/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<link href="http://myurl.com/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css
rel="stylesheet">
<link href="http://myurl.com/css/grayscale.min.css" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://myurl.com/vendor/jquery/jquery.min.js"></script>
<script
src="http://myurl.com/vendor/bootstrap/js/bootstrap.bundle.min.js"> .
</script>
<script src="http://myurl.com/vendor/jquery-
easing/jquery.easing.min.js"></script>
<script src="http://myurl.com/js/grayscale.min.js"></script>
My form:
<form class="form-inline d-flex">
<input class="form-control autocomplete_txt input-lg flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0"
type='text' data-type="EmpService" id='EmpService_1' name='EmpService[]' autocomplete="off" placeholder="looking for...">
<button type="submit" class="btn btn-primary mx-auto">Search</button>
<div class="col-xs-4 g-recaptcha" data-sitekey="6Lf9mW4UAAAAACtNJIuXY9VlCZ5kg0Ys7Y3ancH_"></div>
</form>
My Javascript:
$(document).on('focus','.autocomplete_txt',function(){
type = $(this).data('type');
if(type =='EmpService' )autoType='EmployeeService';
$(this).autocomplete({
minLength: 0,
source: function( request, response ) {
$.ajax({
url: "http://spanibox.com/searchajax",
dataType: "json",
data: {
term : request.term,
type : type,
},
success: function(data) {
var array = $.map(data, function (item) {
return {
label: item[autoType],
value: item[autoType],
data : item
}
});
response(array)
}
});
},
select: function( event, ui ) {
var data = ui.item.data;
id_arr = $(this).attr('id');
id = id_arr.split("_");
elementId = id[id.length-1];
$('#EmpService_'+elementId).val(data.name);
}
});
The problem is likely due to using jQuery 3.1.
Try to add :
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
I am using a multiselect dropdown to have a checkbox and Search functionality.
I have added all the required libraries. But the dropdown is not showing correctly. The data is displayed as radio buttons instead of check box. And Selecting any value is not shown. Please find my code below:
<head>
<link rel="stylesheet"
href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script type="text/javascript" src="/resources/js/app.js"></script>
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fileList').change(function() {
var end = this.value;
alert("Value:" + end);
$.ajax({
type: "POST",
url: 'getColumns',
data : {
end
},
dataType: 'json',
success: function (response) {
alert('something'+response+"="+response.length);
alert('res'+response[0]);
for(var i = 0; i<response.length; i++){
var id = response[i];
$("#columnList").append("<option value=''>"+id+"</option>");
}
$('#columnList').multiselect({
includeSelectAllOption: true,
buttonWidth: 500,
enableFiltering: true
});
},
error: function() {
alert('fail');
}
});
});
});
</script>
HTML code for Select Element
<div class="row">
<div class="col-sm-12 form-group wow fadeInDown"
data-wow-delay="700ms" data-wow-duration="1000ms">
<div class="input-group">
<span class="input-group-addon"><span
class="glyphicon glyphicon-file"></span></span> <select
class="form-control" name="columnList" id="columnList">
<option value="" hidden>Select Segment Name</option>
</select>
</div>
</div>
</div>
I am Expecting Output like this.
I hope you have to change your option value code in your jquery. try modifying your code like below:
$("#columnList").append("<option value="+id+">"+value+"</option>");
Also, try to check the class for showing checkbox
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.
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/