I've got the following code and can't figure out, why It wouldn't load my test message.
At the moment I am doing this tutorial. Anyways, I really liked how an other guy implemented the scaffold in this tutorial.
Long story short, I've tried to combine those two approaches and failed ..
If I go to /index.html I just get a blank page.
When I debug it with the internet explorer, I get the following error message:
Unhandled exception at line 3809, column 9 in http://localhost:50367/Scripts/angular.js
0x800a139e - JavaScript runtime error: [$injector:modulerr] Failed to instantiate module TodoApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeProvider
at Anonymous function (http://localhost:50367/Scripts/angular.js:3705:13)
index.html
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<!-- Custom Java Script files -->
<script src="Scripts/app.js"></script>
<script src="Scripts/controllers.js"></script>
<title>Amazing Todo</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
app.js
// Injects all the needed modules
var TodoApp = angular.module("TodoApp", [
"ngResource",
"TodoApp.controllers"
]).
config(function($routeProvider) {
$routeProvider.
when('/', { controller: "listCtrl", templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
controllers.js
angular.module('TodoApp.controllers', []).
controller('listCtrl', function ($scope, $location) {
$scope.test = "testing";
});
list.html
<h1>Hello: {{test}}</h1>
Related
I have a masterpage and a JS file, I added a link to the javascript file in the master page but on any page that uses the master page the JS isnt working.
I have tried the code on its own in a separate page and it works.
<head runat="server">
<title></title>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="../Scripts/Menu.js"></script>
<script type="text/javascript">
function openNewWin(url) {
var x = window.open(url, 'mynewwin', 'toolbar=no,directories=no,location=no,menubar=no,left=0,top=0,resizable=no,status=no');
x.focus();
}
</script>
</head>
Menu.JS:
$(function () {
//When opening the page all level 2 and level 3 items must be hidden.
$(function () {
hideitems();
})
function hideitems() {
$('h10').hide();
$('h11').hide();
$('h12').hide();
$('h13').hide();
}
//Financial Click
$('h7').click(function () {
hideitems();
$('h10').slideToggle();
$('h11').slideToggle();
$('h12').slideToggle();
});
//Container Click
$('h8').click(function () {
hideitems();;
$('h13').slideToggle();
});
})
I think it's file path issue.Can you follow the steps given here
ASP.Net Master Page and File path issues
Is a path issue as said before.
Are you sure the folder is Scripts and not scripts?
open the inspector and get the link is refering, also probably you will get an error in the console
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Hello World</title>
<link href="StyleSheet.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-2.0.3.js">
$(document).ready(function () {
<%--$("#width").val() = $(window).width();
$("#height").val() = $(window).height();--%>
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#width").val($(window).width());
$("#height").val($(window).height());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="width" type="hidden" runat="server" />
<input id="height" type="hidden" runat="server" />
</form>
</body>
</html>
the above is my aspx code with jquery script which gives the window height and width.
this code perfectly fine on all the browsers when i run the web app from visual studio http://localhost/Mypage.aspx
but when i host it on iis and run with my machine name http://MyMachine/Mypage.aspx it gives JSON undefined and the Property "$" is null or undefined errors.( this is only in IE 10 (non-compatibility mode) , for chrome it works fine)
question 1) do we need to take care of any security constraints for IE 10?
question 2) why does it happen this way when i host it on iis and run it with machine name on my own machine?
question 3) am i missing any jquery refrence.
question 4) obvious one, any solution to this problem.
use the Meta tag as suggested by many of the people.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
but I want to give an importatnt tip. the mata tag should be the first tag in the head tag. I have read it some where if it is not the first tag it would not have its effect.
Are you sure you have the Scripts folder with jquery in the server?
I suggest you to debug with fiddler and see if jquery is loaded correctly or if there is an http error.
as suggested by I4v, adding this to the header fixed the bug for me too:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Thanks guys
I want to use Valums file upload javascript. However, when I run the demo or the tests provided by them I get an Origin null is not allowed by Access-Control-Allow-Origin. in Chrome. It doesn't work on firefox either, but it seems to work on Internet Explorer.
The code is too long to post and I don't know where it goes wrong, if you need a part of the code I can add it in.
The html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="fileuploader.css" rel="stylesheet" type="text/css">
<style>
body {font-size:13px; font-family:arial, sans-serif; width:700px; margin:100px auto;}
</style>
</head>
<body>
<p>Back to project page</p>
<p>To upload a file, click on the button below. Drag-and-drop is supported in FF, Chrome.</p>
<p>Progress-bar is supported in FF3.6+, Chrome6+, Safari4+</p>
<div id="file-uploader-demo1">
<noscript>
<p>Please enable JavaScript to use file uploader.</p>
<!-- or put a simple form for upload here -->
</noscript>
</div>
<script src="fileuploader.js" type="text/javascript"></script>
<script>
function createUploader(){
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-demo1'),
action: 'do-nothing.htm',
debug: true
});
}
// in your app create uploader as soon as the DOM is ready
// don't wait for the window to load
window.onload = createUploader;
</script>
</body>
</html>
There's probably nothing wrong with your code, but you're trying to violate the same origin policy. Basically, if your site is http://aaa.com/, you cannot make AJAX called to http://bbb.com/.
I want to highlight my elements and add a link with jquery.
My Code:
#model IEnumerable<Mvc3Demo.Products>
#{
ViewBag.Title = "List";
}
<h2>List</h2>
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js" />
<script type="text/javascript">
$(document).ready(function () {
$('#productList li').hover(
function () {
$(this).css({ 'background': 'green', 'cursor': 'pointer' });
},
function () {
$(this).css('background', '');
}
).click(function () {
window.location = 'Product/Edit/' + $(this).attr('productid');
});
});
</script>
<ul id="productList">
#foreach (Mvc3Demo.Products p in Model)
{
<li productid="#p.ProductsID">
#p.Name
<!--#Html.ActionLink("Bearbeiten", "Edit", "Product", p, null)-->
</li>
}
</ul>
Layout page:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
#RenderBody()
</body>
</html>
The JQuery will be found so that couldn't be the error ( i proofed it with firebug)
Error:
No Error occurs in Firebug and no highlighting and no link
Please help
I've put the HTML which would be output from your example above into a fiddle. As you can see, it appears to work correctly.
Is the URL in your reference to jQuery correct?
Don't you have something in your Layout page that broke the jQuery functionality?
Try to unbind your page from the Layout and test it indipendently.
Or post your Layout page to let us see what could be wrong with it...
Edited after seeing the Layout page:
There's the error. you already have the jquery reference in the layout page. This cause the error. Simply delete the reference from you page leaving the one in the layout) and everything is going to work.
I created a littel project to test it.
PS: I still don't understand why 2 references to the same javascritp file cause the error :/
try to type
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
instead of
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js" />
I have an application that contains this code:
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/facebox.js" type="text/javascript"></script>
<link href="facebox.css" rel="stylesheet" type="text/css" />
<script language="Javascript">
$(document).ready(function () {
$('a[rel=facebox]').facebox();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a rel="facebox" href="WebForm1.aspx">Open Facebox Dialog with 0 opacity</a>
</form>
</body>
</html>
In this one the facebox works very well,
Im applying the same principle in another application in which i render my anchor
dynamically :
link = new HtmlGenericControl("a");
link.InnerText = Path.GetFileName(value);
link.Attributes.Add("rel", "facebox");
link.Attributes.Add("href", "WebForm1.aspx");
panel.Controls.Add(link);<br/>
and ive got this code on my page
<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/facebox.js"></script>
<link href="css/facebox.css" rel="stylesheet" type="text/css" />
<script language="Javascript">
$(document).ready(function () {
$('a[rel=facebox]').facebox();
});
</script>
In this one Im having an error on facebox(). Object doesnt support this property or method.Why m i getting this error although i do have the same code in another application
and it works perfectly there ?!?!
Thanks alot
And, is the path js/facebox.js exists inside the page location?
Remember that the link to the js file will be relative to the current page location since you are not providing ab absolute path to the file and probabliy you are using a page in a diferent location from the Master.Page of the site root .
I dont know why, but when i put the script tage inside the body it worked