I"m making a very simple to-do list with jquery. I have an input box for adding thing and once entered it will print out that underneath:
HTML:
<html>
<head>
<title>My to-do list</title>
<link rel="stylesheet" href="css/list.css" >
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/list.js"></script>
<div id="empty-top"></div>
<div align= "center" class="wrapper">
<h2>Add thing to your to-do list</h2>
<input id='input' type="text" placeholder="To-do-list" >
</div>
<div class = "things">
</div>
</body>
</html>
my js file:
$(function(){
$("#input").keypress(function(e){
if(e.which == 13){
var content = $("#input").val();
$("<li>" + content + "<input id= 'check' type='checkbox'> </li>").appendTo(".things");
};
});
//I want to check if the box is checked. If it is then I want to insert the tag to cross that item. This function, however does not work. I also tried ("input").is(":checked") or ("input").prop("checked",true) but still doesn't do what I wanted.
$("#check").click(function(){
var box = $(this);
$("<del>").insertBefore("<li>");
$("</del>").insertAfter("</li>");
});
});
Thank you!!!!!!!!
Firstly, you can't append LI elements to a DIV, it should be an UL or OL parent element, and you can't wrap the LI in a DEL, as a DEL element can't be a child of an UL, so you have to wrap the inner element, and unwrap it when the checkbox is unchecked again.
As for the event handler, you can attach that when you create the element, and you should be listening to the change event etc.
$(function () {
$("#input").keypress(function (e) {
if (e.which == 13) {
var content = $("#input").val();
var li = $('<li />', {
text : this.value
}),
inp = $('<input />', {
'class': 'check',
type : 'checkbox',
on : {
change: function() {
if (this.checked) {
$(this).closest('li').wrapInner('<del />');
}else{
$(this).unwrap();
}
}
}
});
$('.things').append( li.append(inp) );
};
});
});
FIDDLE
To see if your checkbox is checked, you can use:
$("input").get(0).checked
I would suggest adding a class in your CSS:
.complete{text-decoration:line-through}
And then add the complete class if checked
if($("input").get(0).checked){
$('corresponding-list-item').addClass('complete');
}
Related
I want to select or type a text in a combox with the frameworks w2ui. When i type on the key "Enter", i would get the value in the combobox to push this value in a array (see my addItem function in my code). I don't know how to access the string in the combobox ?
The documentation for this combo is here : http://w2ui.com/web/docs/1.5/form/fields-list
I have made a jsfiddle about what i'm trying to do here :
https://jsfiddle.net/espace3d/bLughmy9/
This is for a simple todo list with tag.
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: fields-3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div style="height: 10px"></div>
<div class="w2ui-field w2ui-span3">
<label>Combo:</label>
<div> <input type="combo"> <span class="legend">You can type any text</span> </div>
</div>
<div style="height: 20px"></div>
<style>
.w2ui-field input {
width: 200px;
}
.w3ui-field > div > span {
margin-left: 20px;
}
</style>
<script type="text/javascript">
var data={
description:["georges","henry"],
}
var addItem=function(item){
console.log(item)
data.description.push(item)
data.description.sort();
}
$('input[type=combo]').w2field('combo', {
items: data.description,
});
$( 'input[type=combo]' ).keypress(function(event) {
if(event.key == 'Enter'){
console.log( "Handler for .keypress() called." );
/////////////////////////////////////////
//WHAT I WANT TO DO
//addItem(something)
}
});
</script>
</body>
</html>
You can access the w2field object by calling $element.w2field().
After that, you can access the content by calling get() on the w2field object.
Side note: get() may return an object, e.g. if your items are objects in the form { id: 123, text: "my text" }, which would be valid for w2ui combo box or list fields.
In your case, you can change the code as follows:
$( 'input[type=combo]' ).keypress(function(event) {
if(event.key == 'Enter'){
console.log( "Handler for .keypress() called." );
var w2ui_field = $(this).w2field();
var value = w2ui_field.get();
addItem(value);
w2ui_field.options.items = data.description;
}
});
Note that you will have to re-assign the new items to the w2field options, if you want to display them in the combo box.
If you don't want that, you can ommit the w2ui_field.options.items = data.description; part.
Updated fiddle: https://jsfiddle.net/k548j0w1/
I had the same problem as you.
To address my problem, I got the JSON object item of the list and got its id or text in the COMBOBOX as follows.
$('#yourlistid').w2field().get().id
$('#yourlistid').w2field().get().text
I have a focusout event
$('.alpha').on("focusout", function () {...});
and I want want to trigger it from somewhere else in the code.
I tried $('#input12').focus().blur();
and also tried $('#input12').trigger("focusout")
edit: I am using a dynamically generated elements.
but no luck there...
the element #input12 has the class name alpha so I expect The focusout event to be triggered.
Is there any way of getting it done?
here is a jsfiddle example of when I am trying to do https://jsfiddle.net/jnmnk68d/
You need to delegate your events to a non-dynamic parent element.
In this example, we listen for focusout events on the form but only fire our function if the event's target matches the selector (in this case ".alpha"). This way the event can be fired on any elements that match now or in the future.
$("form").on("focusout", ".alpha", function() {
console.log("focusout happened!");
});
Here's a full demo which allows you to see how using delegated events we are able to trigger the event on dynamically inserted content.
$(function() {
$("form").on("focusout", ".alpha", function(e) {
console.warn("focusout triggered on " + e.target.outerHTML);
});
//example trigger
//click the link to trigger the event
$("a").on("click", function(e) {
e.preventDefault();
$("#input12").trigger("focusout");
});
//demo injecting content
//click the create button then focus out on the new element to see the delegated event still being fired.
var i = 12;
$("form").on("submit", function(e) {
e.preventDefault();
var id = "input" + (++i);
$(this).find("fieldset").append("<input id='" + id + "' class='alpha' placeholder='" + id + "' />");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<input id="input12" class="alpha" placeholder="input12" />
<input type="submit" value="create new" />
</fieldset>
</form>
trigger on input12
Using [0] on the jQuery element works! Also kontrollanten options works too! And doing a normal trigger on focusout too!
$(".alpha").on("focusout", function(e){
console.log(e.type, true);
});
//option 1
$('#input12')[0].focus(); //vanilla
$('#input12')[0].blur(); //vanilla
//option 2
$('#input12').trigger('focusout');
//option 3
$('#input12').trigger('blur');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="alpha" id="input12" />
Here is a working example taken from the jQuery docs.
var focus = 0,
blur = 0;
$("p")
.focusout(function() {
focus++;
$("#focus-count").text("focusout fired: " + focus + "x");
})
.inputs {
float: left;
margin-right: 1em;
}
.inputs p {
margin-top: 0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>focusout demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="inputs">
<p>
<input type="text"><br>
<input type="text">
</p>
</div>
<div id="focus-count">focusout fire</div>
</body>
</html>
Maybe if you add your full code I can be of better help?
Hope this helps!
See this code, it will call focusout 1second after focus has happend.
$('.alpha').on("focusout", function() {
console.log('FOCUSOUT!');
});
$('.alpha').on("focus", function() {
var self = $(this);
window.setTimeout(function() {
self.focusout();
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" class="alpha" />
I found out what seemed to be wrong with my code..
first of all I changed my event to use delegation and I connected it to a non dynamic element (element that was not added dynamically) just as some here advised.
I also needed to call the trigger function inside a setTimeout because it turns out that it takes a while to render the dynamically added element, so using the setTimeout did the trick.
Thank you all for helping out!
I need your help,
I can't seem, for the life of me, be able to figure as to why I cannot set the $("#fileno_list").css("display", "none"); Ie. when the user hasn't quite made a selection and decides to click elsewhere on the page. Then the dropdown box should close. (display: none).
Here's a picture of the problem:
Here's the code in Question:
<script type="text/javascript">
$(document).ready(function() {
$("#fileno_list ul").focusout(function() {
$(this).css("display", "none");
});
});
function test() {
var rs_count = 3
if (rs_count > 1) {
for (var x = 0; x < rs_count; ++x) {
$("#fileno_list").append('<li>'+x+'</li>');
}
$("#fileno_arrow").css("display", "block");
}
$("#fileno_arrow").click(function() {
$("#fileno_list").css("display", "block");
});
$("#fileno_list li").click(function(e) {
var select = $(this).closest('#fileno_list')
select.find(".selected").removeClass('selected');
$(this).addClass('selected');
$("#fileno").val( $.trim( $(this).html() ) )
$("#fileno_list").css("display", "none");
});
$("#fileno").val( $("#fileno_list li").eq(0).html() )
}
</script>
Here is the HTML Markup:
<div class="field_container">
<div class="field_wrapper"><input type="text" class="field" id="fileno"></div>
<div id="fileno_arrow"></div>
<ul id="fileno_list"></ul>
</div>
<br>
<br>
<input type="button" onclick="test()" value="click me">
<br>
Assuming your select tag has an id, you can use event object to check which element was clicked and show/hide based on that.
$(document).click(function(e) {
if(e.target.id === "idOfSelect")
$("#idOfSelect").show();
});
How do I add an onClick listener to a div.
I want to change the name of a div to divclass active if it was inactive previously & then remove the word 'active' if user click on the list again.
I'm at a loss how to do this.
This is what I've tried so far
<script>
$function tog(){
$(this).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
where the div whose class name I want to change is defined as below
<div id="dd" onclick="tog()" class="wrapper-dropdown-4">
<!--something-->
</div>
I've tried this..
<html>
<head>
<script>
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
</script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="dd" class="wrapper-dropdown-4">
ddddd
</div>
</body>
</html>
What's wrong with this now?
I'm inspecting the element id via chrome developer's tool & I don't see any change using this code. So, can anyone please help?
Thanks. :)
The only script you need is
$(function(){
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
});
Demo: Fiddle
you have to pass the object $(this) is not recognizable , use tog(this)
<script>
function tog(obj)
{
$(obj).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
<div id="dd" onclick="tog(this)" class="wrapper-dropdown-4">
<!--something-->
</div>
not the best way to do it, you can bind the event ,by registering the click in the event.
Here's what I'm trying to do:
I have an input field one can use to add entries to a todo list. I use JQuery to display a sorted list of entries after the user clicks 'Add'. I also made the list sortable (You can change the order by mouse drag using jQuery.) Now what I want to bold an individual list item when it is double-clicked. Somehow I'm not getting the jQuery to select the right item...
Here's my code.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>Tadum</title>
</head>
<body>
<h2>Tadum - The ToDo List</h2>
<h3>Enter New ToDos</h3>
<form id="addForm">
<input type="text" name="ToDoListItem"></input>
</form>
<div id="button">Add!</div>
<h3>Your ToDos</h3>
<ol class="todolist"></ol>
</body>
</html>
CSS:
.todolist li{
font-weight: normal;
}
.todolist {
font-family:garamond;
color:#cc0000;
}
Javascript
$(document).ready(function() {
$('#button').click(function(){
var toAdd = $('input[name=ToDoListItem]').val();
$('.todolist').append('<li class="item">'+toAdd+'</li>');
$('#addForm')[0].reset();
});
$('ol').sortable();
$('ol').css('cursor', 'pointer');
$('.todolist li').dblclick(function(){
$(this).css('font-weight', 'bold');
});
});
NOTE:
Somehow what works is if I replace the .list li in jQuery and in the CSS stylesheet with a simple ol. Then a doubleclick displays all items in the list (which is, of course, not what I want). But somehow I can't figure out how to only select the individual <li> that is doubleclicked with jQuery...
(I also tried a bunch of variations on this. For example, only use 'li' to select the doubleclicked item or use 'ol li', or '.item li'. None of them work.)
You need to bind the dblclick event handler to the newly added list items, like this:
$(document).on('dblclick', '.todolist li', function(){
$(this).css('font-weight', 'bold');
});
Please note that this doesn't toggle the style, but just makes them bold on double click. If you double click again it won't do anything.
Also if I may suggest some other changes to your JavaScript code: Your form can be normally submitted like any other form, for the purposes of this to do list anyways. I've also added a label to the HTML <form> for accessibility purposes.
$(document).ready(function() {
$('#addForm').submit(function(e){
e.preventDefault();
$('.todolist').append('<li class="item">' + $('#ToDoListItem').val() + '</li>');
$(this)[0].reset();
});
$('ol').sortable().css('cursor', 'pointer');
$(document).on('dblclick', '.todolist li', function() {
$(this).css('font-weight', 'bold');
});
});
HTML
<form id="addForm">
<label for='ToDoListItem'>Item:</label>
<input type="text" id="ToDoListItem" />
<button type='submit'>Add!</button>
</form>
You are adding the li items after the document was created. So you need to use "on" method so that you can trigger the click on the newly created items afterwards.
$(document).ready(function() {
$('#addForm').submit(function(e){
e.preventDefault();
var toAdd = $('#ToDoListItem').val();
$('.todolist').append('<li class="item">'+toAdd+'</li>');
$('#ToDoListItem').reset();
});
$('ol').sortable().css('cursor', 'pointer');
$(document).on('dblclick','li.item',function(){
$(this).css('font-weight', 'bold');
});
});