So for some reason the HTML page i'm trying to load with templateUrl is not showing up. The files are all in the same directory, console shows no error, it just doesn't load the page elements i'm trying to add. My directive is as simple as:
.directive('tagTeste',function(){
return{
templateUrl: 'templateUrl.html'
};
});
My template html i'm trying to load:
<!doctype html>
<html ng-app="teste">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<table border="1" width="500" height="150">
<thead>
<tr>
<td>Nome</td>
<td>Telefone</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="pessoa in pessoas">
<td>{{pessoa.nome}}</td>
<td>{{pessoa.telefone}}</td>
</tr>
</tbody>
</table>
<form>
<p> Nome: <input type="text" ng-model="nomenovo" required> </p>
<p> Telefone: <input type="number" ng-model="numeronovo" required> </p>
<input type="button" ng-click="add()">
</form>
<body>
</html>
My index page:
<!doctype html>
<html ng-app="teste">
<head>
<h1 align="center">Table teste</h1>
<meta charset="utf-8">
<title>Teste</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="repeaterdirective.js"></script>
<script type="text/ng-template" id="templateUrl.html">
</head>
<div ng-controller="index" align="center">
<body>
<div tag-teste></div>
</body>
</div>
</html>
Remove <script type="text/ng-template" id="templateUrl.html"> from index.
And clear a bit templateUrl.html. Tags as <html> and <body> are already contained in index.
Take a look at plunker.
Updated after comment:
Change index as:
<!doctype html>
<html ng-app="teste">
<head>
<meta charset="utf-8">
<title>Teste</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="index" align="center">
<h1 align="center">Table teste</h1>
<div tag-teste></div>
</div>
</body>
</html>
If you use templateUrl while loading your file in Chrome browser with the file:///, protocol you will always get this error.
On the other hand Mozilla Firefox will allow it, so will Microsoft Edge.
The other solution is to serve your pages from an HTTP server.
An easy one to use is http-server.
Related
I using the tableHTMLExport library to convert a html table to pdf.The page is an .ejs page that is being served from a server.The actual contents of the table is fetched from a database and drawn to the page using javascript.it shows the error 'Uncaught TypeError: $(...).tableHTMLExport' when the download pdf button is clicked.I have placed the required script tags as mentioned in https://www.jqueryscript.net/table/export-table-json-csv-txt-pdf.html and every scripts seems to be loaded correctly on the client side when i checked the chrome dev console.
page:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/sketchy/bootstrap.min.css">
<link rel="stylesheet" href="/css/adminstyle.css">
<title>Eventer</title>
</head>
<body>
<div class="h2">
<span class="span">Eventer</span><Span>Logout</Span><Span>Close current event</Span><Span>Set New Eventlist</Span>
</div>
<h2 id="currentevent">Current event:</h2>
<div class="subhead">
<h1>Viewby:House</h1>
<select class="form-control" id='house' name="house">
<option>Orchid</option>
<option selected>Tulips</option>
<option>Lailac</option>
<option>sunflower</option>
</select>
</div>
<li style="margin-left: 10px;font-size: 20px;" id="househead"></li>
<div class="table">
<table id="housetable">
<tr>
<th>Name</th>
<th>Batch</th>
<th>Semester</th>
<th>Events</th>
</tr>
</table>
</div>
<button class="btn btn-secondary" onclick="getdata('byhouse')">Get details </button>
<button class="btn btn-secondary" onclick="downloadpdf()">Download pdf </button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.5/jspdf.plugin.autotable.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script type="text/javascript" src="/scripts/tableHTMLExport.js"></script>
<script type="text/javascript" src="/scripts/admin.js"></script> //admin.js is my script
</body>
</html>
javascript:-
function downloadpdf(){
$("#housetable").tableHTMLExport({
// csv, txt, json, pdf
type:'pdf',
// file name
filename:'sample.pdf',
});
}
So I'm trying to get an alert through jquery code. I have 3 inputs so login.password and button and when writing your login and password you should get an alert (log+pass). The error that i'm getting is:
GET http://localhost/php5/jquery-3.3.1.min.js net::ERR_ABORTED.
Here is my code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> PHP </title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#send").click(function(){
var log=$("#login").val()
var pass=$("#password").val()
alert(log+pass)
})
})
</script>
</head>
<body>
<input id="login" placeholder="Login"><br>
<input type="password" id="password" placeholder="Password"><br>
<input type="button" id="send" value="send">
<div class="status"></div>
</body>
</html>
try to change
<script src="jquery-3.3.1.min.js"></script>
to
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
it works for me
Hello i'm trying to do dynamic $http request to filltext.com server.
code:
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta carset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body >
<div class="container" ng-controller="theController">
<div ng-repeat="person in people">
<input type="text" ng-model="person.fname">
<input type="text" ng-model="person.lname">
</div>
</div>
<script>
var app=angular.module('App', []);
app.controller('theController', ['$scope','$http',function($scope,$http){
$scope.getPeople=function(count){
$http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows="+count+"&fname={firstName}&lname={lastName}").
success(function (data) {
$scope.people = data;
})
};
$scope.countSelection=10;
$scope.getPeople($scope.contSelection);
}]);
</script>
</body>
</html>
Problem is when i'm trying to add +count+ into $http.jsonp string parametr i'm not getting data from filltext.com, but when i write rows=5 statically then it's generating data
Thank you for your help :)
I would like to start saying that I'm not that experienced with the technologies that I'm using, I'm doing this project to practice using them.
I just downloaded JetBrains Webstorm and created a Foundation Project.
I created a <textarea> and I want to bind it to a value I defined in my AngularJS controller. The controller code is very simple (it's in my main.js file):
var readerApp = angular.module("readerApp", []);
function ReaderCtrl = function($scope){
$scope.data = {
text = "Default text"
}
}
So I only have a simple text that I want to bind like this: ng-model="{{data.text}}"
Although when I do that, the <textarea> still doesn't show anything. I'll post the entire HTML page, maybe there's a small detail I'm missing, but it seems right to me
<!doctype html>
<html class="no-js" lang="en" ng-app="readerApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speed Reader | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div>
<div class="row">
<div class="large-12 columns large-text-center">
<h1>Welcome to Speed Reader!</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel" ng-controller="ReaderCtrl">
<h3>Insert your text here! </h3>
<textarea id="textarea" rows="25" ng-model="{{data.text}}"></textarea>
Start reading
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/main.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I have div and hidden span on it. I want to show it by button clicking. My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script type="text/javascript" src="/static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>
And my js file:
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
When i button clicked span does not show. Why? It shows very fast and than hidden again.
Chrome developer tools console doesn't show errors too.
Thank you.
Try adding return false to your button onClick() event.
Like this:
<button id="register-submit" onclick="show_element('register-username-label'); return false;" class="btn">Register</button>
You need to define your function before your first call to the function is being made. Normally it can be achieved by putting the function code inside a script tag nested inside the head of your HTML.
Like this:
<head>
<script type="text/javascript">
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
Sorry but this code works:
<html>
<head>
<script>
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
<body>
<div>
<span id="register-username-label" class="label label-important" style="visibility: hidden">Username can't be empty</span>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</div>
</body>
</html>
EDIT
I just read your edit. Btw i think your absolute path may causes problem.
Try this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<script type="text/javascript" src="./static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>