Boostrap - show.bs.modal - Get "href"

Question

I am looking to load a PDF URL into an <object data=""> attribute upon the firing of a BS modal link. With the URL of the PDF coming from the href of that modal link.

Below is the code I have adapted from the below question.

Bootstrap 3 - How to load content in modal body via AJAX?

 <a href="https://www.example.com/test.pdf" data-remote="false" data-toggle="modal" data-target="#myModal"">

<!-- The Modal body for the press item -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <object data="" type="application/pdf" width="100%" height="100%">
                    <param name="view" value="Fit"></object>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<script>
    jQuery("#myModal").on("show.bs.modal", function(e) {
        var link = jQuery(e.relatedTarget);
        jQuery(this).find(".modal-body object").attr("data",link);
    });
</script>

The above loads "[object Object]" into the data attribute.

An alternative I have tried is:

 <script>
    jQuery("#myModal").on("show.bs.modal", function(e) {
        var link = jQuery(e.relatedTarget.href);
        jQuery(this).find(".modal-body object").attr("data",link);
    });
</script>

and also:

 <script>
    jQuery("#myModal").on("show.bs.modal", function(e) {
        var link = jQuery(this).attr("href"));
        jQuery(this).find(".modal-body object").attr("data",link);
    });
</script>

What specifically isn't working? Per the linked example, `var link = jQuery(e.relatedTarget).attr('href');` should get the value `https://www.example.com/test.pdf`, and the next line correctly sets the `object` data value. — WOUNDEDStevenJones, Oct 27 '20 at 14:03
The first script puts `[object Object]` into the `data=""` attribute. When I am looking to put in `https://www.example.com/test.pdf` — IamOnStage, Oct 27 '20 at 14:07
@IamOnStage On this line `jQuery(this).attr("href"))` you have an extra `)` — Carsten Løvbo Andersen, Oct 27 '20 at 14:26

score 0 · Answer 1 · answered Oct 27 '20 at 14:26

I was able to do this by adding a second variable that retrieved the href attribute from the object:

        jQuery("#myModal").on("show.bs.modal", function(e) {
            var target = jQuery(e.relatedTarget);
            var link = target.attr("href");
            jQuery(this).find(".modal-body object").attr("data",link);
        });

Boostrap - show.bs.modal - Get "href"

1 Answers1