How might I set empty rows to not display in am email? - javascript

I am putting together an email template for electronic deposits. All the email will do is let students and customers know that an electronic payment has been made out to them and display the items. The information should look like this:
Date | Invoice# | Description | Amount
12/20/2019 | 01 | Refund | $33
| 02 | Refund | $44
(Since the Date is the Date of Deposit, it will be the same for all the listed invoices.)
There can be up to 30 potential rows like this, one for each invoice number. The trouble is, though, that not all of those rows will have values.
So, for a student or customer that is receiving payment for nine invoices (nine rows), we wouldn't want to show the remaining twenty-one empty rows.
The question, then, is how might we hide these remaining empty rows? Since this will be an email template, I don't know if JavaScript or jQuery would work, since from what I've read, they get blocked by the email system for security reasons.
I thought I might also try converting it from HTML to .NET, and seeing if I could use a Repeater, but I don't know if that would work either.
If the information can be of any use, this email is getting it's information using a T-SQL query. I imagine I can modify it to just not return NULL results, but that still leaves the issue of the empty rows on the front-end side...
Any assistance or insight would be appreciated. I'll post URLs for resources I've read so far below. :)
Thanks!
Resources:
hide table rows if empty
Generating row dynamically in javascript?
Is JavaScript supported in an email message?
https://kb.mailchimp.com/campaigns/design/limitations-of-html-email
Updated - 3/19/2018
Below is the function I am using:
<script>
$(function(){
$('.row').each(function(){
if($(this).val().trim()=='')
$(this).hide();
})
});
</script>
Since the HTML file is quite long, I don't know that I should post the whole thing inline. Below is the HTML for the first three rows in the table:
<table class="w580" border="0" cellpadding="0" cellspacing="0" width="580">
<tbody><tr>
<td class="w580" width="580">
<div class="article-content" align="left">
<multiline label="Description">
<p style="text-align: center; color: #e54a3d; font-size: larger;">
<strong>
Accounts Receivable Hold Notice
</strong></p>
<hr style="margin: 0 0 1.625em;"/>
<p>Dear firstname,</p>
<p></p>
<p>If you have any questions, you may call the Office of Student Financial Services at 573.592.1793</p>
<p>Have a great day!</p>
<p><strong>Check Date:</strong> checkdate</p>
<table width="580" border="1">
<thead>
<tr>
<th width="145" >Invoice</th>
<th width="145" >Description</th>
<th width="145" >Amount</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td>
##invoicenum1##
</td>
<td>
##desc1##
</td>
<td>
##amount1##
</td>
</tr>
<tr class="row">
<td>
##invoicenum2##
</td>
<td>
##desc2##
</td>
<td>
##amount2##
</td>
</tr>
<tr class="row">
<td>
##invoicenum3##
</td>
<td>
##desc3##
</td>
<td>
##amount3##
</td>
</tr>
All of the items surrounded with ##s (for example, ##invoicenum1## ) are the "potential values" that get populated by the results from the database.
So, theoretically, if a field is NULL in the database, it won't put anything there. Then, the jQuery in the head will see that nothing is there and simply hide the row.
My concern, though, is that, if JavaScript and jQuery are blocked by the email clients, that this functionality won't perform.
Updated - 3/21/2018
I've confirmed that the jQuery won't work. I've got the desired visual effect through inline styles - just setting "border: none;" on the individual rows and cells. That way, if it's empty, it just doesn't show...
This works for us, since we have a set maximum number of potential rows (30).
If we wanted to set up a system, though, where the number of rows was determined by the actual number of results returned, any idea how we might do that?
Or do the big companies like Amazon also have a set number of items they'll show when they email you your order details? Maybe they just show you five or six items and tell you "To view your complete order, visit the Orders Page", or something...

Related

JS Performance with lots of dynamic data. innerHTML, outerHTML, or textContent

