score:1

Accepted answer

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

score:0

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.

score:1

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>


Related Query

More Query from same tag