I try to lazy load an AngularJs module with ocLazyLoad. It all works fine until I add a css file, then the AngularJs application does not work. Here the code that works for any browsers and also CEF but not for Awesomium:
(you can easily test with the Awesomium Tabbed Browser Example)
index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.js"></script>
<script src="ocLazyLoad.js"></script>
</head>
<body>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController">
</div>
<script>
angular.module("LazyLoadTest", [ "oc.lazyLoad"])
.controller("TestController", function($scope, $ocLazyLoad, $compile){
$ocLazyLoad.load({
name: "testApp",
files: ["testApp.js", "testApp.css"],
serie: true
}).then(function () {
var el, elToAppend;
elToAppend = $compile('<say-hello to="world"></say-hello>')( $scope );
el = angular.element('#example');
el.append(elToAppend);
}, function (e) {
console.log(e);
})
});
</script>
</body>
</html>
testApp.js:
(function () {
'use strict';
angular.module("testApp", []).directive("sayHello", function () {
return {
scope: {
to: '#to'
},
restrict: "E",
template: '<p>Hello {{to}}</>'
};
});
})();
testApp.css:
body{color: red;}
Is this a problem of Awesomium or ocLazyLoad? Is there a work-around?
EDIT:
Very interesstingly if you test with the WPF example the CSS is not applied at all, in the WinForms example it is. But for both the AngularJs directive does not work.
The problem is most certenly with awesomium. It's using the chromium version 18, and a current version is 40. I am having the same problem with it too. I've tried CEF, but the problem with cef is that i get poor performance with it. Next i tried with GeckoFx, but any version from bitbucket that i tried just plain didn't compile...
Related
I am trying to hide and show text boxes using jquery. But when I select the ajax library from c# solution explorer script folder, I am not getting expected output but when I use the CDN library it works. How to set this library to get expected output?
<%# Page Language="C#" AutoEventWireup="true" CodeFile="~/Default.aspx.cs"
Inherits="WebApplication1._Default" %>
<!DOCTYPE html>
<html>
<head>
<%--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>--%>//it works fine
<script src="Scripts/jquery-1.4.1-vsdoc.js"></script>//not works
<script src="Scripts/jquery-1.4.1.js"></script>//not works
<script src="Scripts/jquery-1.4.1.min.js"></script>//not works
<script>
$(function () {
$('input[name="type"]').on('click', function () {
var name, comp;
if ($(this).val() == 'Experienced') {
$('#txtname').show();
$('#txtcomp').show();
$('#Label1').show();
$('#Label2').show();
}
else {
$('#txtname').hide();
$('#txtcomp').hide();
$('#Label1').hide();
$('#Label2').hide();
}
});
});
</script>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
width: 132px;
}
</style>
</head>
Myself found answer for my question.If in future anybody face this type of error they can use this method.what I do to solve this issue I downloaded Microsoft jquery libraries. Here are the links
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js
now add 3 new jquery items into your solution explore and named as jquery-1.7.js,jquery-1.7.min.js and jquery-1.7-vsdoc.js.Now Open above links in a new tab and copy whole content and save according to the jquery folder name.after that add this libraries into your project
<head>
<script src="jquery-1.7-vsdoc.js"></script>
<script src="jquery-1.7.js"</script>
<script src="jquery-1.7.min.js"></script>
</head>
Thank you. All the best :)
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>
This link leads to a document from an open nutrition database:
http://www.dabas.com/ProductSheet/Detail.ashx/124494
Im trying to fetch some information from this page with the help from xpath.
The problem is this, when i choose "view source", in order to find out what tags I am after, all I get is this:
<!DOCTYPE html>
<html>
<head>
<script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<title>ProductSheetLoader</title>
</head>
<body>
<div style="position:absolute; left:50%; top:50%; width:500px; height:200px; margin-top:-100px; margin-left:-266px; padding:15px; color:#666;">
<h1><img src="../../images/ajax-loader.gif" /> Produktbladet laddas...</h1>
</div>
<input id="hiddenARIDENT" name="ARIDENT" type="hidden" value="124494" />
</body>
<script type="text/javascript">
$(document).ready(function () {
var url2 = "/ProductSheet/Details.ashx/" + $('#hiddenARIDENT').val()
$.ajax({
url: url2,
cache: false,
success: function (respones) {
with (window.document) {
write(respones);
close();
}
}
});
});
</script>
</html>
It seems to me that all the info is getting loaded from somewhere else.
If i press f12, I can see all the info I want but how can I Acess this info? Is it possible?
Any help appreciated.
The original page just loads the actual content with ajax, and replaces the document contents with it. The actual information in this case is available at /ProductSheet/Details.ashx/124494, (note the s in Details.ashx, which contains the actual page contents.
Generally, the server might check whether the request also contains the X-Requested-With: XMLHttpRequest header, but it does not seem to be the case here.
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
I'm trying to do something like this:
<script src="<%= ResolveUrl( Urls.jquery) %>" type="text/javascript" ></script>
For importing jquery. The path is of the form
http://domain.com/js/jquery-1.3.2.min.js
In my developer tools console, the path is loaded perfectly, but when I try and run jquery it won't work. I'm kind of puzzled.
Thanks!
EDIT:
code i'm using to test it:
<script type="text/javascript" >
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
I also have another external .js file that says '$' is undefined in the developers console for chrome.
EDIT2:
It appears that this code actually works on Mozilla Firefox, but it does not work on Chrome or IE.
The code below seems to be working for me. Maybe try it out?
Here's what I have for the server side code:
public partial class index : System.Web.UI.Page
{
public static string jQuery = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js";
protected void Page_Load(object sender, EventArgs e)
{
}
}
And for the aspx page
<!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 runat="server">
<title></title>
<script src="<%= ResolveUrl( jQuery ) %>" type="text/javascript" ></script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
<script type="text/javascript">
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
</html>
Ok guys, after basically giving up, i encountered the error today. I did not realize that one of my pages had a secure connection and one did not.
For instance
http://domain.net/page
would load jquery just fine, however the secure version, using https
https://domain.net/page
would not load jquery.
I am unsure of why this happens, but this is the problem. I'm going to mark this as the answer, but if any one else can provide insight on why this happens it would be great.
EDIT:
in my Urls file I had to add https:// to the front of the element, instead of http://, so everything works great now. Hopefully some one will see this later and resolve their problem.