after reading a lot of posts here, I've come to the conclusion that textContent is faster than innerHTML and outerHTML; but what happens when I have a lot of data that needs to be replaced?
I have a table with dynamic second columns such as follows. Keep in mind a JS function will show/hide metric or imperial <span> when clicked.
When a new variant is selected, data in the second cells will change.
<div class="spec-table" id="SpecTable">
<table class="table">
<tr>
<td>dimension_1_title</td>
<td><span class="spec-table_metric">dimension_1_metric</span><span class="spec-table_imperial">dimension_1_imperial</span></td>
</tr>
<tr>
<td>dimension_2_title</td>
<td><span class="spec-table_metric">dimension_2_metric</span><span class="spec-table_imperial">dimension_2_imperial</span></td>
</tr>
<tr>
<td>Other information</td>
<td><span class="spec-table_metric">Other information metric</span><span class="spec-table_imperial">Other information imperial</span></td>
</tr>
</table>
</div>
Would it make sense if I put the entirety of my HTML table into JS variables for each variant and use getElementById(#SpecTable).innerHTML to replace it or use 6 functions to change each <span> individually by using getElementById(#IDs for Spans).textContent?
I'm confused as I may have 5 variants, which means 30 JS variables to collect and match when needed, whereas only 5 JS variables that contain the whole table.
In addition, is it better or worst if I get rid of the <div> and use outerHTML to change the table?
I'm a beginner at JS, and if you have other recommendations, I appreciate your input.

Can't select element on a webpage even though it is present

I am trying to select an element on a table which is on a webpage. The inner text which is on the table is a name of a professor. I am using this line of code to grab the elements.
var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");
And yes it works with the tables on the main webpage and grabs the elements I need. However when i try going on a different course page to grab the elements of another table it does not work even though all the tables have the same format. Its as if the tables are invisible to the code and only grabs the ones on the main webpage.
However every so know and then it grabs all the elements I need on a different course page but on very rare occasions.
The last line on the code below is the element I am trying to grab.
<table class="section-detail-grid table-bordered-wrap">
<thead>
</thead>
<tbody>
<tr data-id="80886" data-index="0" class="section-item section
first linked-section">
<td class="persist row-label">
COP
</td>
<td class=" row-label">
3514
</td>
<td class="persist row-label">
001
</td>
<td class="persist row-label">
Class Lecture
</td>
<td class=" row-label">
<div>Wang, Jing</div>
Someone mentioned that it may be an ajax driven site and thats why its not grabbing all the elements all the time. Ive even tried getting the xpath of that element but it is still not being found. Why is this element invisible to my code?

Regex script to write data from a table to a spreadsheet

I am trying to write a script which will turn a series of basic html tables describing particular variations of certain words in different countries into a working spreadsheet for use in a database. Each table applies to the translations of a single word across countries. In html it takes the format of:
<h5><a name="akas"> equivalent names in different countries </a> </h5>
<table border="0" cellpadding="2">
<tr>
<td>character string </td>
<td> country name / country name / country name</td>
</tr>
<tr>
<td>character string </td>
<td>country name</td>
</tr>
.................. this format continues until the table ends
</table>
Country names are repeating across tables and should represent column headings on the spreadsheet across which the rows of equivalent words lie. I am totally new to regex (which I'm finding really bewildering to get into) and a beginner in Javascript also. Again I am looking for help on how to rearrange this type of data into a working spreadsheet for use in a larger database. If anyone could help me it would be really appreciated.
You should look at DOM parsing and XPath. XPath allows you to query the html file to get the content of whichever node that you need.
You can copy paste an HTML table into a spreadsheet.

Add selected row from a table to another table with Jquery and MVC3

I am using MVC 3, EF Model First on my project.
In my View I have 4 tables that look likes these.
<div class="questionsForSubjectType">
<table>
<thead>
<tr>
<th>
Title
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
test
</td>
</tr>
</tbody>
</table>
</div>
users should be able to select and add to another table lets say the table is following:
<table id="CustomPickedQuestions>
/* <----- Questions that users chose from the other tables /*
</table>
What I am looking for is that when a users click on a row, the row shall get removed and added to the CustomPickedQuestions, When the row is added to that table, the user should also be able to remove it from CustomPickedQuestions Table and then that row shall go back to the Table it was before.
I now wonder how I can accomplish this with help of client-side jquery scripting.
You've got far too much irrelevant complexity in you code (for the specific question you ask). The title is good, but not the code. Rather than posting your complex project code, create the simplest possible reproduction of the problem using the least amount of code/methods/properties (with common names, that is ProductID, ProductName, etc). part 3 of my tutorial shows how to do this. See http://www.asp.net/mvc/tutorials/javascript/working-with-the-dropdownlist-box-and-jquery/adding-a-new-category-to-the-dropdownlist-using-jquery-ui

XForms repeat - JavaScript error

I am using XForms to build a web application with XML-DB eXist-db as backend.
eXist transforms the XForms code into HTML and JavaScript.
First of all I got two instances:
<xf:instance xmlns="" id="results">
<result>
<ServiceDefinition>
<InventoryLabel LastChange="2012-01-24">SVC380712435</InventoryLabel>
<SystemName IPaddress="111.222.333.123">XXX</SystemName>
<Service ServiceCategory="Internetservice">Web-Server</Service>
<OSClass OperatingSystem="CentOS">UNIX</OSClass>
<SystemType Manufacturer="VMware">VM</SystemType>
<Backup/>
<Location SystemContact="Max Power" AdminGroup="power">N22</Location>
</ServiceDefinition>
....
</result>
</xf:instance>
<xf:instance xmlns="" id="domain">
<system name="XXX">
<NIC MAC="00-50-56-ae-00-3c"
time="1329167846" missed="1323350247" state="inactive"
IP="111.222.333.123" LAN="Test"/>
</system>
...
</xf:instance>
I want to build a table using xf:repeat to iterate through all the <ServiceDefinition> Elements in the 'results' instance. Every row contains a 'Status' column where I want to put the related 'state' information from the 'domain' instance.
This is the XForms code for the table:
<div class="table">
<table border="0">
<thead>
<tr>
<th class="sysName">Hostname</th>
<th class="services">Service</th>
<th class="os">OS Class</th>
<th class="location">Location</th>
<th class="link">Details</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<xf:repeat nodeset="instance('results')/result/ServiceDefinition" id="link-repeat">
<tr>
<td class="sysName"><xf:output ref="SystemName" /></td>
<td>
<xf:repeat nodeset="Service" class="row">
<div>
<xf:output ref="."/>
</div>
</xf:repeat>
</td>
<td class="os"><xf:output ref="OSClass"/> </td>
<td class="location"><xf:output ref="Location" /></td>
<td class="link">
<xf:trigger submission="view-entry" appearance="minimal" class="url">
<xf:label>View</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('URL-container')"
value="concat('serviceDetails.xql?svc=', instance('results')/result/ServiceDefinition[index('link-repeat')]/InventoryLabel)"/>
<xf:load ref="instance('URL-container')" />
</xf:action>
</xf:trigger>
</td>
<td>
<xf:output ref="instance('domain')/system[#name = instance('results')/result/ServiceDefinition[index('link-repeat')]/SystemName]/NIC/#state" />
</td>
</tr>
</xf:repeat>
</tbody>
</table>
</div>
The problem seems to be this part:
<td>
<xf:output ref="instance('domain')/system[#name = instance('results')/result/ServiceDefinition[index('link-repeat')]/SystemName]/NIC/#state" />
</td>
Is there something wrong with this expression? I want to get the state attribute of the system that matches the current node in the repeat statement.
However when I load the page and the 'results'-instance consist of many items I get a Javascript error:
A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.
Script: http://test:8080/exist/xforms/xsltforms/xsltforms.js:771*
The line (in this case 771) always differs.
When the result instance is very small (up to about 20 Elements) it works as expected.
Any help or suggestion appreciated, I am new to all this, so please be patient.
Because XSLTForms has its own XPath engine written in JavaScript, browsers might be slow to evaluate expressions requiring to navigate through a lot of nodes, especially old versions of Internet Explorer.
Performance has been improved recently and you should try with latest build in SVN repository of XSLTForms at sourceforge.net.
Using the id() function is a possibility to heavily reduce evaluation time.
There is also an XSLTForms specific extension to indicate whether an instance contains only readonly data.
Did you try the Profiler (press F1 first) to have time measures?

Categories

Resources