the issue: I have an appending json data to html table
here's how:
In a Loop->
var image = document.createElement('img');
image.src = data.data[i].picture.data.url;
var td=document.createElement('td');
var input=document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('onclick', 'testCheckBox()');
input.setAttribute('id','testid' + i)
td.setAttribute('onclick','tdClick()')
td.setAttribute('title',data.data[i].name );
td.setAttribute('id',''+ i );
td.appendChild(input);
td.appendChild(image);
tr.appendChild(td) ;
mytable.appendChild(tr);
}
$('#maincontent').append(mytable);
After that I got the data I need in attributes,
now I want to understand how can I get the TD= ID , and any other kind of attributes after that kind of click or another, from each td... that is different
Edit:
Function fixed to this :
function testCheckBox()
{
$(':checkbox').change(function(){
var i = $(this).closest('input').attr('id');
var id = $(this).closest('td').attr('id');
var fbname = $(this).closest('td').attr('title');
console.log(id + ' : ' + this.checked);
console.log(fbname + ' : ' + this.checked);
console.log(i + ' : ' + this.checked);
friend_name[i]=fbname;
friend_id[i]=id;
});
}
console.log(friend_name);
Working just GREAT!
the new Issue is that.. if I uncheck this checkbox.. I dont know how to remove it from Array!
and another Q: can I make 1 Array and not 2 Like here? that the 'I' will have 2 Elements Inside?
You are not javascripting the right question, i mean, you ask for the .html() and not the ID value.
HTML()
Get the HTML contents of the first element in the set of matched
elements or set the HTML contents of every matched element.
Try this :
console.log($(this).attr('id'));
attr()
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.
Related
I am currently using jQuery on my Django site to reload a div once a user clicks a button.
$(document).ready(function(){
var post_list = Array.from(document.getElementsByClassName("post_container"))
for(var post in post_list){
post_list[post].id = 'post' + post;
}
var $arrows = $(".arrow");
$arrows.each(function(index){
var data = $(this).data();
var element = $(this);
element.on('click', function(event){
if(user_auth){
var currentParentElement = element.parent().parent().parent().get(0);
var id = $(currentParentElement).attr('id');
$(id).load(document.URL + ' ' + id);
}
})
})
});
From the console I can see that currentParentElement and id are pointing to the correct div to reload, but $(id).load() does not seem to be doing anything.
In the image linked below, the clicking the arrow buttons should make the green or red number change. The number does not change when the arrow is clicked, but it does change when I reload the entire page.
https://i.stack.imgur.com/T26wn.png
Your ID selector is missing the # symbol. For example, suppose the id of this target element is "myID":
var id = $(currentParentElement).attr('id');
Then the jQuery selector you're using is:
$('myID')
Which is looking for a <myID> element. There isn't one, so no matches are found, so there's nothing to call .load() on.
You could add the symbol to your selector:
$('#' + id).load(document.URL + ' #' + id);
(Note: The same correction was also made in the selector passed to load() for the same reason.)
I am trying to raise a mouseenter event for an element, when hovering over another element. I am trying to find the element based on a data attribute:
$("#modal").on("mouseenter", ".jq_pin", function(e) {
var attr = $(this).data("abbr");
var els = $(".jq_mapPoint");
var el = els.find("[data-abbr='" + attr + "']");
el.trigger(e.type);
});
My event fires, and debugging I can see a list of elements with jq_mapPoint class, and one has a matching data attribute, but the length of el is always 0.
Element with event:
<li class="jq_pin"data-abbr="N">HI</li>
Element Im trying to target:
<div style="position:absolute;left:59%;bottom:72%" class="jq_mapPoint" data-abbr="N">N</div>
You need .filter() instead of .find()
Reduce the set of matched elements to those that match the selector or pass the function's test.
var el = els.filter("[data-abbr='" + attr + "']");
instead of
var el = els.find("[data-abbr='" + attr + "']");
It probably needs the All selector *:
theels.find("*[data-abbr='" + attr + "']");
I have a design received on my page with a set of placeholders such as:
<span id="ApplicationDate_" class="removeMe"></span>
Plus other many elements as well inside that html. These spans should be replaced by real inputs coming from another area on the page, such inputs look like:
<input type="text" id="ApplicationDate_48596977"/>
So basically what I need to do, is to get all input elements in an array, and then for each element, get its ID up to "_", and search for the span that equals that value, and replace it with this element, then remove all spans with class=removeMe, but I can't achieve it in code, below is what I have reached:
$(document).ready(function () {
var coll = $("input");
coll.each(function () {
var id = this.id; //getting the id here
var substringId = id.substring(0, id.indexOf('_') + 1); //getting the span id
this.appendTo("#" + substringId); //having problems here..
});
$(".removeMe").each(function () {
this.remove();
});
});
it tells me this.appendTo is not a function, any help or hint is much appreciated.
TL;DR - Just use:
$(".removeMe").replaceWith(function() {
return $("input[id^='" + this.id + "']");
});
Here's why:
this is a DOM element, but .appendTo() is a jQuery method. You probably just need to wrap this in a call to jQuery:
$(this).appendTo("#" + substringId);
That would place the <input> element inside the <span> like this:
<span id="ApplicationDate_" class="removeMe">
<input type="text" id="ApplicationDate_48596977"/>
</span>
But, then you call:
$(".removeMe").each(function () {
this.remove();
});
First, you would have the same problem as above - this is a DOM element, but .remove() is a jQuery method. Second, it would be better to just call $(".removeMe").remove() - wrapping it in a .each() is redundant. Third, that would remove the span, and the input along with it. That's not what you are trying to do is it?
If you want to replace the span with the input, use .replaceWith():
var coll = $("input");
coll.each(function () {
var substringId = this.id.substring(0, id.indexOf('_') + 1);
$("#" + substringId).replaceWith(this);
});
It seems like the whole thing could be rewritten, taking advantage of the attribute starts with selector, as:
$(".removeMe").replaceWith(function() {
return $("input[id^='" + this.id + "']");
});
I am currently trying to programmatically hide div elements on a page using an Array and loop in jQuery, but it doesn't seem to work.
I have done alerts and console.log to confirm the array is firing and the loop is working through the items, but it's the .hide() method that seems to be giving issue. Any help would be appreciated.
Thanks
$(document).ready(function(){
var divsToHide = ["fin_0", "fin_1", "fin_2", "fin_3", "fin_4", "fin_5",
"fin_6", "fin_7", "fin_8", "fin_9", "fin_10", "fin_10-1", "fin_10-2", "fin_10-3",
"fin_10-4", "fin_10-5", "fin_10-6", "fin_10-7", "fin_10-8", "fin_10-9", "fin_20",
"fin_21", "fin_22", "fin_23"];
$.each(divsToHide, function(index, value)
{
var currentDiv = "div#" + value;
var stringCurrent = currentDiv.toString();
var currentHide = $(' stringCurrent ');
console.log(currentDiv);
currentHide.hide();
});
});
You should probably use:
var currentHide = $(stringCurrent);
Your code
var currentHide = $(' stringCurrent ');
has no reference to stringCurrent variable, it just try to find <stringCurrent> element.
Even better, you should use
$.each(divsToHide, function(index, value)
{
$("#" + value).hide()
});
since an element id should be unique to the document
You need to remove the ' around stringCurrent. Otherwise your string is not interpreted but jquery searches for ' stringCurrent '
I am trying to access each individual element, ie option, defined for a list box (or drop down box).
For some reason the code I am using is not working. It is given below---
$(jQuery('input', $(this).parent('form'))).each(function() {
element= $(this);
textmsg=" Element # " + (count+1) + "...Name of this input element = " + $(this).attr('name') + " multiplechoice-" + $(this).attr('multiple');
textmsg= textmsg + "...Also, for this element, the value is " + $(this).val() + " and type =" + $(this).attr('type');
alert (textmsg);
var listofoptions = new Array();
type=$(this).attr('type');
if(type=="select")//this means we have to go through the children for this select element, to obtain the values for each option
{
var elements= $('option', this);
for(var i=0; i<elements.length; i++)
{
// add $(this).val() to your list
alert("Value of this option=" + $elements[i].val());
});
}
});
How do I make the above code work? Or can you suggest an alternative way of accessing each option value? Thanks...
In order to select all inputs you would need to use the :input selector and not just $('input') as this will select inputs by tag name and the select will be excluded.
So do
$(this).parent('form').find(':input')
Also, since there's no type attribute on a select element. You could use .is() instead to check if it's a select.
$(this).is('select')
Edit: for the if statement i would do the following
if( $(this).is('select') )
{
$(this).find('option').each(function(){
alert( $(this).val() );
});
}
Here's a fiddle
the select tag is not an input so it would never be a part of the selection
You could try
$("input, select")