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>
Related
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.
I've been trying to add a search filter to a table using JavaScript, I've downloaded jQuery on my computer as well as for browser but the search filter still won't work.
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, '' ).toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="top">
<!--id "top" for a "return to top of page" button-->
<h1>
<!--header-->
CryptoCost<img width="25">
<font size="4"><span class="Priceandmarketcap">Live Cryptocurrency Prices & Market Capitalization</span></font>
<font size="2"><span class="SearchCoinsHead">Search Coins:
<font><input type="text" id="search" class="light-table-filter" placeholder="BTC.."></font></span></font>
</h1>
</header>
<br>
<!--vertical whitespace-->
<span class="indextable">
<table id="table">
<tr>
<th>#</th> <!--table headers-->
<th>Coins</th>
<th>Price</th>
<th>24H Change</th>
<th>24H Volume</th>
<th>Market Cap</th>
<th>Circulating Coin Supply</th>
</tr>
<tr> <!--start of new row-->
<td>1</td> <!--coin number-->
<td> <img src="" width="15"> BTC </td>
<!--icon & ticker-->
<td><big>$7000</big></td> <!--price-->
<td><big>-15%</big></td> <!--24H % Change-->
<td><big>30,284 BTC</big></td> <!--24H Volume-->
<td><big>$117,727,059,656</big></td> <!--Market Cap-->
<td><big>16,946,875 BTC</big></td> <!--Circulating Coin Supply-->
</tr>
<tr>
<td>2</td>
<td> ETH </td>
<td><big>$400</big></td>
<td><big>+32%</big></td>
<td><big>98,497,625 ETH</big></td>
<td><big>$37,143,553,062</big></td>
<td><big>98,497,625 ETH</big></td>
</tr>
<tr>
<td>3</td>
<td> <img src="" width="15"> LTC </td>
<td><big>$120</big></td>
<td><big>-40%</big></td>
<td><big>55,849,820 LTC</big></td>
<td><big>$6,269,309,798</big></td>
<td><big>55,849,820 LTC</big></td>
</tr>
</table>
</span>
This is one of those situations where you really should just go ahead and choose a library. Reason being is you are most likely going to want to add additional features (like your filtering) and "reinventing the wheel" isn't the best approach in many cases.
I would highly suggest a free and open-source library called, DataTables. It will provide an incredible amount of features (including filtering) and will also provide you with a fully responsive table implementation - which is critical nowadays. In addition, it is based off of jQuery - which you are already using:
https://datatables.net/
If you are just playing around then please ignore this answer - but if you're creating a real website that will be published I'd suggest using a library.
You're not including your script correctly.
This:
<script>
src="http://code.jquery.com/jquery-
3.3.1.min.js"integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous">
</script>
Should be:
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8" crossorigin="anonymous">
I am new to meteor and my background is JDEdwards consultant with 15 years of experience. Recently interested in web application and building small application with meteor. Here is my issue.
I have five rows of data in HTML table with checkbox and it has amount field. I have one input text just before table (Invoice Total:). I would like to select checkbox from table and it will display total value in Invoice Total. I have class in both places. For example, If I select three records with amount 55,10 and 5, Invoice total should be 70. How do I achieve this using meteor client JS. Can I get some help on this?
HTML
<template name="dashboard">
<div class="col-sm-9">
<div class="well">
<h4>Dashboard</h4>
<label class="totalamt">Invoice Total:
<input type="text" value={{invtotal}}>
</label>
<table class="table">
<thead>
<tr>
<th></th>
<th>Company Id</th>
<th>Invoice Id</th>
<th>Amount</th>
<th>Currency</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{{#each invoiceList}}
{{>invoiceRow}}
{{/each}}
</tbody>
</table>
</div>
</div>
</template>
<template name="invoiceRow">
<tr class="success">
<td><input type="checkbox" checked="{{calcamt}}" class="toggle-checked"/></td>
<td>{{division_id}}</td>
<td>{{invoice_id}}</td>
<td>{{amount}}</td>
<td>{{currency}}</td>
<td>{{description}}</td>
</tr>
</template>
**
client JS
**
Router.route('/dashboard',function(){
this.render('dashboard');
Template.dashboard.invoiceList = function(){
return Invoice.find();
}
Template.invoiceRow.events({
'click.toggle-checked':function(evt,tmpl){
}
});
Template.invoiceRow.select_invoice = function(){
return Session.get('select_invoice')
}
})
Thanks,
Kaushik Roy
I am trying to implement a button that will delete events from a users selected set of events. For troubleshooting sakes right now I have 5 events hard coded in the page, but eventually they are called from localStorage. The delete button is supposed to delete elements from localStorage as well as the page. My problem is it throws an error when the Remove buttons are not clicked in order. Any and all help is appreciated. To see the errors please open console. Here's a fiddle: http://jsfiddle.net/roob/65j6ktnL/
here's a shorter version of the code:
<div id="result">
<div class="10am target-stage stage-only saturday eventer" id="row0" rel="0">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">10:30 a.m.</td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span><br /><span class="ev-signings">Signing Area 1</span></p></span>
<span class="info-body"><b>Anna Dewdney, </b>Author of<em> NELLY GNU AND DADDY TOO</em></span>
<span class="info-btn"><p class="selctor" rel="0"><span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit" ><b>map</b></span>
<span class="premove hidden" rel="0">Remove</span></p></span></td>
</tr>
</table>
</div>
<div class="11am target-stage stage-only saturday eventer" id="row1" rel="1">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:00 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span></p></span>
<span class="info-body"><b>Yuyi Morales, </b>Author of<em> NIÑO WRESTLES THE WORLD</em></span>
<span class="info-btn"><p class="selctor" rel="1"> <span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit" > <b>map</b></span>
<span class="premove hidden" rel="1">Remove</span></p></span></td>
</tr>
</table>
</div>
<div class="11am target-stage stage-only saturday eventer" id="row2" rel="2">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:30 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span><br /><span class="ev-signings">Signing Area 4</span></p></span>
<span class="info-body"><em>Scooby-Doo and the Carnival Creep,</em> presented by <b>Warner Bros. Consumer Products</b></span>
<span class="info-btn"><p class="selctor" rel="2"> <span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit"><b>map</b></span>
<span class="premove hidden" rel="2">Remove</span></p></span></td>
</tr>
</table>
</div></div>
<script>
$(document).ready(function(){
var storaged = Object.keys(localStorage);
var storageLength = storaged.length;
for (var i=0; i<storageLength; i++)
{
var el = $(localStorage[storaged[i]]);
$("#result").append(el);
}
$("#buttn2").click(function(){
localStorage.clear();
$("#result").html('');
console.log("Storage is cleared");
});
$(".premove").click(function (event) {
event.preventDefault();
var a=$(this).attr("rel");
console.log(a);
var eventsArray = document.getElementsByClassName("eventer");
var eventSelctd=(eventsArray[a]).outerHTML;
localStorage.removeItem("schedule " + a, eventSelctd);
eventsArray[a].outerHTML="";
});
});
</script>
You are adding rel=(number) to each item in the list and using that number to get its reference in the array defined by document.getElementsByClassName("eventer") - each time you remove an item the array gets shorter because the removed item is now gone and you redefine it with each click of the remove button. What happens is you eventually start looking for item #4 and it isn't there because only two items exist in the list.
Another way to do this would be to look for the element closest to your button and remove it.
var eventSelected = $(this).closest('.eventer');
localStorage.removeItem("schedule " + a, eventSelected[0]);
eventSelected.remove();
i want to load a html table in a div
The HTML-Code is loaded via:
$("#table_wrapper").hide();
$.get("<?echo base_url();?>schichtplan/employee_fields/"+plan_id+"true",function(data){
$("#table_wrapper").html(data);
$("#table_wrapper").show();
});
Data is validated via alert and looks like:
<table border= '0'cellpadding='4' cellspacing='0' class='mitarbeiter' />
<thead>
<tr>
<th> </th><th><div id='plan_id:1;sort_id:1' class='edit_employee'>User1</div></th><th><div id='plan_id:1;sort_id:2' class='edit_employee'>User2</div></th></tr>
</thead>
<tbody>
<tr>
<td class='first'>Anstellung</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Stundenlohn</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Festlohn</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Bonus</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Kassenminus</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Nachtzuschlag</td><td> </td><td> </td></tr>
<tr>
<td class='first'>Sonstiges</td><td> </td><td> </td></tr>
</tbody>
</table>
After the JQuery-Action the div looks like:
<div id="table_wrapper" style="display: block; "><table border="0" cellpadding="4" cellspacing="0" class="mitarbeiter"></table>
<div id="plan_id:1;sort_id:1" class="edit_employee">User1</div><div id="plan_id:1;sort_id:2" class="edit_employee">User2</div>
Anstellung
Stundenlohn
Festlohn
Bonus
Kassenminus
Nachtzuschlag
Sonstiges
</div>
Table-Code is generated with CodeIgniter.
I have no idea why the result looks like that
Some hint?
Thanks
There is a slash at the end of the tag that starts the table. Only some tags can be closed with the slash, and if a tag isn't allowed to have the slash, it will be kept open for the rest of the page, which will make your html invalid. This is what it should look like:
<table border='0' cellpadding='4' cellspacing='0' class='mitarbeiter'>
<thead>
<!-- ... -->
</thead>
<tbody>
<!-- ... -->
</tbody>
</table>
It looks like your Table-Code is rendered NOT COMPLETELY LIKE HTML but table renders like normal view. Check is there any config option for Table-Code module to generate FULL HTML table.
Which method do you use to render table?
Just noticed - the table is self closed on the first line:
<table border= '0'cellpadding='4' cellspacing='0' class='mitarbeiter' />
Should be:
<table border= '0'cellpadding='4' cellspacing='0' class='mitarbeiter' >
I strongly suspect this is your problem sir.