Browser doesn't recognize javascript / jquery code - javascript

I try run the following code in Firefox 27.0.1 and Chrome 30.0.1599.114 on a machine with Kubuntu Linux, and nothing happens.
The html page is part from a web application based on Spring MVC framework, and was placed in the folder WEB-INF/jsp. Someone can find any error in the code below?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HorarioLivre</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$('a').click(function() {
alert("clicou em um link");
});
</script>
<link rel="stylesheet" href="css/style-main.css">
<link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
<header>
<div class="container">
<h1>HorarioLivre</h1>
<nav>
<ul>
<li>Eventos</li>
<li>Cadastrar Horarios</li>
<li>Listar Horarios</li>
<li>Usuarios</li>
<li>${usuario.nome}
<ul>
<li>Perfil</li>
<li>Configurações</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div id="results">
Fechar
<div id="content"></div>
</div>
</body>
</html>

You don't say what your "errors" are, but my guess is you've left out the document ready handler, so by the time your selector is run, the elements are not ready in the DOM yet.
$(function() {
$('a').click(function() {
alert("clicou em um link");
});
});

You are selecting all the a elements that exist at the time the script runs (all zero of them since the script runs in the head and all the a elements exist in the body) and doing stuff to them.
Move the script to just before </body> or create a function and run it on DOM ready.
jQuery(function () {
$('a').click(function() {
alert("clicou em um link");
});
});
… then there will be actual a elements you can manipulate.

You need to wrap your code inside DOM ready handler $(document).ready(function() {....}) or shorter form $(function() {.... }) to make sure all of your elements are properly added to the DOM before executing your jQuery code.
$(function() {
$('a').click(function() {
alert("clicou em um link");
});
});

Related

How can I insert code into : <ul><li>here</li></ul> ..that will spawn a sized window.

