We Keep Coding

Why is document.ready being called twice?

$(document).ready(function() {
var page = 1;
var notEOF = true;
var client = new XMLHttpRequest();
var temp = "string";
client.open('GET', '/blog/blogdata.txt');
client.onreadystatechange = function() {
if (client.responseText != '') {
var txt = client.responseText.split("\n");
if (notEOF && txt[page * 6 - 6] != "EOF") {
var data = txt[page * 6 - 6].split("#");
document.getElementById("link1").setAttribute("href", data[0]);
document.getElementById("image1").setAttribute("src", data[1]);
document.getElementById("title1").innerHTML = data[2];
document.getElementById("text1").innerHTML = data[3];
document.getElementById("tags1").innerHTML = data[4];
document.getElementById("date1").innerHTML = data[5];
} else {
notEOF = false;
$("#article1").hide();
}
}
}
var blog_html = "/blog/page";
document.getElementById("prev").setAttribute("href", blog_html.concat((page - 1).toString()));
document.getElementById("next").setAttribute("href", blog_html.concat((page - 1).toString()));
if (page == 1) {
$("#prev").addClass("disabled tm-mr-20");
}
if (page == 2) {
document.getElementById("prev").setAttribute("href", "/blog/");
}
if (!notEOF) {
$("#next").addClass("disabled tm-mr-20");
}
client.send();
});
<script src="/blog/js/jquery.min.js"></script>
<script src="/blog/js/templatemo-script.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
This is a simplified version of a script I wrote in my blog html file to automate the blog part.
blog/blogdata.txt is a textfile consisting of lines of the form url#image url#title#text#tags#date, with the last line as just EOF. (If necessary, I can restructure this). This is the structure of a blog post (ripped from here)
<article class="col-12 col-md-6 tm-post" id="article1">
<hr class="tm-hr-primary">
<a href="post.html" class="effect-lily tm-post-link tm-pt-60" id="link1">
<div class="tm-post-link-inner">
<img src="/blog/img/img-01.jpg" alt="Image" class="img-fluid" id="image1">
</div>
<h2 class="tm-pt-30 tm-color-primary tm-post-title" id="title1">Simple and useful HTML layout</h2>
</a>
<p class="tm-pt-30" id="text1">
There is a clickable image with beautiful hover effect and active title link for each post item. Left side is a sticky menu bar. Right side is a blog content that will scroll up and down.
</p>
<div class="d-flex justify-content-between tm-pt-45">
<span class="tm-color-primary" id="tags1">Travel . Events</span>
<span class="tm-color-primary" id="date1">June 24, 2020</span>
</div>
</article>
And this is the structure of the previous and next buttons
<div class="row tm-row tm-mt-100 tm-mb-75">
<div class="tm-prev-next-wrapper">
Prev
Next
</div>
</div>
There's obviously more to the script (if there's anything necessary I'm omitting, I'll add it) but this is the important part of it.
I'm trying to run the file but it's not functioning as intended (currently, the blogdata.txt file has one non-EOF line, and thus the blog should contain exactly one post. Instead, it contains none). When I added alerts to try to debug, I observed that this script is being called twice. Why?

