We Keep Coding

ASP web application issues with jquery datetime picker

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>

Semantic-UI Dropdown | JS cannot find JQuery

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.

Laravel 5.2 datepicker

For days, I'm trying to get Datepicker functionality in my web application (based on Laravel 5.2). Can't get it to work.
In the head section of my layout file I add:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css">
and at the bottom I have
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function() {
$('.datepicker').datepicker();
});
</script>
In the view file I have
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
I'm seeing the date field but when I click on it, it simply tries to open the dateselector, but it appears empty (so no dates inside)
Suggestions welcome!
Note: screenshot here

As said above, it looks like you need to add bootstrap CSS to your app.
If you intend to use datepicker (or any other bootstrap elements) in more than 1 view then I would add it to your layout view, it will make life a lot easier than adding it to each file.
If you have added the files locally to your project to public/assets/css then call them with the below.
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap.min.css')}}"/>
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-responsive.min.css')}}"/>
OR
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

You might need to add bootstrap.css as well. The styling of the elements in the calendar takes from that stylesheet.

Include bootstrap styles and javascript files. they are required to use bootstrap-datepicker.

index.html not linking with handlebars

I'm having trouble using handlebars and understanding its connection to HTML. I wanted to copy a code I saw here and inserted the HTML in a file called index.html. However, I don't know if my syntax is wrong or I'm missing something, but my HTML file doesn't seem to be linking to the javascript file. It should display a button through which to connect to twitter and a pop-up window should appear, followed by a Twitter timeline. However when I click on the button nothing happens.
I realize this must be a really rookie mistake but I have tried everything and can't find the solution. Would someone please help me?
<!DOCTYPE html>
<html>
<head>
<title>Será que sim?</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="handlebars-v1.1.2.js"></script>
<script src="main.js"></script>
<script src="oauth.js"></script>
</head>
<body>
<div id="connect">
<button class="btn btn-primary" id="btn-connect">Connect with twitter</button>
<p>If nothing happen after the connexion, it's maybe because the twitter rate limit exceeded</p>
</div>
<div id="res">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for a term or hashtag" id="search" />
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="btn-search">Search</button>
</span>
</div>
<div id="search-res"></div>
</div>
<script id="entry-template" type="text/x-handlebars-template">
<ul id="timeline">
{{#each statuses}}
<li>
<img class="thumbnail" src="{{user.profile_image_url}}" />
<span class="content">
<span class="author">{{user.name}}</span>
<span class="text">{{link text}}</span>
</span>
</li>
{{/each}}
</ul>
</script>
</body>
</html>

Semantic-UI based page not work correctly in Tide SDK

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 :)