Develop Reference

Run JavaScript in Fancybox Modal Window (Use .on() to sort table columns)

I'm a novice programmer with a basic grasp of JS and JQuery. I am using Fancybox to pull an HTML Table via Ajax and show it to users of our system.
HTML (within Fancybox):
<table>
<thead>
<tr>
<th class="priority-2 sortable date" style="min-width:150px">Date / Time</th>
<th class="priority-2 sortable text" style="min-width:150px">Changed By</th>
<th class="priority-1 sortable text" style="min-width:150px">Previous Value</th>
<th class="priority-1 sortable text" style="min-width:150px">New Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="priority-2">15/12/2021 11:23</td>
<td class="priority-2">John Smith</td>
<td class="priority-1">Stalled</td>
<td class="priority-1">Test</td>
</tr>
<tr>
<td class="priority-2">14/12/2021 16:58</td>
<td class="priority-2">David Jones</td>
<td class="priority-1">Live</td>
<td class="priority-1">Stalled</td>
</tr>
</tbody>
</table>
I have some Javascript that I use elsewhere to sort tables when the is clicked which works OK. I know that to get this to work on Ajax content I have to change the .click() to use .on() but with my my limited knowledge I cannot get the syntax to work correctly.
JS (in seperate .js file):
Original Code:
$('thead th.sortable').each(function(index, listItem) {
$(this).click(function(e){
e.preventDefault();
// sort column code here
});
});
My attempt at amending the code:
$('thead th.sortable').each(function(index, listItem) {
$(this).on('click', function(e) {
e.preventDefault();
// sort column code here
});
});
I have tried using $(document).(this) etc. but to no avail. The above works in the main HTML but not in the Fancybox window.
I use the following JS Code to show/hide sections which I've successfully adapted to work in the Fancybox window:
$(document).on('click', '.header-row', function(e) {
// Toggle Section code here
});
Any help with the syntax I need is appreciated. Apologies in advance for the poor coding knowledge.

Hide all Table Rows expect one selected

I have a table within my Spring MVC web application that uses JSP to serve up the data, the table is a dynamically loaded list of jobs to be worked on, what I am trying to do is when the table row is selected change the color of the Row to red and hide all other rows in the table.
The rows are getting highlighted but when I try to hide the rows I have no success, any ideas or help is much appreciated , please she what I have tried below with table structure. Thank You
What happens when table data link is pressed is a form is opened with table data passed to form
Table:
<table class="table table-hover" id="no-more-tables" style="margin-bottom: 0px;">
<thead>
<tr>
<th>Service Id</th>
<th>Vehicle</th>
<th>Due date</th>
<th>ServiceType</th>
<th>Last update</th>
<th>Frequency</th>
<th>Start</th>
</tr>
</thead>
<tbody style="margin-bottom: 0px;">
<tr id="table_row_id2" class="">
<td data-title="Service Id">2</td>
<td data-title="Vehicle">vehicle two</td>
<td data-title="Due date">2018-02-14</td>
<td data-title="ServiceType">Preventive Maintenance</td>
<td data-title="Last update">2018-02-14</td>
<td data-title="Frequency">Every 3 months, from finish date.</td>
<td data-title="Start"><a href='/inspections/?service_id=2' id="startLink">
<span class="glyphicon glyphicon-plus-sign"></span>
</a> </td>
</tr>
<tbody style="margin-bottom: 0px;">
<tr id="table_row_id3" class="">
<td data-title="Service Id">3</td>
<td data-title="Vehicle">VAN1</td>
<td data-title="Due date">2018-02-20</td>
<td data-title="ServiceType">Preventive Maintenance</td>
<td data-title="Last update">2018-02-20</td>
<td data-title="Frequency">Every 3 months, from finish date.</td>
<td data-title="Start"><a href='/inspections/?service_id=3' id="startLink">
<span class="glyphicon glyphicon-plus-sign"></span>
</a> </td>
</tr>
</tbody>
</table>
Jquery code:
$(document).ready(function() {
$(window).on('load',function(){
var service_id = $('#service_id').val();
if(service_id){
$('#serviceRow').toggle();
$('#table_row_id'+service_id).addClass('danger');
$('#table_row_id'+service_id).siblings().hide();
}
});
});
Other way I approached:
$(document).ready(function(){
$(window).on('load',function(){
$( "table tbody tr" ).siblings( ".danger" ).hide();
});
});
I have researched solutions on SO and on-line with no joy including this one:
How to hide all tr from table except clicked one
Please if you decide to down-vote my question please provide a reason as to why and we can try rectify the issue, thanks for your time, let me know if need anything else. Jason

There are a few issues with your code.
1. You are not attaching click event handler for the table row. You are writing the logic inside window onload event which won't trigger when you click on a row.
2. You do not have any element with id service_id. I assume you are trying to get the content of the cell with data-title="Service Id"
3. val() is used to get the value of input, select or textarea elements. To get content of cell, you need to use text() or .html(). See jquery documentation to understand the difference.
4. You have wrapped each row in a tbody tag. As such, calling sibling() on the row elements will return empty collection.
Here is the working plunker: https://plnkr.co/edit/O33Xnwvg3yslLkG3DeHT?p=info

