I am working with the jquery UI widget called checkboxradio because I find it interesting the aesthetics they offer without the checkbox, as if it were a button.
The problem I am having is that I need to dynamically create the checkboxes because depending on the information in my database, there will be one or the other. Specifically, the problem is that I am able to generate the checkbox I need without problems, but the widget style is not applied to them. That is, they appear on my page but they come out in the default format.
Can anyone help me tell me if I am importing something wrong, or calling it wrong, etc?
Below is my code. I have adapted it by creating a single checkbox, because the only difference would be that it would have a loop that creates more or less checkboxes the same as there is now, but with different names.
function printNodeFilters(nodes) {
$("#legend_filtro_datos").after('<label for="checkbox-2">tracker 1</label>');
$("#legend_filtro_datos").after('<input type="checkbox" name="TRACKER1" id="checkbox-2">');
}
// MAIN
$(document).ready(function() {
printNodeFilters();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- *** WIDGET *** -->
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("input").checkboxradio({
icon: false
});
});
</script>
<!-- ****** -->
<div class="col-2" id="filter_container">
<!-- FILTROS-->
<legend>Filtros mapa: </legend>
<label for="radio_ult_pos">Última posición</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
<label for="radio_ruta">Ruta</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">
<legend id="legend_filtro_datos">Filtros datos: </legend>
<!-- AQUÍ IRÍAN LOS CHECKBOX -->
<button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>
I do not quite understand what happens, because if I create it in a static way directly in my html, there is no problem, it looks and works perfect. This makes me think that in my js file maybe I need to call the widget or something, but I don't know what.
This would be a functional code if you create anything for js,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- *** WIDGET *** -->
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("input").checkboxradio({
icon: false
});
});
</script>
<!-- ****** -->
<div class="col-2" id="filter_container">
<!-- FILTROS-->
<legend>Filtros mapa: </legend>
<label for="radio_ult_pos">Última posición</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
<label for="radio_ruta">Ruta</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">
<legend id="legend_filtro_datos">Filtros datos: </legend>
<label for="checkbox-2">tracker 1</label>
<input type="checkbox" name="TRACKER1" id="checkbox-2">
<button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>
As you can see, in this second example it is created well. So how can it be that when doing the append does not work, if I have copied and pasted the same code?I'm appending wrong? I need to call the function in my js after printing the checkbox?
I hope I have explained well, thank you very much.
When adding additional elements dynamically, you must then refresh the widget or, if it is not currently initialized, initialize the widget.
$(function() {
printNodeFilters();
$("input").checkboxradio();
});
Full example:
function printNodeFilters(nodes) {
$("#legend_filtro_datos").after('<label for="checkbox-2">tracker 1</label>');
$("#legend_filtro_datos").after('<input type="checkbox" name="TRACKER1" id="checkbox-2">');
}
$(function() {
printNodeFilters();
$("input").checkboxradio();
});
<link rel="stylesheet" href="//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>
<div class="col-2" id="filter_container">
<!-- FILTROS-->
<legend>Filtros mapa: </legend>
<label for="radio_ult_pos">Última posición</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
<label for="radio_ruta">Ruta</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">
<legend id="legend_filtro_datos">Filtros datos: </legend>
<!-- AQUÍ IRÍAN LOS CHECKBOX -->
<button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>
Related
I have a checkbox that if checked, will check the other checkbox. I am using material design. The checked property of the material box checkbox in undefined. How do I make the checked property become defined? What am I doing wrong?
This is the link where the problem happens
<script>
$(document).ready(function(){
$("#exclude_all").change(function(){
var element_all = document.querySelectorAll('[id="exclude_all"]');
var elements = document.querySelectorAll('[id^="exclude_dir_"]');
for(var i=0, n=elements.length; i<n; i++){
var element = elements[i];
if($('#exclude_all').is(":checked")) {
element.MaterialCheckbox.check();
} else {
element.MaterialCheckbox.uncheck();
}
}
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-light_blue.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ol style="padding-left:37px;list-style:none;font-size:12px;">
<li>
<label id="label_exclude_all" name="label_exclude_all" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_all" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_all" id="exclude_all" class="mdl-checkbox__input" value="Buscar""">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Excluir tudo</span>
</label>
</li>
<li>
<label name="label_exclude_dir_0" id="label_exclude_dir_0" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_dir_0" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_dir_0" id="exclude_dir_0" class="mdl-checkbox__input" value="Atibaia">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Atibaia</span>
</label>
</li>
</ol>
</body>
</html>
When I change this:
element.MaterialCheckbox.check();
To this:
element.parentNode.MaterialCheckbox.check();
I guess you need to do for label and not the input checkbox.
All the instructions that I read about material design lite doesn't ever mention that you need to use parentNode. Anybody here can explain why?
Marcos
This is Meterial CheckBox HTML code
How check and UnCheck Using JQuery.
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="OnAccount">
<input type="checkbox" id="OnAccount" class="mdl-checkbox__input" />
<label class="mdl-checkbox__label">On Account</label>
</label>
</div>
The documentation for the Material Design Lite API never seemed to get fully completed before they put it in "limited support" and moved on to Material Components for the web. You can sift through the source code for the MDL checkbox to see that the label element is integral to the display and that the MDL checkbox functions need to be called on that element.
Below is a working snippet that targets the elements you need without the extra steps:
$(document).ready(function() {
// better to add a class to your checkbox labels and update this selector
const elems = $('[id^=label_exclude_dir_]');
$('#exclude_all').change(function() {
const checked = $(this).is(':checked');
elems.each(function() {
if (checked) {
this.MaterialCheckbox.check();
} else {
this.MaterialCheckbox.uncheck();
}
});
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-light_blue.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ol style="padding-left:37px;list-style:none;font-size:12px;">
<li>
<label id="label_exclude_all" name="label_exclude_all" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_all" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_all" id="exclude_all" class="mdl-checkbox__input" value="Buscar">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Excluir tudo</span>
</label>
</li>
<li>
<label name="label_exclude_dir_0" id="label_exclude_dir_0" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_dir_0" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_dir_0" id="exclude_dir_0" class="mdl-checkbox__input" value="Atibaia">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Atibaia</span>
</label>
</li>
</ol>
</body>
</html>
I'm trying to use Bootstrap Colorpicker to control the color of text from an input field. I want the add-on field attached to an input field but not the default associated hex input box.
Specifically, I have a text input field for Title and I want an add-on Colorpicker box next to the field that will govern its color (as displayed elsewhere). I can't figure out how to just use the Colorpicker add-on box without the standard hex input field.
How do I properly code an add-on for an unrelated input field and still retain the value in JS for use elsewhere?
Thank you!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Style -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-colorpicker.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" action="process-campaign-creative.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="control-label">
Title
</label>
<div class="input-group">
<input type="text" class="form-control" name="title" id="title">
<!-- PROBLEM HERE: Doesn't show color box (and value doesn't seem to change) -->
<span id="cp1" class="input-group-addon colorpicker-component" value="#00AABB"><i></i></span>
</div>
</div>
</form>
</div>
</body>
JS
//SRC: https://github.com/farbelous/bootstrap-colorpicker/blob/master/dist/js/bootstrap-colorpicker.js
<script type="text/javascript">
$('#cp1').colorpicker();
</script>
CSS
//SRC: https://github.com/farbelous/bootstrap-colorpicker/blob/master/dist/css/bootstrap-colorpicker.css`
You want to apply the selected color DIRECTLY on the input field content.
(which contains user's text for a "title", not an hex color number).
Okay... But BootStrap's colorPicker actually uses the input field to select a color using the keyboard.
So we have to "hack it" a little...
The good thing is that we can unbind the input's keyup event from colorPicker.
We'll then have to ensure the user's text will remain on colorPicker's changeColor event... And get the color number directly from the API (using .data('colorpicker')) to apply it to the user's text.
So here is the code as you wished it to act: (Run the snippet)
$(function() {
// Initiate the colorpicker
$("#cp").colorpicker();
// Unbind the keyup event from the input (which normally changes the color.)
$("#title").off("keyup");
// Define a variable for the user's text at global scope.
var titleText;
// Get the text value inputed by the user as soon as the colorPicker is accessed.
$('#cp-icon').on("mousedown",function(){
titleText = $("#cp>input").val();
//console.log( titleText );
});
// On color selection, affect the input's text with it.
$("#cp").on("changeColor",function(){
//console.log("change event");
var colorPicked = $('#cp').data('colorpicker').input[0].value;
$("#title").val(titleText).css("color",colorPicked);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<body>
<div class="container">
<form class="form-horizontal" action="process-campaign-creative.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="control-label">
Title
</label>
<div class="input-group" id="cp">
<input type="text" class="form-control" name="title" id="title">
<span class="input-group-addon colorpicker-component"><i id="cp-icon"></i></span>
</div>
</div>
</form>
</div>
</body>
Same on CodePen.
You should match the color inside input tag, not inside span
HTML:
<div class="input-group colorpicker-component ">
<input type="text" value="#00AABB" class="form-control"/>
<span class="input-group-addon"></span>
</div>
JS:
$('.colorpicker-component').colorpicker();
I have problem with two datepickers on the same page, they just don't want to work together.
I have found topics connected to mine but they didn't solve my problem:
Conflict with two jquery datepickers on same page
Javascript two datepicker conflict
My fields looks like that:
<div class="row">
<div class="col-xs-6 filter-from">
<input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
</div>
<div class="col-xs-6 filter-to">
<input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
</div>
</div>
Initialization looks like that:
$(document).ready( function() {
$(document).find('#date-filter-from').datepicker();
$(document).find('#date-filter-to').datepicker();
});
Now what happens. First datepicker I click works okey. Then when I click second it doesn't work at all OR when I pick a date it shows error in console:
Uncaught TypeError: Cannot set property 'currentDay' of undefined
I will appreciate any help or ideas.
Use a JQuery selector instead of $(document).find
$(document).ready(function() {
$('#date-filter-from').datepicker();
$('#date-filter-to').datepicker();
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="row">
<div class="col-xs-6 filter-from">
<input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
</div>
<div class="col-xs-6 filter-to">
<input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
</div>
</div>
I've got this form with bootstrap but I can't find why it's not working properly ant I've no idea why.
HEAD>>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/corrections.css" rel="stylesheet" type="text/css"/>
<script src="js/JQuery-2.1.1-min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
--> code here
</body>
HTML >>
<div class="col-lg-4">
<form class="form-inline well">
<div class="form-group">
<label class="sr-only" for="text">Some label</label>
<input id="text" type="text" class="form-control" placeholder="Text here">
</div>
<button type="submit" class="btn btn-primary pull-right">Ok</button>
<div class="alert alert-danger" style="display:none">
<h4>Error</h4>
Required amount of letters is 4
</div>
<div class="success alert-success" style="display:none">
<h4>Success</h4>
You have the required amount of letters
</div>
</form>
</div>
JS >>
<script>
$(function () {
$("form").on("submit", function () {
if ($("input").val().length < 4) {
$("div.form-group").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return;
} else if ($("input").val().length > 3) {
$("div.form-group").addClass("has-success");
$("div.success").show("slow").delay(4000).hide("slow");
return;
}
});
});
</script>
the alert class shows everytime, any idea why?
The use of $("input") here is unusual. That selector will pull back all elements on the page that are <input>s, which is almost certainly not what you mean. (If there are other inputs on the page, you might get exactly what you're describing.) Use a more precise selector, like $("#text"), and maybe use debug to output the value of val().length so you know what you're evaluating.
(On a side note, "text" is not a very useful name for a text input, and your else-if seems redundant, but they probably aren't causing problems in your code.)
I have a problem regarding checking checkbox by JS.When I checked the checkbox by JS it seems like in program that it's checked but in UI it's not updated .
if anyone have solution for this
<!DOCTYPE html>
<html>
<head>
<title>Check</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function getCheckedValue()
{
return ((document.getElementById("rock").checked));
}
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked="checked";
alert((document.getElementById(toBeChecked).checked))
alert($('#'+toBeChecked).attr('checked'))
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>What kind/s of music do you listen to?</h1>
</div><!-- /header -->
<div data-role="content">
<input type="checkbox" class="music" name="music" id="rock" value="rock" >
<label for="rock">Rock</label>
<input type="button" value="Get" onclick="alert(getCheckedValue())">
<input type="button" value="Set" onclick="setCheckedValue('rock') ">
</div>
</div>
</body>
</html>
Instead of using attr I would highly recommend you use prop.
The preferred cross-browser-compatible way to determine if a checkbox is checked is to check for a "truthy" value on the element's property using one of the following:
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.
$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");
I have worked after getting response from all of your efforts and the working code is below.
<!DOCTYPE html>
<html>
<head>
<title>Check</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function getCheckedValue()
{
return (document.getElementById("rock").checked);
//return $('input[name=music]').checked;
}
function setCheckedValue(checkboxName,toBeChecked){
$('input[name='+checkboxName+']').prop("checked", true).checkboxradio("refresh");
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>What kind/s of music do you listen to?</h1>
</div><!-- /header -->
<div data-role="content">
<input type="checkbox" class="music" name="music" id="rock" value="rock" >
<label for="rock">Rock</label>
<input type="button" value="Get" onclick="alert(getCheckedValue())">
<input type="button" value="Set" onclick="setCheckedValue('music','rock') ">
</div>
</div>
</body>
</html>
try
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked=true;
alert((document.getElementById(toBeChecked).checked))
alert($('#'+toBeChecked).prop('checked'))
}
Jquery-mobile appends classes for such things. Basically within that one input/label pair you have the following:
<div class="ui-checkbox">
<input type="checkbox" class="music" name="music" id="rock" value="rock">
<label for="rock" data-corners="true" data-shadow="false" data-iconshadow="true" data- wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-checkbox-on ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Rock</span>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span>
</span>
</label>
</div>
What you need to do is find a way to remove and add the classes to the label and span tags. I've done this for the label, but not for the span as I'm about to finally get some sleep.
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked="checked";
$("label[for='rock']").addClass("ui-checkbox-off");
$("label[for='rock']").addClass("ui-checkbox-on");
}
I did stumble across:
$("#checkbox-label").checkboxradio("refresh");
From: http://forum.jquery.com/topic/what-is-the-most-effective-way-of-unchecking-a-checkbox
Not entirely the same question, I know but slightly relevant. I didn't have the chance to finagle with it and get it to work...nor did I look much more into it to see if it does even work.
In short, the property is being set to "checked", however, the elements need to have their css refreshed in order to accommodate the new 'state'.
I hope this helps!