Here is the HTML file I am using. I have no idea why the JS doesn't run. The console does not print any errors. Ideas?
<!doctype HTML>
<html>
<head>
<title>ProjectShare</title>
<!-- <script src = "socket.io/socket.io.js"></script> -->
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"/>
<script>
//Make sure DOM is ready before mucking around.
alert("Before jQuery.");
$(document).ready(function()
{
alert("Document is ready!");
$("documentList").remove();
alert("Removed the list.");
});
alert("After jQuery.");
</script>
<!-- <script type="text/javascript" src = "https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script> -->
</head>
<body>
<ol>
<li>ProjectShare</li>
<li>Guidelines</li>
<li>Upload</li>
<li>
<form>
<input type = "search" placeholder = "enter class code"/>
<input type = "submit" value = "Go"/>
</form>
</li>
</ol>
<ol id = "documentList">
<li>document1</li>
<li>document2</li>
</ol>
</body>
</html>
Script tags are not self closing. You must do <script src='...'></script>.
Also, you have to use a valid selector:
$(document).ready(function()
{
alert("Document is ready!");
$("#documentList").remove();
alert("Removed the list.");
});
Related
I have a Javascript file named loader.js which contains a function called initialize(). I want to call this function via jQuery. This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="loader.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a= $(this).text();
window.initialize= function{
};
initialize(a);
});
});
</script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main">
</div>
</body>
</html>
This is loader.js:
function initialize(a) {
$('#main').html= a;
}
I do not know what is wrong with this script, I have debug it jquery is working fine but funtion is not working correctly.
also I want that whenever the function is clicked again the div should be refreshed for example first it contain link1 but when link2 is clicked link1 should be removed inside the div how can i accomplish this task????
thanks in advance
You're not including the loader script. Add <script src='loader.js'></script> before the jQuery code.
The code in loader.js should be inside a jQuery(document).ready callback since it's now using jquery (the html method).
Also as #jiihoo pointed out you should use $('#main').html(a); instead of $('#main').html = a;.
You should change to code of loader.js to this.
function initialize(a) {
$('#main').html(a);
}
Heres the whole thing you could do.
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="loader.js"></script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main"></div>
</body>
</html>
Loader.js
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a = $(this).text();
initialize(a);
});
});
function initialize(a) {
$('#main').html(a);
}
I want to clone a div by clicking on ADD link. But when a div gets cloned then a new cloned div ADD link is not behaving like the previous ADD link. I want to achieve this functionality. Please help.
<!doctype html>
<html>
<head>
<title>Javascript prototype</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/javascript" src="prototyp.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function(){
$(".add_option").click(function(){
console.log("clicked !");
$('<div id="cloned">\n\
<input type="checkbox" >\n\
<input type="text"> \n\
<a href="#" ><span >ADD </span></a> \n\
<span> REMOVE</span>\n\
</div>').clone().appendTo('#cloned');
$('span').addClass('add_option');
});
});
</script>
<div id="cloned">
<input type="checkbox">
<input type="text">
<span class="add_option">ADD</span>
<span>REMOVE</span>
</div>
</body>
</html>
You need to Event delegation for attaching events to dynamically added elements:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(document).ready(function(){
$("body").on('click','.add_option',function () {
console.log("clicked !");
$('<div id="cloned">\n\
<input type="checkbox" >\n\
<input type="text"> \n\
<a href="#" ><span >ADD </span></a> \n\
<span> REMOVE</span>\n\
</div>').clone().appendTo('#cloned');
$('span').addClass('add_option');
});
});
NOTE: Also the Ids you give to your elements should be unique, As in your case the same id is passed to every div that you clone!
There are some mistakes:
replace id to class. then, use $('.cloned').
move add_option class name to <span>ADD</span>
when you click a use return false
just use to copy this code $('.cloned:last').after($('.cloned:last').clone());
<!doctype html>
<html>
<head>
<title>Javascript prototype</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/javascript" src="prototyp.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<script>
$(document).ready(function () {
$(document).on("click", ".add_option", function () {
console.log("clicked !");
$('.cloned:last').after($('.cloned:last').clone());
return false;
});
$(document).on("click", ".remove-option", function () {
$(this).closest(".cloned").remove();
return false;
});
});
</script>
<div class="cloned">
<input type="checkbox">
<input type="text">
<span>ADD</span>
<span>REMOVE</span>
</div>
</body>
</html>
EDIT: JSFiddle indicates the code itself is good. Can anyone give some insight into why it may not be executing properly as a chrome extension?
I'm trying to make a simple To-do list Chrome extension for myself. Here is my code:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title>To-Do-List</title>
<script src="popup.js"></script>
</head>
<body>
<div id="header"><h3 id="headtext">TO DO LIST</h3></div>
<form>
<input type="text" id="textbox" placeholder="Input"></input>
</form>
<button id="add">Add</button>
<p>TO DO LIST:</p>
<ul id="myList">
</ul>
</body>
</html>
And the Javascript:
<script type="text/javascript">
document.getElementById("add").addEventListener("click", function(){
var node = document.createElement("li");
var textnode = document.createTextNode(document.getElementById("textbox").value);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
)
</script>
When I enter text in the input field then click the button, nothing happens.
I've modified your code a bit by adding window.onload function.
See below. it works now.
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title>To-Do-List</title>
<script src="popup.js"></script>
<script type="text/javascript">
window.onload = function(){
document.getElementById("add").addEventListener("click", function(){
var node = document.createElement("li");
var textnode = document.createTextNode(document.getElementById("textbox").value);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
)
};
</script>
</head>
<body>
<div id="header"><h3 id="headtext">TO DO LIST</h3></div>
<form>
<input type="text" id="textbox" placeholder="Input"></input>
</form>
<button id="add">Add</button>
<p>TO DO LIST:</p>
<ul id="myList">
</ul>
</body>
</html>
try this:
window.onload = function () {
document.getElementById("add").addEventListener("click", function() {
var node = document.createElement("li");
var text = document.getElementById("textbox").value;
node.innerHTML = textnode;
document.getElementById("myList").appendChild(node);
});
};
I have the following code that works:
<html>
<head>
<script>
function loaded(){
oFormElement = document.forms['test form'].elements["txtStatus"];
oFormElement.value = "just loaded";
}
</script>
</head>
<body onload="loaded()">
<p>my first socket.io test</p>
<form id = "test form">
<input type="text" id ="txtStatus" value="">
</form>
</body>
</html>
now, if I include the reference to socket.io, it stops working
<html>
<head>
<script src="socket.io/socket.io.js">
<script>
function loaded(){
is this because socket.io handles from elements in it's own way, or is because the browser cannot find socket.io ? Is there any way to debug this/fix this ?
You need to close the first <script> tag...
<html>
<head>
<script src="socket.io/socket.io.js"></script>
<script>
function loaded(){
// ...
<html>
<head>
<script type='text/javascript' language='javascript' src="http://localhost/javascript/jquery-1.4.2.js">
</script>
<script type='text/javascript' language='javascript'>
$(document).ready(function(){
$("#button").mousedown(function(){
dropDownMenu = $("#dropDownMenu");
alert(dropDownMenu.options[0].text);
});
});
</script>
</head>
<body>
<select id="dropDownMenu"><option>Test</option></select><br>
<input id="button" type="button">
</body>
</html>
Try using the text() function:
$("#button").mousedown(function() {
var selectedItemText = $('#dropDownMenu :selected').text();
alert(selectedItemText);
});
Your code dropDownMenu = $("#dropDownMenu");
alert(dropDownMenu.options[0].text);
Here dropDownMenu is a JQuery object. So dropDownMenu.options is not defined. Use dropDownMenu[0] or dropDownMenu.get(0) to get the first DOM element which is a
<select>...</select>