JQuery only working on Firefox

Question

I am creating an HTML front page for users to view our 'How To' documents, the pdfs are fembeded onto the page to create a preview using the below JQuery. This is working fine in Firefox however will not work in IE or Chrome, any help is appreciated, Thanks

    $(document).ready(function() {
        "use strict";
        $('.btn').click(function() {
            var idToSRC = './HTA_' + this.id + '.pdf';
            $('#viewer').attr('src', idToSRC);
        });
    });

Probably because the adobe plugin is not installed for those browsers? — techfoobar, Apr 18 '13 at 13:34
@The-Val I have and nothing shows, I have use JSLint and it comes back with no issues — redratedcoding, Apr 18 '13 at 13:44
Is `#viewer` an iframe? If you watch the network debugger, does the request for the PDF even happen? If you debug the code, is `$('#viewer')` actually matching something on Chrome? If so, can you change the `src` to another website or something else? — Cymen, Apr 18 '13 at 13:47
#viewer an embed of the file, i am not using an iframe to do it .`` — redratedcoding, Apr 18 '13 at 13:50
Not sure it would mess up the whole thing but is use strict mode supported by other browsers ? — LMeyer, Apr 18 '13 at 13:56
Depending on the browser, you can't generally change the src of an embed tag dynamically. Instead, you need to replace it with a new embed tag. See these threads: http://stackoverflow.com/questions/2493706/javascript-changing-src-attribute-of-a-embed-tag http://stackoverflow.com/questions/6646413/how-to-change-the-value-of-embed-src-with-javascript — MasNotsram, Apr 18 '13 at 13:56
@Shinosha I have tried with and without, this was suggested by JSLint thus the reason i added. — redratedcoding, Apr 18 '13 at 13:57
@SpAm - I'm a bit of a JQuery newbie how would i use that with my example above? sorry if thats cheeky — redratedcoding, Apr 18 '13 at 14:05
Answer is not mine to respond but watch Durgaprasad Budhwani'post in the link SpAm provided, it should give you a good idea what to do. — LMeyer, Apr 18 '13 at 14:26

score 2 · Accepted Answer · answered Apr 18 '13 at 14:38

You can do this using the JQuery clone() method (the urls I used are example PDFs):

http://api.jquery.com/clone/

<button type="button" class="btn">Change Src</button>
<div>
    <embed id="viewer" src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf" width="500" height="680"></embed>
</div>

 $(document).ready(function() {
        "use strict";
        $('.btn').click(function() {
            //var idToSRC = './HTA_' + this.id + '.pdf';
            var idToSRC = "http://www.reservoirminerals.com/files/doc_downloads/test.pdf";
            var $viewerDiv = $('#viewer').parent();          
            var viewerClone = $('#viewer').clone().attr('src', idToSRC);
            $viewerDiv.html(viewerClone);
        }); });

See it working here:

http://jsfiddle.net/W32RA/2/

Glad I could help. Don't worry about that, accepting is enough, thank-you. :) — MasNotsram, Apr 18 '13 at 14:54

JQuery only working on Firefox

1 Answers1