How do I make my to do list able edit input through the edit button using jquery? It is a to do list and i want users to be able to edit the input
Thanks in advance
<header data-role="header">
<h1>To Do List</h1>
Home
</header>
<div role="main" class="todo- container">
<div class="input">
<input type="text" class="note" placeholder="Input new note..">
<button id="addButton">Add</button>
</div>
<ul class="todo-list">
<li>
<div class="button-center">
</div>
</li>
</ul>
<script>
$(document).ready(function() {
$('#addButton').click(function() {
var task = $(".note").val();
$(".todo-list").append(`<li> <span>Task: ${task}</span><div class="button-center"><button class="deleteButton">Delete</button><button class="editButtton">Edit</button> </div></li>`);
$(".note").val("");
});
$(document).on('click', '.deleteButton', function() {
$(this).parent().parent().remove();
});
});
$('#editButton').click(function() {});
</script>
I have done something like this : example
user will be able to edit by double click at the text and an input field will showed up. user can click the edit button once he/she finished edit and the text will be updated.
JS
$('#addButton').click(function() {
var task = $(".note").val();
$(".todo-list").append(`<li>Task: <span class='task'>${task}</span><div
class="button-center"><button class="deleteButton">Delete</button><button
class="editButton">Edit</button> </div></li>`);
$(".note").val("");
});
$(document).on('click', '.deleteButton', function() {
$(this).parent().parent().remove();
});
$(document).on('dblclick', '.task', function() {
var task = $(this).text();
$(this).text('');
$(this).append(`<input type="text" value="${task}" />`);
});
$(document).on('click', '.editButton', function() {
var task = $(this).parents().siblings('span').children('input').val();
$(this).parents().siblings('span').remove('input');
$(this).parents().siblings('span').text(task);
});
I've modify your code and added the edit functionality. It's supposed to work as you will expect so I will not say much. Kindly try this
$(document).ready(function() {
var $note = $('.note');
var $taskId = $('.task-id');
$('#addButton').click(function() {
var task = $note.val().trim();
var id = $taskId.val();
if( task.trim() === '' ){
// do nothing
}else if( id !== '' ){ // edit
$(".todo-list").find('[data-id="'+id+'"] .task').text(task);
}else{ // add todo
id = new Date().getTime(); // you can make it more unique
$(".todo-list").append(`
<li data-id="${id}">
<span class="task">${task}</span>
<div class="button-center">
<button class="deleteButton">Delete</button>
<button class="editButton">Edit</button>
</div>
</li>
`);
}
$note.val('').focus();
$taskId.val('');
$(this).text('Add');
});
// delete and edit action
$(document).on('click', '.deleteButton', function() {
$(this).closest('li').remove();
}).on('click', '.editButton', function(){
let $li = $(this).closest('li');
$note.val( $li.find('.task').text() );
$taskId.val( $li.data('id') );
$('#addButton').text('Update');
});
// cancel update if .note text is cleared
$('.note').on('input', function(){
if( $(this).val() === '' ){
$taskId.val('').focus();
$('#addButton').text('Add');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input">
<input type="text" class="note" placeholder="Input new note..">
<input type="hidden" class="task-id">
<button id="addButton">Add</button>
</div>
<ul class="todo-list"></ul>
Related
I want to create multiple images for an item. The problem I have is that when I click on the Add button, the input type = 'file' tag is created, but when I click on the created tag, it does not work and only the first option that was initially available works.
in Html
<button type="button" id="bAddImage"> Add </button>
<div class="m-t-15" id="row-file">
<div class="row-file-upload">
<div class="col-lg-6 col-md-6 m-t-10 row clearfix">
<button class="material-icons text-center bClear waves-effect bg-blue-grey">clear</button>
<div class="file-upload">
<div class="file-select">
<div class="file-select-name fileName">Choos File</div>
<div class="file-select-button">... Choose File</div>
<input type="file" class="chooseFile">
</div>
</div>
</div>
</div>
in Script
<script type="text/javascript">
$(document).ready(function () {
$('body').on('click',
'.bClear',
function (event) {
event.preventDefault();
var $el = $('.chooseFile');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
$('.chooseFile').trigger('change');
});
$('body').on('change', '.chooseFile', function () {
var filename = $(".chooseFile").val();
if (/^\s*$/.test(filename)) {
$(".file-upload").removeClass('active');
$(".fileName").text("فایل انتخاب نشده");
}
else {
$(".file-upload").addClass('active');
filename = filename.replace("C:\\fakepath\\", "");
if (filename.length > 30) {
filename = filename.substring(0, 30) + '...';
}
$(".fileName").text(filename);
}
});
$('body').on('click', '#bAddImage', function () {
$('#row-file').append($('.row-file-upload').html());
});
});
</script>
this is a simple Example for dynamically adding fileinput to HTML.
$(document).ready(function() {
var wrapper = $(".wrapper");
var add_button = $(".Add");
var uploadField = document.getElementById("file");
$(add_button).click(function(e) {
e.preventDefault();
$(wrapper).append('<div><input type="file" name="att"/>Remove</div>');})
$(wrapper).on("click", ".remove", function(e) {
e.preventDefault();
$(this).parent('div').remove();});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
+ Add
<div>
<input type="file" id="file" name="att">
</div>
</div>
I'm trying to add bullets to multiple textarea. This works fine when the textareas are not hidden, however I'd like to be able to add bullets to newly created textareas (click on the button "Add New". Ideally I'd like also newly created bullets to go to the next line rather than to be displayed side by side.
$(document).ready()
$('.add-bullet').click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022';
});
return false;
});
(function($) {
"use strict";
var itemTemplate = $('.workExperience-template').detach(),
editArea = $('.workExperience-area'),
itemNumber = 1;
$(document).on('click', '.workExperience-area .add', function(event) {
var item = itemTemplate.clone();
item.find('[name]').attr('name', function() {
return $(this).attr('name') + '_' + itemNumber;
});
++itemNumber;
item.prependTo(editArea);
});
$(document).on('click', '.workExperience-area .rem', function(event) {
editArea.children('.workExperience-template').last().remove();
});
$(document).on('click', '.workExperience-area .del', function(event) {
var target = $(event.target),
row = target.closest('.workExperience-template');
row.remove();
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textarea">
<div>Add bullet</div>
<textarea id="todolist" class="todolist" name="todolist" placeholder="Write something.." ></textarea>
</div>
<div class="hidden">
<div class="workExperience-template">
<div class="textarea">
<div>Add bullet</div>
<textarea id="list" class="list" name="tata" placeholder="Write something.." ></textarea>
</div>
</div>
</div>
<div class="workExperience-area">
<button type="button" class="add buttonBlueAddField">Add New</button>
</div>
You should attach click event on newly created anchors:
$(document).ready()
$('.add-bullet').click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022';
});
return false;
});
(function($) {
"use strict";
var itemTemplate = $('.workExperience-template').detach(),
editArea = $('.workExperience-area'),
itemNumber = 1;
$(document).on('click', '.workExperience-area .add', function(event) {
var item = itemTemplate.clone();
item.find('[name]').attr('name', function() {
return $(this).attr('name') + '_' + itemNumber;
});
++itemNumber;
item.find(".add-bullet").click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022\n';
});
return false;
});
$(".textarea").next().append(item);
});
$(document).on('click', '.workExperience-area .rem', function(event) {
editArea.children('.workExperience-template').last().remove();
});
$(document).on('click', '.workExperience-area .del', function(event) {
var target = $(event.target),
row = target.closest('.workExperience-template');
row.remove();
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textarea">
<div>Add bullet</div>
<textarea id="todolist" class="todolist" name="todolist" placeholder="Write something.." ></textarea>
</div>
<div class="hidden">
<div class="workExperience-template">
<div class="textarea">
<div>Add bullet</div>
<textarea id="list" class="list" name="tata" placeholder="Write something.." ></textarea>
</div>
</div>
</div>
<div class="workExperience-area">
<button type="button" class="add buttonBlueAddField">Add New</button>
</div>
Entering the data in the input field and on clicking the 'Add New' button, element should be added in the list. Here, help me to find out the error
$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
dataAdd.push($(this).data('#nameList'));
console.log(data.length);
});
});
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>
Seems like you need smth like:
$(document).ready(function () {
$("#addNew").click(function(){
$("#nameList").append("<li>" + $("#data").val() + "</li>");
});
});
This works:
var dataAdd = [];
$("#addNew").click(function() {
$('#nameList').append('<li>'+$('#data').val()+'</li>');
});
I don't understand what are you doing here...
dataAdd.push($(this).data('#nameList'));
You can access DOM elements with jQuery just referencing css-selector in brackets, like this $('css-selector')
That snippet does the trick:
$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
var value = $('#data').val();
if(value) {
dataAdd.push(value);
$('#nameList').append('<li>' + value + '</li>');
$('#data').val('');
}
console.log(dataAdd.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>
You have to append the li with the value of input type text not the button.
$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
dataAdd.push($('#data').val());
$('#nameList').append('<li>'+$('#data').val()+'</li>');
console.log(dataAdd.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>
$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
var htm='<li>'+$('#data').val()+'</li>';
$("#nameList").append(htm);
$('#data').val('');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>
I'm trying to create a form that allows the user to edit it similar to the old style of Facebook profile editing. I can't figure out how to change all the elements in a section at the same time. I can edit one at a time, but not all of them.
HTML:
<div id="wrapper">
<section id="core">
<div class="profileinfo">
<div class="gear">
<label>Primary E-Mail:</label><br />
<span id="pemail" class="datainfo">myaddress#googlemail.com</span>
Edit Info
<a class="savebtn">Save</a>
</div>
<div class="gear">
<label>Full Name:</label><br />
<span id="first" class="datainfo">Johnny</span>
<span id="middle" class="datainfo">James</span>
<span id="last" class="datainfo">Appleseed</span>
Edit Info
<a class="savebtn">Save</a>
</div>
<div class="gear">
<label>Birthday:</label><br />
<span id="birthday" class="datainfo">August 21, 1989</span>
Edit Info
<a class="savebtn">Save</a>
</div>
<div class="gear">
<label>Address:</label><br />
<span id="address1" class="datainfo">123 Test Lane</span><br />
<span id="address2" class="datainfo">APT 104</span><br />
<span id="city" class="datainfo">Anywhere</span>
<span id="state" class="datainfo">FL</span>
<span id="zip" class="datainfo">55555</span>
Edit Info
<a class="savebtn">Save</a>
</div>
<div class="gear">
<label>Occupation:</label><br />
<span id="occupation" class="datainfo">Freelance Web Developer</span>
Edit Info
<a class="savebtn">Save</a>
</div>
</div>
</section>
</div>
Javascript:
$(document).ready(function(){
$(".editlink").on("click", function(e){
e.preventDefault();
var dataset = $(this).prev(".datainfo");
var savebtn = $(this).next(".savebtn");
var theid = dataset.attr("id");
var newid = theid+"-form";
var currval = dataset.text();
dataset.empty();
$('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset);
$(this).css("display", "none");
savebtn.css("display", "block");
});
$(".savebtn").on("click", function(e){
e.preventDefault();
var elink = $(this).prev(".editlink");
var dataset = elink.prev(".datainfo");
var newid = dataset.attr("id");
var cinput = "#"+newid+"-form";
var einput = $(cinput);
var newval = einput.attr("value");
$(this).css("display", "none");
einput.remove();
dataset.html(newval);
elink.css("display", "block");
});
});
EDIT
Here is an image similar to what I want it to look like:
How do I build in the ability to edit each section? Here is a JSFiddle for you to look at.
It may not be the best approach but this will do what you want.
$(document).ready(function(){
$(".editlink").on("click", function(e){
e.preventDefault();
var datasets = $(this).prevAll(".datainfo");
var savebtn = $(this).next(".savebtn");
datasets.each(function(){
var theid = $(this).attr("id");
var newid = theid+"-form";
var currval = $(this).text();
$(this).html('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">');
});
$(this).css("display", "none");
savebtn.css("display", "block");
});
$(".savebtn").on("click", function(e){
e.preventDefault();
var elink = $(this).prev(".editlink");
var datasets = $(this).prevAll(".datainfo");
datasets.each(function(){
var newid = $(this).attr("id");
var einput = $("#"+newid+"-form");
var newval = einput.val();
einput.remove();
$(this).html(newval);
});
$(this).css("display", "none");
elink.css("display", "block");
});
});
I have a view with checkboxes, generated dynamically, and a button for chech/unchek all the checkboxes. I try the code bellow but, the checkboxes are not checked ob button click event. Please help.
Thank you.
View with checkboxes:
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
#for (int i = 0; i < #Model.workDaysList.Count; i++)
{
<div class="framed">
<div data-role="collapsible" data-collapsed="true" class="ui-btn-inner ui-corner-top ui-corner-bottom">
<h3>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">
<label for="#Model.workDaysList[i][0]" data-theme="c">
#Model.workDaysList[i][1].Substring(6, 2)/#Model.workDaysList[i][1].Substring(4, 2)/#Model.workDaysList[i][1].Substring(0, 4)
</label>
</span>
</div>
</h3>
#Model.detailDaysList[i][0] / #Model.detailDaysList[i][1]
<br />
#Model.detailDaysList[i][2] / #Model.detailDaysList[i][3]
<br />
#Model.detailDaysList[i][4] h
</div>
</div>
</div>
}
Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});
});
</script>
Try This:
<script lang='javascript'>
$(document).ready(function(){
$('#selectinvert').click(function(){
$("input[type='checkbox']").each(function (){
if($(this).is(':checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
});
})
});
</script>
there are closing }) missing..
btw: the toggle can written like this:
this.checked = !this.checked
Try to start with a basic HTML code and build upon that! Your model code might be braking your HTML. You can find the working prototype here!
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
<div class="framed">
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">First</span>
</div>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">Second</span>
</div>
</div>
$("#selectinvert").click(function() {
$("INPUT[type='checkbox']").each(function() {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});
As others suggest, you were missing closing brackets.
You could also shorten your code a bit:
$("#selectinvert").click(function() {
$("input[type='checkbox']").each(function() {
this.checked = !this.checked;
});
});
Also note that your problem has nothing to do with ASP.NET or jQuery UI.
try
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (!$(this).is(":checked")) {
$(this).attr('checked','checked');
} else {
$(this).removeAttr('checked','checked');
}
})
});
I think the code you have written will only only work when all the checkboxes are either checked or unchecked..
What happens when some of them are checked.. Your code will just toggle those..
Your logic should be dependent on the button and not the checkboxes..
$(document).ready(function() {
var isChecked = false;
$("#selectinvert").click(function() {
var $checkboxes = $("INPUT[type='checkbox']") ;
if(isChecked){
isChecked = false;
}
else{
isChecked = true;
}
$checkboxes.prop('checked' , isChecked);
});
});