Making data passed to modal usable for further code execution by concatenating to <embed> src string

Question

I am passing a dynamic string of data to booststrap modal using data-val in an HTML table.

<td <button type="button" class="btn btn-success btn-xs" data-val="<?php echo $row['order_id']; ?>" data-toggle="modal" data-target="#my-modal" data-order-id ="<?php echo $row['order_id']; ?>">Update</button></td>

I then have a script which submits the data using class(I don't have to use class here) to the modal.

<script>
    $('#my-modal').on('show.bs.modal', function (event) {
      var myVal = $(event.relatedTarget).data('val');
      //$(this).find("#modal-body").text(myVal);
      $(this).find(".modal-body").text(myVal);
      //$(this).find("<h6></h6>").text(myVal);
      //$( "p" ).find( "span" ).text(myVal);
    });
</script/

The modal then displays the string within the class statement as it should.

<div class="modal-body">

I need to then be able to concatenate the contents of the "class" string into an HTML embed statement within the modal, that then displays a pdf file. I do not know how to "extract" the class "string information" so that I may concatenate it within the src statement. I have tried using h6, p and span options instead of class to no avail. So, the embed code in the modal should look something like:

<embed
                src="https://www.xx-xxxxx.com/image/waybill/ICE000??CLASS STRING??.pdf"
                type="application/pdf"
                frameBorder="0"
                scrolling="auto"
                height="70%"
                width="150%"
            ></embed>

As you may see, I have very limited knowledge of JS and JQuery, so any guidance is greatly appreciated.

Answer 1

You have the value that you want to dynamically insert into the embed URL in myVal already.

So the next step would be the select the embed element inside your modal (find), and then setting its scr attribute to a different value, using .attr(), https://api.jquery.com/attr/