I'm trying to create an "inline editor" for my profile-page, where I'm using ajax to update the users informations, but I have some problems I can't seem to fight.
I want to replace some spans with inputs with the same text inside, so that the user can edit his informations directly on the profile site.
I've found some scripts which works okay, but only when there is one span to replace. I need to replace multiple spans with inputs.
This is what I've tried this:
HTML:
<span id="name" class="editable">My name</span><br>
<span id="email" class="editable">My email</span>
<span class="edit">Edit</span>
jQuery:
$(document).on('click', '.edit', function() {
$(this).text("Change").attr('class', 'change');
$('span.editable').replaceWith($('<input type=text>').attr({ id: 'name', value: $('span.editable').text() }));
});
$(document).on('click', '.change', function() {
$(this).text("Edit").attr('class', 'edit');
// Do Ajax Call
});
It works, somehow, but the text in the inputs are all the same, which is not intended. I need the correct text from each spans to be put, in each input.
I also need someway to identify the inputs, so the new values will be stored correctly using an AJAX call, but i don't know how to identify them. Should I use ID or NAME?
I hope you can understand my question and that someone can/will help me with this. I would really appreciate that.
Thanks Martin
Fiddle Demo
Edit fiddle - JSFiddle
jsfiddle.net
You can use the version of replaceWith that accepts a function:
http://jsfiddle.net/Wb74k/
$('span.editable').replaceWith(function () {
return $('<input type=text>').attr({
id: 'name',
value: $(this).text()
})
});
replace this line:
$('span.editable').replaceWith($('<input type=text>').attr({ id: 'name', value: $('span.editable').text() }));
with:
$('span.editable').each(function(index, obj){
$(obj).replaceWith($('<input type=text>').attr({ id: 'name', value: $(obj).text() }));
})
$(document).on('click', '.edit', function() {
$(this).text("Change").attr('class', 'change');
$('span.editable').each( function() {
$(this).replaceWith($('<input type="text">').attr({ id: $(this).attr("id"), value: $(this).text() }));
});
});
Fiddle
Related
I'm using easyautocomplete plugin for my project and I can't get the element which triggered that.
Here is the element:
<input class="form-control product-name" type="text" value="" name="item[0][product_name]" id="item_0_product_name" autocomplete="off">
Here is the jquery code:
$(".product-name").easyAutocomplete({
url: function(phrase) {
return base+getCurrentUrl()+"?phrase=" + phrase;
},
getValue: "product_name",
list: {
onChooseEvent: function() {
console.log($(this).prop("name"));
console.log($(this).attr("name"));
}
},
});
The idea is, I would like to get the element which trigger that plugin and get one of its attribute, for example, the "name". But it always return "undefined" every time I choose an item from the list. I tried to log $(this), but only return "Object", not the input element.
How can I do this? Are there any other way to do this? Any help would be appreciated.
got it :)
with the code below i'm able to get the name of triggered input (work fine in case of multiple instance)
check the use of 'elt'.
$(".form-easyautocomplete").each(function(index,elt){
$(elt).easyAutocomplete({
list: {
onChooseEvent: function () {
console.log(elt.getAttribute('name'),$(elt).getSelectedItemData());
}
}
})
})
im trying to get the attribute value through jquery
$(document).click(function() {
var elem = $("input[name='phone']");
alert(elem.length);
if(elem.length > 0){
alert(elem.attr('id'));
}
});
here the case is
i have lots of input fields with same name as "phone" in different form. Whenever i click it i can get only the first value. Not the last one. How can i get it through the Jquery.
In my page only document click will work because the form codes are loading from some other site.
Any help is more appreciate
$( "input[name^='phone']" ).last()
will return the last element with name beginning with 'phone'
You can do this, to get the id of the item that is clicked.
$("input[name='phone']").click(function() {
alert($(this).attr('id'));
}
This is attaching the listener to phone inputs and this is the context, which in this case the item that is clicked.
Try this:
$("input[name='phone']").on('focus', function(){
alert($(this).attr('id'));
}
This will listen to clicks on your phone input fields and alert the id attribute for you to see on screen:
JQuery
$("input[name='phone']").click(function() {
alert($(this).attr("id"));
});
HTML example
<input id="a" name="phone">A</input>
<input id="b" name="phone">B</input>
<input id="c" name="phone">C</input>
<input id="d" name="phone">D</input>
Delegate the event with .on(), then you can use this:
$(document).on('click', 'input[name="phone"]', function() {
console.log('element with id: ' + this.id + ' has value: ' + this.value);
});
Now, If I hit the button, it clears all in the input field, and it automatically inputs "#marry" to it.
But, I don't want it to be cleared:(
What if I want to add "#marry" to the end of the strings that already exists in the input field?
How can I customize my javascript part?
Input field
<textarea class="box text_area" cols="10" id="input" name="comment[body]"></textarea>
button
<a href="#topic" id="username" value="#marry”><span class='btn'>reply</span></a>
javascript
$(document).on('click', 'a#username', function() {
$(".box#input").val($(this).attr('value'));
}
val() has a callback with the arguments index and value, you can use that to easily add something to the value.
$(".box#input").val(function(_, val) {
return this.value + 'some extra string';
});
$(document).on('click', 'a#username', function() {
var self = this;
$(".box#input").val(function(_, val) {
return val + self.value;
});
});
First of all adeneo's answer is good and you should read it. Here is an alternative solution that does not use jQuery:
I assume that both these elements are a part of a form. Let's say for instance the form has an ID of "post". We can access it using document.forms and then its fields as such:
var input = document.forms.post["comment[body]"];
Now, we can add to its value whenever the button is clicked. First select username with getElementById or querySelector and then add the event:
username.addEventListener("click", function(ev){
input.value += ev.target.value;
});
Or with jQuery (this also delegates if the element is not in the DOM yet):
$(document).on('click', 'a#username', function() {
input.value += this.value;
});
It might be desirable to append an extra space between the current text and the username.
append #marry at the end of text area. you can use bellow code its working fine.
$(document).on('click', 'a#username', function () {
var txtvalue = $(".box#input").val();
$(".box#input").val(txtvalue + $(this).attr('value'));
});
see jsfiddle link http://jsfiddle.net/F6mkh/1/
I have looked all over and found many similar threads, but none of them really answered my question with this specific situation:
I want to, when I create a dynamic Checkbox, and want to remove the specific checkbox and the text by clicking on the trash image. It seems to not work when I want to remove.
Live Demo
HTML:
<input type="text" id="checkBoxName" />
<input type="button" value="ok" id="btnSaveCheckBox" />
Jquery:
$(document).ready(function() {
$('#btnSaveCheckBox').click(function() {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
});
function addCheckbox(name) {
var container = $('#cblist');
var inputs = container.find('input');
var id = inputs.length+1;
$('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
$('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
$('<img />', { "src": "/Pages/Images/trashDialog.png", "class": "removeCheckBoxDialog"}).appendTo(container);
$('.removeCheckBoxDialog').on('click', function (e) {
$("#cb :checkbox").remove();
});
$('<br/>').appendTo(container);
}
CSS:
.removeCheckBoxDialog {
margin-left:10%;
cursor:pointer;
}
Try below jQuery:
$('#cblist').on('click','.removeCheckBoxDialog', function (e) {
$('#'+$(this).prev().attr('for')).remove();
$(this).next('br').remove().prev().addBack().remove();
$(this).remove();
});
Fiddle
The above wasnt clearing the label so i edited it a bit :
$('#cblist').on('click','.removeCheckBoxDialog', function (e) {
$('#'+$(this).prev().attr('for')).remove();
$(this).next('br').remove();
$(this).prev().remove();
$(this).remove();
});
Fiddle
Add this
$("#cb"+id).remove();
$('label[for=cb'+id+']').hide();
$(this).nextAll('br').remove();
$(this).remove();
to your click function
$('.removeCheckBoxDialog').on('click', function (e) {
$("#cb"+id).remove();
$('label[for=cb'+id+']').remove();
$(this).nextAll('br').remove();
$(this).remove();
});
DEMO
Try this
$("#cb"+id).remove();
$('label[for=cb'+id+']').remove();
Try this. I have done the following:
Appended a div to contain each of the 3 components
I used var container2 = $("div:last-of-type", container); to select this div.
Finally I simply used $(this).parent().remove(); To get the parent and remove it.
And also I removed the <br> as the div does the job of new line by default.
I have a form that the user can enter in a title and a date. When the user clicks the 'Add New' button, the contents of the form should be displayed above. That parts works, but whenever they enter in new info, the previous content is just replaced...where it should add to the list.
Any ideas on how to get it to work?
Thanks
Here is the jsFiddle: http://jsfiddle.net/beqqC/1/
Here is the code:
$("#add").on('click', function () {
$(".title").html($("[name=title]").val());
$(".date").html($("[name=date]").val());
$("#view").show();
});
Change
$(".title").html($("[name=title]").val());
$(".date").html($("[name=date]").val());
To
$(".title").append($("[name=title]").val());
$(".date").append($("[name=date]").val());
You can use a combination of jQuery's append and element creation methods to make things slightly cleaner:
$("#add").on('click', function () {
$(".title").append(
$('<div>', {
text: $("[name=title]").val(),
className: 'title'
}));
$(".date").append($('<div>', {
text: $("[name=date]").val(),
className: "date"
}));
$("#view").show();
});
jsfiddle
This will create a div with the specified class within your .title and .date divs.
Use append, and perhaps add a <br /> code to the end:
jsFiddle here
$("#add").on('click', function () {
$(".title").append($("[name=title]").val()+'<br />');
$(".date").append($("[name=date]").val()+'<br />');
$("#view").show();
});
You should use append() method. Just put a line break before if you want vertical list
$("#add").on('click', function () {
$(".title").append("<br />" + $("[name=title]").val());
$(".date").append("<br />" + $("[name=date]").val());
$("#view").show();
});