Blank page when calling Javascript in HTML- what am I doing wrong? - javascript

I am trying to do a basic google map link into HTML. When I place the code directly in HTML it works but when I try to link from external JS document I just get a blank page:
HTML Code:
<html>
<head>
<title>Search Engine Title Goes Here</title>
<link rel="stylesheet" type="text/css" href="twoColumn.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script language="javascript" type=text/javascript src="myfile.js"
</head>
<body>
<div id="container"> </div>
<div id="header"> Header Goes Here</div>
<div id="sidebar"> Left Navigation Goes Here
<div id="map-canvas"></div>
</div>
<div id="content"> <p>Content Goes Here</p></div>
<div id="footer"> Footer Goes Here </div>
</body>
Am I missing something here?

You:
Forgot the > from the second script's start tag
Omitted the end tag from the second script
The consequence of the first isn't serious, the end tag for the head ends up being treated as an invalid attribute and then ends the tag.
The consequence of the second is that the entire rest of the page is parsed (with errors!) as JavaScript instead of being treated as HTML.
This would have been picked up if you had used a validator.
Note that the language attribute was obsoleted when HTML 4 came out in 1998, and the type attribute was made optional (for JavaScript scripts) in HTML 5. Omit both of them, they bloat your code and just give you the chance to break the script with a typo.
Corrected version:
<script src="myfile.js"></script>

<script type="text/javascript" src="myfile.js"></script>
You should always include a closing script tag
EDIT: I also noticed that you missed the "" around text/javascript

Related

Loading View into <div>

Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>

Hiding/showing content whether javascript is enable/disabled

I have seen some posts regarding wanting to do something like this, but I am at a loss to understand why my code doesn't work. I'm trying to make sure that users who visit a page have javascript enabled. If disabled, I want to hide all content and display a simple page with a message that the main page cannot be displayed without javascript.
I have the following:
<html>
<head><title>my site</title>
<noscript><style type="text/css">site {display:none;} </style></noscript>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<script type="text/javascript">document.getElementById("noscriptmsg").style.display = 'none';</script>
</body>
<body>
<div class="site">
<!--content -->
</div>
</body>
</html>
Currently this shows the correct javascript-enabled page, but a completely blank javascript-disabled page. What would cause this?
Why not use the build in noscript in one body tag:
<html>
<head><title>my site</title>
</head>
<body>
<noscript>
<style type="text/css">
#site {display:none;}
</style>
<div id="noscriptmsg">
You need to have javascript enabled in order to view this site.
</div>
</noscript>
<div id="site">
</div>
</body>
</html>
It looks like in the body onload you are trying to call the method hideDiv()
First, I'd recommend moving your script tag
<html>
<head><title>my site</title>
<noscript><style type="text/css">.site {display:none;} </style></noscript>
<script type="text/javascript">
// to the head tag
// and define the hideDiv() method
function hideDiv() {
document.getElementById("noscriptmsg").style.display = 'none';
}
</script>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<div class="site">
<!--content -->
</div>
</body>
</html>
and remove the extraneous body tags. You can use css to have the first div (the one with the notice) display at 100% width and 100% height. Also, someone pointed out you were missing the css class selector.

Javascript misbehaviour on IAgree function

I have following code:
function iAgree(){
alert("Hello");
jQuery('#openAccount').hide();
jQuery('#submitDetails').show();
}
I am calling it using:
<div class="openAccWraper">
<div class="openAccDetail"> </div>
<div class="questionContact">
<input type="checkbox" name="iAgree" id="iAgree" value="1" />
</div>
</div>
<img src="img/btnSubmitDet.png" border="0" />
I am getting following error:
Uncaught TypeError: object is not a function
I think the problem may be with the iAgree being id as well, and IIRC some (all?) browsers define the global named same as id (if it is possible as identifier). So, iAgree() tries to call DOM object, which obviously fails; and it also explains why renaming solves it.
To check if this is the case put onclick="alert(iAgree); iAgree();" and see if it alerts function or InputElement.
I think the problem is that your code is not being loaded onto the page properly. If you wrap your function code in the head or the body tag of your html, your code should work. e.g.
<body>
<!-- html -->
<!-- load your script at the bottom of the body -->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function iAgree(){
alert("Hello");
.........
}
</script>
</body>
Or
<body>
<!-- html -->
<!-- load your script at the bottom of the body-->
<script src="jquery.js" type="text/javascript"></script>
<script src="iAgree.js" type="text/javascript"></script>
</body>
Here's a minimal working fiddle http://jsfiddle.net/SZYH3/2/.

call jquery changePage() on localStorage

