I am trying to create a web page for newsletters that will show an image as a button, and when the button is clicked it will invoke the appearance of a w3.css Modal window with a full PDF copy of the newsletter in an iframe object, using the Google docs viewer. On my page will be numerous newsletter “buttons” and I want to assign a value to my “newsDate” variable at the same time that the Modal window opens. The format of my PDF file names are as follows: Newsletter_050420.pdf. When my Modal window opens, the value of the newsDate variable needs to be inserted in the “src” attribute of the iframe, so only the “050420” value needs to be assigned to newsDate. Here is what I have tried so far:
<script>
function changeDate(datetoset) {
var newsDate = datetoset;
document.getElementById("shownews").src="https://docs.google.com/gview?url=https://shcsfarmington.org/2020/docs/Newsletter_" + newsDate + ".pdf&embedded=true";
document.getElementById('viewerModal').style.display='block';
}
</script>
That way all your javascripty change-the-things bit are in the function, and the button only sends the function the one piece of data it needs - the date.
EDIT: In fact, we don’t even need to redefine ‘newsDate’ at all - it’s a redundant variable, because we’ve already got something holding the date inside the function - the parameter. So a little more tidying up:
Now I have another question on this same topic. I have another page on this website that shows buttons for various other publications, and so I adapted the script advice from m_hutley to create another script for this page that changes the “docName” so I can call the different PDF files to one viewer Modal. This works fine, but clearly shows a “glitch” or something with the Google doc viewer - the behavior is that the document displayed in the iFrame does not always refresh with the button click. Sometimes it takes two or three “reloads” of the page in order to get the correct document to show in the viewer. Is there any way to work around this problem in the javascript? I have tried using:
in various locations in my code, but nothing seems to work correctly. I would appreciate any help to try and avoid this problem. It can be observed at this link: https://shcsfarmington.org/2020/