I want to make the link from during dynamic populating the table using Jquery. I am populating the table data as
trHTML +=
'<tr><td>'+ value['value1'] +
'</td> <td>' + value['value2'] +
'</td> <td>' + value['value3'] +
'</td><td>'.html('' + "Link" + '')+
'</td></tr>';
But it gives error
Uncaught TypeError: "</td><td>".html is not a function
You don't need to use .html() continue string concatenation.
'</td><td>' + '' + "Link" + ''+
However, I would recommend you to create HTML using jQuery( html, attributes ) method for cleaner approach.
var tr = $("<tr>")
var anchor = $("<a>", {
"href" : "http://www.google.com/" + value['valueLink'],
"text" : "Link"
});
var td = $("<td>");
td.append(anchor);
tr.append(td);
Related
The purpose of this code is to make an ajax call if the <td> contained within the <tr> that is below the <tr> that was clicked, but only if the hidden <tr> is empty. Eventually I plan to take that data and do something with it, but for right now, I just need to get this thing which emulates an accordion as a table working. Due to this table being made on the same html file that I have other .hidden elements on, I had to create custom classes to hide these particular ones. The class detail-view makes it visible, and the class hidden-detail contains display:none. I know that postDetails works as far as finding the right data. What i'm more worried about is finding out why FireFox's dev tools say statusRow and detPane are marked as (unavailable) throughout this code, whereas statusRow.closest('tr').next('tr') actually appears to contain the row detPane, as intended. Is there something wrong with the jQuery or selectors? What's going on here?
function makeOrderTable(response, username, sesstoken) {
$(jQuery.parseJSON(JSON.stringify(response))).each(function() {
var foNum = this['Factory Order#'];
var pO = this['PO#'];
var status = this['Status'];
var shipDate = this['Ship Date'];
$('.orders tbody').append(
'<tr class="status-row">'+
'<td>' + foNum + '</td><td>' + pO + '</td><td>' + status + '</td><td>' + shipDate + '</td>'+
'</tr>'+
'<tr class="detail-row hidden-detail">'+
'<td colspan="4"></td>'+
'</tr>'
);
});
$(document).ready(function() {
$('table').on('click', 'tr.status-row', function() {
var statusRow = $(this);
var detPane = $(statusRow[0]).closest('tr').next('tr');
$('.detail-view').addClass('hidden-detail');
$('.detail-view').removeClass('detail-view');
detPane.addClass('detail-view');
detPane.removeClass('hidden-detail');
if (detPane.find('td').text == '')
{
var value = statusRow.find('td:first-child').text();
postDetails(value, username, sesstoken, detPane.find('td'));
}
});
});
}
The problem was that as epascarello pointed out, text isn't a valid property. Ergo, couldn't find anything. But, I also needed to grab the details td separately--i.e. couldn't access things from other things and just daisy-chain selectors all over the place. So, here's the end result.
function makeOrderTable(response, username, sesstoken) {
$(jQuery.parseJSON(JSON.stringify(response))).each(function() {
var foNum = this['Factory Order#'];
var pO = this['PO#'];
var status = this['Status'];
var shipDate = this['Ship Date'];
$('.orders tbody').append(
'<tr class="status-row">'+
'<td>' + foNum + '</td><td>' + pO + '</td><td>' + status + '</td><td>' + shipDate + '</td>'+
'</tr>'+
'<tr class="detail-row hidden-detail">'+
'<td colspan="4"></td>'+
'</tr>'
);
});
$(document).ready(function() {
$('table').on('click', 'tr.status-row', function() {
var statusRow = $(this);
var detRow = statusRow.closest('tr').next('tr');
var details = this.nextElementSibling.querySelector('td');
$('.detail-view').addClass('hidden-detail');
$('.detail-view').removeClass('detail-view');
detRow.addClass('detail-view');
detRow.removeClass('hidden-detail');
if (details.innerText == '')
{
var value = statusRow.find('td:first-child').text();
postDetails(value, username, sesstoken, details);
}
});
});
}
If I understand the question correctly, I think your selector for the "hidden" tr is incorrect.
You have the click event attached to the tr, so you shouldn't have to do .closest('tr'). Just var detPane = $(statusRow[0]).next('tr'); should get you the next tr after the one that was clicked.
A feature was developed in an application by clicking a hyperlink in a table, open a div below with a table, filtering contents, depending on the link.
The link was created dynamically in one jQuery function and had the following attributes:
$("#pending div#list").bind("data_loaded", function (event, records) {
var tableBody = $("tbody", $(this));
for (var index = 0; index < records.length; index++) {
var rowHtml = '<tr id="' + rowid + '"><input type="hidden" name="' + rowid + '" id="' + rowid + '" value="1"/>' +
'<td><a class="populate" id="' + rowid + '" onclick="javascript:clickHandler(' + rowid + ');">' + docid + '</a></td>' +
'</tr>';
tableBody.append($(rowHtml));
}
});
In Mozilla Firefox, it works perfectly fine. However in Chrome I cannot call the clickHandler function.
From the information I find on Google, say Inline JavaScript will not be executed.
You can check here: https://developer.chrome.com/extensions/contentSecurityPolicy
But now comes my difficulty.
I changed my hyperlink to:
'<td><a class="populate" id="' + rowid + '" onclick="clickHandler(' + rowid + ');">' + docid + '</a></td>' +
And I created this jQuery:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById([parameter]).addEventListener('click', function () { clickHandler([parameter]); },false);
});
Can anyone explain how I can pass the parameter rowid for jQuery?
Thanks.
Regards.
Your snippets imply you're using raw DOM manipulation in Javascript rather than JQuery (which is good! it's definitely faster) but since you mention JQuery, that's what I'll be suggesting.
Instead of your addEventListener call above, try
$('div#list').on('click', 'a.populate', function() {
clickHandler($(this).attr('id'));
});
And then remove the 'onclick' attribute in the declarations of the anchor tags too.
This will add an event listener to all anchor tages with a class of 'populate' which will call clickHandler passing a string parameter consisting of that anchor tag's 'id'.
I'm trying to create a dynamic table which will have rows added and removed throughout its use. I do not want to have to put id's on every container that I later want to reference.
For instance, I want to add a hidden input to the last cell of a dynamically added row. The row has an id, how can I use dojo.place() when I do not have an id on the last cell?
var pmrCount = dojo.query("#pmhTable >tbody >tr").length;
var rowID = 'pmr_' + pmrCount;
var newPmrRow =
'<tr id="' + rowID + '">' +
'<td>' + pmh + '</td>' +
'<td>' + String(pmr.severity).charAt(0) + '</td>' +
'<td>' + pmr.customerName + '</td>' +
'<td>' + pmr.deviceType + '</td>' +
'<td>' + pmr.deviceModel + '</td>' +
'<td>' + pmr.deviceSerial + '</td>' +
'<td align="center"><a class="cancel-link"></a></td>' +
'</tr>';
//dojo.place(newPmrRow, dojo.query("#pmhTable >tbody"));
var newPmrHiddenInput =
'<input type="hidden" name="pmrs" value="'+ JSON.stringify(pmr)+ '">';
//dojo.query("#" + rowID + " td:last").place(newPmrHiddenInput);
The two commented lines of code are the ones that I am trying to replace with functional code. These do not work, they don't surface any warnings in the error console like other syntax errors. Not sure where to go from here.
I know that dojo.query() returns a NodeList and place() is expecting an DOM node or an id. What's the correct way to do this?
You want to look at the dojo/NodeList-dom extension to Nodelist. It allows you to place each element in a NodeList into an element based on query selector . In AMD Style it looks like:
require(['dojo/dom-construct', 'dojo/NodeList', 'dojo/NodeList-dom', 'dojo/domReady!'], function (domConstruct, NodeList) {
var nodes = new NodeList([domConstruct.toDom('<div>someContent</div>')]);
nodes.place('#x');
});
Looking at the docs I was kind of surprised there wasn't an easier way to do this, so maybe there is a better way than this.
Well, I found two lines of code that seem to work, but I don't know if referencing NodeLists in an Array style is technically correct for this. This is what I did.
dojo.place(newPmrRow, dojo.query("#pmhTable >tbody")[0]);
dojo.place(newPmrHiddenInput, dojo.query("#" + rowID + "> td:last-child")[0]);
This is the code which i use to append table row,where personTabs is the iframe name
$(".addClass1").on('click',function() {
parent.parent.parent.personTabs.$("#skilltableId").append(
'<tr id="skilltableId1"><td class="btnRemoving">'+$("#selecetedValue").val()+'</td><td class="editing">'+$("#type").val()+'</td><td style="display:none">'+$("#commonDbid").val()+'</td></tr><br>'
);
when i click td class='editing', i am generating a textbox as follows..
parent.parent.parent.personTabs.$(".editing").on('click',function() {
var data = $(this).text();
$(this).html("<input type='text' id='focus123' value='"+data+"'/>").children().focus();
});
I am getting everything fine for the first time..the table row is been appended fine..when i do the same append for the second time,table row is generated.onclick working only for the last generated row..but not previous one..why is it so..anybdy here can tel me,..i tried live,delegate methods..but none worked..i am using jquery-1.9.1.js
I think one problem is that you have created a text box with the same id.
I am not sure why you used parent.parent.parent...
$(".addClass1").on('click',function() {
$("#skilltableId").append(
'<tr id="skilltableId1"><td class="btnRemoving">'+$("#selecetedValue").val()+'</td><td class="editing">'+$("#type").val()+'</td><td style="display:none">'+$("#commonDbid").val()+'</td></tr><br>'
);
$(".editing").on('click',function() {
var data = $(this).text();
$(this).html("<input type='text' class='focus123' value='"+data+"'/>").children().focus();
});
I am not sure if it will work or not, but you can also use this javascript function
$(".addClass1").on('click', function () {
$("#skilltableId").append('<tr id="skilltableId1"><td class="btnRemoving">' + $("#selecetedValue").val() + '</td><td class="editing" on click="myfunction(this)">' + $("#type").val() + '</td><td style="display:none">' + $("#commonDbid").val() + '</td></tr><br>');
function myfunction(selectedTd) {
var data = $(selectedTd).text();
$(selectedTd).html("<input type='text' class='focus123' value='" + data + "'/>").children().focus();
}
});
How is it possible to get the id of the dynamically generated textboxes using jquery?. I need to fire the TextChanged event for the corresponging textbox. There is no method reference for the textboxes in the code behind.How can i refer to any method in the codebehind on firing the event. Somebody please help. I dont know jquery much. The entire script im using is as as follows:
<script type="text/javascript">
$(init);
function init()
{
$('#test').droppable(// Div Control
{
drop: handleDropEvent
});
$('a').each(function(idx, item) {
$(item).draggable({ cursor: 'move', helper: 'clone' })
});
}
$(function() {
$("#draggable").draggable(); //Nothing to do with this div
});
function handleDropEvent(event, ui)
{
var draggable = ui.draggable;
document.getElementById('test').innerHTML += addColumn(draggable.attr('text')) + '<br>';
}
function addColumn(column)
{
var iHtml;
// This code will generate a checkbox and a textbox. I need to fire the event of thus generated textboxes.
iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;"> ' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input type="text" runat="server" id="aln' + column + '"> </div>';
return iHtml;
}
</script>
There's two ways: keep the generated element, or generate an ID when you generate your new element.
a) keep the generated element
This requires that you don't use innerHTML, but create the element (with document.createElement, or with jQuery's $), and then you can use the element directly (no need to call it by ID any more). For instance, with jQuery:
var container = $('#container');
var myDiv = $('<div id="myDiv"/>');
var myCheck = $('<input type="checkbox"/>');
myDiv.append(myCheck);
container.append(myDiv);
b) generate the ID
container.innerHTML = '<div id="myDiv"><input type="checkbox" id="myCheck"/></div>';
// and after this you can get them by ID:
var myCheck = $('#myCheck');
I would just add a class to the textbox in your iHtml then use .live() event
replace your iHtml with this
iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;"> ' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input class="myclass" type="text" runat="server" id="aln' + column + '"> </div>';
then add the live event
$('.myclass').live('change', function() {
alert(' Live handler called.');
});
here is a WORKING DEMO