We Keep Coding

Javascript or jQuery is not loading iFrame after 999th Row in Table on click event

I am facing weird issue when loading iframe with javascript or jquery on click event..
I have search form which shows result set and each rows has a unique id and each row has corresponding iframe which is display:none by default.
When user click on plus icon it loads iframe source and remove display none to corresponding iframe row. My code is working fine till Row-999 but after that when user click on plus icon, it add source to iframe, even change plus(+) icon to minus(-) but still it is not loading iFrame and not showing perticular row. And no error is showing in console also. I don't know why it is not working after 999th Row.
Please Help me..
<tr>
<td class="resultListItem">
<a style="cursor:hand; text-decoration: none;" class="plus-anchor" href="#row-1045" data-src="http://localhost/l58/public/cic/tab/company-info?mode=iframe&active=tab1&addressid=251856&siteuseid=276003&siteusecode=BILL_TO&customerid=11728&orgid=83" onclick="toggleTabsLoad(1045);">
<div onclick="changeSymbol('symbol1045')" id="symbol1045" class="plus-icon">+</div>
</a>
</td>
<td class="resultListItem">CONNECT SINGLE SALE</td>
<td class="resultListItem">123123</td>
<td class="resultListItem">1110</td>
<td class="resultListItem">58 DISCOVERY</td>
<td class="resultListItem">IRVINE</td>
<td class="resultListItem">US</td>
</tr>
<tr id="TR1045" style="display:none;">
<td colspan="7">
<iframe id="row-1045" style="width: 100%;" border-top="1px solid #A9A9A9;" frameborder="0" height="150px"></iframe>
</td>
</tr>
And this is my javascript code below...
function toggleTabsLoad(id) {
obj = document.getElementById('TR' + id);
var source = document.querySelector("a[href='#row-" + id + "']").getAttribute('data-src');
console.log(source); // giving output in all rows
frame = document.getElementById('row-' + id);
console.log(frame); // giving output in all rows
frame.src=source;
if (obj.style.display == 'none') {
obj.style.display = '';
} else {
obj.style.display = 'none';
}
}
I also tried with jQuery but I am getting same behavior...
$(function() {
var plus = $('.plus-anchor');
plus.on('click', function() {
var row = $(this).attr('href'),
source = $(this).data('src');
$('iframe' + row).attr('src', source);
});
});

I have around 17 tables in my HTML document and want them to appear separately when I click on them through a separate button [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have 17 tables in my HTML document. I want them all under a separate button. So the table for the year 2000 under a button that says: Table for year 2000 below! I can do the first one. But when I try to apply the JavaScript code for the button on other tables I keep getting the first table.
This is my JavaScript code:
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
This is my HTML code for the tables, I'm just showing the first 2 tables because it's 17 times copy paste:
<!--Table for the year 2000 below-->
<button onclick="myFunction()">Table for the year 2000 below!</button>
<div id="myDIV" style="display:none;">
+<table>...
</table>
<br><br><br>
</div>
<!--Table for the year 2001 below-->
<button onclick="myFunction()">Table for the year 2001 below!</button>
<div id="myDIV" style="display:none;">
+<table>...
</table>
<br><br><br>
</div>
Alright so hear me out, I now with a quick Google search that getElementById can only hold one parameter. I got that. I tried to copy my JS code and change the ID in the function and the HTML code, but everytime I try that I can only show the latest table I applied that method to, doesn't matter which button I press.
I have also seen people on this forum use querySelectorAll but that didn't work out for me.
Could someone help me out with this? I expect my method to work, use the same function that works on the first table but keep changing the ID. But clearly it didn't.

Few inputs:
Id should be unique to an element
The event handler should be given some inputs to identity which element (table in this case) it has to work with.
To cover all these, a sample snippet is included to help you further.
Detailed breakdown:
We are attaching a click event handler to all the button elements
We try to identify all button elements using document.querySelectorAll
How do we identity which table to show on a click event? We can put that additional details in data-* attributes. Based on that we are selecting that specific table using document.getElementById
Detailed comments included in the code-base.
window.onload = function() {
// Get all the `button` elements
var buttons = document.querySelectorAll("button");
// To store the current `table`
var currentTable = null;
// Loop over each button element and attach an handler to `click` event
buttons.forEach((element, index, array) => {
element.addEventListener("click", function() {
// Get the associated table using the `data-table` attribute of this button
var tableId = element.getAttribute("data-table");
// Good to go?
if (tableId) {
// Hide the current `table` if we have any displayed
if (currentTable !== null) {
currentTable.style.display = "none";
}
// Store the current table and `display` it
currentTable = document.getElementById(tableId);
currentTable.style.display = "table";
}
});
});
}
table {
display: none;
}
#table1 {
border: 1px solid red;
}
#table2 {
border: 1px solid blue;
}
<button id="btnForTable1" data-table="table1">Show Table 1</button>
<button id="btnForTable2" data-table="table2">Show Table 2</button>
<!-- Table 1 -->
<table id="table1">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
<!-- Table 2 -->
<table id="table2">
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
</table>

