I have 2 buttons which I only want to show when it's on any other page other than the index page, is there a way to do that?
Index.html:
<body>
<header ng-include="'views/header.html'"></header>
<main ng-view></main>
</body>
Sub Page.html:
<div>
<table id="tabletodownload" ng-show="auditoriums === 'none'" style="border:1px solid #000;">
<tr>
<th> Customer Name </th>
<th> Order Value </th>
<th> Ordered On</th>
</tr>
<tr ng-repeat="audit in auditoriums| limitTo: 1 - auditoriums.length">
<td>{{audit.NAME}}</td>
<td>{{audit.ADDRESSBLOCKHOUSENUMBER}}</td>
<td>{{audit.ADDRESSPOSTALCODE}}</td>
<td>{{audit.ADDRESSSTREETNAME}}</td>
</tr>
</table>
<br/>
</div>
<button type="button" id="btnDownload"> Download as CSV</button>
I need to place the button in my index page but only shows when in my sub page.html. Why? Because I have no idea why my button function (download table to csv function) doesn't work when I place it any other place other than the index page.
Related
The table being made dynamically using Thymeleaf. Each row of the table has a img link attached to it. On the click of which I want to get the selected rows img link first , second and third cell.
Relevant Table Code
<table class="table" id="tblDocType" style="padding: 20px 10px;">
<thead class="thead-dark">
<tr>
<th scope="col"> <b> Document Type </b></th>
<th scope="col"> <b> Practice Area </b> </th>
<th scope="col"><b> Retention Policy </b></th>
<th scope="col"> <b> Effective Date<br> Required </b></th>
<th scope="col"> <b> Termination Date<br> Required </b></th>
<th scope="col"> <b> Action</b></th>
</tr>
</thead>
<tr th:each="doctype,iterStat : ${dlist}">
<td th:text = "${doctype?.doctypes}"></td>
<td th:text = "${doctype?.practiceAreaId}"></td>
<td th:text = "${doctype?.retention_policy}"></td>
<td th:text = "${doctype?.effectiveDateRequired}"></td>
<td th:text = "${doctype?.terminationDateRequired}"></td>
<td>
<a href="#" th:name="${doctype?.practiceAreaId}" th:id="${iterStat.index}" onclick="deleteTrigger(this.id)" style="color: blue;">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
</table>
I am trying to get the cell values using jquery.
Relevant jquery code
function deleteTrigger(id){
var value=$("#tblDocType").closest("tr").find('td:eq(0)').text();
console.log("value=",value);
var doctypesjson={
"doctypes": id,
"practiceAreaId": pracaticeareaidfrombutton
};
}
In the console the value is coming blank.
Please help me if you know what can be done for the problem. Thank you in advance
Presently, it appears that your code is looking for the first TR, then within that the first TD. However, this won’t do anything as your first TR only contains TH.
In calling your deleteTrigger() function, you should pass through the element that was clicked
deleteTrigger(this); // use this for your TR lookup.
However, since you’re using jQuery already, it may make your life easier to abandon the delete function altogether and use a listener;
$(“tr”).click(function(){
$(this).find(“td”).first() // this will get the first td of a clicked row
$(this).find(“td”).eq(1) // this will get second td etc...
})
I am new to Angularjs and I am trying to figure out how it's different modules work. So, I am working on a project on which I wanna achieve an accordion-like style for a page, in which a table is shown when I click a panel button. The HTML code that creates(dynamically from a database) the div elements I modify is posted below.The problem is that in this panel, any number of tables can be shown,while I need to only have one opened at a time,so when one opens,the one opened before it should close.Any ideas how I can achieve this functionality?(I assume the error is because the showDB variable is local to each table scope, but I don't know how to work around it.) Thanks!' `
<div ng-repeat="(key, value) in data.services">
<div ng-show="showSection(key)" class="top_panel-section">
<button class="btn top_btn btn-header" type="button" name="showDB"
ng-click="showDB=!showDB">{{key}}</button>
<table ng-show="showDB"
class="n-table toptable table-responsive n-table-standard n-table-striped n-table-hover">
<thead class="n-table-thead">
<tr>
<th width="70%">VM Name</th>
<th width="30%">Status</th>
</tr>
</thead>
<tbody class="n-table-body">
<tr ng-repeat="vm in value.vms">
<td width="76%">{{vm.vm}}</td>
<td width="24%" ng-style="getStatusStyle(vm.status)">
{{vm.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Yes, you should remove that local showDB variable to achieve what you need.
You can easily replace it with a $scope.activeKey and evaluating it by the
<button ... name="showDB" ng-click="activateKey(key)">{{key}}</button>
And in your controller:
$scope.activeKey = null;
$scope.activateKey = function (keyToBeActivated) {
$scope.activeKey = keyToBeActivated;
}
Now you can reach that exclusivity by checking:
<table ng-show="activeKey === key" ... >
Using table $index as unique field: (available from ng-repeat)
<button ... name="showDB" ng-click="activateKey($index)">{{key}}</button>
And
<table ng-show="activeKey === $index" ... >
I am new to angularjs and stuck with the below problem.
There will be a table of rows created which reads data from JSON. Say there are 6 rows displayed.But in real time number rows will vary.
Each row has an accordion(+ symbol) in its first td. If this accordian is clicked then the children rows of that row should be displayed by reading the data from one more different JSON.
Similarly for the remaining 5 rows as well it should display the children rows for the respective row's accordion is clicked.
I have created the table with the 6 rows displayed.
But the challenge I am facing is how to link child rows to the existing rows dynamically when clicked. Here is the plunkr - https://plnkr.co/edit/FTbjn9ZbAOTqc3b6j52h?p=preview
Any help is appreciated.
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable">
<hr>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">SaveFilter</button>
<button type="button" class="btn btn-Default" data-dismiss="modal" data-ng-click="delete()">Delete</button>
<div class="row">
<div class="col-md-9">
<div style=" margin-left:50px;" class="tableheight">
<table class="table-nested ">
<thead>
<tr>
<!-- <th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th> -->
<th>
Repository
</th>
<th >
Version
</th>
<th >
Size
</th>
<th >
Modified By
</th>
<th >
Labels
</th>
<th >
Description
</th>
</tr>
</thead>
<tbody style="font-size:12px" data-ng-repeat="item in list">
<tr >
<td ><button style="background-color: #fff;" class="accordion"></button>
{{item.name}}
</td>
<td >
{{item.Version}}
</td>
<td >
{{item.Size}}
</td>
<td >
{{item.ModifiedBy}}
</td>
<td >
{{item.Labels}}
</td>
<td >
{{item.Description}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
See the Plunkr solution
You want a 2nd <tr> with ng-repeat following the first:
<tr ng-if="item.Labels==child.Labels" ng-show="item.opened" ng-repeat="child in children">
<td>{{child.name}}</td>
...etc
</tr>
This will build additional rows where the bundle .Labels matches the repo .Labels and will be shown only when the repo's opened property is true. The + button will toggle the opened property for each item. You'll need two minor edits to your data to make this work:
Add children data to the $scope (for access in the 2nd ng-repeat).
Add default opened: false property to all repos (except the first, which is true).
This won't show the components, but hopefully you get the idea.
See the Plunkr solution
If you want to inset row after row clicked use this:
<style>
#tableid {
font-size: 14px;
}
#tableid .childRow {
font-size:10px;
}
#tableid .childRow td:first-of-type {
padding-left:10px;
}
</style>
<table id="tableid">
<tr onclick="AddRow(this)">
<td>abcd</td>
</tr>
</table>
<script>
function AddRow(e)
{
for (var i = 0; i < 5; i++)
{
var index = e.rowIndex;
var table = document.getElementById("tableid");
var row = table.insertRow(index + 1 + i);
row.setAttribute('class', 'childRow');
var cell = row.insertCell(0);
cell.innerHTML = "efgh";
}
}
</script>
<div class="btn-group" >
<button type="submit" onclick="display">DISPLAY SCHEDULE</button>
<button type="submit" onclick="open" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<!-- column headers -->
<% Result result = (Result)request.getAttribute("result");%>
<thead>
<tr>
<th id="change"> Transfer Switch </th>
</tr>
</thead>
<!-- column data -->
<tbody>
<c:forEach var="row" items="${result.rows}">
<tr>
<td>
<c:out value="${row.Schedule_ID}"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
I am trying to change my table header name with button click, so what i did was added a simple java script as follows.
<script>
function display(){
document.getElementById("change").innerHTML="display"
}
function open(){
document.getElementById("change").innerHTML="open"
}
</script>
but since my JSTL result row gets updated for every loop my header changed too thus ending myself with the same header Transfer switch.
Can i solve this using Jquery on load ??, not sure how to use it.
I heard of solutions to make 2 tables but that's not the solution i am looking for since the table is responsive uses bootstrap and also has some buttons in its rows .
Two things I have changed from your code, now it looks fine,
Don't use the JS reserved keyword(s) like open. Use openSchedule() instead.
For better practice, Use span tag for change the text instead of giving id to th.
Your HTML with rendered table rows (Assume I could not able to reproduce jsp values here.)
<div class="btn-group" >
<button type="button" onclick="displaySchedule()">DISPLAY SCHEDULE</button>
<button type="button" onclick="openSchedule()" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<thead>
<tr>
<th><span id="change">Transfer Switch</span></th>
</tr>
</thead>
<tbody>
<!-- Here I assumed two rows, since It's JSP value I couldn't reproduce -->
<tr>
<td>Text1</td>
</tr>
<tr>
<td>Text2</td>
</tr>
</tbody>
</table>
Your Script,
window.displaySchedule = function(){
document.getElementById("change").innerHTML="display";
}
window.openSchedule = function(){
document.getElementById("change").innerHTML="open";
}
See fiddled demo here for live sample.
I am using a Powerschool database for my school. It is a non profit educational institution and it uses a SIS to holds students information, Grades, etc. I need this webpage to be automatically emailed to all of the parents email accounts every friday of the week. The parents email accounts are already setup in their user profiles on the SIS.
Is there a way to allow a user to submit their email address on this webpage and then, automatically schedule this webpage to be emailed to the user every friday of the week using Javascript ?
I am really sorry about the shopping list, but my knowledge is very limited to none in Javascript.
This is my basic HTML page that displays my students grades. It works when the student and parent login to their profile in Powerschool (my SIS).
<!DOCTYPE html>
<html>
<head>
<title>~[text:psx.html.guardian.scores.class_score_detail_]</title>
~[wc:guardian_header]
~[if.gpv.termgrades=true][else]
~[SetPostValue:selectedTab=GradesAndAttendance]
~[if.prefschool.sgshowpa=1]~[SetPostValue:showSGFGradebook=false][else]~[SetPostValue:showSGFGradebook=true][/if.prefschool.sgshowpa=1]
~[brij_render:common-ps;:GuardianHomeTabs]
[/if]
<!-- start of title and student content -->
<h1>~[text:psx.html.guardian.scores.class_score_detail]</h1>
<!-- title -->
<div class="box-round">
<!-- start student content -->
<table border="0" cellpadding="0" cellspacing="0" width="99%" class="linkDescList">
<tr class="center">
<th>~[text:psx.html.guardian.scores.course]</th>
<th>~[text:psx.html.guardian.scores.teacher]</th>
<th>~[text:psx.html.guardian.scores.expression]</th>
<th>~[text:psx.html.guardian.scores.final_grade]<sup>1</sup></th>
</tr>
<tr class="center">
<td>~[sectioninfo:~(sectionid);coursename]</td>
<td>~[sectioninfo:~(sectionid);teachername]</td>
<td>~(*class_expression frn="~(relsectionfrn)")</td>
<td>~[if.~[dbval;table=termbins;field=suppressltrgrd;*storecode=~ [gpv:fg];*termid=~(termid;absolute);*schoolid=~(schoolid)]#true]
~[code.localize:GradeScaleItem,param:~[decode;~(frn);031#;~(grade);~ (final.grade;~[gpv:fg])],param:~[decode;~(frn);031#;~(grade);~(final.grade;~ [gpv:fg])],param:column=name]
[/if]
~[if.~[dbval;table=termbins;field=SuppressPercentScr;*storecode=~ [gpv:fg];*termid=~(termid;absolute);*schoolid=~(schoolid)]=0]
<script type="text/javascript">
if ("~[decode;~(frn);031#;~(grade);~(final.grade;~ [gpv:fg])]"=="--") {
document.write(" ");
} else {
document.write("~[decode;~(frn);031#;~ (percent;format=numeric);~(final.pct;~[gpv:fg])]% ");
}
</script>
[/if] </td>
</tr>
</table>
<!-- The following row has 2 paragraphs - only one is visible at a time -- >
<!-- 4D's parser breaks on ; or : in comment fields passed to 'decode'-->
<p><strong>~[text:psx.html.guardian.scores.teacher_comments]</strong></p>
<div class="comment">
~[if.~(decode;~(frn);031#;true;false)=true]
<pre>~(comment)</pre>
[else]
<pre>~(final.comment;~[gpv:fg])</pre>
[/if]
</div>
<p><strong>~[text:psx.html.guardian.scores.section_description]</strong> </p>
<div class="comment">
<pre>~([03]teacherdescr)</pre>
</div>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="99%">
<tr>
<th>~[text:psx.html.guardian.scores.due_date]</th>
<th>~[text:psx.html.guardian.scores.category]</th>
<th>~[text:psx.html.guardian.scores.assignment]</th>
<th class="center" colspan="5">~[text:psx.html.guardian.scores.codes] </th>
<th class="center">~[text:psx.html.guardian.scores.score]</th>
<th class="center">~[if.~ [dbval;table=termbins;field=SuppressPercentScr]=0]%[/if]</th>
<th class="center">~[if.~ [dbval;table=termbins;field=suppressltrgrd]#true]~ [text:psx.html.guardian.scores.grd][/if]</th>
</tr>
<tr bgcolor="#edf3fe">~[x:studentscores]
<td>[duedate]</td>
<td>[category]</td>
<td>[assignment]</td>
<td width="14">[code_collected]</td>
<td width="14">[code_late]</td>
<td width="14">[code_missing]</td>
<td width="14">[code_exempt]</td>
<td width="19">[code_excluded]</td>
<td align="center"><span class="bold-underline">[score]</span></td>
<td align="center">[percent]</td>
<td align="center">[grade]</td>
</tr>
</table>
</div>
<div id="legend">
<h3>~[text:psx.html.guardian.scores.legend]</h3>
<p class="center">~[if.~(frn)=031#]~ [text:psx.html.guardian.scores.grade_stored_on,param:~(datestored)][else]~ [text:psx.html.guardian.scores.grades_last_updated_on,param:~(LastGradeUpdate)] [/if]</p>
<p class="center"> <img src="/images/icon_check.gif" alt="Collected">~ [text:psx.html.guardian.scores._collected]<img src="/images/icon_late.gif" alt="Late">~[text:psx.html.guardian.scores._late]<img src="/images/icon_missing.gif" alt="Missing">~ [text:psx.html.guardian.scores._missing]<img src="/images/icon_exempt.gif" alt="Exempt">~[text:psx.html.guardian.scores._score_is_exempt_from_final_grade] <img src="/images/icon_excluded.gif" alt="Excluded">~ [text:psx.html.guardian.scores._assignment_is_not_included_in_final_grade]</p>
<p><strong>1</strong>~ [text:psx.html.guardian.scores._this_final_grade_may_include_assignments_that_ar e_not_yet_p]~ [text:psx.html.guardian.scores.special_weighting]~ [text:psx.html.guardian.scores.used_by_the_teacher]</p>
</div>
<!-- end student content -->
<input id="activeNav" type="hidden" value="~[if.gpv.termgrades=true]#btn- gradesHistory[else]#btn-gradesAttendance[/if]"/>
~[wc:guardian_footer]
</body>
</html>