I have a simple jquery mobile page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="MyContainer">
<!-- ##################### Raw Part ##################### -->
<div data-role="page">
<div data-role="header">
<h1> Hello World </h1>
</div>
</div>
</div>
</body>
</html>
when I execute that page it renders fine with a black header and title.
The reason why that page loads correctly is because jquery-mobile placed new attributes where needed in fact the innerHTML of MyContainer after the page loads is:
<!-- ##################### Parsed Part ##################### -->
<div data-role="page" data-url="/jqueryMobile/TC_Page/main2.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
Hello World
</h1>
</div>
</div>
In other words the Raw Part turn into the Parsed Part .
I will like to know what jquery.mobile function made the conversion from the Raw Part to the Parsed Part!
The functions $.mobile.changePage(), $.mobile.loadPage() enables me to do that For example I could do:
// place response from SomeUrl inside the div MyContainer and convert it from raw to parsed!
$.mobile.loadPage('SomeUrl', { pageContainer: $('#MyContainer') });
// later then get the child child (note second child) of MyContainer and make that the child of MyContainer
The problem now is:
All those functions: loadPage, ChangePage etc make an ajax call. What if I already have the html that I want to inject ( I have it in webBrowser local storage or in a Cookie)! In other words how can I make this work:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="MyContainer">
</div>
<script>
function SomeFunction(){
var someHTML = localStorate.html1; // html1 = raw part = <div data-role="page"><div data-role="header"><h1> Hello World </h1></div></div>
$("#MyContainer").html(someHTML);
// now here I am stuck!!!!!!!!!!!!!!!
// how can I make the content of MyContainer go from the raw part to the Parsed Part!
// I am looking for something like:
$JqueryMobile.ParseHTML($("#MyContainer"));
}
</script>
</body>
</html>
Solution
jQuery Mobile provides numerous functions for widget restyling but only one of them will restyle whole page.
$('#index').trigger('pagecreate');
Where #index should be an id of your page DIV.
There is also on other function that can be used here, but unlike trigger('pagecreat'); this function will style only DIV wit data-role="content" attribute. To test this, jsFiddle example trigger('pagecreate'); should be replaced with trigger('create');
$('#index').trigger('create');
If possible SCRIPT tag should not be used inside a BODY tag, while it will work it can cause additional problems. If you want to find more about this topic and how jQuery Mobile handles dynamically added content take a look at this ARTICLE which is a part of my personal blog.
Example
Working example: jsFiddle
This part of code should interest you:
$('#index').append('<div data-role="footer" data-position="fixed"><h1>Dynamicaly added footer</h1></div> ');
$('#index [data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Choose:</legend><input type="radio" name="radio" id="radio1" value="1" checked="checked" /><label for="radio1">option 1</label></fieldset>');
$('#index').trigger('pagecreate');
This code is used to dynamically append page footer and a radio button to page content.

Find a jquery object inside a javascript <script> tag

I have a script in an HTML page of the following:
<script id="scriptid" type="text/html">
<div id="insidedivid">
... html code ...
</div>
</script>
I am able to get the HTMLScriptElement using $("#scriptid") but I am not able to get the underlying div object with the id "insidedivid". Whats the way to do it?
It's not possible; the browser does not treat HTML content inside of <script> tags as part of the DOM. When you retrieve the content of the <script> tag with $('#idhere').html(), you're getting a string result.
To answer Troy's question, he's most likely including templates in the <head> of his document so he can ultimately render content dynamically on the browser-side. However, if that is the case, the OP should use a different MIME type than text/html. You should use an unknown MIME type such as text/templates--using text/html confuses what the purpose of the content is.
I'm guessing the reason you're trying to reach into the <script> tag and grab a div is because you've built smaller sub-templates within the single <script> tag. Those smaller templates should rather be placed into their own <script></script> tags rather than contained in one large <script></script> tag pair.
So, instead of:
<script type="text/template" id="big_template">
<div id="sub_template_1">
<span>hello world 1!</span>
</div>
<div id="sub_template_2">
<span>hello world 2!</span>
</div>
</script>
Do this:
<script type="text/template" id="template_1">
<span>hello world 1!</span>
</script>
<script type="text/template" id="template_2">
<span>hello world 2!</span>
</script>
I think it's perfectly valid to have a div inside a script tag (or at
least useful), if a div makes sense to the TYPE you defined for the
script. For example, John Resig uses a script tag with type "text/
html" in his micro-templating solution:
http://ejohn.org/blog/javascript-micro-templating/
In this instance though (and in reply to the original author) you add
an ID to the SCRIPT tag, and refer to that (I don't see why it
wouldn't work with that facebook type instead of html - but you'd
probably want to test it in a few different browsers ;). For the
example you gave, you can get a reference to the DIV by doing:
<script id="scriptid" type="text/html">
<div id="insidedivid">
... html code ...
</div>
</script>
$(function(){
alert($( $( '#scriptid' ).html() ).text() ); //alerts " ... html code ..."
});
The "trick" is to get the HTML of the script tag and turn in into DOM
elements with jQuery - but remember, because you are passing all the
HTML into the jQUery function then you are immediately selecting ALL
of the top level elements. In this case, there is just one DIV - so
you are just selecting that.
Your HTML is invalid. HTML Validator.
If you want to have HTML you can get just like that, use something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var msg1 = $('message1');
// Execute code here
});
</script>
</head>
<body>
<div id="content">Content</div>
<div id="hidden" style="display: none">
<div id="message1">Message 1</div>
<div id="message2">Message 2</div>
</div>
</body>
</html>
If you are making a templating system, you may want to use AJAX instead.

Categories

Resources