Onclick hide div element

I have a link that shows/hides a content within a div upon click, what I'm trying to do is have a button that will hide a specific div(the content in sectiontohide1) within the div(sectiontohide)upon click. I've got the Javascript working for the first link(sectiontohide) and it works but I can't figure out how to get the second link to hide the div
<a id="trackAttendance1" onclick="loadtable('sectiontohide');" class="trackAttendance" href="#">Track Absences</a>
<div id="sectiontohide" style="display:none;">
<table>
<div id="sectiontohide1">
<tr>
<td>Web Programming Seminar</td>
<th id="absent" rowspan="2">Absent</th>
</tr>
<tr>
<td>TUESDAY 2:00-3:00 - 21/02/2017</td>
</tr>
</div>
<td>Management in IT</td>
<th id="absent" rowspan="2">Absent</th>
<tr>
<td>FRIDAY 9:00-11:00 - 24/02/2017</td>
</tr>
<tr>
<td>Web Programming Lecture</td>
<th id="absent" rowspan="2">Absent</th>
</tr>
<tr>
<td>FRIDAY 12:00-1:00 - 24/02/2017</td>
</tr>
</table>
<a id="trackAttendance1" onclick="hidediv('sectiontohide1');" class="close" href="#">Hide Element</a>
My Javascript for showing/hiding the table
function loadtable(id){
var divelement = document.getElementById(id);
if(divelement.style.display =='none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}

Your loadtable function actually toggles the visibility of the element by the given id.
So you can run it for showing / hiding for the other parts too. For this it should be sufficient to change the click handler of the close button to loadtable('sectiontohide1');
But there are some other issues too, for example :
A div can be placed in a table only if it is surrounded by a <td></td> or <th></th>
<th> tag is for header so use it only on top of the table, you can use css for styling the cells
<td> and <th> tags should always be surrounded by a <tr></tr>

Looks like you were on the right track. To just hide the div, try something like:
function hidediv(id) {
var divelement = document.getElementById(id);
divelement.style.display = 'none';
}

Javascript working on second button click instead of first

I have a table that I am trying to display and activate form information in on a button click. The table is set to "display: none" and the button is connected to the javascript. The javascript works but only after the button has been clicked a second time. I would like for it to work the first time it is clicked.
Button & Table HTML:
<button data-bind="click: addPatient" style="margin-top: 20px; margin-bottom: 10px;">Add Patient</button>
<table id="newPatientForm">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th></th>
</tr>
<tbody data-bind="foreach:Patients">
<tr>
<td class="form-group"><input data-bind="value: FirstName, event: {change: flagPatientAsEdited}, hasfocus: true" /></td>
<td class="form-group"><input data-bind="value: LastName" /></td>
<td class="form-group"><button data-bind="click: $parent.removePatient">Delete</button></td>
</tr>
</tbody>
</table>
This is the table CSS:
#newPatientForm {
display: none;
}
This is the javascript that the button calls.
self.addPatient = function () {
var divElement = document.getElementById('newPatientForm');
var patient = new PatientViewModel({ SiteId: 0, FirstName: "", LastName: "", ObjectState: ObjectState.Added });
if (divElement.style.display == 'none') {
divElement.style.display = 'block';
self.Patients.push(patient);
}
else {
divElement.style.display = 'none';
self.Patients.pop(patient);
}
},

You need to check the computed style when it is set in a stylesheet
function isHidden(elem) {
var style = window.getComputedStyle(elem);
return style.display === "none";
}
Change
if (divElement.style.display == 'none') {
to
if (isHidden(divElement)) {
which uses the above method.
It would probably bet better to just have a class that is hidden or not and toggle the class.
And finally, I do not think self.Patients.pop(patient); is doing what you think it is doing. the pop method has no arguments. It does not find and remove elements.

Two anchors and two tables, need to show and hide

I have two anchors and two tables, upon clicking anchor 1, I want table1 to appear and on clicking anchor2 table 1 must be closed and table 2 should appear.
My code in JavaScript for toggling between show and hide:
function setTable(what) {
if (document.getElementById(what).style.display == "block") {
document.getElementById(what).style.display = "none";
}
else if (document.getElementById(what).style.display == "none") {
document.getElementById(what).style.display = "block";
}
}
My two anchors:
<td>
I am
</td>
<td>
Photo
</td>
My two table:
<table id="aboutdialog" title="Me mE me!!" style="display:none;" >
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;">
Now it works for me like, on clicking the anchor1 for the first time it shows table 1 and on second click hides table1. Same for anchor2.
But I want upon clicking anchor1 to close table 2 if opened and display table1 alone vice versa for anchor2.

Without jQuery
<td>
I am
</td>
<td>
Photo
</td>
then
function setTable(what, second) {
if (document.getElementById(what).style.display == "block") {
document.getElementById(what).style.display = "none";
} else if (document.getElementById(what).style.display == "none") {
document.getElementById(what).style.display = "block";
document.getElementById(second).style.display = "none";
}
}
Demo: Fiddle
A jQuery solution might look like
<table>
<tr>
<td>
<!--Add a class trigger to the anchor elements-->
I am
</td>
<td>
<!--Add a class trigger to the anchor elements-->
Photo
</td>
</tr>
</table>
<!--Add a class target to the tables elements-->
<table id="aboutdialog" title="Me mE me!!" style="display:none;" class="target">
<tr>
<td>1</td>
</tr>
</table>
<!--Add a class target to the tables elements-->
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;" class="target">
<tr>
<td>2</td>
</tr>
</table>
then
//dom ready handler
jQuery(function () {
var $targets = $('.target');
$('.trigger').click(function () {
var id = $(this).attr('href');
//hide all other target elements
$targets.not(id).hide();
//toggle the display of current element
$(id).toggle()
})
})
Demo: Fiddle

Just replace the function
function setTable(what){
if(what=="aboutdialog"){
document.getElementById("aboutdialog").style.display="block";
document.getElementById("stab").style.display="none";
}
else if(what=="stab"){
document.getElementById("aboutdialog").style.display="none";
document.getElementById("stab").style.display="block";
}
}

You can do something like this:
$('#iam').click(function() {
$(this).closest('#aboutdialog').show().siblings('#stab').hide();
});
$('#photo').click(function() {
$(this).closest('#stab').show().siblings('#aboutdialog').hide();
});

Try using jquery
$(document).ready(function($) {
$('#iam').click(function(){
$('#aboutdialog').show();
$('#stab').hide();
});
$('#photo').click(function(){
$('#stab').show();
$('#aboutdialog').hide();
});
});

live example is here >>
Simple with the jquery library :
$('#iam').click(function(){
$('#aboutdialog').show().siblings('table').hide();
});
$('#photo').click(function(){
$('#newdialog').show().siblings('table').hide();
});
html
I am</td>
<td>Photo</td>
<table id="aboutdialog" title="Me mE me!!" style="display:none;" >
<tr><th>abc</th></tr>
</table>
<table id="newdialog" title="Me mE me!!" style="display:none;" >
<tr><th>yaskjd</th></tr>
</table>

$(document).ready(function() {
var options = {'iam': 'aboutdialog', 'photo': 'stab'};
$('#iam, #photo').on('click', function() {
$('#aboutdialog, #stab').hide();
$('#' + options.($(this).attr('id'))).show();
});
});