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/
Related
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 am trying to create jQuery plugin which needs to trigger on keyup of input tag.
But, somehow its not working :(
I've tried it so far:
JS:
$.fn.search_panel = function() {
if($(this).prop("tagName").toLowerCase() == 'input'){
var input_str = $.trim($(this).val());
console.log($(this));
onkeyup = function(){
console.log(input_str);
}
}
};
Plugin Initialization
$(document).ready(function(){
$('input').search_panel();
});
HTML:
<input type="text" />
From the above code, it only console when page loads for the first time, but after entering anything in input box it doesn't console.
You're inadvertantly binding to the window's onkeyup event. You should use $(this).on instead to bind to the individual keyup event on each input:
$.fn.search_panel = function() {
// Iterate all elements the selector applies to
this.each(function() {
var $input = $(this);
// Can probably make this more obvious by using "is"
if($input.is("input")){
// Now bind to the keyup event of this individual input
$input.on("keyup", function(){
// Make sure to read the value in here, so you get the
// updated value each time
var input_str = $.trim($input.val());
console.log(input_str);
});
}
});
};
$('input').search_panel();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input><input><input><input>
Add keyup event inside plugin and bind it to current input,
$.fn.search_panel = function () {
if ($(this).prop("tagName").toLowerCase() == 'input') {
$(this).keyup(function () {
var input_str = $.trim($(this).val());
console.log($(this));
console.log(input_str);
});
}
};
Demo
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}
I'm having trouble to convert all lower case to upper case in a text box:
<body>
<input type="text" id="input_1" class="allcaps"/>
<input type="text" id="input_2" class="allcaps"/>
</body>
$(document).ready(function () {
//trigger ng event
$('.alcaps').live("keyup", function () {
var fin = $('.alcaps').val();
$('.alcaps').val(fin.toUpperCase());
});
});
The first input box transforms its contents to capitals, but the text I put in the first box is also copied to the second input...
When using the class as selector you're selecting all input boxes with that class and setting the value to the same as the first one. Use the this keyword to target only the current textbox :
$(document).ready(function() {
$(document).on('keyup', '.alcaps', function() {
var fin = this.value;
this.value = fin.toUpperCase();
});
});
FIDDLE
You can use this which refers to your current input, also note than live is deprecated, you can use on instead:
$(document).on("keyup", ".alcaps", function () {
this.value = this.value.toUpperCase()
});
User this inside the handler:
$('.alcaps').live("keyup", function () {
var fin = $(this).val();
$(this).val(fin.toUpperCase());
});
I am trying to build a form where users can add a text field by clicking on a "add option" button. They can also remove added fields by a "remove option" link created on the fly by Jquery, along with the text field.
JavaScript:
$(document).ready(function(){
$("#add_option").click(function()
{
var form = $("form");
var input_field = '<input type="text" />';
var delete_link = 'remove';
form.append(input_field + delete_link);
return false;
});
$("a").click(function()
{
alert('clicked');
return false;
});
});
When I click on the "add_option" button, a new text field and the "delete_link" appear. But when clicking on the "delete_link" created by JQuery, the browser follows the link instead of launching a pop-up displaying "clicked".
How do I hide a dom element after creating it on the fly with JQuery?
I'd use delegate because its uses less bubbling :
$(document).delegate("a", "click", function(){
alert('clicked');
});
EDIT , here is your code you need to change :
$(document).ready(function(){
$("#add_option").click(function(){
var form = $("form");
var input_field = '<input type="text" />';
input_field.addClass = "dynamic-texfield";
var delete_link = 'remove';
form.append(input_field + delete_link);
return false;
});
Then comes the delegate part :
$(document).delegate(".delete-trigger", "click", function(){
alert('ready to delete textfield with class' + $(".dynamic-texfield").attr("class"));
});
Try binding the handler for the <a> with "live"
$('a').live('click', function() { alert("clicked); });
You probably should qualify those <a> links with a class or something.
I don't get why you're using a <a> as a button to execute a function in jQuery. You have all the tools you need right in the framework to totally bypass well-worn traditions of HTML.
Just put a css cursor:pointer definition on the button you want to appear "clickable," add some text-decoration if that's your fancy, and then define your function with jQ:
$('.remove-button').live('click', function() {
$(this).parent().remove();
}