How to get value inside .html() in JQuery - javascript

I am trying to implement an inline edit of Todo lists. I have this code and I want to be able to get the value inside it.
$(function clickedit() {
$(".a").dblclick(function (e) {
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
var id_val = $(this).attr('value');
//alert(id_val);
updateVal(currentEle, value, id_val);/**/
});
});
function updateVal(currentEle, value, id_val) {
$(currentEle).html('<input class="thVal" id="aaa" type="text" value="' + value + '" />'); // i want to get the value inside the input
var aaa = $('#aaa').val();
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
alert(aaa);
$.post('includes/edit-task3.php', { task_name: aaa, task_id: id_val}, function() {
$(currentEle).html($(".thVal").val().trim());
alert('in');
//current_element.parent().fadeOut("fast", function() { $(this).remove(); });
});
}
});
$(document).click(function () {
$(currentEle).html($(".thVal").val().trim());
});
}
How can I get the current value in the input inside .html()?
I tried, var aaa = $('#aaa').val(); but it does not work.. How can I do this?
Thank you so much for your help.

Don't put your events in a function that is triggered by something else
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
var aaa = $(this).val();
alert(aaa);
$.post('includes/edit-task3.php', { task_name: aaa, task_id: id_val}, function() {
$(currentEle).html($(".thVal").val().trim());
alert('in');
//current_element.parent().fadeOut("fast", function() { $(this).remove(); });
});
}
});

Use .find(SELECTOR)
$(currentEle).find('#aaa').val();
Edit: As updateVal function could be invoked many times, you will have multiple ID having same value in the DOM. Make sure the ID must be unique

Related

How to get the value of a <td> with jQuery?

