How do I add a row manually in the Jquery array - javascript

I have this Jquery code:
var $affectedTRs = $('#location-usergroup-table tr[data-department-id="' + departmentID + '"')
So this contains all trs and I can run functions like find etc.
Now I want to push an item in this $affectedTRs
But this is not working:
$affectedTR.concat($('#location-usergroup-table tr[data-domain-id="' + domainID + '"'));
How do I push something manually in this selected object so I can have all Jquery functions like find etc available on it.

You can use jQuery's add() method: https://api.jquery.com/add/
$newSelection = $affectedTR.add($('#location-usergroup-table tr[data-domain-id="' + domainID + '"'));

Perhaps you want this:
$("#location-usergroup-table").append("<tr data-domain-id=\"" + domainID + "\""></tr>");
To add a new element to existing container, use .append(). More details here.

Your $affectedTR has all the rows i.e DOM elements. If you wish to create new row in the table, try jquery append

Related

Jquery - Create dynamic name selector

I have been playing with this for the last hour, but just cant get it to work.
I have a reactJS component, that renders a grid. After the grid is rendered I need to do some DOM work on the component.
There are some checkboxes that need to be checked. After the DOM is available if I run this in console:
$('[name="checkbox0"]').prop('checked', true);
It works great.
I need to iterate my objects, and based on condition check it or not.
My question is how to make the selector dynamic? How do I make checkbox0 dynamic, so I can set it to checkbox1, checkbox5... etc.
This is my latest attempt to solve the issue, and it did not work:
this.state.rows.forEach(function (index, key, value){
var test = "'[name=" + "checkbox" + key + "]'" ;
if(index.selected){
//$('[name="checkbox0"]').prop('checked', true);
$(test).prop('checked', true);
}
});
You are trying to use an attribute selector, but the syntax is way off in the dynamic string
var test = '[name="checkbox' + key + '"]'
You are wrapping the entire string with a "" where it should have only for the attribute value

Jquery Appended Button Not Displaying Correctly

I am working with Jquery/javascript/html. I am trying to display a button inside of tags in my table. I am appending the information into/onto a section on my html page. Code is as follows:
<html>
<body>
<p id="report_area"></p>
</body>
</html>
Javascript file below
$('#report_area').append('<table>');
$('#report_area').append('<tr>');
$('#report_area').append('<th>' + view + '</th><th>' + col_1 + '</th><th>' + col_2 + '</th><th>' + col_3 + '</th>');
$('#report_area').append('</tr>');
var btn=$('<button/>');
btn.text('View');
btn.val=item.SURVEY_JOB_ID;
btn.id=item.SURVEY_JOB_ID;
// recently added code - start
btn.click(function()
{
window.localStorage.setItem("MyFirstItem", 10);
window.location = 'GoToThisOtherPage.htm'
}
// recently added code - end
$('#report_area').append('<tr><td>'+ btn +'</td><td>' + item.JOB_NUMBER +
'</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr>');
$('#report_area').append('</table>');
THis seems to work correctly however, the button is not showing up correctly. It shows up as an object. All the other data displays correctlyMy table row is displayed as :
[object Object] 12 New Job Title 0
[object Object} 30 Title Help Me 1
I'm not sure why it is displaying as [object Object]. When I do something as simple as:
$('#report_area').append(btn);
the button shows up on the page correctly. Any help on this would be greatly appreciated. Thanks in advance.
To understand why this does not work, you have to look at the documentation for append.
Type: htmlString or Element or Array or jQuery
append is able to except any of those types, and handle each of them differently, so when you pass it an element (actually jQuery collection), it is able to intelligently convert it into the desired html.
However, in your case, you are passing it a string, so it will naively treat the string as html. The reason that this produces [object Object], is because it is relying on native JavaScript to convert the element into a string. You'll produce the same output with console.log(btn).
// append recieves a jQuery collection, calls appropriate methods to obtain html
$('#report_area').append(btn);
// append receives a string, blindly assumes that it is already the desired html
$('#report_area').append(btn + '');
Solution 1 - Append separately
From your comments on other answers, it doesn't seem like this solution works. I think this is because append will automatically add the close tags for the tr and td when appending, causing the button to be added afterwards. You could check if this was the case by looking at the html produced in the developer tools of your browser.
$('#report_area').append('<tr><td>', [btn, '</tr></td>'])
Solution 2 - Convert to string properly
$('#report_area').append('<tr><td>'+ btn[0].outerHTML +'</td><td>')
Solution 3 - Constructing everything as jQuery collections
I think the main problem you have been having is to do with mixing elements and strings. I've written a working jsfiddle solution that constructs everything as jQuery collections.
var table = $('<table>');
var btnRow = $('<tr>');
var btnCell = $('<td>');
var btn=$('<button>');
btn.text('View');
btn.val('val');
btn.attr('id', 'id');
btn.on('click', function()
{
window.alert('Click');
});
btnCell.append(btn);
btnRow.append(btnCell);
table.append(btnRow);
btnRow.append('<td>1</td><td>2</td><td>3</td>');
$('#report_area').append(table);
JavaScript is converting btn to a string because you're concatenating several strings to it.
It should work if you do this.
$('#report_area').append('<tr><td>');
$('#report_area').append(btn);
$('#report_area').append('</td><td>' + item.JOB_NUMBER +
'</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr>');
$('#report_area').append('</table>');
You're attempting to set native DOM properties on a jQuery object. Remember, a jQuery object is a superset of a native DOM object. Alter your code to use the .val() and .attr() jQuery methods like so:
var btn=$('<button/>');
btn.text('View');
btn.val(item.SURVEY_JOB_ID);
btn.attr('id', item.SURVEY_JOB_ID);
Alternately, you can chain these methods together for convenience:
var btn= $('<button/>')
.text('View')
.attr('id', item.SURVEY_JOB_ID)
.val(item.SURVEY_JOB_ID);
Finally, alter your use of the .append() method to append the content like so:
$('#report_area').append(
'<tr><td>',
[
btn,
'</td><td>' + item.JOB_NUMBER + '</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr></table>'
]);

Pass ID of an element to jquery function

I want to fetch the id of an element and pass it in jquery function -
$('#fetchedID').fadeOut;
Till now I have tried -
1. $("#$('.delete_status').attr('id')").fadeOut(400);
2. var e = $('.delete_status').attr('id');
$(e).fadeOut(400);
I am sure I am stuck because of the wrong syntax of passing javascript variable in jQuery function. Please help.
Try with concating the Id that you have got with the Id selector(#) like
var e = $('.delete_status').attr('id');
$("#" + e).fadeOut(400);
You have to concatenate the selector, like this:
$("#" + $('.delete_status').prop('id')).fadeOut(400);
If you're going to be using the ID more than once, it is a good idea to cache it:
var delete_status_id = $('.delete_status').prop('id');
$("#" + delete_status_id ).fadeOut(400);
// do something else with delete_status_id...
$("#" + $('.delete_status').attr('id')).fadeOut(400);
Do you really need to pick the ID to then reselect the element and do the fade? If you want to pick only the first occurence of your class, you can use :eq(0) instead.
$('.delete_status:eq(0)').fadeOut(400);

Place variable in dynamic option field

I want to place
var temp = results[i].get("place");
into
$("<option>****HERE***</option>").appendTo($department);
I have tried replacing the quotes/etc., but I cannot get it to work. I appreciate your help.
Have you tried concatenation?
$("<option>" + temp + "</option>")
You could also use jQuery's own methods for adding text:
$("<option>").text(temp);

Variable as jQuery selector focus

I'm using JavaScript to copy a specific div from a page into a new page. I need to remove the ID attributes for each table in the new page.
It seems that since I'm copying content from the first page, I can filter out the IDs from the string before it is written to the second page. Can jQuery take a variable as its 'focus'? Instead of manipulating the entire DOM, manipulate a particular string?
I have a non-working version of what I'm talking about:
var currentContent = window.open('','currentContentWindow');
var htmlToCopy = '<html><head><title></title></head><body>' + window.frames[0].document.getElementById('PageContentPane').innerHTML + '</body></html>';
$("table", htmlToCopy).removeAttr('id');
currentContent.document.open();
currentContent.document.write(htmlToCopy);
currentContent.document.close();
You need to create a jQuery object by calling $(html), manipulate it, then get the HTML back by calling html().
For example:
var currentContent = window.open('','currentContentWindow');
var htmlToCopy = '<html><head><title></title></head><body>' + window.frames[0].document.getElementById('PageContentPane').innerHTML + '</body></html>';
var newStructure = $("<div>" + htmlToCopy + "</div>");
newStructure.find("table").removeAttr('id');
currentContent.document.open();
currentContent.document.write(newElements.html());
The <div> element allows me to get its inner HTML and get the HTML you're looking for.
Who not just remove ID= as a string and forget DOM manipulation all together?
First make the string a jQuery object, then work with it:
htmlToCopy = $(htmlToCopy).find("table").removeAttr('id').end().html();

Categories

Resources