I have started a new ASP.NET MVC project and have included the ExtJS library files. This all works fine when built from Visual Studio and i can display various ExtJS objects. The problem however is that FireBug has stopped showing errors in the Console, even when i type nonsense into the code block.
Setup is:
VS 2008 SP1
FireBug 1.4.2
FireFox
3.5.2
Firebug is working with other public web sites and when viewing other PHP based sites I'm developing.
Does anyone have any ideas what might be causing this?
Thanks for any suggestions
Stuart
Thought i would give some more info...
This is the code in the <head> tag of the Master page...
<script src="<%= Url.Content("~/Content/Scripts/extJS/adapter/ext/ext-base.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Content/Scripts/extJS/ext-all-debug.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Content/Scripts/Modules/Portal/AdminMenuPanel.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Content/Scripts/Modules/Portal/Portal.js") %>" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
ff //does not show errors with this here but works fine without it
var e = new Ext.ux.AdminPortal();
});
</script>
EDIT - Rendered page code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1"><title>
</title><link href="Content/Site.css" rel="stylesheet" type="text/css" />
<!-- ExtJS Library Files -->
<link href="Content/Scripts/extJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="/Content/Scripts/extJS/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="/Content/Scripts/extJS/ext-all-debug.js" type="text/javascript"></script>
<script src="/Content/Scripts/Modules/Portal/AdminMenuPanel.js" type="text/javascript"></script>
<script src="/Content/Scripts/Modules/Portal/Portal.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
ff
var e = new Ext.ux.AdminPortal();
});
</script>
</head>
<body>
</body>
</html>
Thanks for the suggestions so far!
Related
I have an ASP.Net MVC 5 project using Infragistics IgniteUI. When I load igniteui charts or grids using my bundled and minified infragistics scripts and stylesheets, I get errors. When I use the unbundled versions, I do not get the errors.
UPDATE I also tried bundling with minification disabled, which still produces the errors.
Why is it looking for images in the /bundles/ path when I use the bundled files?
What can I do differently, to prevent these errors while using bundling?
Errors
The controller for path '/bundles/images/ui-icons_888888_256x240.png' was not found or does not implement IController.
The controller for path '/bundles/images/igLoadingSmall.gif' was not found or does not implement IController.
BundleConfig
#region Scripts
...
bundles.Add(new ScriptBundle("~/bundles/igniteui_full_js").Include(
"~/Scripts/IgniteUI/js/infragistics.core.js",
"~/Scripts/IgniteUI/js/infragistics.dv.js",
"~/Scripts/IgniteUI/js/infragistics.lob.js",
"~/Scripts/IgniteUI/js/infragistics.loader.js"
));
#endregion
#region Styles
...
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css").Include(
"~/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css",
"~/Content/IgniteUI/css/structure/infragistics.css"
));
#endregion
Layout Head Razor Code
<!-- Header Styles-->
#Styles.Render(
"~/bundles/css",
"~/bundles/igniteui_full_css"
)
<!-- Header Scripts-->
#Scripts.Render(
"~/bundles/jquery",
"~/bundles/ajax",
"~/bundles/modernizr",
"~/bundles/bootstrap",
"~/bundles/site",
"~/bundles/igniteui_full_js"
)
Unbundled Head - Doesn't produce Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/Content/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/Dashboard.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/structure/infragistics.css" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/validator.js"></script>
<script src="/Scripts/jquery.browser.mobile.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/site.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.core.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.dv.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.lob.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.loader.js"></script>
</head>
Bundled Head - Produces Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/bundles/css?v=DOErVhQffVVJij5tRivXIDYvvea9XjXYoWkD6iph4yo1" rel="stylesheet"/>
<link href="/bundles/igniteui_full_css?v=oMN-4N9H6hCThCn7D6WHIiusJgqj7Qk9KfeKje7iGdI1" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/bundles/jquery?v=3wcNYlWV3nKyr3gSm0Ry9LrwfpXaysXErYMcQN9fkcw1"></script>
<script src="/bundles/ajax?v=jmjhTWiGrUMlGQS2hayanNTeGVZ9FC7i0HnCBpQ4IZ81"></script>
<script src="/bundles/modernizr?v="></script>
<script src="/bundles/bootstrap?v=kNIhecyepPMk8f_DFvoGkBz2T4zIItHFFHq2488ZHwY1"></script>
<script src="/bundles/site?v=stk1SwAEJZvoHt7p5QZ9202zmQ1IeBvXWmqmxFpIXI01"></script>
<script src="/bundles/igniteui_full_js?v=6y5k9Wl7x2PlzNsRN0azCfVIh1oR8SLPZohqnlbLrNo1"></script>
</head>
View
#using Infragistics.Web.Mvc
#using MyProject.Web.Website.ViewModels
#model ReportViewModel
#(Html.Infragistics()
.Grid(Model.ReportData.AsQueryable())
.ID("grid")
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
)
I believe the issue is that you need a CssRewriteUrlTransform because the bundling changes where the resources should be referenced from.
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css")
.Include("~/Content/IgniteUI/themes/infragistics/infragistics.theme.css", new CssRewriteUrlTransform())
.Include("~/Content/IgniteUI/structure/infragistics.css", new CssRewriteUrlTransform()));
On a side note, you can remove the infragistics.loader.js from your script bundle as you're bundling all of the combines script files, thus the loader is not needed.
I am having problems setting up the Jasmine Test Framework from nuget in my MVC 5 project in VS2013.
I always get an error message when I run the SpecRunner.cshtml file. It keeps saying that the resource cannot be found but it doesn't specify which one.
Anyone know how to properly setup a standalone SpecRunner.cshtml (without needing to go through the index page)?
Here is what I currently have in my SpecRunner.cshtml
#{
Layout = null;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Toolkit - Tests</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="/Content/jasmine/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="/Content/jasmine/jasmine.css">
<script type="text/javascript" src="/Scripts/jasmine/jasmine.js"></script>
<script type="text/javascript" src="/Scripts/jasmine/jasmine-html.js"></script>
<script type="text/javascript" src="/Scripts/jasmine/boot.js"></script>
<script src="~/Scripts/AngularJS/angular.js"></script>
<script src="~/Scripts/AngularJS/angular-mocks.js"></script>
<script src="~/Scripts/AngularJS/angular-ui-router.js"></script>
<!-- include source files here... -->
<!--<script type="text/javascript" src="/Scripts/jasmine-samples/SpecHelper.js"></script>
<script type="text/javascript" src="/Scripts/jasmine-samples/PlayerSpec.js"></script>-->
<script src="~/Scripts/MyAngularJS/app.js"></script>
<script src="~/Scripts/MyAngularJS/controllers.js"></script>
<!-- include spec files here... -->
<!--<script type="text/javascript" src="/Scripts/jasmine-samples/Player.js"></script>
<script type="text/javascript" src="/Scripts/jasmine-samples/Song.js"></script>-->
<script src="~/Scripts/MyAngularJS/controllersTest.js"></script>
<script>
(function () {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function (spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function () {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
</body>
</html>
You could use Chutzpah. It is a JavaScript test runner which works fine with Jasmine. It is available as a plug-in for Visual Studio and is easy to setup. It also integrates with the Test Explorer of Visual Studio. The wiki explains the features and how it works.
I see Telerik provides open source version of Kendo UI at following URL
http://www.telerik.com/download/kendo-ui-core
I downloaded it but not able to make it work in ASP.NET MVC application.
I am not sure what i am missing. I make a call to CSS and JS files as mentioned in below link:
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/asp-net-mvc-4
Although I am missing one step Add reference to Kendo.Mvc.dll because Telerik don't provide installer in free version and I need JavaScript version of Kendo UI not with MVC selector.
Any idea here?
If you go to: http://dojo.telerik.com/
The default page contains everything you will need to get up and running and in what order:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
</body>
</html>
If it is still not working after you put this in your page then something else is going on.
Comment out the following line in _layout.cshtml page
##Scripts.Render("~/bundles/jquery")#
and add the below lines at the end of the head section :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
I am having trouble with using OpenLayers in Gmaps4Rails (Gem version 1.5.2.) When I click on a marker I would like to show the typical callout (Infobox). Unfortunately I get the following JavaScript error:
this.serviceObject is undefined
Firebug calls the line 195 of the file "gmaps4rails.openlayers.js" responsable:
return this.serviceObject.addPopup(popup);
If I use Google Maps as API provider instead, everything works fine. Showing and hiding the infobox works nicely. This is why I assume that the error must be somewhere in "gmaps4rails.openlayers.js"
I tried on the latest FF and Chrome on Mac.
For reproducing the error in a reduced example, I created a simple HTML page in the public folder of my Rails 3.2 app and directly linked the needed JS and CSS files. To create the HTML page I copied the HTML code of my broken Rails app and reduced it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="/assets/gmaps4rails.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/gmaps4rails/gmaps4rails.base.js" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.openlayers.js" type="text/javascript"></script>
</head>
<body>
<div class="map_container">
<div id="map" class="gmaps4rails_map"></div>
</div>
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsOpenlayers();
Gmaps.load_map = function() {
Gmaps.map.map_options.provider = "openlayers";
Gmaps.map.initialize();
Gmaps.map.markers = [
{"description":"<p>This shall be in in the popup</p>",
"id":117979030,
"lat":39.5715,
"lng":2.64694}
];
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
Gmaps.oldOnload = window.onload;
window.onload = function() {
Gmaps.triggerOldOnload();
Gmaps.loadMaps();
};
</script>
</body>
</html>
Unfortunately I could not find a working example of a successful Gmap4Rails–Openlayers integration on the web. Am I missing a mandatory parameter?
Thanks in advance.
It's a bug.
Replace:
return this.serviceObject.addPopup(popup);
with:
return this.map.addPopup(popup);
I'll push a fix soon, thanks and +1
I have a JSP that uses DOJO Datepicker. It runs fine on my laptop where I have Netbeans6.9/tomcat 6.x installed. However, when I upload it to my hosting service, the DOJO Datepicker doesn't show while the rest of the page shows up fine!
My web app is developed using Java Struts2.
I compared the source code between the two environments (local & remote). And I noticed that has no effect on the remote page. Where on the local page it translates to some DOJO configuration.
Remote page:
<head>
<title>Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="MainLayout.css" rel="stylesheet" type="text/css">
</head>
Local Page:
<head>
<title>Contract Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="MainLayout.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript">
// Dojo configuration
djConfig = {
isDebug: false,
bindEncoding: "UTF-8"
,baseRelativePath: "/sm/struts/dojo/"
,baseScriptUri: "/sm/struts/dojo/"
,parseWidgets : false
};
</script>
<script language="JavaScript" type="text/javascript"
src="/sm/struts/dojo/struts_dojo.js"></script>
<script language="JavaScript" type="text/javascript"
src="/sm/struts/ajax/dojoRequire.js"></script>
<link rel="stylesheet" href="/sm/struts/xhtml/styles.css" type="text/css"/>
<script language="JavaScript" src="/sm/struts/utils.js" type="text/javascript"> </script>
<script language="JavaScript" src="/sm/struts/xhtml/validation.js" type="text/javascript"></script>
<script language="JavaScript" src="/sm/struts/css_xhtml/validation.js" type="text/javascript"></script>
</head>
In addition, FireBug, gives me object dojo not defined message on loading the page remotely. These are clear signs that it's not behaving the same.
But the question is what do I do so it does?
Your help is much appreciated as I really getting disperate.
"dojo not defined" means dojo didn't load.
Go to the network tab in firebug and find the full path for dojo.js
http://mydomain.com/contextPath/static/dojo/dojo.js
Chances are this will be in red, meaning that firefox couldn't load the resource.
The problem is probably one of the following:
The dojo files are in a different path. The contextPaths might be different between your development and production environments and you have it hard coded for your development environment.
Your build script that builds the war file did not include the dojo javascript and it is missing entirely on the production environment.