i have a standart html label with value:
<label id="telefon" value="101"></label>
i like to edit this value by clicking on the label and enter on the appeared textbox new value (like value="202").
how can i do such a tricky thing?
i tried it with JQuery function, but it really dont wont to work:
$(function() {
$('a.edit').on("click", function(e) {
e.preventDefault();
var dad = $(this).parent().parent();
var lbl = dad.find('label');
lbl.hide();
dad.find('input[type="text"]').val(lbl.text()).show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});
http://jsfiddle.net/jasuC/ , Since you didnt provide the markup, take a look into this working example
$(document).on("click", "label.mytxt", function () {
var txt = $(".mytxt").text();
$(".mytxt").replaceWith("<input class='mytxt'/>");
$(".mytxt").val(txt);
});
$(document).on("blur", "input.mytxt", function () {
var txt = $(this).val();
$(this).replaceWith("<label class='mytxt'></label>");
$(".mytxt").text(txt);
});
You don't need the jquery.
To made almost all tag elements editable set the contentEditable to true.
So, you can change using the default features of a HTML.
// You can add an event listener to your form tag and code the handler which will be common to all your labels (Fiddle HERE)
// HTML
<form id="myform">
<label style="background-color:#eee" title="101">Value is 101<label>
</form>
// JS
$(function(){
$('#myform').on('click',function(e){
var $label = $(e.target), $form = $(this), $editorInput = $('#editorInput'), offset = $label.offset();
if($label.is('label')){
if( !$editorInput.length){
$editorInput = $('<input id="editorInput" type="text" value="" style="" />').insertAfter($label);
}
$editorInput.css('display','inline-block')
.data('editingLabel', $label.get(0))
.focus()
.keydown(function(e){
var $l = $($(this).data('editingLabel')), $t = $(this);
if(e.which == 13){
$l .attr('title', $t.val().replace(/(^\s+)|(\s+$)/g,''))
.text('value is now ' + $l.attr('title'));
// UPDATE YOUR DATABASE HERE
$t.off('keydown').css('display','none');
return false;
}
});
}
});
});
// A bit of CSS
#editorInput{display:none;padding:2px;border:1px solid #eee;margin-left:5px}
Related
The first input I can fill in the URL when clicking on an image.
When I add a new input and I click on the image, the URL appears on the button ADD not within the input with focus
https://jsfiddle.net/gislef/wyp4hzrd/
var input = '<label>Nome: <input type="text" name="images[]" /> X</label></br>';
$("input[name='add']").click(function( e ){
$('#inputs_add').append( input );
});
$('#inputs_add').delegate('a','click',function( e ){
e.preventDefault();
$( this ).parent('label').remove();
});
var focused = null;
$("input").on("focus", function() {
focused = $(this);
})
$("img").click(function() {
if (focused.length)
focused.val($(this).attr("src"));
})
With fixed inputs I can work properly:
Fill inputs with urls images
please try with delegate, such as below:
var input = '<label>Nome: <input type="text" name="images[]" /> X</label></br>';
$("input[name='add']").click(function( e ){
$('#inputs_add').append( input );
});
$('#inputs_add').delegate('a','click',function( e ){
e.preventDefault();
$( this ).parent('label').remove();
});
var focused = null;
$(document).delegate("input", "focus", function() {
focused = this;
console.log(focused);
});
$("img").click(function() {
if ($(focused).length)
$(focused).val($(this).attr("src"));
});
It was not adding the link properly since you are creating dynamic controls
$("input").on("focus", function() {
focused = $(this);
})
The above code was running and binding correctly to the first input inside your fieldset
You need to replace this code with a delegate on the parent fieldset that will contain the child input in order for dynamic controls to be registered.
$("fieldset").delegate("input", "focusin", function() {
focused = $(this);
})
Here is a working fiddle with what I suppose is the intended behavior
https://jsfiddle.net/wyp4hzrd/1/
I want to be able to ckick on the h2 in the .editable div and it should change into an input box. Then you can edit it and it will updat the input when you click out of it or press enter. This is what I have for it, i'm stuck:
jQuery:
$('.editable').on('click', function() {
var h3 = $(this)
var input = $('<input>').val(h3.text())
h3.after(input)
h3.hide()
input.on('blur', function(){
})
//blur
//keyup code 13 -- code 27 reset
})
jade: (petty much html)
div.edit-menu-page
div.title
h2 Edit Menu
div.menu-wrap
div.menu-category
div.menu-title
div.editable
h3 Meat
div.menu-items
div.menu-row
span.item-description New York Striploin
div.control-items
span.item-price 10$
span.delete X
.
Basically what you want to do is place a form element next to the original element, then when you're done, replace the form element with the original element.
Something like this should work:
$(document).on('click', '.editable', function() {
var $wrapper = $('<div class="editing"></div>'),
$form = $('<form action="#" class="edit-form"></form>'),
$input = $('<input type="text">');
// Place the original element inside a wrapper:
$(this).after($wrapper);
$(this).remove().appendTo($wrapper).hide();
// Build up the form:
$wrapper.append($form);
$form.append($input);
$input.val($(this).text()).focus();
});
$(document).on('submit', '.edit-form', function(e) {
// Don't actually submit the form:
e.preventDefault();
var val = $(this).find('input').val(),
$wrapper = $(this).parent(),
$original = $wrapper.children().first();
// Use text() instead of html() to prevent unwanted effects.
$original.text(val);
$original.remove();
$wrapper.after($original);
$original.show();
$wrapper.remove();
});
Edit: Here's the JSFiddle: http://jsfiddle.net/c0fb11qw/1/
<div contenteditable="true">
This text can be edited by the user.
</div>
full info: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
Here is a quick answer for you, http://codepen.io/someyoungideas/pen/mJWLXE. Looks like Jade doesn't play too nice with jQuery with the way your input works because it adds some spacing in the input.
$('.editable').on('click', function() {
var h3 = $(this)
var input = $('<input>').val(h3.text())
h3.after(input)
h3.hide()
input.on('blur', function(){
h3.text(input.val());
h3.show();
input.hide();
})
//blur
//keyup code 13 -- code 27 reset
})
Here is what you need:
Working JsFiddler: https://jsfiddle.net/t0hjxxgy/
HTML
<div class="editable">
<h3>Edit me</h3>
</div>
JS
$('.editable').on('click', function() {
var $editable = $(this);
if($editable.data("editing")) {
return;
}
$editable.data("editing", true);
var h3 = $("h3", this);
var input = $('<input />').val(h3.text())
h3.after(input);
h3.hide();
input.on('blur', function(){
save();
})
input.on('keyup', function(e){
if (e.keyCode == '13') {
save();
}
if (e.keyCode == '27') {
reset();
}
})
function save() {
h3.text(input.val());
input.remove();
h3.show();
$editable.data("editing", false);
}
function reset () {
input.remove();
h3.show();
$editable.data("editing", false);
}
})
I want to create a new element and assign this element the same event for onclick, which it has created it.
DEMO
$(function(){
var counter = 0;
$('.sub').click(function(event){
event.stopPropagation();
counter++;
$div = $(this); // makes more sense in the original code
$div.append('<div class="sub" title="subsub">subsub' + counter + '</div>');
//$div.find('.sub').click // <-- ?????
});
});
In my demo I want to create a new subsub for every sub, which was clicked. Than I want to add the same click event to the new subsub element.
Could anyone help me with this?
I've found nothing for this problem. Maybe I don't have the correct keywords for google or SO :/
Just use event Delegation
$(document).on('click', '.sub', function(event){
Your click events seem to be working correctly at this point,because you are using append which actually nests the new div inside the div that is clicked. Try using after and the functionality breaks.
$(function(){
var counter = 0;
$(document).on('click', '.sub', function(event){
event.stopPropagation();
counter++;
$div = $(this); // makes more sense in the original code
$div.after('<div class="sub" title="subsub">subsub' + counter + '</div>');
});
});
Check Fiddle
Why not create proper elements instead :
$(function(){
var counter = 0;
$('.sub').on('click', doStuff);
function doStuff(event) {
event.stopPropagation();
counter++;
var $div = $(this),
$sub = $('<div />', {'class':'sub',
title : 'subsub',
text : 'subsub' + counter,
on : {
click : doStuff
}
}
);
$div.append($sub);
}
});
I have a hidden select which should be automatically selected via a visible select, my jquery is:
$(document).ready(function() {
var selected_val = $('#id_foo option:selected').val();
$('#id_bar').val(selected_val);
$("#id_foo").change(function() {
selected_val = $(this).attr('value');
$('#id_bar').val(selected_val);
});
});
This works fine, but the page I am working on has the option to add a value to the (visible) select on the fly. How do I bind to this event and add this to the hidden list before updating the selected value?
The best way to tackle this is to update the hidden select with the new values when you update the visible one.
Or, as per my comment, you could populate the hidden select when the visible one is changed:
$("#id_foo").change(function() {
selected_val = $(this).attr('value');
//clear and re-populate all of hidden select here
$('#id_bar').val(selected_val);
});
This should do the trick:
$(function () {
var $bar = $('#id_bar');
var $foo = $('#id_foo');
$bar.val($foo.val());
$foo.change(function () {
var newValue = $(this).val();
if ($bar.find('[value="' + newValue + '"]').length === 0) {
$bar.append($('<option/>').val(newValue));
}
$bar.val(newValue);
});
});
Before setting the new value, checks if the value is an option. If it's not, add as an option.
This snippet correctly identifies the event and succesfully copies the select options from foo to bar. However it does not seem to set :selected correctly on either id_foo or id_bar and using DOMSubtreeModified feels hackish
$('#id_foo').bind("DOMSubtreeModified", function(){
var high = 0;
$('#id_foo').children().each(
function(){
if ($(this).val() > high) {
high = $(this).val();
}
}
);
$('#id_foo').val(high);
var new_options = $('#id_foo').clone();
$('#id_bar').html('');
$('#id_bar').append(new_options.children());
});
So, for now the best I could come up with:
$('#id_foo').bind("DOMSubtreeModified", function(){
location.reload();
});
I have a toggle that was just made for a class I am getting to work. I need to add in hidden HTML based upon the toggle state.. Basically it needs to submit with the form with the state of the button.. Would this be the best way to grab it? I am posting the form also.
Here is what I have.. When I click the button, it adds the example text, but I need it to go away when I click again..
$(document).ready(function () {
$(".visibilitybutton").click(function(){
$(this)
.toggleClass("hide")
.find("span").toggleClass("icon84 icon85")
$('.buttons_secondary').append("<input type='hidden'>");
});
});
$(document).ready(function () {
$('.visibilitybutton').toggle(function() {
var $button = $(this);
$button.prop("title","Invisible");
$button.find('span').removeClass('icon84').addClass('icon85');
$('.buttons_secondary').append('<input id="visibility_setting" class="hidden" type="hidden" />');
}, function() {
var $button = $(this);
$button.prop("title","Visible");
$button.find('span').removeClass('icon85').addClass('icon84');
// OR Remove by id
$('.buttons_secondary').find('#visibility_setting').remove();
});
});
You can remove the html you append by id or class like so:
$('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');
// Remove by class
$('.buttons_secondary').find('.hidden').remove();
// OR Remove by id
$('.buttons_secondary').find('#hdf_Test').remove();
Based off of your previous question, I think you should try this:
$(document).ready(function () {
$('.button').toggle(function() {
var $button = $(this);
$button.prop("title","Invisible");
$button.find('.icon85').toggleClass('icon85 icon84');
$('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');
}, function() {
var $button = $(this);
$button.prop("title","Visible");
$button.find('.icon85').toggleClass('icon84 icon85');
// Remove by class
$('.buttons_secondary').find('.hidden').remove();
// OR Remove by id
$('.buttons_secondary').find('#hdf_Test').remove();
});
});