I am working on an application that allows a user to click a delete button on a row in a table, then a confirmation modal should pop up; finally when you click yes, you should be able to delete that row. My code doesn't do that, instead it first deletes the header of which I only want to delete the row I specified, not the header. I used bootstrap for the css.
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("datatable-responsive").deleteRow(i);
$('#confirm-delete').modal('hide');
}
<table id="datatable-responsiv">
<thead align="center">
<tr>
<th>
<input type="checkbox" name="prog" id="check-all" class="flat">
</th>
<th>Name of the video</th>
<th>link</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="even pointer">
<td class="a-center btnDelete" data-id="1">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>John </td>
<td>https://www.youtube.com/watch?v=mU2Ej9PrMfY</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete" ><i class="fa fa-trash-o"></i> Delete </button>
</td>
</tr>
<tr class="odd pointer">
<td class="a-center btnDelete" data-id="2">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>James</td>
<td>https://www.youtube.com/watch?v=ON3Gb9TLFy8</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete" ><i class="fa fa-trash-o"></i> Delete </button>
</td>
</tr>
</tbody>
</table>
<!--model-->
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok" value="Delete" onclick="deleteRow(this)">Delete</button>
</div>
</div>
</div>
</div>
Use Element.parentNode.parentNode.remove();
function deleteRow(r) {
r.parentNode.parentNode.remove();
//$('#confirm-delete').modal('hide');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="datatable-responsiv">
<thead align="center">
<tr>
<th>
<input type="checkbox" name="prog" id="check-all" class="flat">
</th>
<th>Name of the video</th>
<th>link</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="even pointer">
<td class="a-center btnDelete" data-id="1">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>John</td>
<td>https://www.youtube.com/watch?v=mU2Ej9PrMfY</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View</button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit</button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete"><i class="fa fa-trash-o"></i> Delete</button>
</td>
</tr>
<tr class="odd pointer">
<td class="a-center btnDelete" data-id="2">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>James</td>
<td>https://www.youtube.com/watch?v=ON3Gb9TLFy8</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View</button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit</button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete"><i class="fa fa-trash-o"></i> Delete</button>
</td>
</tr>
</tbody>
<!--model-->
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok" value="Delete" onclick="deleteRow(this)">Delete</button>
</div>
</div>
</div>
</div>
Assuming that the argument you're passing to your deleteRow function is a grand-child of the row you want to delete, your problem may be that you're calling deleteRow (the DOM method) on the table itself, not the table's tBody. Try
document.getElementById("datatable-responsive").tBodies[0].deleteRow(i);
(edit:) But Rayon's solution is more elegant anyway. Saves you the trouble of getting a reference to the tbody.
Related
<div id="responsive-modal3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; " data-keyboard="false" data-backdrop="static" ng-init = "populateBidSpocData()" >
<div class="modal-dialog modal-lg">
<div class="modal-content" style="margin-top:55px;">
<div class="modal-header" style="background:#003c4c;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#FFF;"> <span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="color:#FFF;">Check Availibility</h4>
</div>
<div class="modal-body">
<table class="table table-hover hd-bg-table table-bordered">
<thead>
<tbody>
<thead>
<tr>
<th class="text-center" style="vertical-align:middle" rowspan="2"></th>
<th class="text-center" style="vertical-align:middle" rowspan="2">Bid SPOC</th>
<th class="text-center" style="vertical-align:middle" rowspan="2">Role</th>
<th class="text-center" colspan="5">SPOC's Availability(Number of Service Requests Per Stage)</th>
</tr>
<tr>
<th><b>Initiation</b></th>
<th><b>SPOC Assignment</b></th>
<th><b>Participant Contribution</b></th>
<th><b>Review</b></th>
<th><b>Closure</b></th>
</tr>
</thead>
<tr ng-repeat="x in infoWithStatus track by $index">
<td align="center"><input type="checkbox" ng-model="infoWithStatus[$index].checked"></td>
<td ng-model="infoWithStatus[$index].name">{{x.name}}</td>
<td>
<select ng-model="infoWithStatus[$index].selectedRole" ng-options="item for item in SPOCroles">
<option value="">Please select a role</option>
</select>
</td>
<td>{{x.count1}}</td>
<td>{{x.count2}}</td>
<td>{{x.count3}}</td>
<td>{{x.count4}}</td>
<td>{{x.count5}}</td>
<tr/>
</tbody>
</thead>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" >Close</button>
</div>
</div>
</div>
</div>
Here as we can see i am calling a function on click, that contains some validations. But, after the validations are done, it closes the model. But , i want the model to still open after validation as well.
You should remove
data-dismiss="modal"
from here
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
And in your validate(infoWithStatus) you should close the modal if validation is success. Use below code to hide modal
$("#responsive-modal3").modal("hide");
How can I use ng-model inside ng-repeat loop in AngularJS ?
Database is mySQL and also I am doing this because I want to edit on same row where data display.
I think this detail is ok to understand
<tbody ng-repeat="x in names">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" name="x.fname" ng-model="x.fname_m" value="{{x.fname}}" disabled /> </div>
</div>
</td>
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" value="{{x.email}}" disabled /> </div>
</div>
</td>
<td>
<button class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#followUps1"><i class="fa fa-calendar"></i> </button>
<a class="btn btn-xs btn-warning btn-collapse" data-toggle="collapse" data-target="#oppTasks1"> <i class="fa fa-star"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewDetail1"> <i class="fa fa-eye"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewComment1"> <i class="fa fa-comments"></i> </a>
<button ng-click="updateData(x.id, x.fname, x.lname, x.email, x.phone, x.country, x.skype_id, x.lead_source, x.lead_status, x.lead_priority)" class="btn btn-edit btn-primary btn-xs"><i class="fa fa-pencil"></i>
</button>
<button class="btn btn-update btn-success btn-xs"><i class="fa fa-floppy-o"></i>
</button>
</td>
</tr>
</tbody>
I would suggest this:
<tbody ng-repeat="x in names track by $index">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control"
name="x.fname" ng-model="x.fname_m[$index]"
value="{{x.fname}}" disabled /> </div>
</div>
</td>
//... rest of your code
Use the 'track by $index' on your repeat, and then you access the model via model[$index]. I would probably suggest, if you don't have a populated model, to also set the model to null at the start of your controller:
$onInit() {
this.fname_m = {};
}
<div ng-repeat="item in items">
<input ng-model="item.valueobject">
</div>
or binds
<div ng-repeat="item in items">
{{ item.valueobjects }}
</div>
I'm currently running into a problem. The problem is that it returns exactly this ' ' when trying to fetch data from 2 classes above the button.
This is how my app.js looks like:
$('.edit').on('click', function(event) {
event.preventDefault();
var productNamee = event.target.parentNode.childNodes[1].textContent;
$('#productname').val(productNamee);
$('#myModal').modal('show');
});
This is how my code looks like where it's implemented:
<table class="table table-striped table-bordered">
<tr>
<th>Product Name</th>
<th>Brand</th>
<th>Description</th>
<th>Posted On</th>
<th>Actions</th>
</tr>
#foreach($posts as $post)
<tr>
<div class="postcontest">
<td>{{ $post->productname }}</td>
<td>{{ $post->brands }}</td>
<td>{{ $post->description }}</td>
<td>{{ $post->created_at }}</td>
</div>
<td>
<div class="interaction">
<a class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
<a class="btn btn-danger btn-sm" href="{{ route('post.delete', ['post_id' => $post->id]) }}" role="button"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</div>
</td>
</tr>
#endforeach
</table>
This is what it returns when opening the modal:
https://gyazo.com/b5709533810d4bdb95029db3af8a9c4c (Totally nothing!)
The Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit a product</h4>
</div>
<div class="modal-body">
<form action="#" method="post">
<div class="form-group">
<label for="name">Product Name</label>
<input class='form-control' type="text" name="productname" id="productname">
</div>
<div class="form-group">
<label for="brands">Brands</label>
<input class='form-control' type="text" name="brands" id="brands">
</div>
<div class="form-group">
<label for="brands">Cop Link</label>
<input class='form-control' type="text" name="coplink" id="coplink">
</div>
<div class="form-group">
<label for="brands">Description</label>
<textarea class="form-control" name="description" id="description" rows="5"></textarea>
</div>
<input type="hidden" name="_token" value="{{ Session::token() }}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button></form>
</div>
</div>
</div>
</div>
Yes, the ID of the text field is 'productname' and that's all correct.
I'm currently out of ideas on how to fix this, any help would be appreciated!
Change this code:
<a class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
To
<a onClick="edit('{{$post->productname}}',
'{{$post->brands}}',
'{{$post->description}}',
'{{$post->created_at}}'),"
class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
And
$('.edit').on('click', function(event) {
event.preventDefault();
var productNamee = event.target.parentNode.childNodes[1].textContent;
$('#productname').val(productNamee);
$('#myModal').modal('show');
});
To
function edit(productname, brands, description, created_at) {
event.preventDefault();
$('#productname').val(productname);
$('#brands').val(brands);
$('#description').val(description);
$('#created_at').val(created_at);
$('#myModal').modal('show');
}
HTML CODE
<tbody>
<tr>
<td>0</td>
<td>204093D-P12</td>
<td>80443</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>1</td>
<td>216619D-P18</td>
<td>16009</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>2</td>
<td>21663P0012</td>
<td>13116</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>3</td>
<td>217496D-P078</td>
<td>16032</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr>
</tbody>
And i have to tried to get data-id attribute value from using Jquery in following way
function ShowModal(){
alert($(this).attr("data-id"));
}
but return undefinedhow to get data-id value from jquery? and i have an another doubt data-id value can hold numeric value or string value?
You need to pass the current element context in inline click handler like
<button onClick="ShowModal(this)" data-id="217496D-P078"></button>
Then use the passed element reference to get the data-id. You can also use HTMLElement.dataset property like elem.dataset.id
function ShowModal(elem){
var dataId = $(elem).data("id");
alert(dataId);
}
Additionally, I would recommend you use jquery to bind event handler's instead of ugly inline click handler.
One of the important part of jquery is manipulate the DOM.
DOM = Document Object Model : Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
It has several DOM Manipulation :
Get Content : text(), html(), and val()
Get Attributes : attr()
Now if u have to access a particular attribute on click of button or something else then use this :
so here is my HTML
<p>google.com</p>
<button>Click Here</button>
then u have to access the attributes of anchor tag like this:
$("button").click(function(){
alert($("#test").attr("href")); // output : http://www.google.com
alert($("#test").attr("data-id")); // output : id_12345
});
$(function () {
$(".inputs").click(function (e) {
alert($(this).attr("data-id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-xs btn-flat inputs" value="click" type="button" data-toggle="modal" data-id="217496D-P078" data-target="#myModal"/>
You can use Javascript's dataset or JQuqery data method:
$(document).ready(function() {
$('button').on('click', function() {
console.log(this.dataset.id, $(this).data().id, $(this).data('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
<tr>
<td>
<button type="button" data-id="1">btn #1</button>
<button type="button" data-id="2">btn #2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="3">btn #1</button>
<button type="button" data-id="4">btn #2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="5">btn #1</button>
<button type="button" data-id="6">btn# 2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="7">btn #1</button>
<button type="button" data-id="8">btn #2</button>
<br>
</td>
</tr>
</tbody>
Your code is correct, all need to do is pass this to your function like:
<button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal(this)"><i class="fa fa-plus" aria-hidden="true"></i></button>
You have to create unique data-id in your code data-id not unique.
data-id="217496D-P078" data-target="#myModal" type="button" title="Add"
data-id="217496D-P078" data-target="#myModal_edit" type="button" title="
data-id="217496D-P078" data-target="#myModal_details" type="button" titl
then
Try this
<button onClick="ShowModal(this)" data-id="217496D-P078"></button>
function ShowModal(elem){
var dataId = $(elem).data("id");
alert(dataId);
}
i have a table of articles for each item when i click delete button a popup of confirmation appear the problem is how to pass the Id of article so that when the user click on confirmation button the record will be deleted
here is the code of the table
<div class="tab-pane" id="article">
<table id="mytable" class="table table-bordred table-striped">
<c:forEach items="${articles}" var="o">
<tr>
<td>${o.id}</td>
<td>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-thumbnail" width="100" src="http://cfisinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">${o.titre}</h4>
${o.description}
</div>
</div>
</td>
<td>
<div class="pull-right">
<i class="glyphicon glyphicon-time"></i>${o.date}
</div>
</td>
<td>
<p>
<button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" data-placement="top" rel="tooltip">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p>
</td>
<td>
<button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" data-placement="top" rel="tooltip">
<span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</c:forEach>
</table>
and the code of the popup
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<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 custom_align" id="Heading">Delete this
entry</h4>
</div>
<div>le numero de l'article</div>
<div class="modal-body">
<div class="alert alert-warning">
<span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
this is the solution for my question
table code:
<div class="tab-pane" id="article">
<table id="mytable" class="table table-bordred table-striped">
<c:forEach items="${articles}" var="o">
<tr>
<td>${o.id}</td>
<td><div class="media">
<a class="pull-left" href="#"> <img
class="media-object img-thumbnail" width="100"
src="http://cfi-sinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg"
alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">${o.titre}</h4>
${o.description}
</div>
</div></td>
<td><div class="pull-right">
<i class="glyphicon glyphicon-time"></i>${o.date}
</div></td>
<td><p>
<button class="btn btn-primary btn-xs" data-title="Edit"
data-toggle="modal" data-target="#edit" data-placement="top"
rel="tooltip">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p></td>
<td>
<button class="open-deleteDialog btn btn-danger btn-xs"
data-title="Delete" data-toggle="modal"
data-target="#delete-article" data-placement="top"
data-id="ISBN564541" rel="tooltip">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</c:forEach>
</table>
<button class="btn btn-primary btn-xs" data-toggle="modal"
data-target="#ajoutart" data-placement="top" rel="tooltip">
<span>Ajouter Article</span>
</button>
</div>
</div>
</div>
</div>
code of modal class :
<div class="modal fade" id="delete-article" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<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 custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="id" id="id" value="" />
</div>
<div class="modal-body">
<div class="alert alert-warning">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
and the javascript function:
<script type="text/javascript">
$(document).on("click", ".open-deleteDialog", function() {
var ida = $(this).data('id');
$(".modal-body #id").val(ida);
// As pointed out in comments,
// it is superfluous to have to manually call the modal.
$('#delete').modal('show');
});
this link http://jsfiddle.net/Au9tc/605/ was very useful