I am unable to get my code working. I am a newbiew on JS and trying to implement some example I found online on routing on angularJs. I have spent many hours trying to fix it, but could not.
Issue : Default View(View2) is opened by $routeProvider configuration. However, when I redirect this to view2.htm to view1.htm but blank page opens up.
Please help !
HTML CODE
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="JS/bootstrap/css/bootstrap-theme.css" rel="Stylesheet" />
<link href="/JS/bootstrap/css/bootstrap-theme.min.css" rel="Stylesheet" />
<link href="JS/bootstrap/css/bootstrap-theme.css.map" rel="Stylesheet" />
<link href="JS/bootstrap/css/bootstrap.css" />
<link href="JS/bootstrap/css/bootstrap.css.map" />
<link href="JS/bootstrap/css/bootstrap.min.css" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.eot" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.svg" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.ttf" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.woff" />
</head>
<script src="JS/jquery-2.1.1.js" language="javascript" type="text/javascript"></script>
<script src="JS/angular.js" language="javascript" type="text/javascript"></script>
<script src="/JS/angular-route.js" language="javascript" type="text/javascript"></script>
<script src="/JS/bootstrap/js/bootstrap.js" language="javascript" type="text/javascript">
</script>
<script src="/JS/bootstrap/js/bootstrap.min.js" language="javascript" type="text/javascript">
</script>
<body>
<title>::DEMO APP:: </title>
<div data-ng-app="demoApp1">
<script src="DemoJS.js" language="text/javascript" type="text/javascript"></script>
<div class="container">
<h3>
All the examples AngularJS Here:</h3>
</div>
<div class="container-fluid" data-ng-view="">
</div>
</div>
</body>
</html>
View1.htm Markup
<div id="View1" >
<h2>
Example 4 & 5
</h2>
<div class="container">
Name <input type="text" data-ng-model="inputData.name" placeholder="Name" />
<br />
City <input type="text" data-ng-model="inputData.city" placeholder="City" />
<br />
<button class="btn btn-primary" data-ng-click="addCustomer()">
Add Customer</button>
<br />
Filter <input type="text" data-ng-model="nameText" placeholder="Filters" />
<br />
<ul>
<li data-ng-repeat="customer in customers |filter:nameText">{{customer.name|uppercase}}
- {{customer.city}} </li>
</ul>
<a ng-href="#/View2.htm">View2</a>
</div>
</div>
View2.htm Markup
<div id="View2">
<h2>
Example 1,2 and 3</h2>
<div class="container">
<h3>
Data Binding Fundamentals</h3>
<h4>
Using a Data Binding Template</h4>
Name:
<input type="text" data-ng-model="name" placeholder="Type something" />
{{ name }}
</div>
<h1>
Example 2</h1>
<div data-ng-init="names=['Sunil','Deepak','Rajat','Somu']">
<ul>
<li data-ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<h1>
Example 3</h1>
<div>
<h3>
Adding a Simple Controller</h3>
<ul>
<li data-ng-repeat="name in names">{{name}} </li>
</ul>
</div>
<a ng-href="#/View1.htm">View1</a>
</div>
DemoJS.js file code
var demoApp1 = angular.module('demoApp1', ['ngRoute'])
demoApp1.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController1',
templateUrl: '/View2.htm'
})
.when('View1',
{
controller: 'SimpleController',
templateUrl: '/View1.htm'
});
});
demoApp1.controller('SimpleController1', function ($scope) {
$scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva'];
});
demoApp1.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Sunil', city: 'Delhi' },
{ name: 'Ritu', city: 'Shbad' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.inputData.name, city: $scope.inputData.city });
}
});
I have found my mistake. The href link I used was not correct. As href is managed by angular itself, we should not add ".html" and the string we mention here should match to $routeProvide config string.. Below is the Modification I Made:
Incorrect on View1.html
<a ng-href="#/View2.htm">View2</a>
Corrected on View1.html:
View2
Samething I did on View2.html.
Related
I am using bootstrap to make my form. I am unable to use bootstrap datetimepicker in my project. Can master page be a problem?
Please help me out here.
Jquery and Sheets:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script type="text/javascript">
$(document).ready(function() {
$(function () {
$("#dp").click(function () {
$('#datetimepicker1').datetimepicker();
})
})
});
</script>
ASPX Code:
<div class="col-md-3">
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span id="dp" class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
use var date_input = $('#<%=date.ClientID%>'); and set clientmodeid to static.
I'm looking for an easy to use date time picker. I tried to use bootstrap date time picker and I'm using bootstrap 4 alpha. It does not work for me.
Here is my code:
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Moment JS -->
<script type="text/javascript" src="<?php echo $ROOT; ?>js/moment.min.js"></script>
<!--Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" ></script>
<!-- dateTimePicker JS -->
<script type="text/javascript" src="<?php echo $ROOT; ?>js/bootstrap-datetimepicker.min.js"></script>
<!--bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<!-- dateTimePicker CSS -->
<link rel="stylesheet" type="text/css" href="<?php echo $ROOT; ?>css/bootstrap-datetimepicker.min.css">
<div class = "form-group col col-md-4 col-sm-4 col-12">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" id="servDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
I suggest to use: https://tempusdominus.github.io/bootstrap-4/ which is the Bootstrap 4 version of DateTimePicker (successor of Eonasdan/bootstrap-datetimepicker).
You can find examples in the documentation: https://tempusdominus.github.io/bootstrap-4/Usage/
Github repo: https://github.com/tempusdominus/bootstrap-4
However here is a working snippet from tempusdominus docs (best view expanding snippet):
$(function () {
$('#datetimepicker1').datetimepicker();
});
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Use stable library, may be you doesn't know where is bug in beta version ;)
Try this
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Moment JS -->
<script type="text/javascript" src="//momentjs.com/downloads/moment.js"></script>
<!--Bootstrap JS -->
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- dateTimePicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- dateTimePicker CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
<div class = "form-group col col-md-4 col-sm-4 col-12">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" id="servDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Might be a little help ^_^
Try to use Bootstrap 3.
Found some helpful link: https://eonasdan.github.io/bootstrap-datetimepicker/
Hope this helps.
I have a page which contains FAQ.
The idea is to implement a search box which has the look & feel of the one shown on Font awesome Icons
With a bit of online help I've been able to produce the following code:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing a search bar</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://use.fontawesome.com/e34d8d1dc9.js"></script>
<script src="/Scripts/Searchbar.js"></script>
<link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
<link href="/CSS/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container" data-view="search">
<div class="row">
<div class="col-md-10 col-sm-9">
<section id="search">
<label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search FAQ</span></label>
<input id="searchinput" class="form-control input-lg" placeholder="Search FAQ" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
</section>
</div>
</div>
<div id="faqs">
<h3>Question 1</h3>
<section>
Answer 1<br> abc
</section>
<h3>Question 2</h3>
<section>
Answer 2<br>xyz
</section>
<h3>Question 3</h3>
<section>
Answer 3<br>def
</section>
</div>
</div>
</body>
</html>
The code uses 2 css - files:
site.css
enter link description here
and 1 java script file.
Though the page (this is just a test of course) has the look & feel I'm looking for, the search functionality doesn't work yet.
I based it on on a working example
Can anyone here tell me what I have to do to make it work just like the example?
I managed to get it working with a bit of tinkering. :-)
Testing a search bar
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://use.fontawesome.com/e34d8d1dc9.js"></script>
<script src="/Scripts/FontAwesome.js"></script>
<%-- <link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
<link href="/CSS/site.css" rel="stylesheet" type="text/css" />
--%>
<link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
<link href="/CSS/searchbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container" data-view="search">
<div class="row">
<div class="col-md-10 col-sm-9">
<section id="search">
<label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search
FAQ
<div id="faqs">
<h3>Question 1</h3>
<section>
Answer 1<br> abc
</section>
<h3>Question 2</h3>
<section>
Answer 2<br>xyz
</section>
<h3>Question 3</h3>
<section>
Answer 3<br>def
</section>
</div>
</div>
<script src="/Scripts/Searchbar.js"></script>
</body> </html>
As you can see I put searchbar.js at the lowest level possible, and I replace site.css with searchbar.css
I think an even better solution for this would be to introduce a lightweight MVVM framework like knockout.js. With this you could put all of your FAQ's into a view model and easily add a search functionality that way. This will clean up your HTML significantly, especially if you get more and more FAQ's added to your site.
Try putting question objects inside an array, then filter them on search:
Demo: https://jsfiddle.net/sjx5uorg/2/
var searchBox = $('#searchinput');
var faqs = [
{
question: "This is first question",
answer: "Answer 1"
},
{
question: "Another question. Second?",
answer: "Answer 2"
},
{
question: "Question 3",
answer: "Answer 3"
},
{
question: "Question 4",
answer: "Answer 4"
}
]
function updateList(faqArray) {
var faqList = $('#faq-list');
faqList.html('');
$.each(faqArray, function(faq) {
faq = faqArray[faq];
faqList.append('<li><h3>'+ faq.question +'</h3><p>'+ faq.answer +'</p></li>');
});
}
updateList(faqs);
searchBox.keyup(function(event) {
var searchList = faqs.filter(function(faq){
var question = faq.question.toLowerCase();
return question.indexOf(searchBox.val().toLowerCase()) >= 0
});
updateList(searchList);
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<label>
Search: <input id="searchinput" />
</label>
<ul id="faq-list"></ul>
I want date picker. I don't want time. I am getting an error message like
my html coding is;
<div class="col-md-2 padding-size">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type='text' class="form-control" placeholder="Issue Date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
script code
<link rel="stylesheet" href="css\bootstrap.css">
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\style.css">
<link rel="stylesheet" href="css\font-awesome.min.css">
<link rel="stylesheet" href="css\bootstrap-social.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="js\jquery.min.js"></script>
<script src="js\bootstrap.min.js"></script>
<script src="js\jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
<script type="text/javascript">
$(function ()
{
$('#datetimepicker1').datepicker(
{
});
});
</script>
I cannot get that calandar when i click that textbox or calander addon.
thanks
You can't use .datepicker() it must be .datetimepicker().If you don't want the time just set the format parameter:
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' });
});
</script>
Article for reference - Bootstrap datetimepicker options
You need to do small change. Remove div's id and place that id in input tag with type="text" as shown below
<div class="col-md-2 padding-size">
<div class="form-group">
<div class="input-group date" >
<input type='text' class="form-control" placeholder="Issue Date" id="datetimepicker1"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Then add below script using same id
<script type="text/javascript">
$(function ()
{
$('#datetimepicker1').datepicker(
{
});
});
</script>
Use the below code:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link href="http://cdn.jsdelivr.net/bootstrap.datepicker/0.1/css/datepicker.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/bootstrap.datepicker/0.1/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker(
{viewMode: 'month',
format: 'dd-mm-yyyy'
});
});
</script>
</head>
<body>
<div class="input-append date" id="datepicker" data-date="02-2012">
<input type="text" readonly="readonly" name="date" >
<span class="add-on"><i class="icon-th"></i></span>
</div>
</body>
</html>
Change the date format as you wish by changing the format parameter.
Check out this http://jsfiddle.net/Kz2sW/
I am using kendo ui Mobile ModalView in my aspx page but i am unable to get the required output.On click of button it is showing the same page. I am new to Kendo ui. Please anyone help me.please refer kendo ui mobile modal view and suggest me how to use it in my project.
My code is
<head runat="server">
<title>Untitled Page</title>
<link href="CSS/kendo.common.css" rel="stylesheet" type="text/css" />
<%--<link href="CSS/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />--%>
<link href="CSS/kendo.default.css" rel="stylesheet" type="text/css" />
<link href="CSS/kendo.mobile.all.css" rel="stylesheet" type="text/css" />
<link href="CSS/Example.css" rel="stylesheet" type="text/css" />
<script src="Js/jquery1.7.1.min.js" type="text/javascript"></script>
<script src="CSS/kendo.min.js" type="text/javascript"></script>
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</head>
<body>
<form id="form1" runat="server">
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<img src="../../content/mobile/modalview/lens.png" class="camera-image" /><br />
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-
button">Login</a>
</div>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-
align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li><label for="username">Username:</label> <input type="text" id="username" />
</li>
<li><label for="password">Password:</label> <input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" type="button" data-
role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" type="button" data-
role="button">Register</a>
</div>
</form>
</body>
If you look at the example of the code you have used as starting point # http://demos.kendoui.com/mobile/modalview/index.html - you will find out that position of script tags with calls to Kendo framework are located at the bottom of the body tag, if you place them above the body as is shown in your example code, at that stage there is nothing to execute the script on. You need to move them at the correct place. Alternatively use jQuery ready command and call Kendo scripts from there.
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
Additionally, you can initialize the mobile application on the form, instead of the body, since the Views should be direct descendants of the application element.
Change code as per requirements
<html>
<head runat="server">
<title>Model view sample</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.mobile.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
</head>
<body>
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li>
<label for="username">Username:</label>
<input type="text" id="username" />
</li>
<li>
<label for="password">Password:</label>
<input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" data-role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" data-role="button">Register</a>
</div>
</div>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
This works fine.
Note
1: Model view should always use within <div data-role="view" ...>...</div>
2: Intialize kendo mobile application after document to be ready
(i.e var app = new kendo.mobile.Application(document.body))