Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Dynamically changing an object data value

    So, I'm gonna preface this with: I'm not a Javascript programmer... more of a PHP/HTML/CSS person, but every now and then I struggle with Javascript until I can figure out how to get it to do what I want. In this particular case, I'm trying to dynamically change the source of an pdf object. I want to be able to click a link, and have it change which pdf is loaded into the object. (Eventually want to pass a value to the function with say a month and a year and then tack that onto the end of the file path as the file being accessed) For now however, just trying to be able to click the button and have the object data change. How come this isn't working? Is there a better way I could be approaching this?


    Code:
    <script language="javascript" type="text/javascript">
            function changeObject() {
                var element = document.getElementById("pdfobject"); 
      element.setAttribute("data", "/Portals/0/pdfs/1-3-13 Monthly Meeting.pdf"); 
    
        </script>
    
    <table width="100%" cellpadding="0px" cellspacing="0px"> <tr> <td width="200px"> 
    
    <input type="button" value="Change"  onclick="changeObject()" />
    
    </td>
    
     <td align="right" style="padding-right:20px;"> 
    <div id="pdf" style="width:560px; height:410px;"> 
    
    <object id="pdfobject" type='application/pdf' width='560px' height='410px'> <p>Alternative text - include a link <a href='/Portals/0/pdfs/1-3-13 Monthly Meeting.pdf'>to the PDF!</a></p> </object>
    
    </div> </td> </tr> </table>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Try rewriting the object tag when changing the pdf.

    Code:
    function changeObject(pdfPath) {
      document.getElementById('pdf').innerHTML = '<object id="pdfobject" type="application/pdf" data="' + pdfPath +'" width="560px" height="410px"> <p>Alternative text - include a link <a href="' + pdfPath + '">to the PDF!</a></p> </object>'; 
    }
    Code:
    <input type="button" value="Change"  onclick="changeObject('/Portals/0/pdfs/1-3-13%20Monthly%20Meeting.pdf')" />

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by hunter1611 View Post
    How come this isn't working? Is there a better way I could be approaching this?
    You're missing a stray curly bracket (}). Use your browser's error console (Ctrl+Shift+K in Firefox); it will catch simple syntax errors like this.

    You also have problems with the HTML:
    • You're using px in HTML length values. They require integers.
    • You're using tables for layout.
    • You didn't specify the character encoding.
    • You're missing the rest of your HTML structure.
    • Those attributes on the script element are obsolete.

    Revised code:
    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			#pdf { overflow: auto;}
    			#pdfobject { display: block; float: right; margin-right: 20px; background-color: lightgray; }
    		</style>
    		<script>
    			function changeObject() {
    				var element = document.getElementById("pdfobject"); 
    				element.setAttribute("data", "/Portals/0/pdfs/1-3-13 Monthly Meeting.pdf"); 
    			}
    		</script>
    	</head>
    	<body>
    		<div id="pdf">
    			<object id="pdfobject" width="560" height="410" type="application/pdf">
    				<p><a href="/Portals/0/pdfs/1-3-13 Monthly Meeting.pdf">1-3-13 Monthly Meeting.pdf</a></p>
    			</object>
    			<button type="button" onclick="changeObject();">Change</button>
    		</div>
    	</body>
    </html>
    I tested it with one of my own PDFs. It works.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    hunter1611 (09-03-2013)

  • #4
    New Coder
    Join Date
    Jan 2011
    Posts
    51
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Works perfectly. Thank you very much! Kicking myself for not noticing the missing bracket...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •