jQuery append() not working in IE - javascript

I'm trying to append the following table built up in a string to a div on my page using this:
var table =
'<table data-custom="3963770" id="table" cellpadding="3" cellspacing="5"
valign="top" width="995px" border="3" bordercolor="#83725B">
<th height="50" colspan="2">Company Name</th>
<th height="50" colspan="3">Esco Number</th>
<th height="50" colspan="1">Province</th>
<th height="50">Sector</th>
<th height="50">Technology</th>
<th height="50" colspan="2">Status</th>
<tr>
<td colspan="2">3H Envirostrategies cc</td>
<td colspan="3">11059420</td>
<td>Gauteng, KZN, Western Cape, Mpumalanga, Free State,
Eastern Cape</td>
<td>
<select id="mainSectors0">
<option>Commercial</option>
</select>
</td>
<td>
<select id="mainTechs0">
<option>Project Management</option>
</select>
</td>
<td colspan="2">Active</td>
</tr>
<tr>
<td style="border: none;" colspan="5">
<div data-custom="contact_info" style="display:inline;"><u>Contact information</u></div>
</td>
</tr>
<tbody data-custom="place_holder">
</tbody>
</table>';
I have a div tag with:
<div id="table"></div>
I then try to use this to add the table to the div:
$(table).appendTo($('#table'));
// I've tried $("#table").append(table); but no luck.
It works fine in every other browser except IE 6+. Does anybody know of a workaround, or if i'm doing something wrong?
Thanks in advance.


Your code works for me, also on IE : http://jsfiddle.net/doktormolle/N5z5T/
Are you sure that you use the var-keyword before table = '<table>....</table';
If not, this may break IE, see this related topic: jQuery selector does not work in IE7/8


Your HTML in table variable is invalid. Try to make $('#table').append('<div>a</div>');. It works in IE. Make your HTAMl valid.


Try this:
$('#table').html(table);
It uses jQuery's html function, which makes a bit more sense in this circumstance than append. Not sure why append isn't working though


you don't need to make div as a jquery object when you are using appentTo. try fallowing
$(table).appendTo('#table');
or
$('#table').append(table)


Could it be that you have multiple elements with the same id "table"?

Related

Unable to access a dynamically generated dropdownlist item. It comes as undefined

