Getting error message when i click on a link on master page in asp.net 4.0 - master-pages

Script link on master page:
<head runat="server">
<script src="<%=ConfigurationManager.AppSettings["ApplicationURL"].ToString()%>Scripts/jquery-1.7.2.js" type="text/javascript" language="javascript"></script>
</head>
Default.aspx page
<a class="level1" href="VideoLibrary/VideoUpload.aspx">Video Library</a>
When i click on this hyperlink i got following error message:
What should i do?
Thanks

You can't use expression in <head runat="server"> tag. What you need to add <script> via Page.Header property.
HtmlGenericControl script = new HtmlGenericControl("script");
script.Attributes.Add("src", System.Configuration
.ConfigurationManager
.AppSettings["ApplicationURL"]
+ "Scripts/jquery-1.7.2.js");
script.Attributes.Add("type", "text/javascript");
Page.Header.Controls.Add(script);

Try enclosing the Script tags inside PlaceHolder:
<asp:PlaceHolder runat="server">
<script src="<%=ConfigurationManager.AppSettings["ApplicationURL"].ToString()%>Scripts/jquery-1.7.2.js" type="text/javascript" language="javascript"></script>
</asp:PlaceHolder>

Related

Asp.net MVC application using typescript and Phaser.io does not show images

I have a simple typescript game(using Phaser.io) that i what to run from an ASP.net MVC application in an MVC 5 View page with Layout (Razor)
I have added the view and the controller
/Views/Home/About.cshtml
#{
ViewBag.Title = "About";
}
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="~/phaser.js"></script>
<script src="~/app.js"></script>
<div id="game"></div>
The game starts but it does not show any images. It looks like the reference to the image is wrong.
http://asskicker3.azurewebsites.net/Home/About
I reference the images as follows in the app.ts:
preload() {
this.game.load.image('background',"assets/background.jpg");
If i add an HTML page to the root of my folder it all work perfect.
http://asskicker3.azurewebsites.net/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body style="margin:0px; padding: 0px;">
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="phaser.js"></script>
<script src="app.js"></script>
<div id="game"></div>
</body>
</html>
Answer:
James Skemp solutions works. Just by adding the / it all works. Perfect!
Your asset references are relative.
So if you look at the network tab in a browser you'll notice that it's trying to load the graphics relative to the URL. For example, http://asskicker3.azurewebsites.net/Home/assets/background.jpg
One way to fix this would be to change your preload so that the asset URLs are absolute instead of relative. So
this.game.load.image('background', "assets/background.jpg");
would become
this.game.load.image('background', "/assets/background.jpg");

JqueryMobile loading external script in body does not solve my ajax navigation issue

I see some others (e.g. this post) have had trouble using external javascript scripts in JQuery Mobile - as of today I have joined their ranks.
I have a single external js script (controllers.js) which contains code that affects several pages on the site. It is loaded on every page of the site. I put the js file just before the tag it works fine on the initial page load. However when I navigate thereafter (using the JQM Ajax methods) all functions in the script stop working. I would have thought the script would remain in cache - but heyho. Anyhow there's an FAQ which answers this question and I've implemented their suggestion which is: "...to reference the same set of stylesheets and scripts in the head of every page." I have done this but when I do even on the first page load the js doesn't fire. There aren't page specific scripts - so the remainder of that FAQ does not apply.
My cut down html looks like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/static/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">
<script src="/static/jquery-1.9.1.min.js"></script>
<script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>
<!-- CSS: implied media="all" -->
</head>
<body>
<div data-role="page" id = "main-page">
<div data-role="header" style="overflow:hidden;">
</div>
<div id = "home" data-role="content">
<input type ='button' id = "some_btn" value="press me">
</div>
</div>
<script type="text/javascript" src="/static/js/controllers.js"></script>
</body>
</html>
and within the javascript file
controllers.js
$('#some_btn').click(function()
{
alert('button pressed');
});
Any ideas on what I may be doing wrong here?
Since the content in the #page is loaded dynamically via ajax, click will not work, since it only works on elements that are on the page when the script is called.
You need to use the .on() method:
$('body').on('click','#some_btn',function()
{
alert('button pressed');
});

Facebook helper not appearing in MVC4

I created a new test project in MVC4 to test if I could use Facebook Helper from the Nuget gallery. I followed the instructions which are very simple, point and click to install the Facebook helper from Nuget, edit your page, and insert like button.
When I run the project I can actually see the facebook likebutton being generated when I view it through firebug, but it does not appear on the page.
Here is my default index page
#{
ViewBag.Title = "Home Page";
}
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
http://asp.net/mvc.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
If you have any questions about ASP.NET MVC visit
our forums.
</p>
</div>
</section>
}
<h3>We suggest the following:</h3>
<div>
#Facebook.LikeButton()
</div>
I´ve gone through several pages regarding Facebook helper and they all describe the process in the same way. Does anyone know if I should config any files before using this library?
Edited:
I will paste my html code that is loaded into the markup after execution. I will abbreviate some scripts and stuff since it has many hundreds of line of code :)
<html id="facebook" class="" lang="en">
<head>
<meta charset="utf-8">
<script>
<script>
<noscript><meta http-equiv="refresh" content="0; URL=/plugins/like.php?href=http%3A%2F%2Flocalhost%3A13876%2F&layout=standard&show_faces=src&width=450&action=like&colorscheme=light&height=80&font&locale=en_US&ref&_fb_noscript=1" /></noscript>
<meta content="noodp, noydir" name="robots">
<meta id="meta_referrer" content="default" name="referrer">
<meta content="Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, post links and videos, and learn more about the people they meet." name="description">
<link href="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flocalhost%3A13876%2F&layout=standard&show_faces=src&width=450&action=like&colorscheme=light&height=80&font&locale=en_US&ref" media="handheld" rel="alternate">
<title>Facebook</title>
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yc/r/-WUN6qLbp5n.css" rel="stylesheet">
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yf/r/gd49XKRAMNQ.css" rel="stylesheet">
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yc/r/XaOowWd9_Aq.css" rel="stylesheet">
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yH/r/Dpn1SKTH3-z.css" rel="stylesheet">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yB/r/Vm1JnKckidu.js">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y-/r/ARN_8tuLdws.js">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yq/r/XboiPeV3jQI.js">
<script>
<script>
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yP/r/eTzqwp1jxjF.js" async="">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yh/r/aTzvHAZI_Jd.js" async="">
</head>
<body class="plugin ff4 win Locale_en_US">
<div id="FB_HiddenContainer" style="position:absolute; top:-10000px; width:0px; height:0px;"></div>
<script>
<script>
<script>
</body>
</html>
See where in the Url it generates (link href="https://www.facebook...) it says "&show_faces=src"
That causes the problem; it should be "&show_faces=true"
Even though true is supposed to be the default, if you have this issue try changing it to: #Facebook.LikeButton(showFaces: false)
EDIT: this only helps if you set it to false. Same issue with LikeBox and all boolean properties.
If the HTML is being rendered I can only assume the problem it's a CSS problem, check the styling of the elements in FireBug and make sure they aren't being hidden e.g. check for display: none or visibility: hidden or make sure there isn't float applied which is taking it off the screen.

Gmaps4Rails with OpenLayers gives JS error when marker clicked: this.serviceObject is undefined

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

FireBug not working with ASP.NET MVC

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!

Resources