changing the value of a child input - javascript

I am having troubles in changing the value of a hidden <input> after dropping a sortable element
Here's my JSFiddle
I Am trying to change the value of the hidden <input> that is inside the block <div> when i drop the from the container
i have tried this but with no luck
$('.block1').on("sortreceive", function (event, ui) {
var $list = $(this);
$(this).children().first("input").val = 'Something';
if ($list.children().length > 2) {
$(ui.sender).sortable('cancel');
}
});

jQuery val is a method. So try this
$(this).children().first("input").val("Something");
Assuming the $(this).children().first("input") expression returns a valid object for your DOM

Try
//use .first() only if there are multiple input elements under `this` and you want to set the value to first item
$(this).find("input").first().val('Something');

You can use a combination of .find() and :hidden
$(this).find('input:hidden').val('Something');
Please note that .val = 'Something' is not correct, you should use .val('Something');
Demo here

Related

Jquery: Get attribute value of dynamically created element

I created a div dynamically, and on click event I want to get it's attribute value, but when I try to do that, it throws me an error. "jQuery(...).attr(...).val is not a function", refer my code below
jQuery("#target1").on("click", function(){
jQuery("#target_block").append('`<div id="target2" data-rel-pid="12345">Click Me</div>`');
});
jQuery("#target2").on("click", function(){
var bid=jQuery(this).attr("data-rel-pid").val();
});
Actually the error is in this line :
var bid=jQuery(this).attr("data-rel-pid").val();
There is no need to cal .val() on .attr()
var bid=jQuery(this).attr("data-rel-pid");
.attr() itself will return the value.
For more to this, refer here.
Remove the .val()
jQuery("#target2").on("click", function(){
var bid=jQuery(this).attr("data-rel-pid");
});
As you are already using jQuery and you want to fetch a data attribute you can also do something like this.
$("#target2").on("click", function(){
var bid=$(this).data("rel-pid");
});
As target2 is being appended later in the life cycle of the web page, you need to use event delegation to attach event to dynamically appended elements.
Remove .val(), Use .attr() to get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
Try this:
jQuery("#target1").on("click", function() {
jQuery("#target_block").append('<div id="target2" data-rel-pid="12345">Click Me</div>');
});
jQuery("#target_block").on("click", '#target2', function() {
var bid = jQuery(this).attr("data-rel-pid");
alert(bid);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="target1">target1</div>
<div id="target_block">target_block</div>
You can use this code -
jQuery("#target2").on("click", function(){
var bid = jQuery(this).data("rel-pid");
});

Jquery - Setting value of <td>

I currently have a table and in 1 column a Delete link, if the user clicks this link it fires an onClick which basically flags that item to be deleted and hide the TR.
It works fine, but I am just wondering if there is a better way .....
$(document).on('click', '.deleteCell', function (e) {
//Belt and braces - only do this for <td> elements
var target = $(e.target);
if (!target.is('td')) {return;}
var h = this.innerHTML;
var newH = h.replace("CsUpdated", "CsDeleted");
newH = newH.replace("CsAdded", "CsDeleted");
this.innerHTML = newH;
//We clicked on a TD so get the row TR.
var theRow = $(this).closest('tr');
theRow.hide();
});
I just think there must be a better way than the string manipulation I am doing with the replace? Is there?
I've tried these but with no luck...
$(this).attr('value', 'CsDeleted');
$(target).attr('value', 'CsDeleted');
$(this).val('CsDeleted');
$(target).val('CsDeleted');
Thanks
td has no value use .text() or .html()
td doesnt have a value attribute.
Use
$("td").html() // to fetch html
$("td").html("<span> Hello World </span>") // to set html
$("td").text() // to fetch plain text
$("td").text("Hello World") // to set plain text
You could use any of the following to set the cell contents
.html() or .text() or .prependor .append and more
However .val() only works on inputs that have the value="...." attribute. If you want to prop the Cell with some data use .data("key","value") which can be accessed at any point by calling .data("key");
Try this one,
$(function(){
$('.delete').click(function(){
$(this).closest('tr').remove();
});
});
You may use custom data-- attributes on any html element ( see this MDN article and the reference ). These are accessible through jquery's attr method and have no influence on rendering.
Code PoC:
$(document).on('click', 'td.deleteCell', function (e) {
//Belt and braces - only do this for <td> elements
$(this)
.removeAttr('data-CsUpdated')
.removeAttr('data-CsAdded')
.attr('CsDeleted', '1')
;
//We clicked on a TD so get the row TR.
$(this).closest('tr').hide();
});
In case the values given in your code are mutually exclusive, this simplifies to
$(document).on('click', 'td.deleteCell', function (e) {
//Belt and braces - only do this for <td> elements
$(this).attr('Cs', 'Deleted');
// attr 'Cs' contained 'Added' or 'Updated'
// This scheme requires modifications at other places in your original code !
;
//We clicked on a TD so get the row TR.
$(this).closest('tr').hide();
});
Update
As the OP actually wants to modify the value of a child input element, the handler reduces to:
$(document).on('click', 'td.deleteCell', function (e) {
$('input', $(this)).val('CsDeleted');
// more specific selector may be needed depending on possible cell contents
$(this).closest('tr').hide();
});

jQuery Selector wild card selector attribute as object parameter

I want to use the progressbar UI widget on multiple elements. The value I want to pass is the actual attribute of the element. How do I achieve this?
I have tried these but they don't work:
$('[id^=pkg]').progressbar({value: $(this).attr('value')});
$('[id^=pkg]').progressbar({value: $([id^=pkg]).attr('value')});
I do get a value for:
$([id^=pkg]).attr('value')
Apologies but this was missing:
<div id="pkg1" value="30"><div class="progress-label"></div></div>
Which required parseInt().
$('[id^=pkg]').each(function() {
var $this = $(this);
$this.progressbar({
value: $this.attr('value')
});
});
Btw, It's better to use class name instead of [id^=pkg]
You may need to iterate and initiate each at a time?
$('[id^=pkg]').each(function() {
$(this).progressbar({value: $(this).attr('value')});
});
Option 1 Won't work because the value of this is not what you expect it to be.
$('[id^=pkg]').progressbar({value: $(this).attr('value')});

I want to check if `id` has no content

I want check between id that get in var span, if empty was between it put css for input but it not work. how can fix it?
var span = '#'+$('.valid').closest('.auto_box').find('span').attr('id');
if ($(span+':empty').length != 0) {
//alert('ok')
(this).closest('.auto_box').find('input').css('background-color','#000');
}
See here my full code: http://jsfiddle.net/Pjqv2/2/
You are using (this) instead of $('.valid') or whatever you meant with it. Also, you are doing this the wrong way; .find('span') returns the jQuery objects set for that span.
You don't need to get it's ID and then check on that ID again. More importantly, your code seems the need to run on multiple instances of .auto_box. For that, you need to iterate on the set found by (".valid").closest(".auto_box"), which you can do with the jQuery .each() (.each() in jQuery docs) like this:
var autoBoxes = $(".valid").closest(".auto_box");
autoBoxes.each(function(){
if ($(this).find("span").is(":empty")) {
$(this).find("input").css("background-color", "#000");
}
});
Your updated jsfiddle with this script: http://jsfiddle.net/dvir_azulay/Pjqv2/4/
Change (this) to $(span). I updated your fiddle to reflect this change.

each function index and element

my question is a simple one how do you use element with index in each function
$('div').each(function(index, element) {
is element equal to $(this)
});
The element there will always be the same as this.
jsFiddle.
Except wrapping it in $() will make it a jQuery object, and won't be equal to the other one, even if you wrap the other with a jQuery object.
There should never be a reason why you need to compare this to element in that context.
$('div').each(function(index, element) {
//element != $(this)
//element == this
});
$(this) is this wrapped by a jquery object. So while this won't equal $(this), you can still manipulate it to your heart's content
Here's something to look at : http://jsfiddle.net/jomanlk/ZqXPn/

Categories