I have the following code in which I want to display an alert when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app>
<button ng-click="alert('test')">Display Text</button>
<script src="angular.min.js"></script>
<script type="text/javascript">document.write("<base href=\"" + document.location + "\" />");</script>
<script type="text/javascript">
$scope.alert = function(variable) {
alert(variable);
};
</script>
</body>
</html>
The console is displaying this as an error: Uncaught ReferenceError: $scope is not defined
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<title></title>
</head>
<body ng-controller="ModelCtrl">
<button ng-click="alert('test')">Display Text</button>
<script src="angular.min.js"></script>
<script type="text/javascript">document.write("<base href=\"" + document.location + "\" />");</script>
<script type="text/javascript">
var app = angular.module('App', []);
app.controller('ModelCtrl', function ($scope, $http) {
$scope.alert = function(variable) {
alert(variable);
};
});
</script>
</body>
</html>
Related
So here I have CDN of both JQuery & jsbarcode -> jsbarcode info https://lindell.me/JsBarcode/
The output should show a barcode the the const "number" var.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
</head>
<body >
</div>
<script>
const number = '12345678';
$(document).ready(function(){
JsBarcode("#barcode", number, {
text: number.match(/.{1,4}/g).join(" "),
width: 2,
height: 50,
fontSize: 15,
});
});
</script>
<svg id="barcode"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
</body>
</html>
You need to add the script tags for your libraries before the code that uses them. They can go within the <head> tag. Your code snippet becomes the following:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
</head>
<body>
<script>
const number = '12345678';
$(document).ready(function(){
JsBarcode("#barcode", number, {
text: number.match(/.{1,4}/g).join(" "),
width: 2,
height: 50,
fontSize: 15,
});
});
</script>
<svg id="barcode"></svg>
</body>
</html>
(In the code snippet I provided I also cleaned up some errors in the HTML, like the </div> for a nonexistent div tag.)
Am binding islamic date as date picker to text box , but when writing that inside of ng repeat its not working
my code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="Scripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<table>
<tr ng-repeat="r in rvm">
<td>
<input type="text" id="txtHijriDate" ng-model="r.Date" />
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', function ($scope) {
$scope.rvm = [];
$('#txtHijriDate').calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
});
</script>
if i remove `ng-repeat="r in rvm" it is working but i want that date picker in ng repeat
Your code puts 1 (and only 1) calendar on the element with ID txtHijriDate
When you use ng-repeat, you create multiple elements with the same ID
You need to add
$('#txtHijriDate').calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
Code in your JavaScript at every creation of element. And I’ll suggest to map “id” also to have ID dependent on your elements.
Error: Calendar binding code is executing before controls(input box) load inside ng-repeat.
Solution: Use ng-bind directive to bind calendar on controls.
See the working demo below:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<table>
<tr ng-repeat="i in [1, 2,3,4,5] track by $index">
<td>
<input type="text" ng-
ng-bind="bindDate('calendar-control'+$index)" id="calendar-control{{$index}}"
model="rvm[1].Date" />
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', function ($scope) {
$scope.rvm = [];
$scope.bindDate=function(id){
$('#'+id).calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
}
});
</script>
I want to have a google map on my website, but the map does not show up if I first open index.html and navigate to map.html.
But if I directly open map.html or refresh the browser window while being on map.html the map shows up.
How can the map show up when navigating from index.html to map.html?
I'm using the standalone Pjax JavaScript module v0.1.4 stable (no jquery).
I added document.write("rendered at: "+ Date.now()) In my example code for better understanding.
index.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is site 1</h4>
</div>
</body>
</html>
map.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is the map site</h4>
<!-- map is not displayed currently -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(50.0, 10.0)
var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
style.css
#map-canvas {
width: 90%;
height: 500px;
}
example.js
document.addEventListener("DOMContentLoaded", function() {
var pjax = new Pjax({
selectors: [".dynamic"]
})
console.log("Pjax initialized.", pjax)
})
Assign the style explicitly to the map div the map work .. could be you have an error in the path for style.css
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is the map site</h4>
<div id="map-canvas" style="width:90%; height:500px;"></div>
</div>
</div>
<!-- map is not displayed currently -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(50.0, 10.0)
var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript" src='example.js'></script>
</body>
</html>
Can anybody tell me what am I missing? It's showing "Uncaught ReferenceError: func is not defined" when I am clicking the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Admin</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="main">
<button onclick="func()">Click Me</button>
</div>
<script type="text/javascipt">
function func(){
alert("called func");
}
</script>
</body>
You mistyped javascript... see the type of the script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Admin</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="main">
<button onclick="func()">Click Me</button>
</div>
<script type="text/javascript">
function func() {
alert("called func");
}
</script>
</body>
Typing Mistake . Replace "text/javascipt" to "text/javascript".
I am using Colorbox in my project. I have integrated CKEditor in colorbox. Its working fine in all browsers, but a small issue in Google Chrome - Editor will open properly on first click, After closing the pop up and try the editor on second time without loading the page , I can't type text in the editor, Editor will enable on clicking on the source. I am not using the source toolbar in basic editor.
I spent more than 5 days for for finding a solution for this issue and try help from others - No result yet. Expecting better feedback...
Thanks for help in advance.
I have set up a test code for this...
index1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<script src="../ckeditor/_samples/sample.js" type="text/javascript"></script>
<link rel="stylesheet" href="colorbox.css" />
<link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a>
</body>
</html>
index2.html
<textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea>
<script type="text/javascript">
$(document).ready( function() { // I use jquery
var instance = CKEDITOR.instances['ckeditor_replace'];
if(instance)
{
CKEDITOR.remove(instance);
}
//CKEDITOR.config.startupFocus = true;
//CKEDITOR.config.startupShowBorders = false;
//CKEDITOR.config.startupOutlineBlocks = true;
//CKEDITOR.config.startupMode = 'source';
$( '.ckeditor_replace' ).val('12345');
$( '.ckeditor_replace' ).ckeditor(function() { } );
});
</script>
Regards
Nishad Aliyar
I got the solution for the same , just include the jquery and jquery adapter in index2.html. Please see below for example...
index1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<script src="../ckeditor/_samples/sample.js" type="text/javascript"></script>
<link rel="stylesheet" href="colorbox.css" />
<link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a>
</body>
</html>
index2.html
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea>
<script type="text/javascript">
$(document).ready( function() { // I use jquery
var instance = CKEDITOR.instances['ckeditor_replace'];
if(instance)
{
CKEDITOR.remove(instance);
}
//CKEDITOR.config.startupFocus = true;
//CKEDITOR.config.startupShowBorders = false;
//CKEDITOR.config.startupOutlineBlocks = true;
//CKEDITOR.config.startupMode = 'source';
$( '.ckeditor_replace' ).val('12345');
$( '.ckeditor_replace' ).ckeditor(function() { } );
});
</script>
Regards
Nishad Aliyar