I want to edit the records for that i am using twitter bootstrap modal pop up. I have a view-product page which contains a button to open a modal pop up but at present time the code i am using displays only one record on view-product page, but my database contains more records and further more if i click the edit icon it displays only the first record and also i want to know how to get the id on the next page i.e. editproducts.php I have spend much of the on this topic but did not solve it please help by giving suggestions. Thanks....
view-product.php
<tbody role="alert" aria-live="polite" aria-relevant="all">
<?php
$query="SELECT * FROM tbl_product";
$sql_q=mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
?>
<tr class="odd">
<td class=" sorting_1"><?=$prodName?></td>
<td class="center "><?=$prodPrice?></td>
<td class="center "><?=$prodtype?></td>
<td class="center "><?=$prodQty ?></td>
<td class="center "><a class="btn btn-success" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-search-plus "></i> </a> <a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail-<?=$productid?>" href="#myModalDetail"> <i class="fa fa-edit"></i> </a> <a class="btn btn-danger" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-trash-o "></i> </a></td>
</tr>
<div class="modal fade" id="myModalDetail-<?=$productid?>">
<?php require "edit_products.php"; ?>
</div>
<? } ?>
</tbody>
edit_products.php
<?php
$productid=$_REQUEST[$productid];
$query="SELECT * FROM tbl_product WHERE pid='".$productid."'";
$sql_q=mysql_query($query);
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
}
?>
<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">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodName ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price" value="<?=$prodPrice?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Quanity</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productQty" placeholder="Enter product Quantity">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Upload Product Image</label>
</div>
</div>
<div class="col-lg-6">
<input type="file" name="productImg">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Description</label>
</div>
</div>
<div class="col-lg-6">
<textarea class="form-control" name="productDesc" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Related
I hope everyone had good holidays.
I need to add rows to my datatable inside a modal window(partial view). This modal window basically has a form for various fields and a datatable, together with two inputs and a button.
My idea was to fill the two input fields and when the button is pressed a new row is created in the table, with the values inserted in the two input fields. But for some reason, when I click the button the values in the input fields are empty.
The information on the table would very likely be stringified and sent, for example, to the field asp-for="test". So far this was what I thought.
Is this logic possible within a partial view? Do I need an additional form to receive data from my two inputs? I'm already inside another form and I know HTML5 doesn't allow for form nesting, but I get the nagging feeling that I would need an additional form for this logic.
Here is the code:
(js)
$(document).ready(function () {
$('#AddProdBtn').click(function () {
$('#returnLinesGrid').dataTable().fnAddData( [
$('#prodId').val(), $('#prodQty').val()] );
});
});
(cshtml)
<div id="return-edition-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content white-box white-box--lblreset">
<div class="modal-header">
<h5 class="modal-title create" style="display:none;">#TitleResource.ReturnCreate</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
<div asp-validation-summary="ModelOnly"></div>
<a hidden id="create-url" asp-action="Create" asp-controller="Returns"></a>
<input type="hidden" value="#Guid.NewGuid()" asp-for="Id" />
<div class="modal-body row">
<div class="md-form col-6 create-only row">
<select asp-for="ReturnType" asp-items="Html.GetEnumSelectList<OrderReturnTypeEnum>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnType</option>
</select>
<span asp-validation-for="ReturnType"></span>
</div>
<div class="md-form col-6 create-only" id="ReturnMotivePlaceholder" style="margin-top: 6px">
<select disabled selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
</div>
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Recall)" style="margin-top:6px">
<select asp-for="ReturnMotive" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumRecall>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
<span asp-validation-for="ReturnMotive"></span>
</div>
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Daily)" style="margin-top:6px">
<select asp-for="ReturnMotiveAux" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumDaily>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
<span asp-validation-for="ReturnMotiveAux"></span>
</div>
</div>
<div class="modal-body row">
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Daily)">
<input type="number" value="" asp-for="InvoiceNumber" class="form-control" required placeholder="#LabelResource.SelectReturnInvoiceNumber" />
</div>
<div class="md-form col-6 create-only">
<input type="text" value="" asp-for="ClientReturnNumber" placeholder="#LabelResource.SelectClientReturnNumber" class="form-control" />
</div>
</div>
<div class="md-form col-3 create-only">
<input type="number" value="" id="prodId" placeholder="#LabelResource.SelectProdId" />
</div>
<div class="md-form col-3 create-only">
<input type="text" value="" id="prodQty" placeholder="#LabelResource.SelectProdQuantity" />
</div>
<div class="col-6>
<button type="button" id="AddProdBtn">#ButtonResource.AddProduct</button>
</div>
<div class="row">
<div class="col-12">
<div class="row">
<table class="dataTable" id="returnLinesGrid" asp-for="ReturnLines">
<thead>
<tr>
<th>#Html.Raw(LabelResource.ProductId)</th>
<th>#Html.Raw(LabelResource.Quantity)</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="row modal-footer message-footer pr-5">
<div class=" mr-md-0">
<a data-dismiss="modal" class="btn btn-danger w-100">#ButtonResource.Cancel</a>
</div>
<div class=" ml-3">
<button type="submit" class="btn btn-primary w-100">#ButtonResource.Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
But the value of "prodId" and "prodQty" is always empty when I click the "AddProdBtn" button. Almost as if it never. I have no idea what to do..
Thank you for any and all help.
Pictures
Modal window
Main window, modal is called by pressing "Nova devolução" button
You should add the js to the main view. Below is a working demo:
Main View:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#return-edition-modal">
Create
</button>
#await Html.PartialAsync("_ProductPartial")
#section scripts{
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script>
$(document).ready(function () {
var datatable = $('#returnLinesGrid').dataTable();
$('#AddProdBtn').click(function () {
datatable.fnAddData([
$('#prodId').val(), $('#prodQty').val()]);
});
});
</script>
}
Partial View:
<div id="return-edition-modal" class="modal fade" 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="exampleModalLabel">Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
<div asp-validation-summary="ModelOnly"></div>
<div class="md-form col-3 create-only">
<input type="number" value="" id="prodId" placeholder="SelectProdId" />
</div>
<div class="md-form col-3 create-only">
<input type="text" value="" id="prodQty" placeholder="SelectProdQuantity" />
</div>
<div class="col-6">
<button type="button" id="AddProdBtn">AddProduct</button>
</div>
<table id="returnLinesGrid">
<thead>
<tr>
<th>#Html.Raw("ProductId")</th>
<th>#Html.Raw("Quantity")</th>
</tr>
</thead>
</table>
<div class="modal-footer">
<div class="mr-md-0">
<a data-dismiss="modal" class="btn btn-danger">Cancel</a>
</div>
<div class=" ml-3">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Result:
I finally got it! There is a typescript part of the code, which I had no idea would have a completely different behaviour than the javascript code, in the modal window, for some reason. I basically just had to put my jquery code in the .ts file associated(in this case Return.Index.ts) and then it finally recognized the values in my inputs!
Thank you so much, everyone, and early happy new year!
I am using Vue.js to generate a list of items in a table. Everything is working fine. Now on the end of every row I have got a button. When clicking the button a modal opens. I would like to put information from the row on which the button is clicked, in the modal.
So, table row looks like this:
Title, price, button
When clicking the button from this specific row, I would like to send the title in that row as an input value in the modal.
Piece of my code:
<table>
<div>
<tbody>
<tr v-for="samsung in samsungFilteredList">
<td class="text-left">{{ samsung.title }}</td>
<td class="text-right">{{ samsung.scherm }}</td>
<td class="text-right">{{ samsung.batterij }}</td>
<td class="text-right">{{ samsung.camera }}</td>
<td class="text-right">{{ samsung.behuizing }}</td>
<td class="text-right">{{ samsung.microfoon }}</td>
<td class="text-right"><i class="fa fa-file icon-primary"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-sm" role="document">
<div class="modal-content">
<div class="modal-body p-0">
<div class="card bg-secondary shadow border-0">
<div class="card-header bg-white">
<div class="text-muted text-center">
<small>Stuur ons een bericht</small>
</div>
</div>
<div class="card-body px-lg-5 py-lg-5">
<form role="form">
<div class="form-group mb-3">
<div class="input-group input-group-alternative">
<input class="form-control" id="telefoon" name="telefoon" placeholder="Telefoon" type="text" value="Samsung Galaxy S9" readonly>
</div>
</div>
<div class="form-group mb-3">
<div class="input-group input-group-alternative">
<input class="form-control" id="naam" name="naam" placeholder="Naam" type="text">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-alternative">
<input class="form-control" id="email" name="email" placeholder="Email" type="email">
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary my-4">Verzenden</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
So I would like to send {{samsung.title}} as the value of the input with the id and name of 'telefoon'.
How can I do this?
Thanks in advance,
Mike
UPDATE (Found the solution by trial and error)
<tr v-for="samsung in samsungFilteredList">
<td class="text-left">{{ samsung.title }}</td>
... etc
<td class="text-right">
<i class="fa fa-file icon-primary"></i>
<div class="modal fade" :id="samsung.title" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-sm" role="document">
<div class="modal-content">
<div class="modal-body p-0">
<div class="card bg-secondary shadow border-0">
<div class="card-header bg-white">
<div class="text-muted text-center">
<small>Stuur ons een bericht <span class="d-none">{{ samsung.title }}</span></small>
</div>
</div>
<div class="card-body px-lg-5 py-lg-5">
<form role="form">
<div class="form-group mb-3">
<div class="input-group input-group-alternative">
<input class="form-control" id="telefoon" name="telefoon" placeholder="Telefoon" type="text" :value="samsung.title" readonly>
</div>
</div>
<div class="form-group mb-3">
<div class="input-group input-group-alternative">
<input class="form-control" id="naam" name="naam" placeholder="Naam" type="text">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-alternative">
<input class="form-control" id="email" name="email" placeholder="Email" type="email">
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary my-4">Verzenden</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
I have created the ajax code to display the details using bootstrap modal version 3.3.7 (refers to <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">) and it works fine.
but when I want to implement it using bootstrap 4, I have a problem which when clicking "process", there is no response and the Modal does not appear.
<div class="container">
<h2> Proses Penerimaan Siswa Baru </h2>
<table id="tablee" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th> ID PSB </th>
<th> Nama </th>
<th> Sekolah Asal </th>
<th> Kelas </th>
<th> Tahun Pelajaran </th>
<th> Action </th>
</tr>
</thead>
<tbody>
<?php
$sql="SELECT * FROM psbsmp";
$resultset=mysqli_query($connection,$sql) or die(mysqli_error());
while ($rows=mysqli_fetch_array($resultset)){
?>
<tr id="<?php echo $rows['id']; ?>">
<td data-target="idpsb"><?php echo $rows["idpsb"]; ?></td>
<td data-target="nama"><?php echo $rows["nama"]; ?></td>
<td> <?php echo $rows["sekolahasal"]; ?></td>
<td> <?php echo $rows["kelas"]; ?></td>
<td> <?php echo $rows["tahunmasuk"]; ?></td>
<td>Process</td>
</tr>
<?php
}
?>
</tbody>
</table>
and this is the code for modal:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">PROSES PENERIMAAN {Data Calon Siswa}</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-6 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label">ID PSB</label>
<input class="form-control" type="text" id="idpsb" name="idpsb" disabled>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label"> ID SISWA </label>
<input class="form-control" type="text" id="idsiswa" name="idsiswa" >
</div>
</div>
</div>
<div class="row">
<div class="col-8 col-sm-8 col-md-8">
<div class="form-group">
<label class="control-label">NAMA</label>
<input class="form-control" type="text" id="nama" name="nama" disabled>
</div>
</div>
<div class="col-4 col-sm-4 col-md-4 ">
<div class="form-group">
<label class="control-label">NISN</label>
<input class="form-control" type="text" id="nisn" name="nisn">
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">BEASISWA</label>
<input class="form-control" type="text" id="beasiswa" name="beasiswa">
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">PENERIMAAN</label>
<select class="form-control" name="keterangan" id="keterangan">
<option value="0"> Please Select </option>
<option value="lulus"> Lulus</option>
<option value="lulus bersyarat"> Lulus Bersyarat</option>
<option value="tidak lulus"> Tidak Lulus</option>
</select>
</div>
<input type="hidden" id="userId" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
Process
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Ajax code
$(document).ready(function(){
// append values in input fields
$(document).on('click','a[data-role=update]',function(){
var id = $(this).data('id');
var idpsb = $('#'+id).children('td[data-target=idpsb]').text();
var nama = $('#'+id).children('td[data-target=nama]').text();
$('#idpsb').val(idpsb);
$('#nama').val(nama);
$('#userId').val(id);
$('#myModal').modal('toggle');
});
// now create event to get data from fields and update in database
$('#save').click(function(){
var id = $('#userId').val();
var idpsb = $('#idpsb').val();
var nama = $('#nama').val();
$.ajax({
url : 'connection.php',
method : 'post',
data : {idpsb : idpsb , nama : nama , id : id},
success : function(response){
// now update user record in table
$('#'+id).children('td[data-target=idpsb]').text(idpsb);
$('#'+id).children('td[data-target=nama]').text(nama);
$('#myModal').modal('toggle');
}
});
});
});
does it relate to the function of the button that I use is <a></a> element?
Here is simple example of working modal, check the bootstrap 4 links in your application and the html content for modal
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</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>
use css to display modal in your javascript
$.ajax({
url : 'connection.php',
method : 'post',
data : {idpsb : idpsb , nama : nama , id : id},
success : function(response){
// now update user record in table
$('#'+id).children('td[data-target=idpsb]').text(idpsb);
$('#'+id).children('td[data-target=nama]').text(nama);
$('#myModal').css('display','block');
}
});
I have tried few things but didn't work, i need to open a modal popup on a modal popup either by hiding back modal popup or any other way.
I cannot inject controller instance too according to my application structure. Any help could be greatly appreciated.
As below, when i click on add stoppage button, a new modal opens, and this popup modal should hide or close & open again.
<div class="modal fade" id="editModal" 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">Update Route Details</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" name="updateRouteForm">
<fieldset>
<!-- Route ID-->
<div class="form-group">
<label class="control-label">Route ID</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
<input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
</div>
</div>
</div>
<!-- Route Name-->
<div class="form-group">
<label class="control-label">Route Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
</div>
</div>
</div>
<!-- Description-->
<div class="form-group">
<label class="control-label">Route Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
</div>
</div>
</div>
<!-- Route distance-->
<div class="form-group">
<label class="control-label">Route Distance</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
</div>
</div>
</div>
<br /><br />
<!-- Display Stoppage Data -->
<div align="center" class="form-group-sm">
<table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
<thead>
<tr>
<th class="btn-info">serialNo</th>
<th class="btn-info">Stoppage Name</th>
<th class="btn-info">Description</th>
<th class="btn-info">Route order</th>
<th class="btn-info">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stoppage in StoppageData">
<td>{{ stoppage.orderId }}</td>
<td>{{ stoppage.stoppageName }}</td>
<td>{{ stoppage.description }}</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
<button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
</div>
</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="closeUpdate()">Add Stoppage</button>
<button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
AddStoppage Popup code:
<div class="modal fade" id="addModal" 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" align="center">Add Stoppage</h4>
</div>
<div class="modal-body">
<!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
<form class="well form-horizontal" id="addStoppageForm">
<fieldset>
<!-- Stoppage Name-->
<div class="form-group">
<label class="control-label">Stoppage Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
</div>
</div>
</div>
<!-- Stoppage Description-->
<div class="form-group">
<label class="control-label"> Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="r.addStoppageRow(stoppage)">Submit</button>
<button type="button" class="btn btn-info pull-right" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Ideally multilevel modals are not supported by bootstrap. you would have to do it manually/programmatically by JavaScript; in your controller for your case.
You can make a flag variable to add some more css to the modal body. That flag can be active when there are more than one flags.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">One</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addModal">Two</button>
<div class="modal fade" id="editModal" role="dialog" ng-style="{display: hide ? 'none': 'block'}">
<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">Update Route Details</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" name="updateRouteForm">
<fieldset>
<!-- Route ID-->
<div class="form-group">
<label class="control-label">Route ID</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
<input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
</div>
</div>
</div>
<!-- Route Name-->
<div class="form-group">
<label class="control-label">Route Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
</div>
</div>
</div>
<!-- Description-->
<div class="form-group">
<label class="control-label">Route Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
</div>
</div>
</div>
<!-- Route distance-->
<div class="form-group">
<label class="control-label">Route Distance</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
</div>
</div>
</div>
<br /><br />
<!-- Display Stoppage Data -->
<div align="center" class="form-group-sm">
<table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
<thead>
<tr>
<th class="btn-info">serialNo</th>
<th class="btn-info">Stoppage Name</th>
<th class="btn-info">Description</th>
<th class="btn-info">Route order</th>
<th class="btn-info">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stoppage in StoppageData">
<td>{{ stoppage.orderId }}</td>
<td>{{ stoppage.stoppageName }}</td>
<td>{{ stoppage.description }}</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
<button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
</div>
</td>
<td>
<div class="floating-buttons" align="center">
<button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="hide=true;closeUpdate()">Add Stoppage</button>
<button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="addModal" 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" align="center">Add Stoppage</h4>
</div>
<div class="modal-body">
<!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
<form class="well form-horizontal" id="addStoppageForm">
<fieldset>
<!-- Stoppage Name-->
<div class="form-group">
<label class="control-label">Stoppage Name</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
</div>
</div>
</div>
<!-- Stoppage Description-->
<div class="form-group">
<label class="control-label"> Description</label>
<div class="inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="hide=false;r.addStoppageRow(stoppage)">Submit</button>
<button type="button" class="btn btn-info pull-right" data-dismiss="modal" ng-click="hide=false;">Cancel</button>
</div>
</div>
</div>
</div>
This Bootstrap modal is not working in Safari but there is no issues in Chrome and Firefox.
I also have a javascript select. When I remove the javascript select the popup works in Safari but otherwise its not working.
<div class="modal fade" role="dialog" id="fav-popup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-fav-header">
<h2 class="txt-pop-head">Add category</h2>
<button class="close" data-dismiss="modal"><span class="fa fa-close"></span></button>
</div>
<div class="modal-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control input-control" placeholder="">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<div class="select-box select-gray">
<label>Category</label>
<select class="form-control input-control wide custom">
<option value="">Product Category</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="btn-group-custom">
<input type="button" class="btn btn-draft" value="Cancel">
<input type="button" class="btn btn-next" value="Create">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-sm-8 col-md-9">
<h2 class="txt-profile-head">Add Category</h2>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="row-adj">
<div class="products-block">
<div class="category" style="background:#fff;">
<a href="#fav-popup" data-toggle="modal" data-target="#fav-popup"><button type="button" class="btn">+</button>
<h3>Create a Category</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var bodyTag = document.getElementsByTagName("body")[0];
bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
</script>
<script src="js/SelectBox.js"></script>
<script>
$(function() {
$("select.custom").each(function() {
var sb = new SelectBox({
selectbox: $(this),
height: 150,
width: 200,
});
});
});
</script>