I have tried in Firefox, IE, and Chrome, and with the following code, none of my alerts fire. Either on pageload or when I click on an image. I am extremely new to JavaScript, but really appreciate the power it has regarding user experience. I would really like to learn it better, and hopefully, one of you folks would be able to help me understand why this won't work... I will include the full HTML as I have heard that JScript can be quite finicky when coming to selectors and DOM objects. I also have no idea how to properly throw errors in JavaScript... :(
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function preview(img, selection) {
alert("firedTwo");
}
$(document).ready(function () {
alert("firedThree");
});
$(window).load(function () {
alert("fired");
});
</script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="../css/profile.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" >
<link rel="apple-touch-icon" href="apple-touch-icon.png" >
<title>CityGuru.ca - Saskatoon: Profile Editor</title>
</head>
<body>
<h1>Profile Picture Upload</h1>
<div id="subHeader">Upload Picture</div>
<div id="subContainer">
<h2>Create Thumbnail</h2>
<div align="center">
<img src="../images/users/saskatoon/1/photo.jpg" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
<div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:60px; height:60px;">
<img src="../images/users/saskatoon/1/photo.jpg" style="position: relative;" alt="Thumbnail Preview" />
</div>
<br style="clear:both;"/>
<form name="thumbnail" action="http://saskatoon.CityGuru.ca/includes/profileEditor.php?action=picUpload" method="post">
<input type="hidden" name="x1" value="" id="x1" />
<input type="hidden" name="y1" value="" id="y1" />
<input type="hidden" name="x2" value="" id="x2" />
<input type="hidden" name="y2" value="" id="y2" />
<input type="hidden" name="w" value="" id="w" />
<input type="hidden" name="h" value="" id="h" />
<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
</form>
</div>
<hr />
<h2>Upload Photo</h2>
<form name="photo" enctype="multipart/form-data" action="http://saskatoon.CityGuru.ca/includes/profileEditor.php?action=picUpload" method="post">
Photo <input type="file" name="image" size="30" /> <input type="submit" name="upload" value="Upload" />
</form>
</div>
</body>
</html>
NOTE
When using FireFox's web console, the only JS error I get is:
$ is not defined
$() syntax is jQuery, not native javascript. (though some other libraries use this same syntax as well). You need to include jQuery for this to work.
add this http://code.jquery.com/jquery-latest.js in script tag in head section there is no jquery in your above code so $(document.ready(function() dont work
Try doing something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function preview(img, selection) {
alert("firedTwo");
}
...
</head>
The important things to notice:
You don't have jQuery referenced: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
You sorta put things out of order...
First, scripts like this usually go in the head.
Second, you shouldn't put JavaScript before the doctype ever.
Third, I don't see your opening head tag, just the closing tag.
Finally, you need to include a jquery script somewhere in the head.
Related
I've includede an external javascript file "check.js" to my home.html page but it seems that it is not working.
Here's the code for check.js:
function required()
{ var empt=document.forms["form1"]["city_name"].value;
if(empt=="")
{
alert("City name is required");
return false;
}
return true;
}
And code for home.html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="check.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
<p>
<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="required()">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</p>
</body>
</html>
What's wrong??
Use an inline script in the HTML file:
<script>
your code here
</script>
Because the return value from the handler determines if the event is canceled you need to change this section:
onsubmit="required()"
with:
onsubmit="return required()"
function required(e)
{ var empt=document.forms["form1"]["city_name"].value;
if(empt=="")
{
console.log("City name is required");
return false;
}
return true;
}
<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="return required()">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
There are a few problems here. Firstly, you can't have a <form> element inside a <p> element, so your HTML should look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="check.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
<form name="form1" action="/weather" method="post" autocomplete="off" onsubmit="required()">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</body>
</html>
Secondly, you need to stop the form from submitting so it can be checked, but if it's fine, you need the form to submit to where the data is. To solve this, make required() fire with the onclick event of the submit button instead of the onsubmit event of the form. Also add an e argument for use later:
<form name="form1" action="/weather" method="post" autocomplete="off">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit" onclick="required(e)">
</form>
You also need placeholder text for your input instead of a value, so it isn't actually filled in if people don't touch it:
<input class="input1" type="text" name="city_name" onfocus="this.value=''" placeholder="enter city name here....">
And then make your function look like this:
function required(event) {
event.preventDefault();
var empt=document.forms["form1"]["city_name"].value;
if(!empt) {
alert("City name is required");
return;
}
document["form1"].submit();
}
And that should now work!
Your code as you've written it is working. The alert will never be shown because the value is never empty. To solve this use a placeholder attribute instead of a value in your input element:
placeholder="enter city name here...."
Fixed:
1 - use getElementByID
2 - you have a value set, test for that as well
3 - add return to your onsubmit
function required()
{ let empt=document.getElementById("city_name").value;
if(empt=="" || empt.includes("enter"))
{
//alert("City name is required");
return false
}
return true;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="check.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
<p>
<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="return required()">
<h1>City Name:</h1><input class="input1" type="text" id="city_name" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</p>
</body>
</html>
This is my first time trying to work with JQuery and i am trying to deconstruct a piece of code i found online. It works in jsfiddle: JSFIDDLE. However, when i try to run the code in a browser, the part that is supposed to work when "create an account" is clicked, does not display. I have modified the code to work with the browser and it is as follows:
My index.html file:
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p id="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p id="message">Not registered? Create an account </p>
</form>
</div>
</div>
</body>
My script.js file:
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
All the files are in the same directory. Any ideas on what might be wrong?
You're running the Javascript in the header, before the document has been fully parsed, so the handler you're adding isn't attaching to anything. Either give the script the defer attribute to force it to load once everything's been parsed:
<script type="text/javascript" src="script.js" defer></script>
or put the script at the very bottom:
<script type="text/javascript" src="script.js" ></script>
</body>
Write your code like this, it will work. I modify your code on jsfiddle, check https://jsfiddle.net/xeyaaqte/7
$(function () {
$('.message a').click(function (e) {
e.preventDefault();
alert("test")
$('form').animate({ height: "toggle", opacity: "toggle" }, "slow");
});
});
I have a JS <script> function and then a HTML<form> script and I am trying to implement them into my webpage side by side. However, When I implement them into the page they automatically put themselves one above the other as if there was a <br> in my script.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
<script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script><form action="http://www.qrz.com/lookup" method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form>
</HTML>
All of the information I have found says that I would need to download the .js from the server and modify some of its code and remove the <br>that may be inside it but I am not sure if there is any other way to do it.
<style>
.se-flair {
display: inline-block !important;
}
</style>
Add this to your HTML and it's done.
You can just wrap the script tag in a div with an id or classname and style it like so:
HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
<div id='left'>
<script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script>
</div>
<form action="http://www.qrz.com/lookup" method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form>
</HTML>
CSS
#left {
float: left;
}
If you just want to remove the you could do as mentioned before with the float property, i make the example:
/* Styles go here */ #blockUsr{ float:left; margin: 5px; }
<!DOCTYPE html> <html> <head> <TITLE> test </TITLE> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <BODY> <div id="blockUsr"> <script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"> </script> </div> <form action="http://www.qrz.com/lookup" method="post" style="display:inline"> <b> QRZ callsign lookup: </b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form> </body> </html>
I am implementing jQuery clock in my application. This clock is working fine in HTML/JSP page but not working in jsf 1.2.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%#taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<f:view>
<f:verbatim>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>JSF</title >
<link rel="stylesheet" href="WEB-INF/clock/include/ui-1.10.0/ui- lightness/jquery-ui-1.10.0.custom.min.css" type="text/css" />
<script type="text/javascript" src="WEB-INF/clock/include/jquery-1.9.0.min.js/"></script>
<script type="text/javascript" src="WEB-INF/clock/include/jquery-1.9.0.min.js"/>
<script type="text/javascript" src="jquery-1.9.0.min.js/"></script>
<link rel="stylesheet" href="WEB-INF/clock/include/ui-1.10.0/ui-lightness/jquery-ui-1.10.0.custom.min.css" type="text/css" />
<script type="text/javascript" src="WEB-INF/clock/include/ui-1.10.0/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="WEB-INF/clock/include/ui-1.10.0/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="WEB-INF/clock/include/ui-1.10.0/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="WEB-INF/clock/include/ui-1.10.0/jquery.ui.position.min.js"></script>
<script type="text/javascript" src="WEB-INF/clock/jquery.ui.timepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#timepicker_showon').timepicker({
showOn: 'button',
button: $('.timepicker_button_trigger'),
showLeadingZero: false,
timeSeparator: ':'
});
});
</script>
</head>
</f:verbatim>
<h:form id="clock">
<body>
<h1><h:outputText value="JavaServer Faces"/></h1>
<f:verbatim> <label for="timepicker_showon">Select Time</label></f:verbatim>
<h:inputText style="width: 70px;" id="timepicker_showon" value="00:00" />
<f:verbatim> <div class='timepicker_button_trigger'
style="width: 16px; height:16px;
display: inline-block; border: 1px solid #222222; margin-top: 3px; cursor:pointer"></div>
</f:verbatim>
</body>
</h:form>
</html>
</f:view>
I have read that $ is not defined. I have tried alternatives like:
$ = jQuery
$jq = jQuery.noConflict();
But these solutions are also not working.
I have requirements to implement the clock, and I have already used Tomahawks calender to select a date, so I need to implement a different timepicker. Please suggest any other alternatives (if any).
Seem like you've included jQuery three times:
<script type="text/javascript" src="WEB-INF/clock/include/jquery-1.9.0.min.js/"></script>
<script type="text/javascript" src="WEB-INF/clock/include/jquery-1.9.0.min.js"/>
<script type="text/javascript" src="jquery-1.9.0.min.js/"></script>
The second <script> tag also missing closing </script>. Try to keep one link only and see how.
The problem is in the generated IDs for your component on HTML. The <h:form> ID will be automatically appended to the IDs of the inner components, so
<h:form id="clock">
<h:inputText id="timepicker_showon" />
</h:form>
Will generate this HTML:
<form id="clock">
<input type="text" id="clock:timepicker_showon" />
</form>
You have two ways to solve this:
Pass the right client ID to your jQuery functions:
$('#clock\\:timepicker_showon')
Note that you must use \\: because : is reserver for jQuery selector (more info here).
Use prependId="false" in your <h:form> so the inner components IDs won't have the form ID:
<h:form id="clock" prependId="false">
<h:inputText id="timepicker_showon" />
</h:form>
This will generate this HTML:
<form id="clock">
<input type="text" id="timepicker_showon" />
</form>
An additional note: In your profile you say I want to learn jsf., if you're learning in your own way, then it would be better to study JSF 2.
I have an assignment due tomorrow.. I'm stuck on on particular requirement. I need to do a java script image rollover I'm my HTML using a separate Script page. and then linking the page to the Html Head tag.
Here is my java script page than I'm using the functions in the tags and its still not calling it over.. are there any suggestions?
This is the javascript file:
// Pre load images for rollover
function imgOver()
{
document.getElementById('logo').src="images/logo1.jpeg";
}
function imgOut()
{
document.getElementById('logo').src="images/logo.jpeg";
}
onclick=”window.print( ); return false;”
This is the HTML:
<!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" xml:lang="en" lang="en">
<head>
<meta name="author" content="Teancum Clark" />
<meta name="class" content="INFO 2450 - Web Content Design" />
<meta name="section" content="001" />
<meta name="project" content="expresswebpractice2a" />
<meta name="due_date" content="11/07/2012" />
<meta name="instructor" content="Kim Bartholomew" />
<meta name="description" content="Description of the project here..." />
<meta name="keywords" content="expweb2a" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Home</title>
<link href="mystyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="MyScript.js"></script>
</head>
<body>
<div class="fl" id="wrapper">
<div class="fl" id="content">
<div class="fl" id="header">
<div class="fl" id="leftImage">
<a href="#" onmouseover="imgOver();" onmouseout="imgOut()">
<img id="logo" alt="logo" height="150" src="images/logo1.jpeg" width="110" />
</a>
</div>
<div class="fl" id="rightImage">
<img class="rightImage"src="Images/banner.png" alt="Pets R Us banner"/>
</div>
</div> <!--header-->
<div class="fl" id="left">
<a class="buttons fl" href="index.htm">Home</a>
<a class="buttons fl" href="AboutUs.htm">About</a>
<a class="buttons fl" href="Tributes.htm">Tributes</a>
</div><!--left-->
<div class="fl" id="right">
right
</div><!--right-->
<div class="fl" id="footer">
The great Pets R Us staff came and picked her up two hours later and I didn't even have to worry about feeding or watering "Sophie".
We now have a regular appointment every Saturday...
<br/>
<br/>
Yours,
<br/>
Jewel Anderson,
<br/>
Centerville, UT
<br/>
<a class="buttons fl" href="Tribute.htm">Read More?</a>
<img class="center" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
</div><!--footer-->
<br style="clear:both; font-size:1px;" />
</div><!--content-->
</div><!--wrapper-->
</body>
</html>
onclick=”window.print( ); return false;”
that line is illegal, and causing your script file to be ignored, remove that and your mouseover/out will begin to work
The problem is here:
onclick=”window.print( ); return false;”
You're using fancy quotes which will cause a mess.
Try this:
onclick="window.print( ); return false;";