cant get this to work (can I not have JS call from inside list tags?)
Thanks!!!
<head>
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
</head>
<body>
<ul>
<li>Helping Kids Who Struggle
</li>
</ul>
..etc
,,but works fine when not in <li>
Thanks!!!
I would advise you to use the jquery library for this solution. In order to use jquery you have to include the jquery files using a CDN or locally. I use a CDN.
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
You can set up a jquery event listener so that once a list item is clicked, an event is executed. For example;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>List Click</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include the jQuery library -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul id="group">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
</ul>
<script>
$( "#group li" ).bind( "click", function() {
var selected_item = $(this).attr('id');
if(selected_item == "one"){
window.open('helpingkidswhostruggle.html','name','width=600,height=450');
}
});
</script>
</body>
</html>
So to explain the code;
You must assign id attributes to the ul and li tags.
The $( "#group li" ).bind( "click", function() { code looks for the list items with tags of li enclosed in an element with an id of group and assigns a click listener to them so that when they are clicked, a function is called and executed.
The var selected_item = $(this).attr('id'); code uses the attr('id') method to obtain the id of the clicked list item and assign it to variable selected_item. So now this is the use of assigning an id to the list items so that you can identify them.
This if(selected_item == "one"){ code of course checks to see which item has been clicked and the action to take if it has. You can play around with this and see what works for you.
Do not forget to include the jquery files otherwise the code will not work.
Try it and let me know if it helps or if you found a problem

Jquery Not Being Processed

The below Jquery does not run within my browser even though the syntax is correct( checked via online syntax checker) and the functions do run (tested with pure JS). Why is it that so?
I apologize in advance if the answer to this question is rather simple but after 15min of googling I could not arrive at an answer.
JAVASCRIPT:
document.getElementById('overlay').addEventListener('click', function( {
closeLightBox()
});
function closeLightBox() {
$("#overlay").fadeOut(1000);
}
function lightbox(x) {
}
HTML
<!DOCTYPE html>
<html>
<head>
<title> Lightbox </title>
<link rel="stylesheet" type="text/css" href="lightboxcss.css">
</head>
<body>
<div id = "overlay"> </div>
<img src="batman.jpg" alt="" href="javascript:void(0)" onclick="lightbox(1)" id="batman" style="height:100px;width:160px;margin-left:45%;margin-top:16%;">
<br><br><br><br>
<p> RANDOM TEXT STUFF </p><br><br>
<p> 328ueekfuuirgh40t43h8hohro8ht </p>
<script src="lightboxjs.js"> </script>
</body>
</html>
I assume that javascript code is located in your .js file "lightboxjs.js". Did you include the jQuery library anywhere?
If you don't, start by adding this line <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> before including your custom javascript file.
$(document).ready(function(){
//page is ready
$("#overlay").on("click",function(){
this.fadeOut(1000);
});
});
You cannot add an eventlistener if the dom isnt loaded. Also dont forget to include jquery before executing the upper script
...
Where are you calling the jquery lib? You need to load the jquery just above lightboxjs.js and may as well use jquery syntax to listen to the #overlay click event.

Ajax: Load content to a div from another div

I am trying to use ajax to change the content of a div (as html), when a link is clicked in that same div. I am not very skilled in ajax, so I am pretty sure that this is a noob question. I have tried searching the web for solutions, but I didn't manage to make anything work.
I have a div with the id "main" and inside it I am trying to make a link with the id "link01". When "link01" is clicked, I want "main" to load content from another div in another page ("txt2"-div in site2.html). But I can't get it to work.
Firstly, this is my index.html page:
<head>
<title>site1</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#link01').click(function() {
$('#main').load('site2.html #txt2', function() {});
});
});
</script>
<div id="main">
<a>
<div id="link01">link</div>
</a>
Main div where the content will change</div>
<br>
<br>
</body>
</html>
And this is my site2.html page:
<!DOCTYPE html>
<html>
<head>
<title>Site2</title>
<meta charset="UTF-8">
</head>
<body>
<div id="txt2">Text that will go into the main div at the index-page when link01 is clicked (contains links, images, etc)</div>
</body>
</html>
I have probably misunderstood something completeley.
There is a very bad practice way that may work... But you should really have a server side code that listens you your ajax call, and returns just the desired HTML fragment as a response. Having said that, try this, it MIGHT work (didn't check):
$(function() {
$('#link01').click(function(){
$.ajax({
url: 'site2.html',
type: 'GET',
success: function(data){
data = $(data);
var $div = $('#txt2', data);
$('#main').html($div);
}
});
});
});

Jquery Ajax .load() not funtional

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Collapse content</title>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs({
collapsible: true
});
$("#tabs-2").load("something.html");**
});
$(function() {
$( "#datepicker" ).datepicker({maxDate: new Date(1997,11,31)});
});
</script>
</head>
<div id="tabs">
<ul>
<li>Alienware and Alpha</li>
<li>More About</li>
<li>Contact Us</li>
</ul>
<div id="tabs-1">
<p>blah blah</p>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div> <br>
<div id="mini">
<p><span class="italics">Please complete the form</span></p>
<fieldset>
<form id="appForm" action="submit.php" method="post">
**Some form details here (avoided to make the post more readable)
</form>
</div>
</body>
</html>
here is my something.html code:
<html>
<head>
<title>Ajax tab 2 </title>
<meta charset="utf-8">
</head>
<body>
<p>This is p2!!</p>
</body>
</html>
I've already had a thread about this, but none of the suggestions were useful. So Im making another one. .load method does not produce any results at all. Intially i thought this was some sort of browser issue, hence i tried all possible browsers and even tried it on different OS's just to be sure. But it still doesn't work. There is no error displayed. In fact there is nothing from 'something.html' displayed on tab2(i.e "More about") at all. In brief, the .load method does not really load anything from 'something.html'
UPDATE: SOLUTION: this does not work locally, it works just fine when both the index file and 'something.html' are uploaded onto a server
If "something.html" is a file you've created yourself, maybe try to include that file as a link <link href="something.html"> in the header. Not sure if it's going to work but try.
When dealing with jQuery Ajax usually the url is where the server access the data. Get it? You probably have an external file so you try as mentioned above.
Surely somebody mentioned this in your other post... but you probably have to enclose it in a $(document).ready(. Otherwise, the javascript could execute before the #tabs-2 element loads.
$(document).ready(function(){
$("#tabs-2").load("something.html");
});
Check out the documentation for more info.
I have some notes about your question:
If you are testing, running your files with file protocol (opening your files with the browser) AJAX (XMLHttpRequest) will not work in some browsers, such as Chrome. But if you start your local server on localhost for example, your AJAX requests will work properly.
When loading partial content, you should not include it as a full HTML document, so get rid of the <html> and <body> wrappers for your partial content. something.html only should contain: <p>This is p2!!</p>
If you are including scripts that depends on DOM elements at <HEAD> then you should add the defer attribute to your <script> tags, OR move your <script> tags at the end of <BODY> OR you should wrap your code to run when the DOM is ready:
$(document).on("ready", function() { /* CODE HERE */ });
// Shorthand for $(document).ready()
$(function() { /* CODE HERE */ });

Javascript event delegation between included files

I have Index.asp
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--#include file="blocks/header.asp"-->
<!--#include file="blocks/bottom.asp"-->
<!--#include file="blocks/footer.asp"-->
</body>
</html>
blocks/header.asp
<div class="hideMeIamHeader"></div>
blocks/bottom.asp
<div class="hideMeIambottom"></div>
blocks/footer.asp
<div class="hideMeIamfooter"></div>
<button id="Hideheader">Hide Header</button>
<button id="Hidebottom">Hide bottom</button>
<button id="Hidefooter">Hide footer</button>
<script>
$(function() {
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});
</script>
How to make this example working? I cant access .hideMeIamHeader and .hideMeIambottom from footer.asp
UPDATE (SOLVED)
So index.asp must look like
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--#include file="blocks/header.asp"-->
<!--#include file="blocks/bottom.asp"-->
<!--#include file="blocks/footer.asp"-->
<script>
$(function() {
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});
</script>
</body>
</html>
The most likely scenario is that these items do not exist in the DOM yet at the time the click handlers are being set. You can rectify this by using jQuery's ready() function:
$(document).ready(function() {
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});
jQuery Documentation: https://api.jquery.com/ready/
Your code should be executed once DOM is ready,
$(document).ready( function(){
//Your code goes here
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});
More Explanation: Your code is being executed when file is being loaded, and not when whole page is loaded, so when Javascript page is loaded actually page and DOM elements are not created, so jquery is not able to find the elements.
So First you need to let load all the DOM content and then you and work on DOM elements, So you code should be always executed once DOM is ready...

Categories