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

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

<td <button type="button"  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 >

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.

CodePudding user response：

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/

CodePudding user response：

In case this could help anybody with a similar problem in the future. By targeting the embed element and the src attribute as advised, this code worked for me.

<script>
    $('#editModal').on('show.bs.modal', function (event) {
      var myVal = $(event.relatedTarget).data('val');
      $(this).find('embed').attr("src",myVal);
    });
</script/

The concatenated string was created in the data-val within the Button statement.