image thumbnail with angularjs - javascript

https://github.com/nervgh/angular-file-upload
I am using angular-file-upload plugin for file upload. I am adding some more features to it I want to show the image thumbnail or just a thumbnail of file uploaded. Also I am adding the name and description of the file. I am done with the name and description part but unable to show the preview of the file as soon as it is browsed. How can I do that?
Thanks.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!DOCTYPE html>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
<head>
<title>Simple example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<!-- Fix for old browsers -->
<script src="http://nervgh.github.io/js/es5-shim.min.js"></script>
<script src="http://nervgh.github.io/js/es5-sham.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="../console-sham.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!--<script src="../bower_components/angular/angular.js"></script>-->
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="../../angular-file-upload.js"></script>
<script src="controllers.js"></script>
<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<style>
.my-drop-zone { border: dotted 3px lightgray; }
.nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
.another-file-over-class { border: dotted 3px green; }
html, body { height: 100%; }
.upload-button {
padding: 4px;
border: 1px solid black;
border-radius: 5px;
display: block;
float: left;
}
</style>
<script>
$(document).ready(function() {
var readURL = function(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.profile-pic').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".file-upload").on('change', function(){
readURL(this);
});
$(".upload-button").on('click', function() {
$(".file-upload").click();
});
});
</script>
</head>
<!-- 1. nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
<body ng-controller="AppController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Select files</h3>
<!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
Multiple
<input type="file" nv-file-select="" accept="image/*" uploader="uploader" multiple /><br/>
Single
<div class="upload-button">Upload Image</div>
<input type="file" class="file-upload" nv-file-select="" accept="image/*" uploader="uploader" />
</div>
<div class="col-md-9" style="margin-bottom: 40px">
<h3>Upload queue</h3>
<p>Queue length: {{ uploader.queue.length }}</p>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th ng-show="uploader.isHTML5">Size</th>
<th ng-show="uploader.isHTML5">Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td>
<img class="profile-pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" style="width:30px"/>
<strong>{{ item.file.name }}</strong></td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
</div>
</div>
</div>
</body>
</html>
I have used jquery in this.

Related

Add attribute to the recently added input field in javascript

I have the following code which is hidden.
<div id="orderFields" style="display: none;">
<table class="table">
<tbody id="more-tr">
<tr>
<th style="font-weight: bold">Offer</th>
<td class="col-lg-6 col-md-6 col-sm-12">
<input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
</td>
<th style="font-weight: bold">Image</th>
<td class="col-lg-4 col-md-4 col-sm-12">
<img src="" style="max-width:40%;max-height:20%" />
<input type="file" name="image[]" style="background: transparent;border: transparent">
</td>
<td class="col-lg-2 col-md-2 col-sm-12">
<a href="javascript:void(1);" style="width: 10%;">
<span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
I have a code to a button that adds the tr field from the hidden field when being clicked.
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
<i class="fa fa-plus"></i> <span>Add offer(s)</span>
</a>
</div>
And the javascript is the following :
$("#addMore").on("click", function() {
$(".multipleDiv").after($('#orderFields #more-tr').html());
});
The button and tr work perfectly but while submitting a form I am getting data from the div that is hidden. So, I removed the attribute from the div which is hidden. Now, I want to add a name attribute to the input field that is just added after clicking the button. But, again I don't want to add an attribute to the input field of an input tag which is hidden.
How can I achieve that?
Also, Why am I not getting data coming from the <input type="file" name="image"> which is inside the form tag

