I am trying to display a simple modal on click of a button. The modal does not pop up. It displays the contents on the same existing window.(snapshot attached)
My Code is below:
index.html
<!DOCTYPE html>
<html ng-app="Pcp">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="ng-dialog/js/ngDialog.min.js"></script>
<script src="ng-dialog/js/ngDialog.js"></script>
</head>
<body>
<div ng-controller="MainController">
<button ng-click="openTaskForm()">Open</button>
</div>
</body>
</html>
app.js
(function(){
var app = angular.module('Pcp',['ngDialog']);
app.controller('MainController', function($scope, ngDialog)
{
$scope.openTaskForm = function(){
ngDialog.open({template: 'addTaskForm.html'
});
};
}
);
})();
addTaskForm.html
<div>
<h2>Contact us<h2>
<input type="text" placeholder="Name" ng-model="name" />
<input type="text" placeholder="Email" ng-model="email" />
<input type="text" placeholder="Mobile" ng-model="mobile" />
<textarea placeholder="Enter your message or query..." ng-model="message"></textarea>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click=closeThisDialog("Cancel")>Cancel</button>
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click=confirm("OK")>OK</button>
</div>
</div>
Please let me know why modal is not working.
Screenshot
You should include css files of ngDialog in header:
<head>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="ng-dialog/js/ngDialog.min.js"></script>
<script src="ng-dialog/js/ngDialog.js"></script>
<link rel="stylesheet" th:href="#{/css/ngDialog.css}" href="../../css/ngDialog.css" > </link>
<link rel="stylesheet" th:href="#{/css/ngDialog-theme-default.css}" href="../../css/ngDialog-theme-default.css" > </link>
</head>
ngDialog.open({
template: 'addTaskForm.html',
scope : $scope,
resolve: {
data: function sendData() {
return data; // if you need to pass any data
}
}
});
I was facing same problem and implemented above suggestions by #Enigo and #Sujata but didn't help. Upon analysing further I noticed my mistake of rendering CSS files as media="print" so corrected them to media="screen" See below:
<link href='#Styles.Url("~/lib/Dialog/ngDialog-theme-default.css")' rel="stylesheet" type="text/css" media="screen" />
<link href='#Styles.Url("~/lib/Dialog/ngDialog-theme-plain.css")' rel="stylesheet" type="text/css" media="screen" />
Hope this helps. Please note #Styles.Url() is ASP.NET MVC Razor syntax.
Related
I have a code to generate a normal date time picker, but it is throwing me this error Uncaught TypeError: jQuery(...).datetimepicker is not a function
Can anyone help me, i guess it is because of arrangment of links and bootstrap , but i don't have a clear picture of it.
below is my code
<html>
<head>
<link rel="stylesheet" href="jquery.datetimepicker.css">
<script src="jquery-1.8.2.min.js"></script>
<!-- <script src="jquery-ui.js"></script> -->
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="jquery.validate.min.js"></script>
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script>
$(document).ready(function() {
jQuery('#datevalue').datetimepicker();
jQuery('#completed').datetimepicker();
});
</script>
</head>
<body>
<form action="#" method="post">
<div id="AlignMainDiv">
<div class="form-group last mb-4">
<label for="date">Date</label>
<input type="text" class="form-control" id="datevalue">
</div>
<div class="form-group last mb-4">
<label for="username">Completed Date and Time</label>
<input type="text" class="form-control" id="completed">
</div>
</div>
</form>
</body>
</html>
Press F11, open the Chrome debug, go to Network > JS tab and check if any of the included js libraries return a 404 status. Maybe you misspelled a script name or URL path.
You can also try to include the libraries directly from CDNs:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$('#datevalue').datetimepicker();
$('#completed').datetimepicker();
} );
</script>
</head>
I dont know whether your datetimepicker library is loading or not.
You can use following CDN.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
Following code will load todays date and will show datepicker on input click
<script>
$(document).on("click", "#datevalue" , function() {
$(this).datetimepicker({
timepicker:false, format:"d-m-Y","setDate": new Date(),
}).focus();
});
</script>
I need your help with AngularStrap tabs and displaying calculated data. So, let's say I have a few inputs with ng-model. I calculate them and display in ng-bind. Everything works fine until I use tabs from AngularStrap. Then my output goes NaN - it looks like ng-model doesn't update, when I'm changing it's content.
You can take a look at what I mean here:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<div bs-active-pane="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-include="tab.templateUrl" bs-pane>
</div>
</div>
</div>
</body>
</html>
main.js
angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap'])
.controller('myCtrl', ['$scope', function($scope){
$scope.multiply = function(){
return $scope.first * $scope.second;
};
$scope.add = function(){
return $scope.first + $scope.second;
};
$scope.tabs = [
{
"title": "First",
"templateUrl": "first.html"
},
{
"title": "Second",
"templateUrl": "second.html"
}];
$scope.tabs.activeTab = "First";
}]);
first.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
second.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{add()}}
What is really weird, is that when I use it without the tabs, it's working perfectly. Where is the mistake? How can I make it work with tabs?
This example is working like a charm:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
</div>
</body>
</html>
I am using angualr bootstrap tab , I know ng-click event on tab fires any function on click of tab.
I want some dynamic content to be loaded on the first tab when form loads . The HTML is:
<html ng-app="ui.bootstrap.testData">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> Tabs</title>
<link href="css/en/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/en/style.css" rel="stylesheet" type="text/css" />
<link href="css/en/ng-grid.css" rel="stylesheet" type="text/css" />
<link href="css/en/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="css/en/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/en/icon.css" rel="stylesheet" type="text/css" />
<link href="css/en/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="formTabs" runat="server">
<div>
<div ng-controller="TabsDataCtrl">
<hr />
<tabset align="left">
<tab heading="Account" ng-click ="ShowAccount()">
<div id ="divAccount">
<div id ="TestAcccount" style="padding-top:30px;" align ="center">
<table id="PNRDataGrid" width="100%"></table>
</div>
</div>
</tab>
<tab heading="Policy">Policy content
<div>
<table border ="1" style ="background-color :blue"><tr><td> Test</td></tr>
</table>
</div>
</tab>
<tab heading="LoB" ng-click ="ShowLob()">LOB content
</div>
</tab>
<tab heading="Coverage">Coverage content</tab>
<tab heading="Detailed Loss">Detailed Loss</tab>
</tabset>
</div>
</div>
</form>
</body>
</html>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/ui-bootstrap-tpls-0.11.2.js" type ="text/javascript"></script>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/LossHistory.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="js/DataScrolling.js" type="text/javascript"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="js/ng-grid.js" type="text/javascript"></script>
The js file is:
angular.module('ui.bootstrap.testData', ['ui.bootstrap']);
angular.module('ui.bootstrap.testData').controller('TabsDataCtrl', function($scope, $http) {
$scope.businessUnits = [];
$scope.lossHistory = [];
$scope.ShowAccount = function() {
$scope.loading = true;
var svcAccountURL = LHServiceDir +
'/Portal/WebServices/LossHistoryServices/LossHistoryServices.asmx/GetDetails';
....
....
}
Is there any tab event which would fire on load of form or any other way which could fire the ShowAccount function. Thanks.
You can use something like ng-init
<div ng-init="ShowAccount()">
// all your tabs here
</div>
Assuming that ShowAccount() just goes off and then fills in some data, that data will then be ready for display as soon as the page comes up.
You can also just call "ShowAccount()" at the end of your controller and it will be called when your controller loads.
You could call angular.element(document).ready(function(){ ... }) in one of the controllers:
Code Snippet:
angular.element(document).ready(function () {
console.log('In Angular Element Ready');
myInitFunction();
});
This works for me in Chrome, although I have seen issues in Firefox.
Okay, So I'm new to using frameworks and js libraries and I'm wanting to us bootstrap and bootstrap datepicker for a form and I have no clue if I have the file order correct but the links is how the files are setup, and I know very little about javascript, pretty much all I code in is php but I need this for a form.
Here's my testing form for the bootstrap datepicker:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="_css/datepicker.css">
<link rel="stylesheet" href="_css/bootstrap.css">
<link rel="stylesheet" href="_css/bootstrap-responsive.css">
<script type="text/javascript" src="datepicker/bootstrap-datepicker.js"></script>
</head>
<body>
<center>
<h1>BootStrap Datepicker</h1>
<form>
<div class="well span12 main">
<input type="text" id="dp1" class="span2 datepicker" placeholder="Date..."
name="date"> <br>
</div>
<input type="submit" value="Search" class="btn">
</form>
</center>
<!-- JAVAscript ----------------------------------------------------------------->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="_js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="_js/bootstrap.js"></script>
</body>
</html>
What exactly am I doing wrong?
You should include bootstrap-datepicker.js after bootstrap.js and you should bind the datepicker to your control.
$(function(){
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
man you can use the basic Bootstrap Datepicker this way:
<!DOCTYPE html>
<head runat="server">
<title>Test Zone</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Css/datepicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#pickyDate').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
and inside body:
<body>
<div id="testDIV">
<div class="container">
<div class="hero-unit">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</div>
</div>
</div>
datepicker.css and bootstrap-datepicker.js you can download from here on the Download button below "About" on the left side.
Hope this help someone, greetings.
I believe you have to reference bootstrap.js before bootstrap-datepicker.js
Just add this below JS file
<script type="text/javascript">
$(document).ready(function () {
$('your input's id or class with # or .').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
Couldn't get bootstrap datepicker to work until I wrap the textbox with position relative element as shown here:
<span style="position: relative">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</span>
How can I use dropzone without using the class in the form.
I basically want to have a div inside a form and call class="dropzone" in that div. But it doesn't seems to work.
Here is my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
var myDropzone = new Dropzone("div#myId", { url: "file-upload"})
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
</html>
Initiate .ready event when DOM ready and use like this.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var myDropzone = new Dropzone("div#myId", { url: "file-upload"});
});
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
</html>
your url parameter is not pointing to any valid php file. I believe your code should be thus
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
var myDropzone = new Dropzone("div#myId", { url: "upload.php"}) //according to your forms action
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>