What I want to do is when I double click on a cell a textbox appears to update the cell data. Then I want to get the value updated. For now I tried this :
$('#previsionnel td').dblclick(function () {
var $this = $(this);
var input = $('<input>', {
value: $this.text(),
type: 'text',
blur: function () {
$this.text(this.value);
},
keyup: function (e) {
if (e.which === 13)
input.blur();
}
}).appendTo($this.empty()).focus();
var test = $this.find("input").val();
console.log(test);
$('#previsionnel td').change(function () {
console.log(test);
});
});
Everything works, except I just can't get the data updated with $(this).text() In my console log the result is empty.
Some screenshots of what is supposed to do :
As you can see in the last screenshot, the second value in the console must be 5000 and not 100000.00.
First you need to use $(this).val() in the function below:
blur: function() {
$(this).val(this.text);
},
Second, Because your input is a child of td then use .find("input") as in:
var test = $(this).find("input").val();
I've also moved your .change() function out of your .dblclick(). Reason is that the above "test" variable will only be set when you double click the td, not when you change it.
$('#previsionnel td').dblclick(function() {
var input = $('<input>', {
value: $(this).text(),
type: 'text',
blur: function() {
$(this).val(this.text);
},
keyup: function(e) {
if (e.which === 13)
input.blur();
}
}).appendTo($(this).empty()).focus();
var test = $(this).find("input").val();
console.log(test);
$('#previsionnel td').change(function() {
test = $(this).find("input").val();
console.log(test);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="previsionnel">
<tr>
<td>something</td>
</tr>
</table>
1) There is syntax error - unclosed handler dblclick
$('#previsionnel td').dblclick(function () {
var input = $('<input>', {
value: $(this).text(),
type: 'text',
blur: function () {
$(this).text(this.value);
},
keyup: function (e) {
if (e.which === 13)
input.blur();
}
}).appendTo($(this).empty()).focus();
var test = $(this).text();
console.log(test);
$('#previsionnel td').change(function () {
console.log(test);
});
});
2) If you use AJAX logic for getting data in the table, try to use event handler on();. Because
'Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time.'
E.g.
$('body').on('dblclick', '#previsionnel td', function () {
var input = $('<input>', {
value: $(this).text(),
type: 'text',
blur: function () {
$(this).text(this.value);
},
keyup: function (e) {
if (e.which === 13)
input.blur();
}
}).appendTo($(this).empty()).focus();
var test = $(this).text();
console.log(test);
$('#previsionnel td').change(function () {
console.log(test);
});
});
In this line $(this).val(this.text); this refers to the text box. I am guessing you want to update the td? Try the below snippet
$('#previsionnel td').on( "dblclick", function() {
var input = $('<input>', {
value: $(this).text(),
type: 'text',
blur: function() {
$(this).parent("td").text($(this).val());
$(this).hide();
},
keyup: function(e) {
if (e.which === 13)
input.blur();
}
}).appendTo($(this).empty()).focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="previsionnel">
<tr>
<td>something</td>
<td>something2</td>
</tr>
</table>
var input; // Please declare input as globaly declare
$('#previsionnel td').dblclick(function () {
var test;
input = $('<input>', {
value: $(this).text(),
type: 'text',
blur: function () {
test = $(this).text(this.value);
},
keyup: function (e) {
if (e.which === 13)
input.blur();
}
}).appendTo($(this).empty()).focus();
var test = $(input).val();//use input variable instead this
console.log(test);
});
$(document).on('blur','input',function () {
console.log($(this).val()); //get value outside event listener
});

Edit on site with Javascript

I have a school assignment that I would love to have a on site edit admin panel.
I coded this but I just cant get it to work properly, as every time I double click in one and then out it replaces the value with the previous value.
<script type="text/javascript">
$(function() {
var bound = $("p").bind("dblclick", function(event) {
event.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
edit(currentEle, value);
});
});
function edit(currentEle, value) {
$(currentEle).html('<input class="tedit" type="text" value="' + value + '" />');
$(".tedit").focus();
$(".tedit").keyup(function(event) {
if (event.keyCode == 13) {
currentEle.parent('p').html($(this).val().trim());
}
});
$(document).click(function() {
var value1234 = $(".tedit").val().trim();
$("p").removeClass();
currentEle.html(value1234);
});
}
</script>
Here is the jsfiddle http://jsfiddle.net/x6e16d3n/3/
The issue is because every time you edit you create a new click handler attached to the document that has a reference to the current element at the time of creation.
This handler is still active when you are editing another object and still has a reference to the old element (look up closures to understand why) but is taking the value to add to the p from what ever .tedit is on the screen so in the end they all get updated with the same text.
One quick soloution would be to take this click handler out of the dit function and declare it once, check if edit is on the screen and if it is then make the edits parent html equal the value of the input box
$(function () {
var bound = $("p").bind("dblclick", function (event) {
event.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
edit(currentEle, value);
});
});
function edit(currentEle, value) {
$(currentEle).html('<input class="tedit" type="text" value="' + value + '" />');
$(".tedit").focus();
$(".tedit").keyup(function (event) {
if (event.keyCode == 13) {
currentEle.parent('p').html($(this).val().trim());
}
});
}
$(document).click(function () {
if ($(".tedit").length) {
var value1234 = $(".tedit").val().trim();
$("p").removeClass();
$(".tedit").parent().html(value1234);
}
});
example fiddle http://jsfiddle.net/x6e16d3n/11/

Disable selected options between 5 selectlists with JQuery

I have 5 selectboxes in my HTML page and I'm trying to disable all the options in the other selectboxes that are already selected, they also have to be re-enabled when they are deselected.
So far I came to this result: Click here for JSFiddle
Using this JQuery
$('.poli').on('keyup change', function () {
$(this)
.siblings('select')
.children('option[value=' + this.value + ']')
.attr('disabled', true)
.siblings().removeAttr('disabled');
});
This however, doesn't work too well, It only selects and disables 1 option at the time...
Any solutions?
You could use:
DEMO
$('.poli').on('keyup change', function () {
var selectedValues = $('.poli').find('option:selected').map(function () {
return this.value ? this.value : null;
});
$('.poli').filter(function () {
return !this.value
}).find('option').each(function () {
$(this).prop('disabled', ~$.inArray(this.value, selectedValues));
});
});
I've updated the fiddle. You need to keep track of the selected options and disable those in the other select boxes:
$('.poli').on('keyup change', function () {
var selected = [];
$(".poli option:selected").each(function () {
if ($(this).val() !== "")
selected.push($(this).val());
});
$(".poli:not(this) option").each(function () {
if (selected.indexOf($(this).val()) > -1)
$(this).prop("disabled", true);
else
$(this).prop("disabled", false);
});
});
This cleans up the disable; I'm working on the enabling code will post in a minute:
$('select').change( function () {
$('select').each(function() {
$(this).siblings('select').children('option[value=' + this.value + ']').attr('disabled', true);
});
});

show div when all input fields have content

I have a form with a few input fields, I only want to show a div when all the input fields got content, when one of the input fields has no content the div should disappear again.
I made it work with one input field, but how do I get it to work when all the input fields are filled in (don't know if its a good clean way?):
$(function () {
$('input').change(function() {
$('.next').toggle($(this).val().length !== 0);
}); });
Fiddle:
http://jsfiddle.net/uQyH9/19/
Try this : http://jsfiddle.net/uQyH9/21/
$(function () {
var _cached=$('input');
_cached.change(function() {
if (_cached.filter(function (){return $(this).val().length }).length==_cached.length)
$('.next').show();
else
$('.next').hide();
});
});
You can use a filter function to check that all the input are filled.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/DwF2P/
UPDATE
You can check the value of the elements by type by cheking type attribute.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
var myType=$(this).attr("type");
if (myType === "checkbox") return !$(this).is(":checked");
if (myType==="radio"){
var myName = $(this).attr("name");
if (myName==="") return !$(this).is(":checked");
return $('input[name='+ myName +']:checked').length===0
}
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/pqJhg/
Loop over the inputs. If you find one that isn't filled in, then hide the DIV. If you don't, show the DIV.
$('input').change(function() {
var allFilled = true;
$('input').each(function() {
if (this.value === '') {
allFilled = false;
return false; // Terminate the loop
}
}
$('.next').toggle(allFilled);
});

How to bind click and change event for checkbox

I am adding some checkbox to the page through ajax how to bind the click and change function for these checkboxes
my script is here
$(document).delegate("#filterOptions input[name=inNeedAmountRange]").bind("click change", function () {
var elementValue = $(this).val();
if ($(this).is(':checked')) {
alert('checked : ' + elementValue);
}
} else {
alert('Not checked :' + elementValue);
}
});
Try .on()
Fiddle Demo
$(document).on("click change", "#filterOptions input[name=inNeedAmountRange]", function () {
var elementValue = this.value;
if ($(this).is(':checked')) {
alert('checked : ' + elementValue);
} else {
// ^ remove extra }
alert('Not checked :' + elementValue);
}
});
Event Delegation
Try: http://api.jquery.com/on/
$(document).on("change click", ""#filterOptions input[name=inNeedAmountRange]", function() {
//do something
});
You can replace document with any static container.

Categories

Resources