Runtime error embedding Javascript call in ASPX page - javascript

I am trying to get a basic webpage up and running that displays the video for my tests I create using SauceLabs. To do this, they provide a service to embed the video in Javascript.
I am creating the web page in ASP in Visual Studio 2010. However, I'm getting an error when I navigate to my page.
My ASP page looks as follows and simply takes in a jobID (jID) and an access code (code) which are fed into the JavaScript call.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Show Video.aspx.cs" Inherits="ResultsDisplay.Show_Video" %>
<!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>Test Video</title>
<script language="javascript" type="text/javascript" src="http://saucelabs.com/video-embed/<%=jID%>.js?auth=<%=code%>">
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="flowerrorbox"></div>
<a
href="."
style="display:block;height:450px"
id="player">
</a>
</div>
</form>
</body>
</html>
However, when I access the page, Visual Studio throws an error (in a dynamic script block) as follows:
Microsoft JScript runtime error: 'flowplayer' is undefined
Although I can ignore the error, nothing appears on my webpage.
Any ideas?
Thanks,
Gordon

There is some JavaScript code trying to use a variable named flowplayer somewhere and the variable has not been defined. Can you paste the rendered source from the script tag in your browser's address bar and get the code back? Have you tried reloading the page with Ctrl-F5? Does the script assume that there is a variable named flowplayer already defined when the page loads? These are a few debugging questions you might want to look into.

Related

An invalid or illegal string was specified when implementing basic Sharethis code

