jQuery alert does not work - javascript

I've tried for several hours know to make this bit of jquery code work but I just can't find what I did wrong with it. The equivalent in normal javascript works just fine. What is the problem?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>


You can't put a script in a tag that has a src attribute. You need to call the jQuery library in one script tag and then put your actual script in another.
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>


Problem is here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
//js code
</script>
Here in your script tag you are giving a source and some code also, You should write separate script tags for both, see bellow
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
//js code
</script>


Try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>


You are trying to call the jQuery library while also implementing your code snippet here:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
You should be first loading the jQuery library and then implementing your code snippet like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event){
alert("HI");
});
});
</script>
The reasoning behind this is because you cannot call the script attribute to load a library and then define some code in the same tag, you need to:
Load the script
Declare your code
Hope that helps!


The JS script reference line of code should end and actual JQuery code should be enclosed under separate script tags.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5">abcd</div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>


Your problem was including your code in that script tag for jQuery.
Change to this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ezcap.css">
</head>
<body>
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</body>
</html>
Not a problem but you do not need the type="text/javasript". See: Do you need text/javascript specified in your <script> tags?
And it is better to have your scripts at the bottom so that your content can load faster. See: If I keep JavaScript at bottom or keep JavaScript in <head> inside document.ready, are both same thing?
Your <link> for CSS needed to be inside your <head>

Related

Missing instance data Datepicker while using iframe and jquery dialog

There are two versions of code. The first version is there is a main page containing an iframe and dialog <div>. The iframe will load the dia.html into the parent <div id="popdiv"> and fire it as a dialog. The dialog itself will initiate a Datepicker with elem.datepicker();.
The second version is just the ideal version for what I want which is an iframe fire the parent main page dialog and have a Datepicker running. But this approach cannot load the dia.html page into the <div id="popdiv"> which is not as handy.
My question:
Why is that when I want to select the element$('#myInput', window.parent.document) in the dia.html, I need to add window.parent.document after selector?
I try to figure it out by checking the html code in development tools. But I had no idea why it is required. How does query Dialog work?
How to make the elem.datepicker(); inside the dia.html work inside the dialog if I want to use the .load('dia.html') approach? What was the reason it didn't work?
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
});
</script>
</head>
<body>
<div id="popdiv"></div>
<iframe src="iframe1.html" height="800" width="800"></iframe>
</body>
</html>
iframe1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(function () {
alert('opening iframe');
var parentDiv = $('#popdiv', window.parent.document);
parentDiv.load('dia.html');
parentDiv.dialog();
});
</script>
</head>
<body>
<p>iframe1</p>
</body>
</html>
dia.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(function () {
var elem = $('#myInput', window.parent.document);
alert(elem.val());
elem.datepicker();
});
</script>
</head>
<body>
<p>Date: </p>
<input id="myInput" value="22" />
</body>
</html>
working version
change it to not load html
iframe1.html (working)
<script>
$(function () {
alert('opening iframe');
var parentDiv = $('#popdiv', window.parent.document);
//parentDiv.load('dia.html');
parentDiv.dialog();
});
</script>
main.html (working)
<div id="popdiv">
<p>Date: </p>
<input id="myInput" value="22" />
<script>$('#myInput').datepicker();</script>
</div>

Jquery Steps doing nothing

I`m trying to use Jquery-Steps but this doesnt even like is working or loaded, it only shows the h1 and div blocks, only the html is been loaded
Here is the code that I took from them, I dont know if I need to do something else.
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script type='text/javascript' src="jquery.js"></script>
<script type='text/javascript' src="jquery.steps.js"></script>
<script type='text/javascript' src="jquery.steps.min.js"></script>
</head>
<body>
<script>
$("#wizard").steps();
</script>
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
</body>
</html>

Try now ?
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script type='text/javascript' src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type='text/javascript' src="jquery.steps.min.js"></script>
</head>
<body>
<script>
$("#wizard").steps();
</script>
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
<script>
// Initialize wizard
var wizard = $("#wizard").steps();
// Add step
wizard.steps("add", {
title: "HTML code",
content: "<strong>HTML code</strong>"
});
</script>
</body>
</html>

JQuery slideDown() not working

I cant get the greenbar to slidedown when the page loads. Can anyone tell me what's wrong with my code?
HTML
<html>
<head>
<title>
Live Green Plants
</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="home.js"></script>
</head>
<body>
<div class="headerBar">
<img src="headerBar.png" width="657" height="34" alt=""/>
</div>
<script type="text/javascript" src="Script/jquery-1.9.2.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
</script>
</body>
</html>
Javascript
$(document).ready(function(){
$('.headerBar').slideDown('slow');
});

It needs to start off as invisible, using style="display:none"
See it in action: http://jsfiddle.net/jas6H/5/

Fade in with JQuery Not Working?

I want to fade in the page upon load. I looked at other forms on here and somehow it just isnt working for me...
Javascript file:
window.onload = init;
function init() {
$('#container').fadeIn('slow');
}
One of the pages:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Apparel</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="effects.js"></script>
</head>
<body>
<div id="cart">
<img src="shopcart.jpg" height="30px">
</div>
<div id="container">
<div id="nav">
<p id="sb">Apparel</p>
<p id="about">HOME</p>
<p id="srv">OUTERWEAR</p>
<p id="srv">CLOTHING</p>
<p id="pjt">SHOES</p>
<p id="pjt">ACCESSORIES</p>
<p id="about">ABOUT</p>
<p id="cont">CONTACT</p>
</div>
<div id="imgcontainer">
<img src="homeimg.jpg">
</div>
</div>
</body>
</html>

Put
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
above
<script src="effects.js"></script>
This exposes the $ variable (aka the jQuery library) that you're using when you do $('#container')

You'd better replace the window.onload to $(function(){});
Here is the code:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//window.onload = init;
$(function(){
init()
});
</script>
Enjoy it : )

simple jquery script in inline PrettyPhoto box not working

I've a problem with prettyphoto and a simple jquery script in a PrettyPhoto inline box.
Why I can't hide the div in this prettyphoto box? I don't understand why this is not working...
<!DOCTYPE html>
<html>
<head>
<title>Pretty photo test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje" style="display:block">this is a test</div>
<a onclick="$('#testje').hide(); return false">Close test div</a>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>

No need to add [inline] :
<li>Inline content 1</li>
<div id="inline_demo" style="display:none;">
<div id="testje">this is a test</div>
<a onclick="$('#testje').hide(); return false;">Close test div</a>
</div>

Categories