Using jQuery inside image tag within .html() method

Question

I am trying to setup a page which contains an HTML table. You would be able to click on any row on the table to pull up a modal with a different image. The image URLs will be stored as data-ids in the tags as I must do all of this in a browser and have no sever to make calls to.

I have the following code to setup my modal. By itself, $(this).data('chi') gets the data-chi id which is the image url. How do I use that within the HTML inside the .html() jQuery method? I tried various escapes but cannot figure it out.

$('#orderDetails').html($("<b>  Order Id selected: <img src=\'\$(this).data('chi')\' alt=\"Smiley face\">" + '</b>'));

$('#orderModal').modal('show');

Link to JSFiddle - https://jsfiddle.net/rHHmz/171/

lmgonzalves · Accepted Answer · 2015-07-09 02:57:54Z

1

I think the best way is saving the data-chi attribute in a variable first, and then you can use it in string concatenation, like:

var chi = $(this).data('chi');
$('#orderDetails').html($("<b>  Order Id selected: <img src='"+chi+"' alt=\"Smiley face\">" + '</b>'));

DEMO

edited Jul 9, 2015 at 2:57

answered Jul 9, 2015 at 2:54

lmgonzalves

6,5883 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2015-07-09 02:57:54Z

Use string concatenation

$(function() {
  var $orderModal = $('#orderModal').modal({
    keyboard: true,
    backdrop: "static",
    show: false,
  });

  $('.table-striped tr[data-id]').on('click', function() {

    $orderModal.html('<b>  Order Id selected: <img src="' + $(this).data('chi') + '" alt="Smiley face "></b>');
    $orderModal.modal('show');

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" />

<h1>Orders</h1>
<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Customer</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1" data-chi="//placehold.it/64X64&text=1">
      <td>1</td>
      <td>24234234</td>
      <td>A</td>
    </tr>
    <tr data-id="2" data-chi="//placehold.it/64X64&text=2">
      <td>2</td>
      <td>24234234</td>
      <td>A</td>
    </tr>
    <tr data-id="3" data-chi="https://upload.wikimedia.org/wikipedia/en/thumb/6/6e/JMPlogo.png/250px-JMPlogo.png" data-hello="bye">
      <td>3</td>
      <td>24234234</td>
      <td>A</td>
    </tr>
  </tbody>
</table>
<div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3>Order</h3>

  </div>
  <div id="orderDetails" class="modal-body"></div>
  <div id="orderItems" class="modal-body"></div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

jimcavoli · Accepted Answer · 2015-07-09 02:57:40Z

Cleaned up in your JSFiddle so the JS now reads:

$(function () {
    $('#orderModal').modal({
        keyboard: true,
        backdrop: "static",
        show: false,
    });

    $(".table-striped").find('tr[data-id]').on('click', function (e) {
        $('#orderDetails').html("<b>  Order Id selected: <img src=\"" + $(e.target).parent().data('chi') + "\" alt=\"Smiley face\"></b>");
        $('#orderModal').modal('show');
    });
});

Basically, to get at what triggered the event, you have to pass the event object (e above) into the callback and then look around in the dom from where it was triggered. In this case, it's up to the row, since users will be clicking on a given <td> in the table, and the <tr> with the data-id attribute is its parent.

Collectives™ on Stack Overflow

Using jQuery inside image tag within .html() method

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related