I am attempting to place the bootstrap-datetimepicker by eonasdan in a C# gridview cell. I am facing issues with the elements not appearing correctly. Only the time is showing up and not the calendar. There are places for direction arrows on the element but they are not showing up either which makes me think it is a css issue and not a jquery or html issues. Any guidance would be greatly appreciated. Thanks!
I have tried rearranging and trying different .js and .min.js references. I have tried several of the different html layouts as provided on the documentation.
<script src=".../jquery-1.10.2.js"></script>
<script src=".../moment.js"></script>
<script src=".../bootstrap.js"></script>
<script src=".../bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href=".../bootstrap.css" />
<link rel="stylesheet" href=".../bootstrap-datetimepicker.css" />
…
<div class="containter">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="form-control" id="dt1" />
</div>
<script>
$(function () {
$('#dt1').datetimepicker();
});
</script>
</div>
</div>
</div>
There popup does work and it shows the time element, but the arrows to make the time go up and down are not appearing and the actual calendar itself is not showing up.
EDIT: I am now able to use the plugin with all of the textboxes but things are still not appearing as they should be. Here is the updated code. The datetime picker is still not appearing completely though.
<script src=".../jquery-3.4.1.min.js"></script>
<script src=".../moment.js"></script>
<script src=".../bootstrap.js"></script>
<script src=".../bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href=".../bootstrap.css" />
<link rel="stylesheet" href=".../bootstrap-datetimepicker.css" />
…
<div class="containter">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<asp:TextBox runat="server" ID="dt1" cssclass="form-control"></asp:TextBox>
</div>
<script>
$(function () {
$('.form-control').datetimepicker();
});
</script>
</div>
</div>
</div>
Related
I am trying to use Semantic-UI (Dropdown Component) on Magento 1.9. I included the semantic files in my head.phtml as:
<script type="text/javascript" src="http://uat.vvv.com/semantic/index.js"> </script>
<script type="text/javascript" src="http://uat.vvv.com/semantic/dropdown.js"></script>
<link rel="stylesheet" type="text/css" href="http://uat.vvv.com/semantic/dropdown.css" media="all">
I also have before this, the current theme includes JQuery as
http://uat.vvv.com/js/fs/jquery-1.10.2.min.js
I added this code to display a dropdown
<div class="ui dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
It is displayed but it does not show the selections. Before moving into solving this, I noticed the error message in the Chrome Console:
Uncaught ReferenceError: require is not defined
at http://uat.vvv.com/semantic/index.js:3742:5
Reference:
http://semantic-ui.com/modules/dropdown.html
What am I doing wrong here? I cannot come to any more thought.
I am having the weirdest problem and cannot figure it out. I am working with a series of collapsable buttons in bootstrap and everything seems to work fine if I call boostrap before jquery:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
However, if I call jquery before boostrap (as should be done) then the collapsibles won't close after being opened. I am not sure if I am calling libraries that are incompatible between each other or there might be another issue I am not aware of? The complete <head> tag is:
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<link href="https://cdn.bootcss.com/dragula/3.7.1/dragula.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.js"></script>
And a sample of the collapsibles:
<div class="container" id="maincontainer">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"><center><b>My Panel</b></center></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
### contents
</ul
</div>
</div>
</div>
</div>
I'm guessing you are using a template for your website.
So your collapsible is probably using Bootstrap in combination with jQuery's $(document).ready and thus bootstrap needs to be loaded before the jQuery code otherwise you are missing parts of the DOM.
The thing about calling jQuery before bootstrap is is that your jQuery code contains a lot of $(document).ready(function() { code }) ; blocks, which means that the DOM(the entire structure of your page) needs to be loaded in order for the code to execute.
So if you call jQuery before bootstrap it will go through all of your jQuery code and give out false on a lot of code blocks because a big part of your DOM(the bootstrap integrated parts) gets loaded after the jQuery code is already executed.
So my guess(since i can't see your entire code) would be that your code is fine and that it's just a matter of calling scripts in the right order.
I'm trying to make some app in TideSDK using Semantic-UI (http://semantic-ui.com/). When I open my page in Chrome it works correctly:
chrome http://krakow45.pl/test/chrome.png
but when I'm launching my code with TideSDK it looks like:
tide http://krakow45.pl/test/tide.png
How you can see, some elements are missing and it isn't work correctly.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<!-- JavaScript includes -->
<script src="vendor/jquery.js"></script>
<script src="js/app.js"></script>
<script src="vendor/semantic/semantic.js"></script>
<!-- /JavaScript includes -->
<!-- CSS includes -->
<link rel="stylesheet" type="text/css" href="vendor/semantic/semantic.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- /CSS includes -->
<title>xxx</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- PAGE: NEW_REPORT -->
<div id="NEW_REPORT_fieldsContainer" class="ui segment">
<div class="ui input">
<input id="NEW_REPORT_firstName" type="text" placeholder="Imię">
</div><br /><br />
<div class="ui input">
<input id="NEW_REPORT_lastName" type="text" placeholder="Nazwisko">
</div><br /><br />
<div class="ui left icon input">
<input id="NEW_REPORT_date" type="text" placeholder="26/03/2015">
<i class="calendar icon"></i>
</div><br /><br />
<div id="NEW_REPORT_buttonNext" class="ui animated button">
<div class="visible content">Dalej</div>
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
</div>
</div>
<!-- /PAGE: NEW_REPORT -->
</body>
Remember that TideSDK uses an old version of webkit. I'm pretty sure you'll have to prefix your CSS3 rules (-webkit-). But also keep in mind that all the CSS3 rules cannot be used, but for now I haven't encounter major CSS3 issues.
Just one thing is bothering me, it's the old developper console..
TideSDK seems not to be that amazing choice to develop those apps anymore :( Sadly after they started to develop TideKit, no support was given.
This last version should support all CSS 3 elements but it actually doesn't.
Glad you found your way out :)
I'm trying to use the fuelux datepicker and can't seem to even initialise it properly! Any help would be most appreciated. I've based it on the examples here: https://gist.github.com/vernak2539/9980566
Header of page:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.4.0/css/fuelux.min.css" rel="stylesheet">
HTML:
<div class="fuelux">
<div class="datepicker dropdown" id="myDatepicker">
<div class="input-append">
<div class="dropdown-menu"></div>
<input type="text" class="span2" value="" data-toggle="dropdown">
<button type="button" class="btn" data-toggle="dropdown">
<i class="icon-calendar"></i></button>
</div>
</div>
Before my JS:
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.4.0/js/fuelux.min.js"></script>
JS:
$(document).ready(function(){
$('#myDatepicker').datepicker();
});
Also tried in a fiddle and thought it would be sufficient but it isn't working:
http://jsfiddle.net/z2rpos9g/
it looks like the markup is more important
check out this FIDDLE
also you should add
fuelux
class to the div which has datepicker.
I couldn't find anything that seemed to answer why my DatePicker would not work more than once on the same page. Below is the code I'm using, with most of the body content removed for clarity's sake and ease of reading:
<html>
<head>
<!-- Load jQuery from Google's CDN -->
<!-- Load jQuery UI CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- Load jQuery JS -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- Load jQuery UI Main JS -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Load SCRIPT.JS which will create datepicker for input field -->
<script src="script.js"></script>
<link rel="stylesheet" href="runnable.css" />
</head>
<body>
<p>Pick a Date: <input type="text" id="datepicker" /></p>
<p>Pick a Date: <input type="text" id="datepicker" /></p>
<p>Date:<input type="text" id="datepicker" /></p>
</body>
Can anyone tell me why it's only working for the first instance but not the following 2?
Thanks!
You have multiple instances with an id of datepicker, and this is invalid HTML. id should be a unique field.
If you want to apply to multiple ones, make it a class:
<input type="text" class="datepicker" />
and then apply it using the class selector:
$('.datepicker').datepicker();
This will solve both the invalid HTML and multiple instances problems.
As a little extra information, the reason it works for only the first instance is because the ID selector in jQuery stops looking in the DOM for elements after it finds the first (and what should be only) match.