I am trying to reproduce some thing that works on codecademy: https://www.codecademy.com/en/courses/web-beginner-en-v6phg/2/5?curriculum_id=50a3fad8c7a770b5fd0007a1
However, when I copied down the html, css, and js files and ran it with google chrome, nothing was working. I noticed the missing <script> link to Jquery and added it, and fixed the 'add' function; however the 'remove part' never worked.
Ps. I made sure the script is correctly linked by adding an alert, which fired.
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Checklist</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
</body>
</html>
and jquery (js) file:
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
$('input[name=checkListItem]').val('');
});
$(document.body).on('click', '.item', function(event) {
$(this).remove();
});
});
I just found out the issue to be using old version of jQuery. You are using 1.4.2, which doesn't have the .on() function.
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<!-------------------------------------------------------^^^^^
Solution: Use the latest version of jQuery 1.x, which is 1.12.
From the manual:
I would really suggest you to check the console first before posting something here.
If you sticky with old library then use .live() instead of .on(). Hope this will work for you.
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
$('input[name=checkListItem]').val('');
});
$(".item").live('click', function() {
$(this).remove();
});
});
Demo: https://jsfiddle.net/8s19ehh8/5/
Related
just want to ask if someone has done a workaround regarding jquery events not being called when field is created using jquery or ajax.
I have a date field in which works fine if it coded using the default html code. What I want to do is I can add as many dates as i want but the .datepicker() event was not triggered if it is created using jquery.
Here is my code:
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class = "date_fld">
<p>Date: <input type="text" id="datepicker"></p>
</div>
<br/>
<br/>
<button class = "add">Add new Date</button>
</body>
</html>
<script>
$(function(){
$( "#datepicker" ).datepicker();
});
$(document).on("click", ".add", function(){
$(".date_fld").append('<p>Date: <input type="text" id="datepicker"></p>');
});
</script>
Any help would be much appreciated.
You shouldn't really be appending multiple elements with the same Id to the dom. You could have an increasing variable to run something like the following
<script>
var x = 0;
$(document).on("click", ".add", function(){
$(".date_fld").append('<p>Date: <input type="text" id="datepicker' + x + '"></p>');
$( "#datepicker" + x ).datepicker();
x++;
});
</script>
Have you tried the following:
<script>
$(document).on("click", ".add", function(){
$(".date_fld").append('<p>Date: <input type="text" id="datepicker"></p>');
$( "#datepicker" ).datepicker();
});
</script>
if the above answers doesnt work for you, just FYI u can use this code i use when everything fails.
function loadjsfile(filename){
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
loadjsfile("myscript.js") //dynamically load and add this .js file
This code will make your html load a js file inside.
You could assign the new object to a variable, append it, then initialize the datepicker to get around having to search the DOM for the newly created element first.
$(document).on("click", ".add", function(){
var newDatePicker = $('<p>Date: <input type="text"></p>');
$(".date_fld").append(newDatePicker);
newDatePicker.datepicker();
});
I recently started JQuery and I need to create a list using the datepicker JQuery function. The problem starts with my prepend because I have to prepend the date I get from the datepicker, the event AND a new button to ERASE whatever's in that line (so the button must be prepended along the list item). I'm having some trouble with this part.
This is the code I have:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display month & year menus</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="css.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
$(document).on('click', '#bta', '#apagar', function () {
if ($('#datepicker').val() != '' && $('#evento').val() != '' ) {
$('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + $('<input type="button" id="apagar" value="apagar" />') + '</p>');
$('input').val('');
}
});
</script>
</head>
<body>
<div id="box">
Lista de Tarefas:
<br><br>
Date: <input type="text" id="datepicker">
Event: <input type="text" id="evento"> <button id="bta" class="bta">+</button>
<div id="caixa"> </div>
</body>
</div>
</html>
I'm pretty sure this is probably very simple but I've only now started looking around and everything I try to search is either overly complex or doesn't resolve my issue... of course my inability to implement the solutions I find might be very well a problem too.
This is to help visualize my problem
jQuery.prepend takes argument that are htmlString or Element or Array or jQuery elements. You choose a htmlString, but are adding a jQuery object to this string. This will obviously not work.
What do we actually want? Well, we want to create a <p> tag, then append the datepicker value, the event value and then the button.
var $p = $("<p></p>");
$p.append($('#datepicker').val(), $('#evento').val(), $('<input type="button" id="apagar" value="apagar" />'));
$('#caixa').prepend($p);
Alternatively, skip the step where you turn a string into a jquery object, back into a string.
$('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + '<input type="button" id="apagar" value="apagar" /></p>');
Jquery .append is not working in firefox or safari but .val does.
Interestingly the same code works fine in IE.
code:
<head>
<link rel="stylesheet" type="text/css" href=" https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type = "text/javascript">
$(document).ready(function () {
$("#notes").change(function () {
$('#notes').val($('#notes').val() + "Test1");
$('#notes').append('Test2');
});
});
</script>
<textarea rows="10" name="Notes1" id="notes" style="width: 100%" ><?php
if (isset($_SESSION['order'])) {
echo $_SESSION['order'][0]['tNotes'];
}
</textarea>
So the above code works fine with both Test1 and Test2 being added to the textarea in Internet explorer BUT only the .val works Test1 in FF/safari and .append does not.
Why is this? any help or alternatives to get an equivalent (appends text to the place that was edited and not just to the bottom)
EDIT :
(appends text to the place that was edited and not just to the bottom)
Use val() to make it works in every browsers.
See this updated fiddle
$(document).ready(function () {
$("#notes").change(function () {
insertAtCaret($(this).prop('id'),"this");
$(this).val($('#notes').val() + "here");
});
});
Note - I use a function from this SO post :
Inserting a text where cursor is using Javascript/jquery
Textarea is an input container type, so you have to use the .val() method to set the value of your element.
.append() works in IE because IE doesn't care about standards.
I am trying to make a mouse effect with a gif file and I found the following code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function(){
$("body").mousemove(
function(e){
$("<img src='http://www.favicon.cc/logo3d/618187.png' />")
.css({
'position':'absolute',
'top':e.pageY+5,
'left':e.pageX+-15,
'width':'30px',
'height':'30px'
}).prependTo( $(document.body))
.fadeOut(100, 'linear', function(){
$(this).remove();
});
});
});
</script>
</body>
When I ran the html file I cannot see anything, for it, I think I am making a mistake in the code, Could anybody help me to fix?
Attach the mouse listener to $(document) instead of $('body').
Also in your code you are missing your closing </head> and start <body> tag (that you were using in the selector).
Demo here
While you have few errors in the code, it works fine.
The reason you don't see anything in firefox is that the body of the HTML is empty and the stars won't show up unless there's content.
It works fine on chromium and rekonq.
Just add content, and it will work fine
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function(){
$(function(){
$("html").mousemove(
function(e){
for(i = 0; i < 5; i++){
$("<img src='http://www.favicon.cc/logo3d/618187.png' id='hover_" +i+"' />")
.css({
'position':'absolute',
'top':e.pageY+i*5,
'left':e.pageX+i*10,
'width':'30px',
'height':'30px'
}).prependTo( $(document.body))
.fadeOut(100, 'linear', function(){
$(this).remove();
});
}
});
});
});
</script>
</head>
<body>
<h1> Add content </h1>
<p> some content </p>
</body>
</html>
Test jsfiddle
you can change the dimensions as you want. If you want you can create an array with the given dX and dY changes and use that to position the images.
or try this, Test jsfiddle
I put it all in one page and it should work and is not working:
<html>
<head> <link href="css_js/styles.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.2" src="css_js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="css_js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript">
function popup() {
alert('test');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
popup.html('<p>Where is pancakes house?</p>');
popup.show('fast');
}
$('button').click(popup);
</script>
</head>
<body>
<div class='newpopup'></div>
<button>popup</button>
</body>
</html>
I want to make a simple popup / dialog with Jquery but it is not working at all. What is wrong with it?
Call the function on document.ready
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
OR
$(function(){
$('button').click(function(){
popup();
});
})
You should run your function in jQuery style:
$('button').click(function() {
popup();
return false; //optional
}
Are you sure the src reference is valid when you're including jquery? I've got your code working fine on this jsfiddle using the Google-hosted versions of JQuery and JQuery-ui.