score: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>'));
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
- How to select any clicked html tag within container div using Jquery
- Adding space inside a class of input tag of dynamic html using jquery
- Get all the content within <style> tag in a html file using jquery
- How to get all td tag value that are inside tr tag in html using jquery
- count elements inside a specific html node using jquery method .size()
- add new html table inside an html table while click on the row image using jquery
- Load HTML page inside a DIV using .load and jQuery
- Issue on Posting HTML Content Using jQuery - Ajax Post Method
- how to find the file inside input element html using jquery
- Creating HTML parent tag using JQuery
- Appending data to div tag inside content using jquery
- Adding attribute on html element inside the iframe using jquery
- JQuery get html string inside a tag
- Write an html text inside a div of the next page after window.location redirect using jquery ajax
- How to append two image tags in div tag using jQuery
- delete html tag with jquery using attribute name
- Change height of image in html using jQuery on pageload
- Getting System.Byte[] from SQL 08 and displaying it as image in HTML using jQuery
- How to grab an image tag from html via jquery
- Using JQuery Cycle, how can AnchorBuilder find the SRC of an image within a DIV?
- html control with image to get the click event using jquery
- Getting element inner text ONLY when an <img /> tag exists inside using jQuery 's html()
- Add data inside < > of an html element using javascript or jquery
- Get Image size (not dimension) inside image tag using javascript
- Jquery get html or text just after the input tag inside label
- using jquery function when added runat server tag with textbox inside grid view
- Wrap content in a tag within two divs using JQuery
- Running a jQuery function on multiple divs (getting background image from img tag and applying it as section background using CSS)
- HTML tag inside jQuery
- retrieve content from html span tag in a twig loop using jquery
- Controlling <span> tag inside a <div> tag using Jquery
- How to make SVG tag image resizable using jQuery UI?
- how to find text inside a tag using JQuery
- How to call method using jQuery in mvc razor page at 10 sec interval and append output to html
- How to Display image in HTML Table on client side using jQuery
- How to load html page from side menu to well using div tag and jquery
- How to get next consecutive similar tag in html using jquery
- How do I count html elements whose class is the same using jquery or javascript, but inside a particular <ul>
- Horizontal scroll on panoramic image with HTML buttons using jquery
- How do I handle jquery within the html page? Using a two-list as an example
- Adding Content Inside a HTML Tag with JQuery
- using an index within jQuery each method
- How to get one time alert inside JQuery post method within loop?
- show loading image if I clicked button using jQuery and html
- Getting text in nested html tag using jquery
- Using jquery method .find() inside object declaration
- How to get value from html select tag option value using onChange event using jQuery data table?
- Unable to get elements/properties from within a class tag using jquery
- How to target @import inside an external CSS file loaded with <link> tag using JS or Jquery
- How is it possible to place a input box (form) within a HTML box and position it using JQuery
More Query from same tag
- DataTables: Automatic width on start-up
- Firefox 36 aborts https requests with content length greater than 1778
- Scrolling animation issue using Greensock
- Show simple content of XHTML in DIV
- How to create an AngularJS directive that binds to a variable?
- CSS being read by jQuery is not corresponding to CSS being set by jQuery
- iOS SVG lag when free-hand drawing
- Append html output to a different div
- Initialize a slick slider in a Foundation 6 responsive accordion tabs container
- Always close current div regardless of which trigger you click
- How to get table row specific column to be clicked using javascript?
- Add class to element if closest element contains string
- Default checked radio not changing the checked attribute on change of selection
- jQuery - simple way to bind json content to element?
- While using ajax post response coming in error block
- PHP POST Array from window-modal
- How to not return success when data is not valid, or exception is thrown?
- Show / hide div - removing clicked link
- how to change values in a dropdown list using ajax in Yii
- JavaScript object binding
- SharePoint GetListItems not working
- function to compute and input average speed
- Can't refresh one specific div after ajax load (MVC system)
- Less specific jQuery UI Autocomplete that accepts un-ordered terms
- How to higlight onclick numbers H2 background color or Text in H2
- Is there any way to have a javascript function fire when I click on some part of an ASP.NET calendar?
- Problems with jQuery setInterval()?
- Multiple textarea remaining words count with javascript
- Foreach output dynamic variable outside of loop - Laravel
- jquery datatables set column to not order