How Can I Pass a String Variable to an Anonymous Function?

JavaScript
1

I am trying to use a combination of scripts to achieve this task, and I am really close to the solution I think. The idea is to have a web page for newsletters that uses Adobe View SDK as the pdf viewer, and to control the correct document to load in the viewer with a button click. The effect can be viewed on my test web page Here When you click on the image under May 4, 2020, it invokes my function called “changeDoc” and sends the string value for “docName”, which is the part that needs to be changed for each different newsletter. My function also changes the display style of my modal element to “block” and my instance of the View SDK is in the content of the modal. This brings the viewer onto the screen the way I want it to.

I have added a footer to my modal for testing purposes, that shows the value of the docName variable after the button click, and this proves that the string value is being changed properly. (Footer appears on lower left of the modal window.) Also for testing purposes I have added a line into the View SDK script to assign a string value to the variable “newDoc” and altered the url in the content of the script to use this variable, and the viewer works and loads the correct document…

My challenge is - I have not been able to get the variable value assigned with my onclick event to the variable referenced in the View SDK script. With my limited grasp of javascript I just don’t know the right process and syntax to use in order to get this to happen. Here is the code that is used in the link I referenced above:

<button id="CSS-050420" onclick="changeDoc('Newsletter_050420');"></button>
<script type="text/javascript">
		function changeDoc(docName) {
		document.getElementById("showstring").innerHTML = docName;
		
		document.getElementById('viewerModal').style.display='block';
		}
		</script>

And here is the code for the View SDK with my changes for the “newName” variable:

<script type="text/javascript">		
		document.addEventListener("adobe_dc_view_sdk.ready", function(){
		var newName = "Newsletter_050420";
		var adobeDCView = new AdobeDC.View({clientId: "06179511ab964c9284f1b0887eca1b46", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://www.shcsfarmington.org/" + newName + ".pdf"}},
			metaData:{fileName: "Newsletter_050420.pdf"}
		}, {embedMode: "FULL_WINDOW", defaultViewMode: "FIT_WIDTH"});
	});
		
	</script>

So the goal is to pass my string variable “docName” and assign it to the “newName” variable in the viewer script. I have tried several ways, but none have been successful. All help will be appreciated. Thanks.

2

The way you’re describing it is not possible, because the event listener will probably already have fired before a user clicks one of the newsletters. So at that point you’d already be to late to change newName.

What you can do instead is keep track of whether adobe is loaded in a separate variable and then in your function that is supposed to open the document check whether adobe is loaded yet. If it’s not, try again in a bit (eg 200ms) until at some point it will be ready and we can show the PDF.

Something like this:

<script type="text/javascript">
    var adobeReady = false;
    document.addEventListener("adobe_dc_view_sdk.ready", function() {
        adobeReady = true;
    }

    function changeDoc(docName) {
        if (!adobeReady) {
            // Adobe SDK not ready yet. Try again in 200ms.
            setTimeout(
                function () {
                    changeDoc(docName);
                },
                200
            );

            return;
        }

        var adobeDCView = new AdobeDC.View({clientId: "xxxx", divId: "adobe-dc-view"});
        adobeDCView.previewFile(
            {
                content: {
                    location: {
                        url: "https://www.shcsfarmington.org/" + docName + ".pdf"
                    }
                },
                metaData:{
                    fileName: docName + ".pdf"
                }
            },
            {
                embedMode: "FULL_WINDOW",
                defaultViewMode: "FIT_WIDTH"
            }
        );
    }
</script>
3

Not sure you want to be redeclaring the AdobeDC.View every time the button’s clicked…

4

True. As an alternative:

<script type="text/javascript">
    var adobeDCView = null;
    document.addEventListener("adobe_dc_view_sdk.ready", function() {
        adobeDCView = new AdobeDC.View({clientId: "xxxx", divId: "adobe-dc-view"});
    }

    function changeDoc(docName) {
        if (adobeDCView === null) {
            // Adobe SDK not ready yet. Try again in 200ms.
            setTimeout(
                function () {
                    changeDoc(docName);
                },
                200
            );

            return;
        }

        adobeDCView.previewFile(
            {
                content: {
                    location: {
                        url: "https://www.shcsfarmington.org/" + docName + ".pdf"
                    }
                },
                metaData:{
                    fileName: docName + ".pdf"
                }
            },
            {
                embedMode: "FULL_WINDOW",
                defaultViewMode: "FIT_WIDTH"
            }
        );
    }
</script>
1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.