I am using bootstrap datetimepicker version 3. Here datetimepicker de-faulty taking current date and time. But in next version this problem is resolved. So I will try to use Eonasdan bootstrap datetimepicker version v4. For that what are the js and css files I have include in my jsp page?
Check manual installation guide here.
You must include:
jQuery
Moment.js
Bootstrap + collapse + transitions
So the files needed would be:
bootstrap.min.js
bootstrap.min.css
moment-with-locales.js
bootstrap-datetimepicker.css
bootstrap-datetimepicker.js
Check this fiddle for a working example.
HTML:
<br/>
<!-- padding for jsfiddle -->
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
</div>
JS:
$('#datetimepicker1').datetimepicker();
Related
i want to write this code with svelte framework
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () { $('#datetimepicker1').datetimepicker(); });
</script>
</div>
</div>
Or if there is another way to write the timing as in the picture
enter image description here
I searched for a long time and didn't find a solution
I can see you're using jQuery in svelte, do note that the $ shorthand is a reserved word in svelte and this won't work.
Please visit this question to see how to use jQuery and Svelte together... Otherwise you could use the vanillajs-datepicker library to implement the date picker in your svelte web app.
See my demo of the library here. Do read the comments for more guidance
Happy Coding 😊 ....
I use Rails 5.0.0 and Turbolinks 5
Have Turbolinks 5 ability reload only specific part of page, for example:
<div class='block1'>
<span class='moo'>Moo-moo-moo!</span>
<span class='some'>It's OK</span>
</div>
.......
<div class='block2'>
<span class='moo'>Moo-moo twice!</span>
<span class='some'>Change me, pls!</span>
</div>
and I need reload only class='block2 some'
can I do it?
Thanks!
I'm having a problem with button groups for bootstrap.
Right now I have jquery ui js called before bootstrap js and the button gorup works fine. However, if i keep this structure, jquery ui dialog buttons do not work, specifically the close button does not show due to conflicting js code.
If i switch the order then the jquery ui dialog close button shows but the button groups for bootstrap are all messed up, because of the conflict between the two js libraries.
I have tried using bootstraps solution:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Then when calling $(".btn").bootstrapBtn() and testing the button group every time i click a new button in the group i get the error:
cannot call methods on button prior to initialization; attempted to call method 'toggle'
I have done a ton of research and still can't come up with a solution.
Here is my code:
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:none;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
</label>
<label class="btn btn-default">
<input class="pieChart" data-target="pie-section" type="radio" name="options" id="pie"> Pie
</label>
<label class="btn btn-default">
<input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
</label>
</div>
<div class="bar-section k-content">
<div class="chart" id="barChart"></div>
</div>
<div class="container-fluid pie-section k-content">
<div class="row chart" id="pie-section"></div>
</div>
<div class="column-section k-content">
<div class="chart" id="columnChart"></div>
</div>
And my JS to handle the buttons:
$('.btn').button();
$('input[type=radio]').on('change', function () {
var target = "#" + $(this).data("target");
$(".chart").not(target).hide();
$(target).show();
kendo.resize($(".k-content"));
});
PS: Using Jquery UI version 1.11.1 and Jquery version 1.11.1
If you simply Google that error message, you'll see that it's a jQuery UI error message, so $.fn.button at that point in your code is referring to the jQuery UI Button plugin, not the Bootstrap Button plugin.
You need to put the noConflict after you've loaded Bootstrap but before you load jQuery UI, e.g.:
<script src="/foo/jquery.min.js"></script>
<script src="/foo/bootstrap.min.js></script>
<script>
$.fn.bootstrapBtn = $.fn.button.noConflict();
</script>
<script src="/foo/jquery.ui.js"></script>
You will then need to use $(...).bootstrapBtn(...) instead of $(...).button(...) in the rest of your code.
If you're using gulp or Grunt to build your assets (with main-bower-files for example) an option would be not to include the whole of jQueryUI. Just take the parts you need and skip buttons and tooltip. Those two are the ones that conflict the most in my experience.
For example put the following section in your bower.json:
"overrides":
"jqueryui": {
"main": [
"ui/core.js",
"ui/widget.js",
"ui/mouse.js",
"ui/datepicker.js",
"ui/draggable.js",
"ui/droppable.js",
"ui/resizable.js",
"ui/selectable.js"
]
}
Just using the parts you need is also good practise to void page size when loading and sidesteps the conflict problem altogether. Hope this works in your case as well.
edit fixed typo
I know this an old post but I had the same issue. I had Bootstrap 3.0.3 and upgrading it to version >=3.4.1 solved the issue.
$('.btn').button();
$('input[type=radio]').on('change', function() {
var target = "#" + $(this).data("target");
$(".chart").not(target).hide();
$(target).show();
kendo.resize($(".k-content"));
});
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:non;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
</label>
<label class="btn btn-default">
<input class="pieChart" data-target="pie-section" type="radio" name="options" id="pie"> Pie
</label>
<label class="btn btn-default">
<input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
</label>
</div>
<div class="bar-section k-content">
<div class="chart" id="barChart"></div>
</div>
<div class="container-fluid pie-section k-content">
<div class="row chart" id="pie-section"></div>
</div>
<div class="column-section k-content">
<div class="chart" id="columnChart"></div>
</div>
</div>
https://jsfiddle.net/codinglattice/gu4mjaep/29/
Try to move jquery UI js before bootstrap js. This way it works for me.
var bundle = new ScriptBundle("~/bundles/CommonJs")
.Include("~/js/jquery-1.12.4/jquery-ui.js")
.Include("~/js/bootstrap.min.js")
I am opening a page as a dialog. This dialog does not style the checkbox correctly.
Tried using checkboxradio("create"); but no joy.
How do I get the checkbox to style correctly in the Dialog box??
Here's a jsFiddle with the code.
You need to put the checkbox in a div with the proper markup
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</div>
Example: http://jsfiddle.net/shanabus/8xMX2/12/
Based on the example in the docs here: http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html
I think you'll have to put the checkbox inside of a form tag in order to get jQuery Mobile to style it.
Looks like this might be a bug. Adding the <form> tag works but you also had create but needed refresh for the checkboxradio():
http://jsfiddle.net/8xMX2/11/
JS
$('#page2').live('pageshow', function(){
$("input[type='checkbox']").checkboxradio("refresh");
});​
HTML
<div data-role="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
Open as Dialog
</div>
</div>
<div id="page2" data-role="page">
<div data-role="header">
Back
<h1>Page Two</h1>
</div>
<div data-role="content">
<form>
This is a dialog Box.
JQM seems to be not styling the below checkbox.<br>
<input type="checkbox" name="cb1" id="cb1" />
<label for="cb1">A Checkbox</label>
<br>
A button is styled well.<br>
Just a Button
</form>
</div>
</div>​
I am trying to use the jquery-ui accordion functionality on a drupal page. I have teams with multiple people in each team that I want to display. I have a view set up that groups by team, and has contact info for each team member. My accordion doesn't seem to be working. I used <?php jquery_ui_add('ui.accordion'); ?> to import the correct js file from the jquery ui module, and it is showing up in the js file.
I was wondering if I have too many div tags and that is shomehow messing with it. Does anyone see anything that may be affecting this?
Thanks for any thoughts.
Here is some sample code -
<div id="accordion">
<div>
<h3>Team: 1</h3>
<p>
<div class="views-field-title">
<label class="views-label-title">
Title:
</label>
<span class="field-content">John Doe</span>
</div>
<div class="views-field-field-email-value">
<label class="views-label-field-email-value">
Email:
</label>
<span class="field-content">John.Doe#email.com</span>
</div>
<div class="views-field-field-phone-value">
<label class="views-label-field-phone-value">
Phone:
</label>
<span class="field-content">555-555-5555</span>
</div>
<div class="views-field-field-extension-value">
<label class="views-label-field-extension-value">
Extension:
</label>
<span class="field-content"></span>
</div>
<div class="views-field-field-role-value">
<label class="views-label-field-role-value">
Role:
</label>
<span class="field-content">Team Leader</span>
</div>
</p>
and here is my jquery accordion call -
<script>
$(document).ready(function() {
$(function() {
$( "#accordion" ).accordion();
});
});
</script>
I hope you have figured it out already, but here's a solution I wrote up a while back...
http://www.cleaver.ca/content/jquery-ui-accordion-drupal-6
There can be some incompatibilities based on the version of jQuery and jQueryUI, so this may help sort things out. There's a link to the site where I got it workin
First off, when troubleshoot jQuery I have found it very useful to scale down any HTML that I pass to it to be parsed. Next, are you sure that the UI library is being called in. Try using drupal_add_js('/path/to/jquery.ui.js'); when you load your module.