jquery:Dialog box not poping in a dynamically generated table

I have created a struts2-jsp application,i want a dialog pop up whenever edit hyperlink in clicked,I am using Jquery to pop up a dialog when Edit hyperlink is clicked.
The problem is that Dialog box pops up only when the first edit is clicked,in the second and other edits which are generated dynamically when a record is added dialog box doesn't pops up.
The Jquery code is:
<script>
$(document).ready(function(){
$( "#todo" ).dialog({ autoOpen: false });
$( "#dialogLink" ).click(function() {
$( "#todo" ).dialog('open');
});
});
</script>
The code to dynamically generate the table is:
<div class="content">
<table class="todoTable" cellpadding="5px">
<tr class=even>
<th>TITLE</th>
<th>STATUS</th>
<th>EDIT</th>
<th>DELETE</th>
</tr>
<!--This will iterate through the todolist -->
<s:iterator value="gettodoList()" status="todoStatus">
<tr class="<s:if test="#todoStatus.odd == true ">odd</s:if> <s:else>even</s:else>">
<td><s:property value="title" /></td>
<td><s:property value="complete" /></td>
<!-- This will append the Id with the url -->
<td>
<a id="dialogLink" href="#">Edit</a>
</td>
<td><s:url id="deleteURL" action="deleteTodo">
<s:param name="id" value="%{id}"> </s:param>
</s:url> <s:a href="%{deleteURL}">Delete</s:a>
</td>
</tr>
</s:iterator>
</tbody>
</table>
</div>

You need to use the .on() to set the event handler instead of the .click() as the latter will only attach the event on existing nodes while the first will attach it to existing nodes and new ones as well similar to how .live() used to work in earlier versions of jquery
take a look at http://api.jquery.com/live/

1) it is because you are using an id, use a class and it should work fine.
&
2) you should try to use on() for dynamically generated elements.

Angular X-Editable makes editable field appear in next table cell

I'm currently trying to implement X-Editable in my Angular project. What I have is a table, with the possibility to add and delete entries and I want to be able to do edit them as well. What I have is the following:
HTML:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nr.</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="users in $ctrl.users"> //user should be editable
<td>
{{$index + 1}}
</td>
<td editable-text="users">
{{users}}
</td>
<td>
<div class="btn-group">
<span ng-click="$ctrl.removeUser($index)" class="glyphicon glyphicon-trash"></span>
</div>
</td>
</tr>
</tbody>
</table>
<input ng-model="$ctrl.addMe"/>
<button ng-click="$ctrl.addUser()">Add</button>
<p id="errormessage">{{$ctrl.errortext}}</p>
JS:
class UserlistController{
constructor(){
this.users=["John","Peter","Julia"];
this.errortext="";
}
addUser(){
this.errortext="";
if(this.users.indexOf(this.addMe)==-1){
this.users.push(this.addMe);
}else{
this.errortext="The user does already exist!";
}
}
removeUser(user){
this.users.splice(user,1);
this.errortext = "";
}
}
export default UserlistController;
Editing the cell is even possible, so clicking on the cell, entering another value and then clicking on save does its job, but there is one problem: The input field that appears, appears in the next table cell, so it completely messes up the table. Does anybody happen to know, why this happens and how to fix it? You can see what it looks like here. So the x-editable cell gets to the "Action" column and the trash gets out of the table.. Any ideas?

Can't realize how you got the editable-text directive working on a td since to work properly it requires to be added to an anchor (a) tag. Therefore, I think that's what you were missing.
Just tweak your code a bit by adding the directive on an a tag instead:
<td>
<a href="#" editable-text="user">
{{user}}
</a>
</td>
Demo
Update
Here is a custom directive to accommodate the desired behavior as you mentioned in the comments. This version enables you to conceal the text itself behind the form where editing it is possible.

Javascript : How to access a table inside a frame?

To access the value of an ID we can use :
document.getElementById(ID).value.
But I have a problem of accessing an ID in a table. There is a frame inside a table. The content of the frame is a table also because I want to scroll up and down the table.
main.html :
<script type="text/javascript">
function show_name()
{
alert(document.getElementById("name1").value);
}
</script>
<table id="table1">
<tr>
<td>
<div id="mydiv">
<!-- the ajax func call myframe.php and pu result here -->
</div>
</td>
</tr>
</table>
<input type="button" value="Show Name" onClick="show_name()">
myframe.php :
<iframe height="500px" height="400px" src="table2.php"></iframe>
Below is table2.php. It produces a table interactively based on a parameter passed into it. And of course the feedback inserted into "mydiv".
<?php
// mysql_connect();
// mysq_query....
?>
<table id="table2">
<tr>
<td>
<input type="text" id="name1" value="john">
</td>
</tr>
</table>
The code run very good, and everything come up into the page correctly. By I want to do someting with an object inside the frame, but how to access it ?
So far pushing the button give nothing, that means the object can not be accessed by the code. Of course, there will be more meaningfull process rather than just alert a name.
Thanks for help.

To access the element inside the iframe:
window.frames[1].document.getElementById('name1');