I am working on a webpage which has a tabstrip depending on number of people in a deal. As it can be 1 for one deal and 3 for another, I have created the drop down items dynamically using a loop index.
<tr>
<td align="right">
<spring:messagecode="label.borrower.employer.status" />:
</td>
<td align="right">
<kendo:dropDownList name="employmentStatus${requestScope.loopIndex}"
dataTextField="text" dataValueField="value" style="width: 100%;"
select="employmentStatusOnClick(${requestScope.loopIndex})"
change="updateEmploymentInfo">
<kendo:dataSource data="${borrowerEmploymentStatus}"></kendo:dataSource>
</kendo:dropDownList>
</td>
I am able to see the drop down lists according to the number of people in a deal. However, this jsp is included in another main jsp and the "change" and "select" functions are in that main jsp. When a value is selected on a drop down, I want to capture it and then perform some operations.
<script>
function employmentStatusOnClick(index) {
console.log(exp.loopCounter);
console.log("counter: "+index);
var employmentStatusVal = $("#employmentStatus"+index).data(
"kendoDropDownList").text();
console.log(employmentStatusVal);
}
</script>
For output, I can see that the value of index is coming correctly. However, even before the page is fully loaded, i get the error that "TypeError: Cannot read property 'text' of undefined"
Things I have Tried So far:
1) Tried to add the script inside ready() function, but it then gives me an error that employmentStatusOnClick is not defined
2) Tried different variations of concatenating the index value with the base name of the drop down list
3) Tried passing the value into a variable and then putting it into the .text() function
4) Latest, I have even tried hardcoding the value of index as 0 to see if it works for the first case, but i still get the undefined error.
I suspect that it has to do something with the loading of the elements. For some reason, it is trying to run this code, even before the element name has been generated. I discussed with a friend and he suggested me to remove the select events and just use the change event instead. Tried that..no effect.
Now, I am planning to remove kendo drop-downs and just use javascript dropdowns as a last resort. Can you please suggest what could be the problem?
Update - HTML Code of the div from Browser:
<div id="tab-employment">
<table>
<tbody><tr>
<td>
<table border="1">
<tbody><tr>
<th>Employer Name</th>
<th>Occupation</th>
<th>Employment Status</th>
<th>Hiring Date</th>
</tr>
<tr align="center">
<td>Roagres</td>
<td>Assistant</td>
<td>Current</td>
<td>2018-03-12 11:59:06.0</td>
</tr>
</tbody></table>
</td>
<td style="width: 1%"></td>
<td>
<table style="display: inline-block;">
<tbody><tr>
<td align="right">Employment Status:</td>
<td align="right"><input name="employmentStatus0" style="width: 100%;" id="employmentStatus0"><script>jQuery(function(){jQuery("#employmentStatus0").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":employmentStatusOnClick(0),"dataSource":{"data":[{"text":"--Select--","value":"--Select--"},{"text":"Employed","value":"Employed"},{"text":"Self-Employed","value":"Self-Employed"},{"text":"Retired","value":"Retired"},{"text":"Seasonal","value":"Seasonal"},{"text":"Student","value":"Student"},{"text":"Unemployed","value":"Unemployed"},{"text":"TEST","value":"TEST"}]}});})</script></td>
</tr>
<tr>
<td align="right">Industry Sector:</td>
<td align="right"><input name="industryStatus" style="width: 100%;" id="industryStatus"><script>jQuery(function(){jQuery("#industryStatus").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":industryStatusOnClick,"value":"1","dataSource":{"data":[{"text":"--Select--","value":"8443"},{"text":"Agriculture/Fishing/Forestry/Mining","value":"8444"},{"text":"Food/Foodservice/Hospitality","value":"8445"},{"text":"Arts/Entertainment/Recreation/Sports","value":"8446"},{"text":"Insurance, Accounting and Banking","value":"8447"},{"text":"Design/Creative","value":"8448"},{"text":"Construction & Skilled Trades","value":"8449"},{"text":"Education and Training","value":"8450"},{"text":"Government/Public Administration","value":"8451"},{"text":"Engineering/Architecture","value":"8452"},{"text":"Manufacturing/Production/Operation","value":"8453"},{"text":"Medical and Healthcare","value":"8454"},{"text":"Media/Telecommunication/Communication","value":"8455"},{"text":"Religion","value":"8456"},{"text":"Legal Services","value":"8457"},{"text":"Emergency and Protection","value":"8458"},{"text":"Real Estate","value":"8459"},{"text":"Professional, Scientific, and Technical Services","value":"8460"},{"text":"Information Technology","value":"8461"},{"text":"Transportation and Utilities","value":"8462"},{"text":"Sales/Marketing/Retail","value":"8463"}]}});})</script></td>
</tr>
<tr>
<td align="right">Express Occupation:</td>
<td align="right"><input name="expressOccupation" style="width: 100%;" id="expressOccupation"><script>jQuery(function(){jQuery("#expressOccupation").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":expressOccupationOnClick,"value":"1"});})</script></td>
</tr>
<tr>
<td align="right">Other - Specify:</td>
<td align="right"><input type="text" id="otherSpecify" name="otherSpecify" disabled="disabled" class="k-textbox" style="width: 100%;"></td>
</tr>
<tr>
<td colspan="2">
<div id="empStatusMsg" style="margin: 0 0 0 0; color: red; width: 300px; float: right;"></div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

So guys, finally I was able to figure this out. Seems like the issue was with the kendo tag libraries or atleast my implementation of them. Before the page was even loaded, the change event was being fired up.
Therefore, I removed the change event from the kendo tag definition and rather used the jquery on change event nested inside document.ready(). After this it started working fine.

Select TH element of an ID within an iframe

I am trying to select a TH element which does not have an ID, so I am using its parent TR element, all of this is within an iframe.
The code looks something like this:
<iframe id="gsft_main">
<table>
<thead>
<tr id="hdr_incident" class="list_header " style="">
<th class="" scope="col" style="vertical-align: middle;" align="center">
<span style="white-space: nowrap;">
Link
</span>
</th>
<th>
</th>
</tr>
</thead>
</table>
</iframe>
I am able to select it using this jQuery, but the point is to get away from including that lib.
$("#gsft_main").contents().find("#hdr_incident th:first-child");
But I can't when I try to do:
var main = document.getElementById('gsft_main').contentDocument;
main.getElementById('hdr_incident').getElementsByTagName('th')[0];
So I tried to use a querySelector, but no luck:
var main = document.getElementById('gsft_main').contentDocument;
main.querySelector("#hdr_incident > th");
One might think the "main" variable part is the issue, but I am able to select other elements using this code, so that shouldn't be the issue.
var main = document.getElementById('gsft_main').contentDocument;
main.getElementById('list_nav_incident');
main.getElementById('page_timing_div');
main.getElementsByClassName('timingDiv')[0];
Does anyone have any idea why it is not working in the iframe? (I am able to get this to work in a jsfiddle without the iframe part).

Replace text in an element in HTML from another element (table) using jQuery

I want to replace a particular text in an HTML with another text from another element, which in this case is a table data.().
Here is my table:
<table id="hftable">
<tr>
<td id="hfpn1">V.Sehwag</td>
<td id="hfp1">DNB</td>
<td id="hfp1b">.-.-..-.</td>
</tr>
<tr>
<td id="hfpn2">G.Gambhir</td>
<td id="hfp2">DNB</td>
<td id="hfp2b">.-.-..-.</td>
</tr>
<tr>
<td id="hfpn3">A.Arora</td>
<td id="hfp3">DNB</td>
<td id="hfp3b">.-.-..-.</td>
</tr>
</table>
where batsman1 is the id of the element where the replacement is to take place or more specifically the table looks like:
<table id="current">
<tr>
<td id="batsman1">Batsman 1</td>
<td id="currentbat1"></td>
</tr>
<tr>
<td id="batsman2">Batsman 2</td>
<td id="currentbat2"></td>
</tr>
<tr>
<td>Bowler</td>
<td></td>
</tr>
</table>
I want to replace Batsman 1 (in the table with id="current") with V.Sehwag (in the table with id="hftable") (when someone clicks on a specific button on the page)
I have tried:
$("#batsman1").text($("#hfpn1").val());
This isn't working. Apart of showing "V.Sehwag" in place of "Batsman 1", it is showing me a blank space.
Any ideas where I am wrong? What is the correct and easy way to do this?
Thank You.

Try to use .text() in this context, You are invoking .val() function over a non-input element, obviously it wont work. And do remember that, .val() only works on input elements on which user can input something via the UI.
$("#batsman1").text($("#hfpn1").text());

The TD element does not have a value, it has text. Modify your code as follows:
$("#batsman1").text($("#hfpn1").text());
Here's the jsFiddle

Use the below, I hope this will help you out to fix the problem.
$("#batsman1").html($("#hfpn1").text());

JavaScript jQuery: Table rows are not drag/dropping

This is the JavaScript portion that I have that should make the table's rows that I have drag and droppable (aka movable). This doesn't work for some reason.
<script type="text/javascript">
jQuery(function(){ jQuery("#sortable93032188").sortable({ items: "tr:.sortable" }); })
</script>
Here's the table info:
<table id="sortable93032188" cellpadding="5" cellspacing="0" border="0" width="0" leftmargin="50">
<thead>
<tr>
<td colspan="1" class="vdarkbluebw" valign="centre">
<font>Field Order - Drag fields up or down as required to preferred order</font>
</td>
</tr>
<tr bgcolor="#eeeee8" class="sortable" id="11874272">
<td id="68937878">
<span class="small">Sample Origin Name<input type="hidden" name="new_field_order" value="Sample Origin Name"></span>
</td>
</tr>
... This table keeps going (it's decently sized).
Now the thing is that I've googled around on drag/drop tables -- and I can't seem to find what's wrong with this. I have very little jQuery/HTML/JavaScript experience and am stumped at this point. What am I doing wrong?

You need to take out the semicolon in your jQuery after the tr.
jQuery(function(){ jQuery("#sortable93032188").sortable({ items: "tr.sortable" }); })
It should work then. Heres a demo: http://jsfiddle.net/7kZY4/

Taking the count of number of 'table' tags using jquery

This is my HTML code
<div class="tableStyle myWebsiteTable">
<table cellspacing="0" cellpadding="0" id="site0" class="site active">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr class="websiteDetails">
<td colspan="5">
<div id="websiteDetails0" class="divWebsiteDetails" style="display: block;">
<table>
<tbody>
<tr id="190">
<td>index</td>
<td></td>
<td></td>
</tr>
<tr class="addPage">
<td align="center" colspan="5"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr><!--Website Details-->
</tbody>
</table>
<table id="addNewSiteTable">
<thead>
<tr>
</tr>
</thead>
</table>
</div>`<br/>
Now table get added dynamically to this structure.I want to write some logic based on the no of table inside the first div.I tried doing this but did not work $('myWebsiteTable').children('table').length)
PLease suggest the correct way to achieve it
Thank you

You need to use . before class in Class Selector (“.class”)
Live Demo
$('.myWebsiteTable').children('table').length
Also make sure you have added jQuery and elements are added to DOM.
You may need to use find() as children will give you only first level childs where as find will get all the tables in descendants.
$('.myWebsiteTable').find('table').length

$('.myWebsiteTable').children('table').length
And if you actually want to count nested tables:
$('.myWebsiteTable table').length

i think it's class
http://api.jquery.com/class-selector/
$('.myWebsiteTable')

try this, this is more helpfull for you
Demo Here

Categories