You can use the clone() and then use the find() to get the input with id offer. Then use the attr() to set the attribute.
$("#addMore").on("click", function() {
let clone = $('#orderFields #more-tr').clone();
let offer = clone.find('input[type="text"]');
offer.attr('name', 'newOffer'); // replace with your value
offer.attr('id', new Date().getTime()); // ID needs to be unique
$(".multipleDiv").append(clone);
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="orderFields" style="display: none;">
<table class="table">
<tbody id="more-tr">
<tr>
<th style="font-weight: bold">Offer</th>
<td class="col-lg-6 col-md-6 col-sm-12">
<input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
</td>
<th style="font-weight: bold">Image</th>
<td class="col-lg-4 col-md-4 col-sm-12">
<img src="" style="max-width:40%;max-height:20%" />
<input type="file" name="image[]" style="background: transparent;border: transparent">
</td>
<td class="col-lg-2 col-md-2 col-sm-12">
<a href="javascript:void(1);" style="width: 10%;">
<span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<table class="multipleDiv"></table>
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
<i class="fa fa-plus"></i> <span>Add offer(s)</span>
</a>
</div>

How to prevent input fields from duplication?

When uploading any file, it's appearing all input fields as the same value even appearing the clear and change button. Also if click the clear button, it's cleared all fields.
How it works each field uniquely?
Demo: https://jsfiddle.net/sanjida96xq2/5gLqthrj/12/
View Snapshot
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
$('.image-preview').hover(
function () {
$('.image-preview').popover('show');
},
function () {
$('.image-preview').popover('hide');
}
);
});
$(function() {
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
$('.image-preview').popover({
trigger:'manual',
html:true,
title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
content: "There's no image",
placement:'bottom'
});
$('.image-preview-clear').click(function(){
$('.image-preview').attr("data-content","").popover('hide');
$('.image-preview-filename').val("");
$('.image-preview-clear').hide();
$('.image-preview-input input:file').val("");
$(".image-preview-input-title").text("Browse");
});
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (e) {
$(".image-preview-input-title").text("Change");
$(".image-preview-clear").show();
$(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
});
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
</div>
</span>
</div>
</div>
</div>
</div>

I've fixed your JS fiddle example here -
https://jsfiddle.net/5gLqthrj/27/
So what had to be updated?
All your code showing the popover, updating the file, etc, used generic $('.image-preview') jQuery selector code. However, all 3 file uploaders used that class, so whenever you used that code, all THREE would get selected and updated. You need to be more specific and only select the one clicked, of course.
So how to do that?
There are different ways but here's a simple solution:
When an event (like click, or hover, both of which you are using) is bound in jQuery, you can reference $(this) (or $(event.currentTarget)) to figure out exactly WHICH element was clicked. Then, instead of updating all elements with that class, you only update this. You also have a few other selectors that needed updating with a similar not-specific-enough selector problem, so instead of doing a wholesale $('.selector-here') grab, I changed the code to only search for that selector WITHIN the relevant element using .find, e.g. $(this).find('.selector-here')
Hopefully this makes sense to you :)
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
$('.image-preview').hover(
function () {
$(this).popover('show');
},
function () {
$(this).popover('hide');
}
);
});
$(function() {
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
$('.image-preview').popover({
trigger:'manual',
html:true,
title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
content: "There's no image",
placement:'bottom'
});
$('.image-preview-clear').click(function(){
var $preview = $(this).closest('.image-preview');
$preview.attr("data-content","").popover('hide');
$preview.find('.image-preview-filename').val("");
$preview.find('.image-preview-clear').hide();
$preview.find('.image-preview-input input:file').val("");
$preview.find(".image-preview-input-title").text("Browse");
});
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
var $preview = $(this).closest('.image-preview');
reader.onload = function (e) {
$preview.find(".image-preview-input-title").text("Change");
$preview.find(".image-preview-clear").show();
$preview.find(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$preview.attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
});
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
</div>
</span>
</div>
</div>
</div>
</div>

Set and align to the left an anchor tag after a JavaScript code

I try to indent correctly different anchors after especially an anchor located just after a <script type="text/javascript" ...></script>.
You can see the current page that I get on this link.
and the following figure :
As you can notice, the second anchor (2.Pistes d'optimisation) is not left aligned like the first one (1.Canvas game) and moreover, it is too vertically closed relatively to the canvas.
I think this is due to the fact that I include the JavaScript tag just after the last external <div> containing the canvas.
For example, I have :
<div>
... <canvas>
</div>
<script type="text/javascript" src="game_css_and_js/game.js"></script>
<h4><a name="optimization">2.Pistes d'optimisation :</a></h4>
How can I have right margins for this second anchor (2.Pistes d'optimisation) to get a left aligning and a correct vertical space compared to the canvas (like the first anchor) ?

You issue is that You have the <h4><a name="optimization">2.Pistes d'optimisation :</a></h4> inside <div id="main-wrapper"> and the <h4><a name="canvas">1.Canvas game :</a></h4> is outside the <div id="main-wrapper">. Just put the second link outside to resolve your issue as follows:
<td class="body_content">
<br>
<ul>
<li><a class="bottom_link" href="index.html#canvas">1.Jeu game</a></li>
<li><a class="bottom_link" href="index.html#optimization">2.Pistes d'optimisation</a></li>
</ul>
<h4><a name="canvas">1.Canvas game :</a></h4>
<div id="main-wrapper">
<div id="game-wrapper">
<canvas id="game-canvas" width="501" height="501"></canvas>
</div>
<div id="score-zone-wrapper">
<table id="score-zone">
<tbody><tr>
<td id="score-zone-white" colspan="2" style="padding: 5px;">White Score</td>
</tr>
<tr>
<td id="score-white"></td>
<td align="center" style="float: right; padding-top: 5px; padding-right: 30px;">
<svg height="54" width="54">
<circle cx="27" cy="27" r="26" stroke="black" stroke-width="1" fill="white"></circle>
</svg>
</td>
</tr>
<tr>
<td id="score-zone-black" colspan="2" style="padding: 5px;">Black Score</td>
</tr>
<tr>
<td id="score-black"></td>
<td align="center" style="float: right; margin-top: 5px; padding-right: 30px;">
<svg height="54" width="54">
<circle cx="27" cy="27" r="26" stroke="white" stroke-width="1" fill="black"></circle>
</svg>
</td>
</tr>
</tbody></table>
</div>
<div id="messaging"></div>
<div id="paramStart">
<div id="gameType">
<form id="formGame">
<div id="PlayerVsComputer" class="checkbox">
<label>
<input type="checkbox" class="game">
<div class="btn-group" role="group">
<button type="button" class="btn btn-inverse btn-xs">Player</button>
<button type="button" class="btn btn-classic btn-xs">Computer</button>
</div>
</label>
</div>
<div id="Player1VsPlayer2" class="checkbox">
<label>
<input type="checkbox" class="game">
<div class="btn-group" role="group">
<button type="button" class="btn btn-inverse btn-xs">Player 1</button>
<button type="button" class="btn btn-classic btn-xs">Player 2</button>
</div>
</label>
</div>
</form>
<div id="PlayableHits" class="checkbox">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-xs">Show playable hits</button>
</div>
</div>
<div id="ButtonNewGame">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-xs">Start Game</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="game_css_and_js/game.js"></script>
</div>
<h4><a name="optimization">2.Pistes d'optimisation :</a></h4></td>

Hiding a parent modal on click of a child div

I have a tr onclick of which I have a modal. Also there is a button is one of the columns in tr on click of which I have another modal opening. But when I click on the button both the modals open. I want to hide the parent modal. I have used modal.(hide) which doesnt work
$(document).ready(function(e){
$(".roundButton").click(function(e){
$('#caseModal').modal('hide');
});
$(".ticketTable").delegate("tr.rows", "click", function(){
var p=$(this).position();
var t=p.top+10;
$(".contentModal").css("top",t,"important");
});
});
#dropDownNote{
background-color: white;
color: black;
border-color: black;
width: 45%;
}
.dropdown-menu{
position: relative!important;
border-radius: 0px;
float:none !important;
width: 45%;
margin-left: 27.5%;
}
.modal-header{
background-color: #4378B8;
color: white;
font-weight: 10%;
}
.contentModal{
border-radius: 0px;
background-color: #adc4e1;
height: 125px;
}
#type,#commentForm{
text-align: left;
margin-left: 27.5%;
}
#cancelLink{
margin-right: 10px;
text-decoration:underline;
}
.modal-footer{
border-top:none;
}
.modal-footer-content{
width: 63%
}
#comment{
width: 62%;
border-color: black;
}
.table tr{
cursor: pointer;
}
#caseModal table td{
text-align: left;
width: 70%;
}
#tlist{
text-align:center;
}
.roundButtonList{
border-radius: 25px;
border-width: 0.1px;
border-color: #3b3b3b;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ticket List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!--Modal Start-->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">ADD NOTE OR ESCALATE TICKETS</h4>
</div>
<div class="modal-body">
<p>Fill in the information below and submit your note</p>
<br>
<div id="modal-body-content">
<p id="type">Select type of note</p>
<div class="dropdown">
<button id="dropDownNote" class="btn btn-primary dropdown" type="button" data-toggle="dropdown">Add Note
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Escalate Tier 1</li>
<li>Escalate Tier 2</li>
</ul>
</div>
<br>
<div id="commentForm" class="form-group">
<p>Add Comments</p>
<textarea class="form-control" rows="4" id="comment"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<div class="modal-footer-content">
<a id="cancelLink" data-toggle="tab" href="#" data-dismiss="modal">CANCEL</a>
<button type="button" class="btn btn-primary">SUBMIT</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal End-->
<!--Case Modal Start-->
<div id="caseModal" class="modal fade">
<div class="modal-dialog listModalDialog modal-lg">
<div class="modal-content contentModal">
<div class="col-lg-6">
<table id="tlist">
  <tr>
    <th>Service/Device</th>
    <th>Status</th>
  </tr>
<tr>
<td>Service 12345</td>
<td>Critical</td>
</tr>
<tr>
<td>Service 12345</td>
<td>Critical</td>
</tr>
<tr>
<td>Device 12345</td>
<td>Critical</td>
</tr>
</table>
</div>
<div class="col-lg-6"><button type="button" class="roundButtonList">View Location Details</button></div>
</div>
</div>
</div>
<!--Case Modal End-->
<div>
<ul class="nav nav-tabs">
<li class="active"><a class="tabsInactive" data-toggle="tab" href="#home">OPEN TICKETS</a></li>
<li ><a class="tabsInactive" data-toggle="tab" href="#menu1">CLOSED TICKETS</a></li>
<li ><a class="tabsInactive" data-toggle="tab" href="#menu2">ALL TICKETS</a></li>
</ul>
</div>
<br>
<div>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-filter"></span>
</button>No Filter Selected
<span class="download">
<u>Download</u>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-download-alt"></span>
</button>
</span>
</div>
<br>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="table-responsive">
<table class="table table-hover ticketTable">
<thead>
<tr>
<th>Ticket ID</th>
<th>Cust Loc ID</th>
</tr>
</thead>
<tbody>
<tr id="tkt1" class="clickable-row rows" data-href="#" data-toggle="modal" data-target="#caseModal">
<td>12321443-Open</td>
<td>ABC-12321443</td>
<td>Technical Tickets</td>
<td>Remote Ticket</td>
<td>Open-Dispatch</td>
<td>Critical</td>
<td>Cable</td>
<td><div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
</div>
</div>
</td>
<td>0.5</td>
<td> <button type="button" class="roundButton" data-toggle="modal" data-target="#myModal">Add Note/Escalate</button></td>
</tr>
<tr id="tkt2" class="clickable-row rows" data-href="#" data-toggle="modal" data-target="#caseModal">
<td>12321444-Open</td>
<td>ABC-12321444</td>
<td>Technical Tickets</td>
<td>Remote Ticket</td>
<td>Open-PAM Case</td>
<td>Critical</td>
<td>Fiber</td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
</div>
</div>
</td>
<td>1.5</td>
<td> <button type="button" class="roundButton" data-toggle="modal" data-target="#myModal">Add Note/Escalate</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>

you should use event.stopPropagation() in order to stop the event from bubbling.
change your button click event to this
$(".roundButton").click(function(e){
e.stopPropagation();
$('#caseModal').modal('hide');
});
source: https://api.jquery.com/event.stoppropagation/

How to map data coming dynamically into the designed table individually in respective form fields using jquery?

My data in the table is coming from back-end or user can manually enter the values in the table. Now my question is 'how to map those values again into the form, from which user was able to enter values into the table using jquery'? This back mapping of data from table to form is done on click of edit link which is present in front of every entry of my data in the table.
<html>
<head>
<style>
.dropdown>a:after {
display: none;
}
.glyph-ok-size, .glyph-remove-size {
font-size: 15px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".add_edit_panel").hide();
$("#addNew").click(function() {
$(".add_edit_panel").slideToggle();
});
});
function edit(paramID){
$(".add_edit_panel").slideDown();
}
</script>
</head>
<body>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_CREATE"
var="canCreateOrgDates"></cu:secured>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_UPDATE"
var="canUpdateOrgDates"></cu:secured>
<cu:taskView taskFlowData="${taskFlowData}"
taskFlowDefinition="${taskFlowDefinition}" id="dateRange"
renderTasks="false"
title="task.title.organization.daterange"
tasks="${taskFlowData.availableTasks}">
</cu:taskView>
<div class="row">
<form action="save.action" method="post">
<div class="col-sm-6">
<div class="panel add_edit_panel">
<div class="panel-heading">${fmt:message('dateRange.panel.add.edit') }</div>
<core:text name="orgDateObj.periodName"
label="${fmt:message('org.daterange.name') }"
required="false"
maxlength="20"
placeholder="${fmt:message('org.daterange.name') }">
</core:text>
<div class="row">
<div class="col-sm-6">
<core:date id="startDate" name="orgDateObj.startDate" label="${fmt:message('org.daterange.startdate')}"
placeholder="${fmt:message('org.daterange.startdate')}"
primary="false" required="true" />
</div>
<div class="col-sm-6">
<core:date id="endDate" name="orgDateObj.endDate" label="${fmt:message('org.daterange.enddate')}"
placeholder="${fmt:message('org.daterange.enddate')}"
primary="false" required="true" />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label class="default" style="float=left"><core:checkbox
name="orgDateObj.isDefault" id="isDefault"
label="${fmt:message('org.daterange.defaultdate')}"
checked="true" indicator="true"
disabled="false"
title="${fmt:message('org.daterange.describe.defaultdate')}" />
</label>
<div class="btn-panel-margin">
<button id="save" type="submit" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.save')}
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel">
<div class="panel-heading">${fmt:message('dateRange.panel.listing') }</div>
<div class="row">
<div class="col-sm-12" style="overflow-x: scroll">
<table data-grid-sortable class="table table-striped table-condensed table-responsive sort-display-table">
<thead>
<tr>
<th data-column-sortable class="column-md sorted"><fmt:message key="table.date.name"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.startdate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.enddate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"><fmt:message key="table.default"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"></th>
</tr>
</thead>
<tbody id="tbody">
<c:forEach var="orgDate" items="${orgDates}">
<tr>
<td class="column-md">${orgDate.periodName}</td>
<td class="column-md">${orgDate.startDate}</td>
<td class="column-md">${orgDate.endDate}</td>
<td class="column-sm">
<c:choose>
<c:when test="${orgDate.isDefault == '1'}">
<span class="glyphicon glyphicon-remove glyph-remove-size"></span>
</c:when>
<c:otherwise>
<span class="glyphicon glyphicon-ok glyph-ok-size"></span>
</c:otherwise>
</c:choose>
</td>
<td class="column-sm">
<div class="row">
<div class="col-sm-12">
<div class="dropdown">
Action<b class="caret"></b>
<ul class="pull-right dropdown-menu">
<li>
<a href="#" id="editButtonId" onclick="edit(${orgDate.orgDateId})" >
<i class="glyphicon glyphicon-pencil margin-right-5"></i>Edit
</a>
</li>
<li>
<a href="#" id="deleteButtonId${orgDate.orgDateId}"><i class="glyphicon glyphicon-trash margin-right-5"></i>Delete
</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="btn-panel-margin">
<button id="addNew" type="button" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.addnew')}
</button>
</div>
</div>
</div>
</body>
</html>
enter image description here

in edit button give the row index as class and get the value of that row by mapping array index value of 1st row of table equals to array[0] access the array[0] values and place the value of array in form text box i.e
$('#textbox1').val=array[0]['name'];

you can do stuff like this
$('#edit').onclick(function (){
$('#name').val=array[0]['name'];
$('#startDate').val=array[1]['S-Date'];
$('#endDate').val=array[2]['E-Date'];
$('#checkbox').val=array[3]['Checkval'];
});

I wanted to know how your data is formed from Database
In jquery use
x=0;
objectdata.forEach(function(value,indexname,arr), thisValue) {
tabledata['col'+x][indexname]=value;
x++;
}

Categories

Resources