In your case
client.onreadystatechange = function() {
if (client.readyState === XMLHttpRequest.DONE && client.responseText != '') {
but this is better
client.open('GET', '/blog/blogdata.txt');
client.onload = function() { ... }
client.send()
Since you have jQuery
$(function() {
var page = 1;
var notEOF = true;
var temp = "string";
$.get('/blog/blogdata.txt', function(responseText) {
if (!responseText || responseText.toString().trim() === "") return
const txt = responseText.split("\n");
...
});
});

HTML content is not being cleared by innerHTML, just added to the bottom of previous loaded content

For a university project, I'm displaying jobs in Leeds using mainly JavaScript and JSON. The idea is that the JSON part-time file is shown on page load, then a user can select a different job category and then it loads the new JSON file and replaces the HTML.
I believe my code is almost there, I've attempted to figure out how to call a function again as my previous code had lots of repetition. However, instead of replacing the innerHTML when an option is selected, it just adds the new content to the bottom of the previous option's HTML. I can't figure out why this is?
I've attempted to clear the ID before the function starts again but this doesn't work. Perhaps I'm not calling my functions correctly?
Any help would be greatly appreciated!
window.onload = function() {
var jobURL = "";
//Run function
loadJobs();
//If dropdown is changed
function change(){
var jobType = document.getElementById("jobtype");
var selectedValue = jobType.options[jobType.selectedIndex].value;
if (selectedValue == "part") {
var jobURL = "https://example.com/reed_parttime.php";
}
if (selectedValue == "temp") {
var jobURL = "https://example.com/reed_temp.php";
}
if (selectedValue == "graduate") {
var jobURL = "https://example.com/reed_graduate.php";
}
return jobURL;
}
document.getElementById("jobtype").onchange = change;
//Show jobs function
function loadJobs() {
document.getElementById("results").innerHTML = "";
var URL = change();
$.getJSON(URL, function(data) {
data.results.forEach(function(jobinfo) {
HTMLTemplate += `
<div class="row">
<a href="${jobinfo.jobUrl}" target="_blank">
<p>${jobinfo.jobTitle}</p>
<p>${jobinfo.employerName}</p>
<p>${jobinfo.jobDescription}</p>
</a>
</div>
`;
});
document.getElementById("results").innerHTML = HTMLTemplate;
});
}
//Repeat function again when button is clicked
document.getElementById("submitBtn").addEventListener("click", loadJobs);
}

Prevent PDF from auto-downloading and have it Auto Print instead

I have a situation where when a user is viewing their order history, they are provided a link to print a PDF version of their invoice. Currently when the user clicks on the link the PDF will automatically download to their computer.
The 'higher-ups' are wanting that to be changed, so when the user clicks the link to print the pdf, a print dialogue box will appear instead of automatically downloading the PDF.
I've been able to get the pdf open in a new window but when ever the pdf is being called it won't display the pdf but will automatically download it instead.
I've searched all over the internet and SO for a solution but have yet to yield any results. This needs to be done, if possible, via JavaScript or jQuery.
HTML
<p><a id="print_pdf" target="_blank">Click to Print Invoice</a>
JavaScript / jQuery
var print_pdf_link = $('#print_pdf').attr('href');
var linkNo2 = "privatefile.dhtml~useridtext~&file=~username~_rep.pdf";
$('#print_pdf').click(function(){
w = window.open(linkNo2);
w.print();
});
I've also used:
<a href="#" onclick="window.open('privatefile.dhtml~useridtext~&file=~username~_rep.pdf', '_blank', 'fullscreen=yes'); return fal
se;">MyPDF</a>
* please note the text between tilde are placeholders that contain values from the back-end
Thanks for your help!

Try it i hope i would make use of.
var pfHeaderImgUrl = '';
var pfHeaderTagline = '';
var pfdisableClickToDel = 0;
var pfHideImages = 0;
var pfImageDisplayStyle = 'right';
var pfDisablePDF = 0;
var pfDisableEmail = 0;
var pfDisablePrint = 0;
var pfCustomCSS = '';
var pfBtVersion = '1';
(function() {
var js, pf;
pf = document.createElement('script');
pf.type = 'text/javascript';
if ('https:' === document.location.protocol) {
js = 'http://domain.com//main.js'
} else {
js = 'http://domain.com/printfriendly.js'
}
pf.src = js;
document.getElementsByTagName('head')[0].appendChild(pf)
})();
<a href=""
style="color:#6D9F00;text-decoration:none;"
class="printfriendly"
onclick="window.print();return false;"
title="Print">Print</a>

How to export a auto generated HTML to PDF

I have the following code which is partially what my HTML page does.
<script>
function close() {
MainJavaScript();
}
function MainJavaScript()
{
//var strEntity = " ";
var strEntity = document.getElementById('Entity').value;
//Images setup by Entity
if (strEntity == "MGP")
{
document.getElementById('displayPic').src="http://mgp75.png";
}
else if (strEntity == "MPP")
{
document.getElementById('displayPic').src="http://mpp75.png";
}
else if (strEntity == "RSC")
{
document.getElementById('displayPic').src="http://rsc75.png";
}
else if (strEntity == "MSN")
{
document.getElementById('displayPic').src="http://msn75.png";
}
var strFirstName = "John";
var strLastName = "Doe";
var strSuffix = " ";
var strTitle = "DDS";
var strSecondaryTitle = " ";
var strDisplayName = strFirstName + " " + strLastName;
if (strTitle.trim() != '')
strDisplayName += ", " + strTitle;
if (strSuffix.trim() != '')
strDisplayName += ", " + strSuffix;
if (strSecondaryTitle.trim() !='')
strDisplayName += ", " + strSecondaryTitle;
document.getElementById('FullName').innerHTML = strDisplayName;
}
</script>
Submit
<table>
<tr>
<td width="55%">
<div class="first">
<div class="contact-info">
<h3><img id="displayPic" src="" alt=""></h3>
</div><!--// .contact-info -->
</div>
</td>
<td width="40%">
<div>
<h1><font color="#003893" face="Georgia">Cu Vi</font></h1>
<h2><span id="FullName"></span></h2>
</div>
</td>
</tr>
</table>
When I click the Submit button the displayPic and the FullName is replaced by the respective values using MainJavascript function. What I am looking to do is create a PDF from the output but unfortunately all the DLLs and method I found requires me to output a HTML file and then convert to a PDF but because it is using JavaScript, the source is always blank but the display is changed once the button is clicked.
How can I achieve what I am looking to do, is convert the output into a PDF?

You should look at Xep CloudFormatter. This library, jquery plugin, prints any html page. So, given your example, if I were to start with an HTML template like you have, and then with javascript/jquery I populate the html and then call xepOnline.Formatter.Format to render it, you will get back a beautiful PDF.
I simplified your code a bit, but here is a fiddle for you to explore:
http://jsfiddle.net/kstubs/56x6W/
function printMe() {
tryAtMain();
var imgLoad = imagesLoaded($('#displayPic')[0]);
imgLoad.on( 'always', function() {
xepOnline.Formatter.Format('print_me', {
pageMargin: ".25in"
});
});
}
function tryAtMain() {
// some pic
$('#displayPic').attr('src','http://lorempixel.com/output/abstract-q-c-370-222-1.jpg');
$('#FullName').html('Johnny Carson');
}

If / Else in DIV statement?

First, I am not a programmer anymore... It's been years since doing it and even then it was only VBA and old school HTML.
What I would like to do is to show an image on my site in place of another depending on it's "state". For example, the site is http://w2zxl.hevener.com/ , towards the bottom of the page is a script that loads a HAM radio logbook as well as my current status in nearly real time. If I am on the Air, it will show a small image that says "On Air" and then show what frequency I am on and the Mode I am working in. When I am off the air however, that little image just disappears and shows nothing.
What I would like to do is to create a small image to replace the "nothing". In other words, if I am Off Air, I would like to show an "Off Air" image instead of nothing at all.
Is there an If/Then/Else statement that can do this given the code I am providing below?
Code below:
<!-- HRDLOG.net script start --><center>
<div id="hrdlog-oa"> </div>
<div id="hrdlog">www.hrdlog.net</div>
<script type="text/javascript" language="javascript" src="http://www.hrdlog.net/hrdlog.js"></script>
<script type="text/javascript" language="javascript">// <![CDATA[
var ohrdlog = new HrdLog('W2ZXL');
setInterval('ohrdlog.LoadOnAir()', 5000);
ohrdlog.LoadLastQso(10);
// ]]></script>
<img src="http://www.hrdlog.net/callplate.aspx?user=W2ZXL" alt="W2ZXL CallPlate" /></center><!-- HRDLOG.net script stop -->

Consider swapping CSS classes to change the background-image instead. This will simplify the javascript and html markup. When you're on air change the class to onair and toggle as needed to offair.
CSS
.onair {
background-image: url("onair.jpg");
}
.offair {
background-image: url("offair.jpg");
}
Html
<div id="hrdlog-oa" class="offair"></div>
Javascript
var statusDiv = document.getElementById("hrdlog-oa");
if (statusDiv.className == "offair") {
statusDiv.className = "onair";
}
else {
statusDiv.className = "offair";
}
Working jsfiddle http://jsfiddle.net/jasenhk/qMAZU/ using background-color instead.

You can not do that with pure HTML and you had 2 way for solving this
If you like markup languages you can use xsl that have if else tag for you
Using Javascript and check if you be on air show on air image and if you not be shows off air
for you the better way is change some javascript code in your site..
you should overwrite ohrdlog.LoadOnAir then you have two way again:
change http://www.hrdlog.net/hrdlog.js source code and rewrite LoadOnAir function
overwrite LoadOnAir function with inserting script tag after load http://www.hrdlog.net/hrdlog.js
i choose number 2 for you because i think you can`t change script that you load it from another domain address... now you should insert this code after this part:
<script type="text/javascript" language="javascript" src="http://www.hrdlog.net/hrdlog.js"></script>
and you can found link of offair image in HrdLog.prototype.ShowOffAir function that now, i point it to http://2.bp.blogspot.com/_Dr3YNV7OXvw/TGNNf561yQI/AAAAAAAABIk/-E2MB4jLP_o/s400/Off-Air.jpg:
<script type="text/javascript" language="javascript">
HrdLog.prototype.ShowOffAir = function() {
return '[<img src="https://i.stack.imgur.com/WEr1B.jpg" height="33" width="65" />][2]';
}
HrdLog.prototype.LoadOnAir = function() {
var t = this;
var async = new Async();
async.complete = function(status, statusText, responseText, responseXML, obj) {
if (status == 200) {
txt = '';
var xmldoc = responseXML;
var onairdoc = xmldoc.getElementsByTagName('OnAir');
if (onairdoc.length == 1) {
onair = onairdoc.item(0);
if (onair.getElementsByTagName('oa_QRZ').length > 0) {
txt += '<img src="http://www.hrdlog.net/images/onair.gif" height="33" width="65" /><br/>';
txt += '<font size="+1">' + onair.getElementsByTagName('oa_QRZ')[0].childNodes[0].nodeValue + ' is on air</font><br/>';
txt += '<b>';
txt += FormatNumber(onair.getElementsByTagName('oa_Frequency')[0].childNodes[0].nodeValue) + ' ';
try {
txt += onair.getElementsByTagName('oa_Mode')[0].childNodes[0].nodeValue + '</b><br/>';
txt += onair.getElementsByTagName('oa_Radio')[0].childNodes[0].nodeValue + '<br/><br/>';
} catch (e) { }
//txt += onair.getElementsByTagName('oa_Status')[0].childNodes[0].nodeValue + '<br/>';
}else{
txt += t.ShowOffAir();
}
}else{
txt += t.ShowOffAir();
}
element = document.getElementById('hrdlog-oa');
if (element != null) {
element.innerHTML = txt;
}
} else {
alert('Error\n' + statusText);
}
}
if ((new Date().getTime() - this._lastLoadOnAir.getTime()) > 14500) {
this._lastLoadOnAir = new Date();
async.req(this._host + 'hrdlog.aspx?onair=' + this._qrz, this);
}
}
</script>