I am using xcode and phonegap for mobile development.When i run the application with simulator,it does not apply any stylesheet. Please let me know how to get rid of this issue.
Here is the index.html Page code:
<!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>
<title></title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1 user-scalable=no,width = 320" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link rel="stylesheet" type="text/css" href="jqtouch.css" />
<link href="theme.css" rel="stylesheet" type="text/css" />
<script src="Jquery.1.6.1.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jqtouch.js"></script>
<script type="text/javascript">
var jQT = new $.jQTouch({});
</script>
</head>
<body >
<div id="jqt">
<div id="home">
<div class="toolbar">
<h1>
NIAID</h1>
</div>
<ul class="edgetoedge">
<li class="arrow">Search Users</li>
</ul>
</div>
<div id="get">
<div class="toolbar">
<h1>
NED - Search Users</h1>
</div>
<div class="info">
<center>
<table>
<tr>
<td>
First Name :
<input type="text" id="txtFirstName" />
</td>
</tr>
<tr>
<td>
Last Name :
<input type="text" id="txtLastName" />
</td>
</tr>
<tr>
<td>
<input type="button" id="btnSearch" value="Search" />
</td>
</tr>
</table>
</center>
</div>
<ul class="edgetoedge" id="search-results">
<li class="sep">Results</li>
</ul>
<ul id="placeholder" class="edgetoedge">
</ul>
<div class="toolbar">
<a class="back" href="#" onclick="ClearContents()">Back</a></div>
</div>
<div id="Details" style="display: none">
<div class="toolbar">
<h1>
User Details</h1>
</div>
<div class="info">
<div id="result">
</div>
</div>
<div class="toolbar">
<a class="current" href="#" onclick="jQT.goBack();">Back to results</a></div>
</div>
</div>
</body>
</html>
Please let me know what am doing wrong here.
Thanks,
Vishnu
I can't be sure why no css is being applied but the check the following
are you sure you have the right path to css and js files? for js it seems that one js file is under scripts and the other in the same folder as index, the css also seems to be in the same folder - check if that may be your problem. I'm not even sure the the scripts leads to the right path - you can try ./scripts/file
you have 2 viewports meta tags, I'm quite sure this is a mistake. they also partly contradict each other. so probably the browser would override the first one with the second one
to make sure you don't use phonegap api before the device is loaded. best practice to load the page js (besides the libraries) after the devices fires the deviceready event. like this example:
$(document).ready(function(){
document.addEventListener('deviceready',function(){
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "./path/to/yourjsscript.js";//change to fit the path
document.getElementsByTagName('body')[0].appendChild(script);
},false);
});
</script>
Related
What could be the possible reason behind the same? I am unable to resolve the issue. APIs are working well and just because of this error I am unable to integrate it with frontend.
here`s index.js file:
<html lang="en" ng-app="todoApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>::CRUD::</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="core.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body ng-controller="mainController">
<div class="container">
<div class="jumbotron text-center">
<h1>Todo CRUD App<span class="label label-info">{{ todos.length }}</span></h1>
</div>
<div id="todo-list" class="row">
<div class="col-sm-4">
<div class="checkbox" ng-repeat="todo in todos">
<label>
<input type="checkbox" ng-click="deleteTodo(todo._id)">{{todo.text}}
</label>
</div>
</div>
</div>
<div id="todo-form" class="row">
<div class="col-sm-8 text-center">
<form>
<div class="form-group">
<input type="text" class="form-control input-lg text-center" placeholder="Add a todo here" ng-model="formData.text">
</div>
<button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button>
</form>
</div>
</div>
</div>
</body>
</html>
Thanks guys, Error is resolved. I just had to add type="javascript" in script tags.
I think you haven't specified your app in your file.
Like this..
<div ng-app="exampleApp">
You have only specified your controller.
I am trying to do load an html page using angularJS.
My HTML page is like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TSAPI Profiles list</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<script src="main.js"></script>
<style type="text/css">
.container{
margin: 20px;
}
</style>
</head>
<body>
<div class="container" ng-app="TSAPIProfiles" ng-controller="TSAPIController">
<div class="col-md-4">
<p> <h4> TSAPI Profiles </h4> <br><br></p>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>TSAPIProfile Name</td>
<td>ACD#</td>
<td>HUB...</td>
</tr>
<tr>
<td>AESServerPrimary</td>
<td>NorthACDTSAPI1</td>
<td>NorthACD</td>
</tr>
<tr>
<td>North</td>
<td>AESNorth1</td>
<td>ManualCBSDetails</td>
</tr>
</tbody>
</table>
<!-- Button -->
<div class="btn-group-justified" >
<div class="col-md-4" style="margin-left: 400px;" >
<button name="savebutton" class="btn btn-primary" type="button" ng-click="add()">Add</button>
<button name="resetbutton" class="btn btn-primary" type="button" ng-click="edit()">Edit</button>
<button name="cancelbutton" class="btn btn-primary" type="button" ng-click="remove()">Remove</button>
</div>
</div>
</div>
</body>
</html>
And my JS file is like:
var app = angular.module('TSAPIProfiles', [])
app.controller('TSAPIController',['$scope','$location', function ($scope,$location) {
$scope.add = function () {
$location.path('TSAPIProfileCreate.html');
}
}]);
When I click on add button it doesn't load the TSAPIProfileCreate.html. I could not able to find the reason.
Try to follow Manikandan answer because it's the right way to do this (or use ui-router), but if you really want to make a redirection like this, use : $window.location.href like this
$location.path('TSAPIProfileCreate.html'); // This is bad
$location.path returns the part of the URL after the slash NOT including search string parameters (after the question mark).
Create View then use $location.path.
https://docs.angularjs.org/api/ngRoute/directive/ngView
$location.path('TSAPIProfileCreate');
https://docs.angularjs.org/guide/$location
I am relatively new to plunker, what am I doing wrong? There are errors in the console, and the live preview is not working. The code works perfectly fine in my localhost.
Here's the link for it. http://plnkr.co/edit/cZ48oeBBDthtVqXMRJPy?p=preview
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="less.js#*" data-semver="2.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
<link rel="stylesheet" href="style.less" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<div class="container">
<!-- Parent scope -->
<div class="">
<div prevent="" visible="isVisible" object-data="objectData">
<table class="datatable">
<tbody>
<tr ng-repeat="t in templateData">
<td class="haseebtesting" ng-click="current.selected = t; confusedFunction(t)" id="{{'test ' + $index}}">{{t.templateName}}</td>
<td>{{t.templatePath}}</td>
</tr>
</tbody>
</table>
<div ng-show="isVisible" class="parented">
<form class="haseebform">
<input type="text" ng-model="objectData.entername" placeholder="Enter name" />
<br />
<input type="text" ng-model="objectData.entercomment" placeholder="Enter comment" />
<input type="button" class="btn btn-info" ng-click="addT(objectData)" value="Submit" />
</form>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
plnkr edit
I started it without errors.
script code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="app.js"></script>
You need to move the jquery script above the angular script. When angular loads, if jquery is not present, jqlite is used instead even if jquery is loaded subsequently.
I am new to Angular.
I am getting the error " [ng:areq] Argument 'myTableController' is not a function, got undefined"
I tried to debug it with alerts and I am not hitting Test4 at all
Why is that?
/// <reference path="angular.js" />
alert("Test1");
var app1 = angular.module("myTableModule", []);
alert("Test2");
app1.controller("myTableController", function($scope) {
alert("Test4");
});
alert("Test3");
The following is my html source code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.js"></script>
<script src="/Scripts/angular-route.js"></script>
<script src="/Scripts/currentSettings.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div ng-app="myTableModule" ng-controller="myTableController">
<table>
<thead>
<tr>
<th>Company Name</th>
<th>Customer Name</th>
<th>Document Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="currentSetting in currentSettings">
<td>{{currentSetting.companyName}}</td>
<td>{{currentSetting.customerName}}</td>
<td>{{currentSetting.docType}}</td>
</tr>
</tbody>
</table>
</div>
<hr />
<footer>
<p>© 2016 - My ASP.NET Application</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"4373e3d6a6314b6bb4066b12f1b12d1f"}
</script>
<script type="text/javascript" src="http://localhost:55964/60de32f396fe4106a9655183ab19f24b/browserLink" async="async"></script>
<!-- End Browser Link -->
You need to refer the .js file of your controller in the html file.
Let say if your controller is in a file called controller.js
then in your html you have to write like below
<script src="controller.js" type="text/javascript"/>
To solve the problem I had to recreate the project. Also my path to the web service was not correct.
Thank you for all the help and support
I'm trying to make a toggle-thing in angular, I can't understand why it doesn't work.
I exepct that when i click the a-tag, the lower div should be displayed.
<div>
Lorem<br />Ipsum<span>Click for more</span>
</div>
<div ng-switch="member">
<div ng-switch-when="mathieu">
<h3>Lorem ipsum</h3>
</div>
</div>
Yes, this works. I have put together a quick plunkr to test it:
http://plnkr.co/edit/9JqxRNC9X5U2bJrkbxZ9?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1"></script>
<script src="app.js"></script>
</head>
<body>
<a href="#" ng-click="member = 'mathieu'" class="mathieu">Lorem Ipsum <span>Click for more</span>
</a>
<br />
<a href="#" ng-click="member = ''" class="mathieu">
<span>Click to reset</span>
</a>
</div>
<div ng-switch="member">
<div ng-switch-when="mathieu">
<h3>Lorem ipsum</h3>
</div>
</div>
</body>
</html>
mathieu needs to be a string value. By itself it will resolve to undefined.
I think you are looking for something like this:
<div>
Lorem<br />Ipsum<span>Click for more</span>
</div>
<div ng-switch="member">
<div ng-switch-when="mathieu">
<h3>Lorem ipsum</h3>
</div>
</div>