I have been tryng to use this datetimepicker for the last few days and no matter what i try the best i can get is the calendar appearing in the top left hand corner. I cannot find any real tutorials on how to implement the control and past answers on this site havent helped either.
Here is what i have now:
View
#Scripts.Render("~/Scripts/knockout-3.4.0.js")
#Scripts.Render("~/Scripts/jquery-1.10.2.js")
#Scripts.Render("~/bundles/bootstrap")
#Styles.Render("~/Content/css")
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/moment.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
<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>
</div>
</div>
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
In reference to addressing your second issue with the calendar glyphicon being spaced apart from the input you need to do either of these (your preference):
<div class="row">
<div class='col-sm-6' /*change this to col-sm-3 or any that is below 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>
OR:
<div class="row">
<div style="width: 25%;/*or something close to that*/" 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>
</div>
Also just a nit picky thing.. try to keep your Scripts and Styles together and not mixed between each other.. makes for easier reading.
The js script "bootstrap-datetimepicker"
requires Moment.js and Jquery.js to be loaded first.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap.min.js",
"~/Scripts/moment.js",
"~/Scripts/moment.min.js",
"~/Scripts/modernizr-2.6.2.js",
"~/Scripts/bootstrap-datetimepicker.js"));
Related
For some reason my HTML keeps throwing parsing errors, more specifically "Exception parsing document: template="find", line 69 - column 17" and I can't figure out why, at first closing the input tags helped but the rest of the tags are properly closed. Here's the HTML code:
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layouts/layout"
xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
</head>
<body>
<div layout:fragment="content">
<h1 data-th-text="#{application.title.h1}"></h1>
<div th:replace="fragments/profile :: profile"></div>
<div class="row">
<div>
<div>
<ul>
<li><a th:href="#{|/home-accueil|}" data-th-text="#{tab.pending}">Home</a></li>
<li class="active" role="presentation"><span th:text="#{tab.find}">Quick find</span></li>
<li role="presentation"><a th:href="#{|/updated|}" href="#" role="tab" aria-selected="true">Updated
records</a></li>
</ul>
<div>
<p th:text="#{item.agentName}">Text.</p>
<div>
<div>
<label for="patent"></label>
<div>
<label>Search</label> <input id="patent" type="text" value="" name="searchText" /> <span>View </span>
</div>
</div>
</div>
<div>
<div>
<label><span>test2</span></label>
<div>
<label>Search</label> <input id="trademark" type="text" value="" name="searchText" /> <span> View
</span>
</div>
</div>
</div>
<hr>
<div>
<div>
<div>
<label for="last">Last name</label> <input name="last" id="last" type="text" />
</div>
<div>
<label for="first">First name</label> <input name="j_password" id="first" type="password" />
</div>
<div>
<label for="firm">Firm name</label> <input name="firm" id="firm" type="password" />
</div>
Search
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The <hr> was the problem, it should be <hr /> instead, d-oh!
I want to add "back button" panel for my app but only for iphones.
I am using vs2013 Multi Device Hybrid Apps plugin to develope mobile app. After a lot errors and problems I managed to start coding phase, the thing is android devices have panel to "back" or other stuff. But I need to set it also for iphones. Project has "merges" folder, I believe that part using for it. (I dont want to add that extra button for whole project, only iphone is enough for me as you know android devices have panel to "back" or other stuff.)
If its possible; how can I do that? Here is one of my page example ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Föy</title>
<link href="css/index.css" rel="stylesheet" />
<script src="scripts/jquery-1.8.3.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/login.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
window.location = "main.html";
})
});
</script>
</head>
<body>
<div class="container" id="login-block">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<h3 class="animated bounceInDown">FÖY Fatura Ödeme Sistemleri</h3>
<div class="login-box clearfix animated flipInY">
<div class="login-logo">
<img src="images/logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form">
<div class="alert alert-error hide">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Hata!</h4>
İşlem Sırasında Hata Oluştu
</div>
<div>
<input type="text" class="form-control" id="txtUser" placeholder="Bayi Kodu" required />
<input type="password" class="form-control" id="txtPassword" placeholder="Şifre" required />
<button type="button" id="btnLogin" class="btn btn-red">GİRİŞ</button>
</div>
<div class="login-links">
<a href="forgot-password.html">
Şifremi Unuttum?
</a>
<br />
<a href="sign-up.html">
Bayi Değilim? <strong>Bayi Ol!</strong>
</a>
</div>
</div>
</div>
<div class="social-login row">
<div class="fb-login col-lg-6 col-md-12 animated flipInX">
<strong>Facebook</strong> ile bağlan
</div>
<div class="twit-login col-lg-6 col-md-12 animated flipInX">
<strong>Twitter</strong> ile bağlan
</div>
</div>
</div>
</div>
</div>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Thank You , Best Regards
Put your platform specific file within the merges\ios\ folder and it should get picked up during build. More information and guidance can be found here
I am currently working on a project requiring jQuery mobile for a Blackberry Smartphone webworks app. I discovered that I cannot access any content below screen height on my page.
I have tried iscrollview, but it doesn't work well after compiling it into .COD file. Any suggestions will be appreciated.
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.iscrollview-pull.css" />
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js"></script>
<div data-role="content" class="content_div">
<div class="content-secondary">
<div class="Main-holder" id="Main-holder" style="background-color:#fff; overflow-y:scroll; height:500px;">
<form id="mylogin" data-iscroll>
<div class="form-row">
<div class="reg-label">Username:</div>
<input name="username" id="username" type="text" />
<div style="clear:both"> </div>
</div>
<div class="form-row">
<div class="reg-label">Password:</div>
<input id="password" name="password" type="password" />
<div style="clear:both"> </div>
</div>
<div class="form-row">
<div align="right" class="sub-but-wrapper">
<a data-role="button" id="loginSubmit"style="width:90px;" data-theme="b">Login</a>New User?<span id="loader" style="display:none"></span>
<!--
<input data-role="button" type="button" name="loginSubmit" id="loginSubmit"style="width:90px;" data-theme="b" value="Login" /> New User?<img src="images/ajax-loader.gif" id="loader" style="display:none" />
-->
</div>
<label></label><div style="clear:both"> </div>
</div>
<div class="form-row" style="height:100px">
<div style="clear:both"> </div>
</div>
</form>
</div>
</div>
</div>
I have used the basic angular script which update what ever you type in the input field on any element we specify, real time...
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Im new to Angular. I used this on may rails app. But the problem is, the field I used ng-model will reset its valu after submit. Even setting the 'value' attribute won't work. How can I fix this?
Exact code generated from my rails application :
<form accept-charset="UTF-8" action="/members" class="custom" id="new_member" method="post">
<div class="row collapse text-field">
<div class="small-4 columns">
<h3>Add Member : </h3>
</div>
<div class="small-6 columns left inline">
<h3 class="subheader inline"> {{newEntry.name}}</h3>
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_name">Full Name</label>
</div>
<div class="small-7 columns left">
<input class="input" id="member_name" name="member[name]" ng-model="newEntry.name" type="text" value="gj" />
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_address">Address</label>
</div>
<div class="small-9 columns">
<textarea class="input" height="115" id="member_address" name="member[address]">
</textarea>
</div>
</div>
<div class="row">
<div class="small-9 columns" ><input class="button radius" name="commit" type="submit" value="Add Member" /></div>
</div>
</form>
Note : I haven't used an ng-controller. Im new to Angular. If its required, please tell me how to convert the above to the controller. I can get the value of the field and send it back to the form in rails. Its there in a variable. But Angular keeps wiping it!
Note2 : This problem persist only for the input field I used angular-model.. All the other fields retained the data!
Ok this is not the best solution but you could do this:
<input type="text" ng-init="yourName = 'Your Value Goes Here'" ng-model="yourName" placeholder="Enter a name here">
ng-init directives are run when the app intialises, so your value will be assigned to angular's internal "yourName" model and be updated in the view accordingly.
That would solve your problem but its not the best way. Hopefully that will get you going for now - I'll try and post a more "ideal" solution shortly.
I'm trying to place a Markdown Editor inside jQuery-UI Tabs, but the editor is not being shown.
<% Using Html.BeginForm()%>
<div id="AddEventWizard">
<ul>
<li>Event Title</li>
<li>Event Description</li>
</ul>
<div id="tabs-1">
<%: Html.LabelFor(Function(model) model.Name)%>
<%: Html.TextBoxFor(Function(model) model.Name, New With{.class = "full-width-input"})%>
<%: Html.ValidationMessage("Name", "*")%>
</div>
<div id="tabs-2">
<noscript><h3>Please use
<%: Html.ActionLink("Markdown", "Markdown", "About")%>
to style your input.</h3></noscript>
<div id="wmd-button-bar" class="wmd-panel">
</div>
<%: Html.TextAreaFor(Function(model) model.Description, 5, 10, New With {.id = "wmd-input", .class = "wmd-panel"})%>
<div id="wmd-preview" class="wmd-panel">
</div>
<div class="clear">
</div>
</div>
</div>
<% End Using%>
<script type="text/javascript">
$(document).ready(function () {
$('textarea#wmd-input:not(.processed)').TextAreaResizer();
$("#AddEventWizard").tabs({
});
}); // closes document.ready
</script>
There is space where the editor buttons "should" be, but they're not there. Does anyone know if the jQuery-UI stuff somehow blocks WMD Markdown?
Edit:
I'm using the version from Github
HTML Markup
<form action="/events/addevent" method="post">
<div id="AddEventWizard">
<ul>
<li>Event Title</li>
<li>Event Details</li>
<li>Event Description</li>
</ul>
<div id="tabs-1">
<label for="Name">Name</label>
<input class="full-width-input" id="Name" name="Name" type="text" value="" />
</div>
<div id="tabs-2"></div>
<div id="tabs-3">
<noscript><h3>Please use
Markdown
to style your input.</h3></noscript>
<div id="wmd-button-bar" class="wmd-panel">
</div>
<textarea class="wmd-panel" cols="10" id="wmd-input" name="Description" rows="5">
</textarea>
<div id="wmd-preview" class="wmd-panel">
</div>
<div class="clear">
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('textarea#wmd-input:not(.processed)').TextAreaResizer();
$("#AddEventWizard").tabs({
});
}); // closes document.ready
</script>
<script src="../../Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/jquery.textarearesizer.compressed.js" type="text/javascript"></script>
Maybe you can bind the editor
$('textarea#wmd-input:not(.processed)').TextAreaResizer();
not on $(document).ready but on the click of tab3?
in that way, the editor gets loaded when the textbox is visible.