I'm trying to implement ShareThis buttons on a page, but cannot get the basic options to work in FF or Chrome, on win 7 or Vista.
Chrome has no plugins. Have disabled FF plugins.
Not sure if the problem is some dumb mistake I'm making, or if it is with ShareIt JS code.
Steps:
1. Signed up
2. Went to http://sharethis.com/publishers/get-sharing-tools
3. Completed the 3 steps (changes: Added Pinterest and removed ShareThis button
4. Created a html file and pasted the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons...; /script>
<script type="text/javascript">stLight.options({publisher: 'beea8274-700e-4d53-aeff-393478c86a40'}); </script>
</head>
<body>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_email_large' displayText='Email'></span>
</body>
</html>
On Page load in Firefox I get SyntaxError: An invalid or illegal string was specified.
Email button popup just says 'loading....', and 'Pick one or more destinations:' has no options.
Pulled much hair out over this.
Thanks
Have you deployed your html file on a server before testing it on a browser. If you are testing the html file directly by placing on your Desktop or some other folder, then it will not work. You need to deploy the html file to a server eg: Tomcat or whichever you are comfortable with.

Using jQuery to make a popup

I'm trying to make a simple jQuery popup on an existing page. The page itself will have the first part of some articles, with a more button following the intro. I would like the more button to display a jQuery popup with the rest of the article.
So far, I've been following the tutorial: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/
However once it's up on share point, it doesn't work. I click the button and nothing happens. I even modified the JS so all it does it display an alert, but that doesn't work ether. The link between the page and JS seems to be broken. However I even viewed the src (using my web browser) and sure enough the script tag is in there, but nothing JS is working. Any ideas?
Here's the html page I copy into share point (the java script file is exactly the same as in the tutorial):
<!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>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/articles/.../popup.js" type="text/javascript"></script>
<style type="text/css">
/* CSS goes here, same as in the tutorial */
</style>
</head>
<body>
<div>
<div class="backgroundmain" style="margin-left:-75px; margin-top:-35px; margin-right:-32px;">
<!-- HTML FOR THE ARTICLES-->
</div>
<center>
<div id="button"><input type="submit" value="Press me please!" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Title of our cool popup, yay!</h1>
<p id="contactArea">
Here we have a simple but interesting sample of our new stuning and smooth popup...
</p>
</div>
</div>
</body>
</html>
Thanks for all your help, I really appreciate it.
EDITS:
Here's the results from Chrome's dev tools:
jsFailed to load resource: the server responded with a status of 404 (NOT FOUND)
Refused to execute a JavaScript script. Source code of script found within request.
popup.js:147Uncaught ReferenceError: $ is not defined
However I first tried this in firebug and discovered the alert actually works in firefox.
This line looks suspect:
<script src="/articles/.../popup.js" type="text/javascript"></script>
Where exactly is popup.js? If you have it locally, make sure the path is correct. If not you will need to specify the URL to the file and not a relative path.

What is a better way to lazy load content for users with javascript?

I have a page that has lots of images and other code that would work better if it is lazy loaded.
I have been attempting to do this with the noscript tag but I just noticed that it is not working correctly in IE. It works in every other browser I tested (ff,opera,chrome,safari,etc) so I am a little frustrated.
I am pretty sure at one point or another I actually had this working in IE because I have been using the technique for a little while and I test IE quite frequently... but it isn't working now and everything I google seems to suggest that it never worked.
Here is a simple example to copy and paste that shows what I was attempting:
<!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" xml:lang="en" lang="en">
<head>
<title>lazy load with noscript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<noscript>
<div>
<p>other content here</p>
<img src="http://www.google.com/images/logos/ps_logo.png" alt="lazy loading image test" />
</div>
</noscript>
<noscript>
<div>
<p>other content here 2</p>
<img src="http://www.google.com/images/logos/ps_logo2.png" alt="lazy loading image test 2" />
</div>
</noscript>
<script type="text/javascript">
var html = $("noscript:first").text();
alert(html);
$("body").append(html);
</script>
</body>
</html>
The html used for users with javascript and without javascript is the same. I just use jquery to tab the content to make it easier to view. Since the content is tabbed in javascript it needs to lazy load when a tab opens so it does not take ages to download initially when the page has sizable attachments.
How can I achieve this without outputting the html more than once?
What you need to do is have all the images point to a pixel gif (or png). Write a script that checks if a user has scrolled near an image, and then use Javascript to swap the pixel with the full image.
In scripts I have written, you would have an image tag that looks like:
<img src="pixel.gif" data-img="path-to-full-img.jpg" />
Alternately, you could use a plugin like this. Note: I have not used this plugin before, but it looks like it's all you need.
If you really wanted to get hardcore, you could lazyload your javascript using something like head.js or control.js

Javascript doesn't execute in Safari when placed in HEAD

I'm having a problem with Javascript not executing when placed in the HEAD section of an HTML page in the Safari browser. It works fine in IE, Chrome and Firefox, but with Safari I have to move it down to between the and tags.
Anyone know if this is a known issue?
PS. The HTML and Javascript is contained in .PHP files, if that makes a difference.
Update:
Code I'm using to test:
<!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" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
alert("In HEAD Tag");
</script>
</head>
<body>
<div id="innerthumbcontainer">
Test
</div>
</body>
</html>
If I open the page containing this directly it seems to work. But as soon as I load this into a DIV from another page it does not fire in Safari. In all the other browsers it does work though.
I think I would have heard about it if that was a general problem, you probably have a syntax error in your HTML or something, which for some reason makes Safari give up. Post your code, preferably the HTML output, and we'll have a chance of telling you what is wrong.
Edit: As far as I understand you are trying to use a complete HTML page as content for a div, you really can't do that. Depending on what exactly you are trying to achieve you could either use an iframe, or you could cut out the html, header and body tags.

How can I get Visual Studio 2005 to show my running JavaScript files in the Script Explorer?

In the question Why will Visual Studio 2005 not debug my javascript? I learned that debugging is possible in Visual Studio 2005 but you have to start debugging your application and then press CTRL-ALT-N to open the Script Explorer to set break points, etc.
However, even with the following simple code, when I press CTRL-ALT-N, the Script Explorer window is totally blank. According to all the articles I have found on the subject, it should have e.g. in my case "main.js" (I imagine it is like debugging in Firebug) but it is blank.
What else do I have to do to Visual Studio 2005 so that the Script Explorer shows my running javascript files?
Default.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestJavascriptDebugging2005._Default" %>
<!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">
<script type="text/javascript" src="javascript/main.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>This is HTML and <script type="text/javascript">test()</script>.</p>
<p><button onclick="doIt(this)">Test</button></p>
</div>
</form>
</body>
</html>
javascript/main.js:
function test() {
document.write("this is from javascript code2");
}
function doIt(element) {
alert("This is the javascript function2.");
}
Try attaching your Visual Studio to MSIE via Debug > Attach to process (not sure if it is there in VS2005, look around).
When attaching to process make sure that you check script option.
The easiest way to get started is:
Open IE7
Goto the menu Internet Options > Advanced
Uncheck "Disable script debugging"
To add a break point in a javascript add "debugger;" in your code. Open a page that references that script in IE7, and a popup will come up asking you if you want to debug your script in Visual Studio
<script type="text/javascript">
debugger;
// put your code here
</script>

Categories