In the following code how can i hide the id column of the table.
var joblist = "";
joblist = joblist + "<table ><tr><th >Select</th><th id='td_1'>ID</th><th >Name</th><th >Names</th><th>OS</th><th >Server</th></tr>";
var tabString = '<tr ><td > ' + '<input type="radio" name="joblist" onclick="myfunc(this);" id= ' + value.jobid + 'value=' + value.jobid + '> </td><td id="td_1" >' + value._id + '</td><td >' + value.names + '</td><td a>' + value.os + '</td><td >' + value.server + '</td></tr>';
joblist = joblist + tabString;
I tried
$("#td_1").hide()
But it is not working.Any other solutions?
First of all if there is multiple td then don't use same id, in this case add some other post or pre. And use as
$('[id^="td_1"]').hide();//for post
$('[id$="td_1"]').hide();//pre
Try this
$('[id="td_1"]').hide();
First of all ID must be unique. you have declared same ID for TH and TD
$("#your_td_id").hide();
if you more than one TD then use class instead of ID.
As others have mentioned, you cannot match multiple elements based purely on an ID; they must be unique across the entire document. I suspect that what you are seeing is the 'ID' heading disappearing from the top of your table, but the values remaining visible later on in the table.
Other answers have mentioned switching to a class; there is another alternative available, using the nth-child pseudo-selector:
$("table tr > *:nth-child(2)").hide();
This will hide the 2nd element immediately under tr, as * matches both the TH and the TD. If you never want it visible, then better solutions include CSS:
table tr > *:nth-child(2) { display: none; }
or simply rendering it into an <input type='hidden' /> instead and including it in one of your existing cells (e.g. alongside the radio button).
Note that you have a few additional errors in your HTML, including:
<td a>' + value.os +
that you may want to investigate at the same time.
Before hiding an element you must assign it to DOM. If you want to hide multiple elements you must use class attribute instead of id
var joblist = "";
joblist = joblist + "<table ><tr><th >Select</th><th class='td_1'>ID</th>" +
"<th >Name</th><th >Names</th><th>OS</th><th >Server</th></tr>";
var tabString = '<tr ><td > ' + '<input type="radio" name="joblist"
onclick="myfunc(this);" id= ' + value.jobid + 'value=' +
value.jobid + '> </td><td class="td_1" >' + value._id +
'</td><td >'+ value.names + '</td><td a>' + value.os +
'</td><td >' + value.server + '</td></tr>';
joblist = joblist + tabString;
$('#myElement').append(joblist);
$('.td_1').hide();
Related
I have a functionality where in a table, I can click an add button and a new tr gets prepended to the table. However, I want field AddOn to get disabled if a certain food category is selected. It is easy to tackle it on change but how to do it when I click on add and depending on the value originally selected in dropdown?
var index = 0;
var FoodCategory = "FoodCategory" + index;
var tr = '<tr class="row">' +
'<td></td>' +
'<td></td>' +
'<td><select id="' + FoodCategory + '" type="text" class="form-control" /><span id="FoodCat""></select></span></td>' +
'<td><span><select id="' + AddOns + '" class="form-control"></select></span><span id="AddOns"></span></td>' +
'</tr>';
("#tblFood").prepend(tr);
I'm trying to access the value of FoodCategory to disable the select of AddOns by
$('#'+FoodCategory).val() but it is not working.
I'm working on a .NET Core project for my company where work orders are loaded from our SQL database using Entity Framework, filtered and then displayed as markers on a map through Google Maps API for our installers.
We have two types of filters: one that gets included in an Ajax POST, and one that filters locally to decrease load times and performance issues. What I'm trying to do is load the local filter items (lists that are included in the response when calling the initial Ajax POST). If the list of filter items exceeds 5 items, I want them to collapse to only 5 items and insert an anchor which expands (utilizes jQuery's toggle()) showing the rest of the items in that list.
This is the excerpt from the JavaScript function which takes care of that:
filterItems
.forEach((filterItem, i) => {
var localItem = '<label class="' + selectorContainerClass
+ ' selectorContainer" id="' + selectorContainerIdPrefix + filterItem.key
+ '"><input id="' + convertValToEng(filterItem.value)
+ '" type = "checkbox" class="filled-in navy" name="' + inputName
+ '" value="' + filterItem.key
+ '" onchange="localFilter(this, this.value)" /><span class="selector-value">'
+ filterItem.value
+ '</span> <span id="' + paramName + 'Cnt__' + filterItem.key
+ '" class="selector-count"></span></label ><br />';
document.querySelector("#" + colId).insertAdjacentHTML('beforeend', localItem);
if (i >= 5) {
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key).addClass("collapse");
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key).toggle(100);
$("#" + colId + " #" + selectorContainerIdPrefix + filterItem.key + " + br").toggle(100);
}
});
if (filterItems.length > 5) {
//TODO: Fix the bug here; the .filter-collapse element is not being inserted under local installers.
var newEl = '<a class="filter-collapse" onclick="toggleFilterExpand(false, this)";><i class="material-icons">expand_more</i></a>';
document.getElementById(colId).insertAdjacentHTML('beforeend', newEl);
}
I should be getting a newEl inserted under the "Installer" column (8 installers, 3 of them not being displayed), but I'm not. I've tried jQuery's after() and insertAfter() methods, but neither of those worked. newEl is being generated for the "Area" column, as it should, but for the "Installer" column it's not.
I've also tried inserting the element manually through the console window with the exact same code and it works.
Would appreciate some help with this as I feel lost regarding this issue.
Thanks.
It turned out to be a stupid mistake on my end where I was removing the element newEl from the all the other filter lists before inserting a new one to the currently iterated one.
I have given row a class name , and i want to set a click function to be clicked on specific column of that row.
Here is the code-
var row = $('<tr class="parent_row"><td>' + '</td>' + '<td>' + data1 + '</td>' + '<td>'
+ data2 + '</td>; + '<td>' + data3 + "</td></tr>"
My click functon-
$('.parent_row).find("td:eq(1)").(click(function(e) { })
This is not working, I want that second column of row that is 'data1' should be clicked. I need help?
You can rewrite like this :
$('.parent_row').find("td:eq(1)").on("click",function(e){
//your stuff
})
I tried it out and it worked for me in this way.
You should write click event on td.
$('tr.parent_row td:eq(1)').on('click', function(){
// handle it here $(this)
});
I have a dynamically created table via jQuery, but when a row element is added via ajax request, the newly added row does not follow the CSS styling. Is there a way to fix this?
Below is an example of what I have:
function createTable(data) {
var row = $('<tr id=' + data.id + '/>');
$("#table").append(row);
row.append($('<td>' + data.name + '</td>'));
row.append($('<td>' + data.age + '</td>'));
}
Have you tried the following:
var table=document.getElementByI("table");
var row=table.insertRow(table.rows.length);
var cell=row.insertCell(row.cells.length);
$(cell).text(data.name);
cell=row.insertCell(row.cells.length);
$(cell).text(data.age);
I've got a problem with another dojo enabled form that I am working on. A user can enter details onto the page by entering the data using a dialog box, which in turn updates the database and then displays the user data entered on to the form.
Each element added consist of 2 x Validation Text boxes 1 x FilteringSelect. When it's added to the page they are added as simply text boxes.
I've tried just adding as standard strings but that means the dojo.parse() does not run on the code. I've also tried programmatically adding the elements but that just displays the element object as a string to the page. So far I have:
var xhrArgs = {
url: url,
handleAs: "text",
preventCache: true,
load: function(data){
var idResult = parseInt(data);
if(idResult > 0){
var divStr = '<div id="employ_' + idResult + '" style="float:left;width:100%;">' +
'<table width="300">' +
'<tr>' +
'<td height="29"><Strong>' +
'<input type="text" dojoType="dijit.form.ValidationTextBox ' +
'change="markEmploymentForUpdate(); ' +
'id="cmpy_'+ idResult +'" '+
'required="true" ' +
'promptMessage="Please enter a valid company name" ' +
'invalidMessage="please enter a valid company name" ' +
'trim="true"' +
'value="'+ companyname +'"/>' +
'</td>' +
'<td height="29"><input dojoType="dijit.form.FilteringSelect" store="rolestore" searchAttr="name" name="role" onchange="markEmploymentForUpdate();" id="roleInput_'+ idResult +'" value="'+ jobrole +'" ></td>' +
'<td height="29">' +
'<input type="text" dojoType="dijit.form.ValidationTextBox" onchange="markEmploymentForUpdate();"' +
'id="jtitle_'+ idResult + '"' +
'required="true"' +
'promptMessage="Please enter your job title"' +
'invalidMessage="Please enter your job title"' +
'value="'+ jobtitle + '"/>' +
'</td>' +
'<td height="29"><img src="/images/site/msg/small/msg-remove-small.png" border="0" onmouseover="this.style.cursor=\'pointer\';" onclick="removeEmployer(\'employ_'+ idResult +'\', '+ idResult +')" /></td>' +
'</tr>' +
'</table>' +
'</div>';
dijit.byId('companydetails').hide();
dijit.byId('employername').setValue('');
dijit.byId('jobtitle').setValue('');
dijit.byId('jobrole').setValue('');
dojo.byId('data-table').innerHTML += divStr;
dojo.byId('companydetails').hide();
}else{
dojo.byId('add-error').innerHTML = '<div class="error">Unable to process your request. Please try again.</div>';
}
}
};
var deferred = dojo.xhrGet(xhrArgs);
This is displaying text boxes as the dojo.parse isn't running on this. If I replace the ValidationTextBox with:
var textbox = new dijit.form.ValidationTextBox({
id:"cmpy_" + idResult,
required:true,
trim:true,
"change":"markEmploymentForUpdate();",
promptMessage:"Please enter a valid company name",
value:companyname
});
I just get the object printed to the page.
Any ideas how I can added this to my page and maintain the dojo component rather than it defaulting to a text box?
Many thanks.
dojo.parser.parse(dojo.byId('data-table')); after you set it's innerHTML