This question already has answers here:
PDO and nested fetching
(2 answers)
Closed 4 years ago.
Desired result: Loop an equivalent amount of modals as ID's within my database table1 whilst successfully looping images from table2 within those looped modals.
Current result: Loop one modal period whilst looping all images from table2 inside that one successful modal.
What do, and how?
<?php
include("dbconfig.php");
/*include("class.user.php");*/
$user_id = $_SESSION['user_session'];
$user_name = $_SESSION['user_name'];
$stmt = $DB_con->prepare("SELECT * FROM comment_imgs");
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
$id = $row['id'];
$date = $row['date'];
$comment = $row['comment'];
$project_id = $row['project_id'];
$display_id = $row['display_id'];
$user_name = $row['user_name'];
?>
<div class="card" style="width: 18rem;" id="display">
<div class="card-body">
<h5 class="card-title"><?php echo $project_id;?></h5>
<p class="card-text"><?php echo $date;?></p>
<p class="card-text"><?php echo $user_name;?></p>
<p class="card-text"><?php echo $comment;?></p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#exampleModal<?php echo $id;?>" id="formButtons">
Button
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal<?php echo $id;?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal<?php echo $id;?>Label"><?php echo $project_id;?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php echo $date;?>
<?php echo $comment;?>
<?php echo $user_name;?>
<?php
$stmt = $DB_con->prepare("SELECT * FROM uploads");
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
$image_path = $row["image_path"]."/".$row["image_name"];
$display_id = $row['display_id'];
?>
<img src="<?php echo $image_path; ?>" class="images" /><?php } ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
table1:
Table 1 (comment_imgs)
table2:Table 2 (Uploads)
Change the result variable $stmt in inner loop to something else, since you are overwriting the variable with which you are iterating.
$stmt = $DB_con->prepare("SELECT * FROM comment_imgs");
$stmt->execute();
$stmt = $DB_con->prepare("SELECT * FROM uploads");
$stmt->execute();
// the variable result is overwritten
Related
so i have a while loop and i am fethcing the name and the description of them from my db
so when ever i click on one of the parts i want the modal to display the name of the item that i clicked on in the modal i hope this picture would describe it better
below is the code i have so far
at the moment when i click on the modal i get displayed the name of the item which is first on the list no matter where i click
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#mymodal">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="mymodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
You are not doing things the way you have to do. You are re-creating your mymodal for every iteration of your while loop which is not a better way to achieve what you want.
Follow these steps:
Create your mymodal outside of your while loop.
Pass the ID of current row to a javascript function and populate the data of that id using javascript.
I have set the things which needs to be done. Try the following code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--- display table header row-->
<table style="width:100%">
<tr>
<th>name</th>
<th>description</th>
<th>Action</th>
</tr>
<?php
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description'];
$id = $row['id']; // I am assuming that your table has auto incremented primary key column by the name of id, if not then replace that by $row['your_id_column']
?>
<!--- desplay the data in a table row -->
<tr>
<td id="<?php echo "name_".$id; ?>"><?php echo $name; ?></td>
<td id="<?php echo "description_".$id; ?>"><?php echo $description ; ?></td>
<td><div href="#" data-toggle="modal" data-target="#mymodal" onClick="showModal(<?php echo $id ; ?>)">Edit</div></td>
</tr>
<?php } ?>
</table>
<!--- Your modal -->
<div id="mymodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p id="name"></p> <!--- name will be shown here-->
<p id="description"></p><!--- description will be shown here-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
function showModal(id)
{
// setting the values of clicked item in the bootstrap Modal
$("#name").text($("#name_"+id).text());
$("#description").text($("#description_"+id).text());
}
</script>
Looks like you are not serializing the modals... If you wanted to do things that way your code should be something like;
<!-- language-all: lang-html -->
while($row = mysqli_fetch_assoc($result)) {
$procuct_id = $row['ID'];
$name = $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#mymodal_<?php echo $procuct_id;?>">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="mymodal_<?php echo $procuct_id;?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php }
<--
A Better way to do it would be to write a javascript function to show the generic modal window, then run an ajax call to load your info into the "modal-body" div. You would have to pass a unique id to the call in order to have your ajax script hit the db and get the info to display.
It's been almost 4 years but I'm writing for everyone; change data-target(id) as row id.
edited code:
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#<?php echo $row['id']; ?>">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="<?php echo $row['id']; ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
I'm very noob in PHP, but i'm really stuck here trying to figure out how to delete a row printed in a while loop here :
<?php
$sql5 = "SELECT * FROM user_exp WHERE id=".$_SESSION["ID"]."";
$result3 = mysqli_query($conn, $sql5);
if (mysqli_num_rows($result3) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result3)) {
echo "<h4>" . $row["exp_title"]. "<a href='#' title=''><i class='fa fa-pencil'></i><i onclick='location.href='userprofile.php?deleteID=".$row["auto_id"]."';' class='fa fa-minus-square' data-toggle='modal' data-target='#EXPDELModal' value='delete_exp'></i></a></h4>";
echo "<p>" . $row["exp_detail"]. "</p>";
}
}
else
{
echo "<div class='textfaded2'>Add you experience here.</div>";
}
?>
Note: i want to delete the row using a font-awesome icon and i'm using
'auto_id' as the auto_increment, primary key to define the row i want
to delete.
Here is the code for the modal:
<div class="modal fade" id="EXPDELModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete Experience</h4>
</div>
<div class="modal-body">
<h3>Are you sure?</h3>
<br>
<br>
</div>
<div class="modal-footer">
<form action="userprofile.php?deleteID=<?php '.$row["auto_id"].';?>"
style="width: 100%;" method="post" value="delete_exp">
<button type="button" name="delete" class="btn btn-default" data-
dismiss="modal">YES</button>
<button type="button" class="btn btn-default" data-
dismiss="modal">NO</button>
</form>
</div>
</div>
</div>
</div>
And finally the query for delete:
<?php
if(isset($_POST['delete']))
{
$sql6="DELETE FROM `user_exp` WHERE auto_id=".$_GET['deleteID']."";
$result=mysqli_query($conn,$sql6) or die();
}
?>
I would like to thank you for taking the time to read this.
<?php
$sql5 = "SELECT * FROM user_exp WHERE id=" . $_SESSION["ID"] . "";
$result3 = mysqli_query($conn, $sql5);
if (mysqli_num_rows($result3) > 0) {
while ($row = mysqli_fetch_assoc($result3)) {
?>
<h4><?php echo $row["exp_title"]; ?>
<a href='#' title=''>
<i class='fa fa-pencil'></i>
<i onclick='setValue("<?php $row["auto_id"]; ?>");' class='fa fa-minus-square' data-toggle='modal'
data-target='#EXPDELModal'></i>
</a>
</h4>
<p><?php echo $row["exp_detail"]; ?></p>;
<?php
}
} else {
echo "<div class='textfaded2'>Add you experience here.</div>";
}
if (isset($_POST['delete'])) {
if($_POST['deleteID']) {
$sql6 = "DELETE FROM `user_exp` WHERE auto_id=" . $_POST['deleteID'] . "";
$result = mysqli_query($conn, $sql6) or die();
}
}
?>
<script>
function setValue(value) {
document.getElementById("deleteId").value = value;
}
</script>
<div class="modal fade" id="EXPDELModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete Experience</h4>
</div>
<div class="modal-body">
<h3>Are you sure?</h3>
<br>
<br>
</div>
<div class="modal-footer">
<form action="userprofile.php" style="width: 100%;" method="post" name="delete_exp">
<input type="hidden" value="0" name="deleteID" id="deleteId" readonly/>
<button type="submit" name="delete" class="btn btn-default" data-dismiss="modal">YES</button>
<button type="button" class="btn btn-default" data-dismiss="modal">NO</button>
</form>
</div>
</div>
</div>
</div>
i am new in codeigniter
<?php foreach ($rows as $row) { ?>
<tr>
<td><?php echo $i++;?></td>
<td><?php echo $row->orderid;?></td>
<td><?php echo $row->order_date;?></td>
<td><?php echo $row->name;?></td>
<td><?php echo $row->price;?></td>
<td>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal-<?= $row->customerid?>">View Details</button>
</td>
</tr>
<div class="modal fade" id="myModal-<?= $row->customerid?>" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Order Details</h4>
</div>
<div class="modal-body">
<p><strong>Product Name</strong>: <?php echo $row->name;?></p>
<p><strong>Quantity</strong>: <?php echo $row->quantity;?></p>
<p><strong>Price</strong>: <?php echo $row->price;?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
only details of the first row is displayed in all modals
i need to get the details of each from each modal
I can help you with bootbox modal plugin(http://bootboxjs.com/). Modify your html as follows
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog body -->
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
<div></div>
</div>
</div>
</div>
</div>
then delete your button code and replace with this code
<a class="btn btn-primary your_defined_class_name_for_jquery_use" data-id="<?php echo $row['whatever_id']?>" > What ever name</a>
add the below script on the bottom of the page
<script>$(className).on('click','your_defined_class_name_for_jquery_use', function (e) {
var id=$(this).data('id');
var dialog = bootbox.dialog({
title: title,
message: $('<div></div>').load(url_to_your_controller_which_shows_the_data ),
});
});
Make sure that jquery is previously loaded on the page. I think this will help you.
Try to bellow code:
function get_orders(){
$this->db->select('*');
$this->db->from('orders o');
$this->db->join('order_detail od', 'o.serial = od.orderid', 'left');
$this->db->join('tbl_products p', 'p.prod_id = od.productid', 'left');
$query = $this->db->get();
return $query->result();
}
use this line $this->db->join('order_detail od', 'o.serial = od.orderid', 'left');
not $this->db->join('order_detail od', 'od.orderid = o.serial','left');
I want to fetch row values of the table whenever I click on that row.
In this I have to display data of the table in row..
Whenever I click on the row I need to return other variables values of that row ..
Like When I am clicking on the subject I need to show Message of respective subject from database.
PHP Code to return row values from database.
This snippet will not run as it is PHP code(just add in the snipppet to good formatting )
In this image, Popup Model is not showing correct subject and message ..
I need this particular subject and message in the popup
<?php
include('../config/conn.php');
$sql = "SELECT * FROM helpdesk where user_id='$user_id'";
$result = $conn->query($sql);
$sr=1;
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$user_id=$row["user_id"];
$pooler_id=$row["pooler_id"];
$date=$row["date"];
$subject=$row["subject"];
$req=$row['req_id'];
$message=$row['message'];
$sql1 = "SELECT * FROM pooler where id='$pooler_id' ";
$result1 = $conn->query($sql1);
if ($result1->num_rows > 0) {
// output data of each row
while($row1 = $result1->fetch_assoc()) {
$username=$row1['user_name'];
$email=$row1['email'];
}
}
echo ' <tr>
<td>'.$sr.'</td>
<td>'.$username.'</td>
<td><a href="#" data-toggle="modal" data-target="#myModal">'.$subject.'</td>
<td>'.$date.'</td>
</tr>';
$sr++;
}
} else {
echo "0 results";
}
?>
Modal POP Code where Sender Name, Subject and Message should be displayed.
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> <?php echo $username; ?> <br><br> <?php echo $subject; ?> </h4>
</div>
<div class="modal-body">
<p>
<?php
echo $message;
?>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
In your html code
<td><a href="#" data-toggle="modal" data-target="#myModal" onclick="showData('.$pooler_id.')">'.$subject.'</td>
Please pass your unique id in javascript function.
Modal
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
<span id="user_name"><?php echo $username; ?></span> <br><br> <span id="subject"><?php echo $subject; ?></span> </h4>
</div>
<div class="modal-body">
<p id="msg">
<?php
echo $message;
?>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
Script
<script>
function showData(pooler_id)
{
$.ajax({
type: POST,
url : 'some_file.php',
data: {pooler_id: pooler_id},
success: function(response){
var resp = JSON.parse(response);
$('#user_name').html(resp.user_name);
$('#subject').html(resp.subject);
$('#msg').html(resp.msg);
}
});
}
</script>
In some_file.php
$pooler_id = $_POST['pooler_id'];
//get records of your primary key json_decode it
//get details from database
//this will be result fetched from database
$responseData['user_name'] = $name;
$responseData['subject'] = $subject;
$responseData['msg'] = $msg;
echo json_decode($responseData);
If your issue is not resolved yet and you try to avoid usage of JSON:
You could try to add an individual id (e.g. $sr) to your <div class="modal-content"> id property and <a href="#" data-toggle="modal" data-target="#myModal">'.$subject.' call in view. Got this from http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
Maybe this works for you.
Add to your PHP code <a href="#modal-content-'.$sr.'" data-toggle="modal" data-target="#myModal">'.$subject.':
<?php
include('../config/conn.php');
$sql = "SELECT * FROM helpdesk where user_id='$user_id'";
$result = $conn->query($sql);
$sr=1;
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$user_id=$row["user_id"];
$pooler_id=$row["pooler_id"];
$date=$row["date"];
$subject=$row["subject"];
$req=$row['req_id'];
$message=$row['message'];
$sql1 = "SELECT * FROM pooler where id='$pooler_id' ";
$result1 = $conn->query($sql1);
if ($result1->num_rows > 0) {
// output data of each row
while($row1 = $result1->fetch_assoc()) {
$username=$row1['user_name'];
$email=$row1['email']; //note this value is never used
echo ' <tr>
<td>'.$sr.'</td>
<td>'.$username.'</td>
<td>
'.$subject.'
</td>
<td>'.$date.'</td>
</tr>';
$sr++;
}
}
}
} else {
echo "0 results";
}
?>
and to your Modal <div class="modal-content-<?php echo $sr; ?>">:
<!-- Modal content -->
<div class="modal-content-<?php echo $sr; ?>">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
<span id="user_name"><?php echo $username; ?></span> <br><br> <span id="subject"><?php echo $subject; ?></span> </h4>
</div>
<div class="modal-body">
<p id="msg"><?php echo $message; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
The code below shows the user's recent posts from the database, and a delete button if the user viewing the post
<div class="span12">
<?php
// get current user ID
$userid = $row['0'];
// get posts
$sql_posts = "SELECT * FROM posts WHERE ownerid='$userid' ORDER BY id DESC LIMIT 0,5";
$result_posts = mysql_query($sql_posts);
// for each post, show le post.
while($row_posts = mysql_fetch_assoc($result_posts)) {
?>
<div class="well">
<span class="label"><?php echo date('F j Y',strtotime($row_posts['time']));?></span>
at
<span class="label"><?php echo date('g:i a',strtotime($row_posts['time']));?></span>
<?php
if($player==$_SESSION['username']) {
?>
<a href="#deletepost" data-toggle="modal">
<span class="label label-important">Delete post</span>
</a>
<!-- delete post modal -->
<div id="deletepost" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close delete" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Delete post</h3>
</div>
<div class="modal-body">
Are you want to delete post #<?php echo $row_posts['id'];?>?
<p class="muted">
"<i><?php echo $row_posts['contents'];?></i>"
</p>
</div>
<div class="modal-footer">
<form class="pull-right form-inline" method="post" action="post_delete.php">
<input type="hidden" value="<?php echo $row_posts['id'];?>" name="postid">
<input type="hidden" value="<?php $filepath = $_SERVER["SCRIPT_NAME"]; echo basename($filepath);?>" name="currentpage">
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Keep the post</button>
<button type="submit" class="btn btn-danger">I am sure. Delete the post!</button>
</form>
</div>
</div>
<!-- end modal -->
<?php
} // end delete post button
?>
<hr width="250px">
<img src="profilepic.php?player=<?php echo $player;?>&size=32" />
<?php echo $row_posts['contents'];?>
</div>
<?php
} // end post foreach
?>
</div>
For some reason, once the user hits the modal it shows the same post every time. For example, if the user hit delete on the first post and the post contents was hello, it would show hello in the modal. However, for all the rest of the posts in the loop if you hit Delete it will show the first post in every single modal.
Your href for your delete link is, #deletepost, and your modal ID is always the same.
Change it so it doesn't use ID's, or make each ID different.
Try this,
<div class="span12">
<?php
// get current user ID
$userid = $row['0'];
// get posts
$sql_posts = "SELECT * FROM posts WHERE ownerid='$userid' ORDER BY id DESC LIMIT 0,5";
$result_posts = mysql_query($sql_posts);
// for each post, show le post.
while($row_posts = mysql_fetch_assoc($result_posts)) {
?>
<div class="well">
<span class="label"><?php echo date('F j Y',strtotime($row_posts['time']));?></span>
at
<span class="label"><?php echo date('g:i a',strtotime($row_posts['time']));?></span>
<?php
if($player==$_SESSION['username']) {
?>
<a href="#deletepost-<?php echo $row_posts['id'];?>" data-toggle="modal">
<span class="label label-important">Delete post</span>
</a>
<!-- delete post modal -->
<div id="deletepost-<?php echo $row_posts['id'];?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close delete" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Delete post</h3>
</div>
<div class="modal-body">
Are you want to delete post #<?php echo $row_posts['id'];?>?
<p class="muted">
"<i><?php echo $row_posts['contents'];?></i>"
</p>
</div>
<div class="modal-footer">
<form class="pull-right form-inline" method="post" action="post_delete.php">
<input type="hidden" value="<?php echo $row_posts['id'];?>" name="postid">
<input type="hidden" value="<?php $filepath = $_SERVER["SCRIPT_NAME"]; echo basename($filepath);?>" name="currentpage">
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Keep the post</button>
<button type="submit" class="btn btn-danger">I am sure. Delete the post!</button>
</form>
</div>
</div>
<!-- end modal -->
<?php
} // end delete post button
?>
<hr width="250px">
<img src="profilepic.php?player=<?php echo $player;?>&size=32" />
<?php echo $row_posts['contents'];?>
</div>
<?php
} // end post foreach
?>
</div>
Use different model ID 's in each time when you call model,
<div class="modal fade" id="<?php echo $id; ?>" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete Product</h4>
</div>
<div class="modal-body">
<p>Are you sure, want to delete this?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<span class="btn btn-danger" >Delete</span>
</div>
</div>
</div>
</div>