I am trying to edit the text on a label.
I want to:
Show a label and hidden text Box.
On click of label: label gets hide and text Box shows where I can edit text.
On Enter, text Box should hide and label should display the entered text.
Here is the sample code.
But its not working as expected.
<h4>Editable labels (below)</h4>
<span class="k-link">
<label class="pull-left">Dashboard</label>
<input class="clickedit" type="text" id="731"/>
</span>
Demo
Check out this Demo.
Change the code from
$('.k-link').on('click', ".clickedit.prev()", function (event) {..
into
$('.k-link').on('click', ".pull-left", function (event) {..
And add inline css style for
<input class="clickedit" type="text" id="731" style="display:none"/>
Is this the functionality you want?
$(document).on('click', '#label', function() {
var that = $(this);
that.hide();
$('#731').removeClass('hidden');
});
$(document).on('focusout', '#731', function() {
var that = $(this);
var val = that.val();
that.hide();
$('#label').after('<span>' + val + '</span>');
});
.hidden { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4>Editable labels (below)</h4>
<span class="k-link">
<label id="label" class="pull-left">Dashboard</label>
<input class="clickedit hidden" type="text" id="731"/>
</span>
This works:
$(document).ready(function(){
$(".clickedit").hide()
$(".pull-left").on("click", function(){
$(this).hide()
$(".clickedit").show()
});
$(".clickedit").on("blur", function(){
$(this).hide()
$(".pull-left").text($(this).val()).show()
});
});
this is working check it
i have just edit the selector it was .clickedit.prev() and i have change it to .pull-left
$('.k-link').on('click', ".pull-left", function (event) {
$(this).hide();
$(this).next().show().focus();
event.stopPropagation();
});
http://jsfiddle.net/anisboukhris/qho0uLzv/
may be try this:
$(document).ready(function(){
$("#f1").hide();
$("#text").hide();
var $curr = $( "#start" );
$curr.css( "background", "#f99" );
$( "button" ).on('click',function() {
$curr = $curr.prev();// this will go to previous div as you have asked how to get previous element.
$curr.show();
});
$( "#label" ).on('click',function() {
$("#label").hide();
$("#text").show();
$( "#text" ).blur(function() {
$("#label").show();
$("#text").hide();
$("#label").html($("#text").val());
});
});
});
div {
width: 150px;
height: 40px;
margin: 10px;
float: left;
border: 2px blue solid;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="f1"><span id="label">Came to previous div</span><input type="text" id="text" /></div>
<div id="start"></div>
<p><button>Go to Prev</button></p>
Related
I have some html code with below structure. when I click on tag a with "moreCases" class,div with class "container-cases" is become show and when I click on "lessCases" div with class "container-cases" is become hide but tag a with "moreCases" do n't become show.how I can solve it?
HTML:
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
JavaScript:
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
You have to target the parent() before using prev():
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
.hide{
display: none;
}
.show{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
Remove the last .addClass('hide')
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show');
});
});
Working example
There is no need to iterate over the .moreCases & .lessCases instead you can simply add the click event to it. Beside since the click is on an a tag , prevent the default behavior by adding e.preventDefault
$(document).ready(function() {
$(".moreCases").click(function(e) {
$(this).next().removeClass('hide').addClass('show');
$(this).removeClass('show').addClass('hide');
});
$(".lessCases").click(function(e) {
e.preventDefault();
$(this).parent().removeClass('show').addClass('hide');
$(this).parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
I want to wrap each character to wrapped in a <span></span> and desire output is <span>a</span><span>b</span><span>c</span>.
I have tried following but its not helping.
JSFIDDLE
<div contenteditable="true" id="text1" type="text" placeholder="type something...">
$(function() {
$("#text1").keyup(function(event) {
$(this).wrapInner( "<span class='test'></span>" )
});
});
It outputs following; which is not what I required. Any help?
<span class="test">
<span class="test">
<span class="test">
<span class="test">ffdf</span>
</span>
</span>
</span>
Here is my solution. There is tag code below the input div, for control what is content of the div:
txt = $("#text1").html();
$("#out").text(txt);
$(function() {
$("#text1").keyup(function(event) {
txt = txt + "<span class='test'>"+String.fromCharCode(event.which)+"</span>";
$(this).html(txt);
$("#out").text($(this).html());
});
});
#text1 {
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>
<code id="out"></code>
Pure function of replacing char looks like:
txt = $("#text1").html();
$(function() {
$("#text1").keyup(function(event) {
txt += "<span>" + String.fromCharCode(event.which) + "</span>";
$(this).html(txt);
});
});
Here is another one where case-sensitive func keypress used along with preventDefault() to prevent a redundant character appear:
txt = $("#text1").html();
$(function() {
$("#text1").keypress(function(event) {
txt += "<span>" + String.fromCharCode(event.which) + "</span>";
event.preventDefault();
$(this).html(txt);
$("#out").text(txt);
});
});
#text1 {
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>
<code id="out"></code>
is this what you need ?
$(function(){
$("#text1").keyup(function(event) {
$('.test').each(function (index) {
var characters = $(this).text().split("");
$this = $(this);
$this.empty();
$.each(characters, function (i, el) {
$this.append("<span>" + el + "</span");
});
});
});
});
#text1 {
background: #ccc none repeat scroll 0 0;
height: 24px;
width: 127px;
}
<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>
<span class="test">ffdf</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
May be try using text() and do substr() ti get last character entered recently and add the <span>
$(document).ready(function() {
$("#text1").keyup(function(event) {
var txt = $(this).text();
$(this).wrapInner("<span class='test'>" + txt.substr(txt.length, txt.length - 1) + "</span>");
});
});
#text1 {
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something...">
You need to split the content by .split("")
var myText = $("#text").html();
var myTextArr = myText.split("");
$("#text").empty();
myTextArr.forEach(function(val, idx){
$("#text").append("<span class='test'>" + val + "</span>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='text'>ABC</div>
Since goal is to type/replace (simultaneously!), i have used this:
arr=[];
$(function() {
$("#text1").keyup(function(event) {
clean=$( this )
.contents()
.filter(function() {
return this.nodeType === 3;
}).text();
output="";
arr.push(clean.charAt(clean.length-1));
for(i=0;i<arr.length;i++) {
output+="<span class='test'>"+arr[i]+"</span>";
}
$(this).html(output);
//console.log(output);
});
});
#text1 {
border: 1px solid #ccc;
height:200px;
}
.test {
background:pink;
color:white;
margin-left:3px;
display:inline-block;
width:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>
So, first - filter just text inside div, and wrap it with desired html.
P.S. span CSS is here just for test purposes.
P.S. 2 Not sure about white spaces (and desired functionality) - but they can be removed, too...
Test without span CSS: https://jsfiddle.net/aau75w9q/4/ (produced HTML is what is required, if i understand correctly)
What about splitting your string first ?
$(function() {
$("#text1").keyup(function(event) {
$(this).text().split('').wrapInner( "<span class='test'></span>" )
});
});
If I click on radio button ,color changes to yellow,but if I double click on it, I want its original color i.e gray.
How should I do this?
JS
$(document).ready(function() {
$('input:radio').change(function() {
var $this = $(this);
$this.closest('.box').find('div.highlight').removeClass('highlight');
$this.closest('.q').addClass('highlight');
});
});
CSS
.q {
background: #ccc;
margin: 10 px;
}
.highlight {
background: #FC0;
}
HTML
<div class="box">
<div class="q">
<input type="radio" id="1" name="11" />
<label for 1>Radio Button1</label>
</div>
<div class="q">
<input type="radio" id="2" name="11" /`enter code here`>
<label for 1>Radio Button2</label>
</div>
</div>
use dblclick and click event
<script>
$(document).ready(function(){
$('input:radio').click(function(){
var $this = $(this);
$this.closest('.box').find('div.highlight').removeClass('highlight');
$this.closest('.q').addClass('highlight');
})
.dblclick(function(){
var $this = $(this);
$this.closest('.box').find('div.highlight').removeClass('highlight');
$this.closest('.q').removeClass('highlight');
});
});
</script>
I'm trying to make a to-do list with an edit button, that when clicked, will make added items editable, but am having trouble. I have the button created and everything, but when I click it nothing happens. Any advice would be greatly appreciated!
JavaScript
function editItem(){
var parent = $(this).parent();
if (!parent.hasClass('edit')) {
parent.addClass('edit');
}else if (parent.hasClass('edit')) {
var editTask = $(this).prev('input[type="text"]').val();
var editLabel = parent.find('label');
editLabel.html(editTask);
parent.removeClass('edit');
}
$(function(){
$(document).on('click', 'edit', editItem)
});
Looks like you are targeting <edit>, you are supposed to use .edit:
$(function(){
$(document).on('click', '.edit', editItem);
});
Working Snippet
$(function () {
function addItem () {
// append to the list
$("#todo-items").append('<li><span>' + $("#todo").val() + '</span> <small>Edit • Delete</small></li>');
// clear the text
$("#todo").val("");
}
$("#todo").keydown(function (e) {
// if enter key pressed
if (e.which == 13)
addItem();
});
// on clicking the add button
$("#add").click(addItem);
// delegate the events to dynamically generated elements
// for the edit button
$(document).on("click", 'a[href="#edit"]', function () {
// make the span editable and focus it
$(this).closest("li").find("span").prop("contenteditable", true).focus();
return false;
});
// for the delete button
$(document).on("click", 'a[href="#delete"]', function () {
// remove the list item
$(this).closest("li").fadeOut(function () {
$(this).remove();
});
return false;
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; text-decoration: none;}
input, li {padding: 3px;}
#todo-items small {display: inline-block; margin-left: 10px; padding: 2px; vertical-align: bottom;}
#todo-items span:focus {background-color: #ccf;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<input type="text" id="todo" />
<input type="button" value="Add" id="add" />
<ul id="todo-items"></ul>
I am trying to select one of the Item element, then change the background color to blue when selected (disable any other item from changing background color i.e. only one element can be selected) and then submit the form. I would only like to submit when one of the item is selected else alert.
$(document).ready(function(){
$('form').on('click', 'div', function(e) {
e.preventDefault();
$('#done').attr('disabled','disabled');
$('input').removeClass('bluebg');
$('div').removeClass('bluebg');
$(this).addClass('bluebg');
});
$('#ok').click(function() {
if($('div').hasClass('bluebg'))
{
document.location.href='page.aspx';
}
else { alert('Item is not selected');}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div id="item1">Item1</div>
<div id="item2">Item2</div>
<div id="item3">Item3</div>
<input type="button" value="OK" id="ok" />
</form>
Here's how output should look:
In order to run your example, I downloaded the jquery version that I am showing in the head and basically I applied 3 things:
1) Keep the id of the selected item with the variable selectedId.
2) Change your button input for a submit input and add the image with CSS.
3) Add a hidden input to store your selection.
<html>
<head>
<script src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
.bluebg {
background-color: blue;
}
.ok-button {
/* Change this for your image location */
background: url(OK.gif);
/* Adjust according to your image */
width: 20px;
height: 20px;
}
</style>
<script>
var selectedId = null;
$(document).ready(function() {
$('form').on('click', 'div', function(e) {
e.preventDefault();
$(this).addClass('bluebg');
if (selectedId != null) {
$('#' + selectedId).removeClass('bluebg');
}
selectedId = $(this).attr('id');
$('#myItem').val(selectedId);
});
$('#myForm').submit(function() {
if (selectedId != null) {
return true;
}
alert('Item is not selected');
return false
});
});
</script>
</head>
<body>
<form id="myForm" action="page.aspx" method="POST">
<div id="item1">Item1</div>
<div id="item2">Item2</div>
<div id="item3">Item3</div>
<input id="myItem" name="myItem" type="hidden" />
<input type="submit" class="ok-button" value="" />
</form>
</body>
your code works:
EDIT: my suggestion is to add an identifier to your form, and use more specific selectors, because with $('div').removeClass('bluebg'); you're removing the class from all of your divs inside the page.
$(document).ready(function(){
$('#myform').on('click', 'div', function(e){
e.preventDefault();
$('#done').attr('disabled','disabled');
$('#myform input').removeClass('bluebg');
$('#myform div').removeClass('bluebg');
$(this).addClass('bluebg');
});
$('#ok').click(function(){
if($('#myform div').hasClass('bluebg'))
{
document.location.href='page.aspx';
}
else { alert('Item is not selected');}
});
});
form div {
padding:10px 0;
}
.bluebg {
background:blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<div id="item1">Item1</div>
<div id="item2">Item2</div>
<div id="item3">Item3</div>
<input type="image" src="OK.gif" id="ok" />
<form>