I am trying to learn javascript/jquery, using firebug to debug and have built a page, which I have reduced to a minimal below:
<!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>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script language="JavaScript" "text/javascript">
function geoAddress() {
alert("start");
var postcode = $("#PostCode").val();
}
</script>
<title>Postcode</title>
</head>
<body>
<div class="page">
<h2>Create</h2>
<form action="/Venues/Create" method="post">
<fieldset>
<p>
<label for="PostCode">Postcode:</label>
<input id="PostCode" name="PostCode" type="text" value="" />
<input type="button" onclick="geoAddress();"/>
</p>
</fieldset>
</form>
</div>
</body>
</html>
I believe that this worked previously, but now although it does work (i.e. I press the button and get an alert) in firebug, on first loading I see a javascript error.
I have jquery-1.3.2.js loaded in the same directory as my file.
I seem to be struggling with firebug so would appreciate pointing in the direction of tutorials for the current version for javascript debugging. I can't even see a way to view the whole error message.
I would appreciate any help with what this error is and also pointers in the right direction for using firebug.
1st step - Can you make sure jQuery is being requested successfully. In firebug click the Net tab and it will show you all requests that are made and the failed ones will appear in red.
Related
My JavaScript file has this code:
Obj.scrollLeft = Obj.scrollWidth;
This code is text-scrolling code. This code doesn't work in Microsoft Edge. Other browsers work fine.
Microsoft Edge:
Google Chrome:
=========================================================================
I'll share my example script.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<script>
function textScroll()
{
var inputObj = document.testFrm.text1;
inputObj.scrollLeft = inputObj.scrollWidth; //text scrolling
}
</script>
</head>
<body>
<form name="testFrm" >
<input id="text1" type="text" size="10" value="wwwwwwwwwww123456789" />
</form>
<button type="button" onclick="javascript:textScroll();">Scrolling text</button>
</body>
</html>
Run this script in Chrome and edges.
The results will differ from each other.
I want to know my JavaScript code why it does not operate in MS Edge.
Thank you.
It is supported in Edge.
Here is the version I used to validate it.
Also, it is having this behavior without having to do anything specific in the JS code.
Hello I came across a weird behavior with an onclick attribute regarding form submission.
Page on Server:
<!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 lang="en-us" >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Return Form Example</title>
<script type="text/javascript">
function doSomething(){
alert("hey");
return false;
}
</script>
</head>
<body>
<form action="submit.php" method="post">
<input type="submit" onclick="return doSomething()" value="click me!">
</form>
</body>
</html>
In this example, running on my server, when I click the submit button I get an alert saying hey and I stay on the current page. However, I tried to set this same example up on jsfiddle and I get an 404 error meaning the form was submitted. I cannot figure out why this occurs.
Here is the jsfiddle where I am trying to replicate the behavior on my server.
jsfiddle:
http://jsfiddle.net/46XSv/
You want to check the option "no wrap - in <head>" which is "Do not wrap the Javascript code, place it in section".
Select "no wrap - in <head>" under "Framework and extensions"
In this page you'll find the description of each of the options around the bottom: http://doc.jsfiddle.net/basic/introduction.html.
Also its a good practice to include semicolon at the end of your return statement, like the following:
<input type="submit" onclick="return doSomething();" value="click me!">
You should use onsubmit on the <form> element instead of onclick on the <input> element. It will work correctly.
After opening a webpage with exatly one FCKeditor window in it, I get the instance:
i = FCKeditorAPI.GetInstance( "txtText" )
This works. I am also allowed:
i.GetHTML() #=> <div class=".... etc., correct output
But when trying
i.SetHTML( "<h1>Quux</h1>" )
I get:
[Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_... etc. ]
I have an uncertain feeling, that in past, I was able to change the FCKeditor window contents with SetHTML(), but I'm not completely sure. What to do?
In response to the comment, my HTML is
<!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="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<meta http-equiv="Content-language" content="cs" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="private" />
<title>Foo | Bar | WebMaker | FOO.CZ</title>
<style type="text/css" media="screen">/*<![CDATA[*/#import url(http://webmaker.ooo.cz/_design/style.css);/*]]>*/</style>
<script type="text/javascript" src="http://webmaker.ooo.cz/common.js"></script>
</head>
<body>
<div id="header">
<span><a href="http://webmaker.ooo.cz/logout.aspx">Logout</strong></span>
</div>
<div id="main">
<div id="content">
<div id="tabmenu">
</div><!-- /tabmenu -->
<dif id="tabcontent">
<form name="_ctl2" method="post" action="detail.aspx?article=14599" id="_ctl2">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTEzz0iZG9.....reallllly..looong...strin......6qKb5or30J5DCLKTCaFR/xc8TPHb9A=" />
<script type="text/javascript">
<!--
var theForm = document.forms['_ctl2'];
if (!theForm) {
theForm = document._ctl2;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWEQ...vsyXR4=" />
<div class="data">
<fieldset>
<legend>Text článku</legend>
<div><input type="hidden" id="txtText" name="txtText" value="FCK editor window contents here." /><input type="hidden" id="txtText___Config" value="HtmlEncodeOutput=true" /><iframe id="txtText___Frame" src="http://webmaker.ooo.cz/_wysiwyg/editor/fckeditor.html?InstanceName=txtText&Toolbar=WebMaker" width="100%" height="400px" frameborder="no" scrolling="no"></iframe></div>
<input type="button" onclick="GetWordsCount('txtText___Frame')" value="Zobrazit počet slov v článku" />
</fieldset>
<!-- There are some more fieldsets here and a submit button. -->
</div><!-- .data -->
</form>
</div><!-- tabcontent -->
</div><!-- /main -->
</body>
</html>
FCKeditor's SetHTML method relies on a document.write call to replace the content in the edit control. Unfortunately document.write does not work from within the Web Console on Firefox.
This is a known bug: Using document.write inside Scratchpad window brings up 'Security error undefined' in Web Console
I know that error says Scratchpad and the error message is different but it's the same problem. Note this comment from David Chan (Mozilla Security Researcher):
This appears to be another bug from running WebConsole / ScratchPad in a sandbox.
The reason you probably remember being able to do this in the past is because it works in FireBug, and it works in Chrome. You've probably used one of those environments in the past when working with a FCKeditor control.
Pretty sure this is some cross domain issue where you probably think you're running on the same domain but actually are not. I would have to inspect the actual page this runs on to really be able to help you out, but try loading all the relevant fckeditor files using relative file paths (optionally from the root) and never include the actual domain, that will prevent a lot of trouble in general (what for example otherwise may happen is you being on example.com but loading files from www.example.com or similar problems).
The odd thing is that you shouldn't be able to read files then either, but the triggered error is about unpriviliged actions which are nearly always cross domain issues (or some very tricky cross script context issues, but those are mostly only relevant if you develop addons).
If your javascript is coming from "http://webmaker.ooo.cz/...", then it's possible you're getting a domain issue if you're browsing the website under a different subdomain than the javascript is being pulled from. I'm not sure of a fix, and I'm not sure that's necessarily what's wrong. Just a possibility. I'd suggest trying to put the javascript you're using in the page with the html just to make sure the code itself actually works.
I've got a strange problem where the middle section of some of the pages aren't stretching to 100% page height, wihch results in there not being the full left hand border.
Here for example (please click on the 'Brentwood' link and go to 'Login' on the top menu) https://www.inside-guides.co.uk/advertiseradmin/default.asp?.
Whereas the 'Contact' page is fine (again via the 'Brentwood' site): https://www.inside-guides.co.uk/feedback.asp.
They both use the same template using javascript and CSS, but when I look in the code inspector it gives full page height values for the #left-nav and #middle on the 'Contact'page which works.
The javascript is to make each column the same height = i.e. to the top of the footer, but it doesn't work on the Login page.
I really can't understand why so any help perhaps using a code inspector would be very much appreciated.
JS code placed in the head.css on each page:
<script type="text/javascript">
matchColumns=function(){
var divs,contDivs,maxHeight,divHeight,d;
divs=document.getElementsByTagName('div');
contDivs=[];
maxHeight=0;
for(var i=0;i<divs.length;i++){
// make collection with <div> elements with class attribute "equal"
if(/\bequal\b/.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
maxHeight=Math.max(maxHeight,divHeight);
}
}
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}
window.onload=function(){
if(document.getElementsByTagName){
matchColumns();
}
}
</script>
Login page code where the 100% JS page height isn't working:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--#include virtual="/System/Startup_FranchiseClient.asp"-->
<html xmlns="http://www.w3.org/1999/xhtml">
<%
EnsurePageIsHTTPS
If IsFranchiseClientLoggedIn = True then
Response.Redirect GetAdvertiserAdminHomePage
End if
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Inside-Guides.co.uk - Advertiser Login</title>
<!--#include virtual="/Assets/Templates/Public/Franchise/HeadCSS.asp"-->
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle.min.js"></script>
</head>
<body class="login" onload="javascript:document.getElementById('strUsername').focus();">
<!--#include virtual="/Assets/Templates/Public/Franchise/TemplateStart_https.asp"-->
<div class="content clearfix">
<div id="form" class="form">
<h1>Advertiser Login</h1>
<p>Welcome to the advertiser area. Please enter your login details below:</p>
<span class="ErrorText"><% = strSecurity_LoginError %></span>
<form id="form" name="LoginForm" method="post" action="Default.asp">
<input type="hidden" name="ValidateLogin" value="1" />
<label>Email
<span class="small">Email used to register</span>
</label>
<input type="text" id="strUsername" name="strUsername" value="" />
<br />
<label>Password
<span class="small">Password used to register</span>
</label>
<input type="password" name="strPassword" value="" />
<button type="submit">Log-in</button>
<div class="spacer"></div>
</form>
</div>
<p> * If you have forgotten your password, please click here</p>
</div>
<!--#include virtual="/Assets/Templates/Public/Franchise/TemplateEnd.asp"-->
</body>
</html>
<!--#include virtual="/System/Shutdown.asp"-->
CSS:
#middle {padding-top:7px;float:left;width:60%;border-right:1px solid #edeaec;border-left:1px solid #ede9e8;}
#middle.dir {width:78.5%;border-right:0;}
Many thanks.
JS code placed in the head.css on each page
Not sure if this is a typo or not, but if it isn't you cannot place js in a css file. Also no css file seems to be linked in the head of you html document.
However on further inspection it seems you are referring to the headCSS.asp template include in which case the above point isn't of concern.
For height 100% or any percentage based heights the parent must have a defined height, making it essentially not very useful because you need to know height values anyway. So if you can set it to a fixed height that would be my suggestion.
Answer
However I suggest a <table> to do what you're looking with a single row and multiple columns, using one will avoid a lot of hacky css and or js.
I have the folowing html. It passes the w3 validator, but my javascript alert does not work. Can anyone see any problems or have any suggestions on how to get it to work?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Company Name™</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
BODY {
background-image: url(images/bg4.jpg);
background-repeat:no-repeat;
background-position:center top;
background-attachment: fixed;
}
</style>
<script type="text/javascript">
alert("HELLO");
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo">
<img src="images/fcflogo.png" width="295" height="100" align="left" alt="logo"/>
</div>
<div class="header1">
100% Financial Protection
<hr/>
</div>
<div class="nav">Home| Flights| Hotels| Villas | CarHire| Attractions| Contact</div>
</div>
<div class="ver1">
<h2>Can't find what your looking for?</h2>
</div>
<div class="enq1">
<h2>Enquiry Form</h2>
</div>
<div class="hor1">
<h2>Our Service</h2>
<a>Company Name are one of the leading independent travel companies specialising in Florida Holidays. We have a wide range of major Charter and Scheduled airlines to choose from as well as over 10,000 Hotel and Villa deals. Our aim is to provide you the customer with a truly fantastic vacation in Florida from start to finish at affordable prices. We are not committed to any airline or Tour operator so are totally committed to finding you the best deal.</a>
</div>
<div class="hor1"><a>FLIGHTS</a></div>
<div class="ver2"><a>HOTELS</a></div>
<div class="ver2"><a>VILLAS</a></div>
<div class="hor1"><a>CAR HIRE</a></div>
<div class="hor1"><a>ATTRACTIONS</a></div>
</div>
<hr/>
<div id="footer"><a>FOOTER</a></div>
</body>
</html>
EDIT - To all below, I do have javascript turned on, I am using debian with firefox, noScript is disabled, but the alert does not appear, even if I move it to the body.
First, take out the trade mark. That extended characters is probably killing the closing </title> tag. I"m pretty sure that's your issue.
Failing that, remove every element above the <script> tag and see if it executes. If it does, restore each element one-by-one. Something above the script tag is preventing it from being parsed.
For me, your code works, the alert appears.
Have you enabled javascript in your browser?
Works fine on FF 3 and IE 8 for me.
Have you disabled JavaScript on your browser by any chance?
The script is never being invoked and that's why it is not alerting anything. Either move that script tag from within head to within body tag of the document. Or enclose it within a function and invoke it from onload attribute of body tag.
You might want to try clearing your cache to make sure that your browser is loading the file with the alert in it instead of an older, cached copy. If that doesn't work, I'd suggest trying it with Firefox/Firebug and checking for errors in the javascript console. If you're loading the file with AJAX, you'll need to move the script tag to the body of the document. Most of the time AJAX libraries will ignore the HEAD element and only include elements within the BODY tag.