I have a strange issue. Maybe someone has encountered similar case. I have a modal window having a dual select list that pops up by a button click. List items can not be selected (activated by mouse click) on the 1st, 3th, 5th.. times of modal opening but selected only on the 2nd, 4th, 6th.. times of modal opening. I wonder if it is a js conflict issue. Any help will be appreciated. Here is the code:
#model IEnumerable<MajorAdmin.ViewModel.DList>
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="">
<div class="row">
<div class="col-md-12">
<div class="x_panel">
<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<a>#item.ev</a>
</td>
<td>
<a id="#item.id" name="edit" data-toggle="modal" data-target="#editpartialmodaldiv" class="btn btn-info btn-xs"><i class="fa fa-pencil-square-o"></i> Edit </a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="editpartialmodaldiv" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"></div>
</div>
<script src="~/Content/vendors/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$("a[name='edit']").click(function () {
var selectedid = this.id;
var data = JSON.stringify({
'selecteditem': selectedid,
});
jQuery.ajax({
type: "POST",
url: "#Url.Action("GetID")",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: data,
success: function (json) {
$("#editpartialmodaldiv").load('#Url.Action("Edit")');
},
failure: function (errMsg) {
alert(data);
}
});
});
</script>
<div class="modal-dialog modal-lg">
<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</h4>
</div>
<div class="modal-body">
<div role="main">
<div class="">
<div class="clearfix"></div>
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search"></span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
</div>
<ul id="sortable1" class="list-group">
#foreach (var item in Model) { if (item.evl == null) {
<li class="list-group-item"><img src="~/Content/images/img.jpg" class="avatar" style="max-height:30px" alt="Avatar">#item.emp</li>
} }
</ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<ul id="sortable2" class="list-group text-right">
#foreach (var item in Model) { if (item.emp == null) {
<li class="list-group-item"><img src="~/Content/images/img.jpg" class="avatar" style="max-height:30px" alt="Avatar">#item.evaluator</li>
} }
</ul>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="savebutton" name="formsavebutton" value="Create" type="submit" class="btn btn-success">Save</button>
</div>
</div>
</div>
<!-- jQuery -->
<script src="~/Content/vendors/jquery/dist/jquery.min.js"></script>
<!-- Dual List Scripts -->
<script src="~/Content/js/duallist/duallist.js"></script>
I finally found the answer. Thanks to #Kaddath..
I added toggle function to return success of ajax response ==> $('body').on('click', '.list-group .list-group-item', function () {
$(this).toggleClass('active');
Related
I know there are many similarly to this question but I can't find a way.
I have a table and when I click edit in row table the modal should show and I want to pass data from table to modal and display some data in modal that comes from my table .When the button click it always error and the modal didn't show.I been using Django.Please see the image below. Below is my current code. Can you help me please?
enter image description here
accounts.html
{% extends 'navigation.html' %}
{% block content %}
<script>
function exampleModal(firstName,lastName){
document.getElementById('firstNameValueId').innerHTML = firstName
document.getElementById('secondNameValueId').innerHTML = lastName
$("#exampleModal").modal('show');
}
</script>
<!-- mytable -->
<div class="tabs-animation">
<div class="card mb-3">
<div class="card-header-tab card-header">
<div class="card-header-title font-size-lg text-capitalize font-weight-normal"><i
class="header-icon lnr-laptop-phone mr-3 text-muted opacity-6"> </i>Accounts Information
</div>
<div class="btn-actions-pane-right actions-icon-btn">
<div class="btn-group dropdown">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
class="btn-icon btn-icon-only btn btn-link">
<i class="pe-7s-menu btn-icon-wrapper"></i>
</button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-right rm-pointers dropdown-menu-shadow dropdown-menu-hover-link dropdown-menu">
<h6 tabindex="-1" class="dropdown-header">Header</h6>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-inbox"> </i><span>Menus</span>
</button>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-file-empty"> </i><span>Settings</span>
</button>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-book"> </i><span>Actions</span>
</button>
<div tabindex="-1" class="dropdown-divider"></div>
<div class="p-3 text-right">
<button class="mr-2 btn-shadow btn-sm btn btn-link">View Details</button>
<button class="mr-2 btn-shadow btn-sm btn btn-primary">Action</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<table style="width: 100%;" id="example" class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Action</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Username</th>
<th>Date joined</th>
</tr>
</thead>
<tbody>
{% for user_information in user_information %}
<tr>
<td><a class="btn btn-info" onclick="exampleModal('{{user_information.first_name}}','{{user_information.last_name}}')">Edit</a></td>
<td>{{user_information.first_name}}</td>
<td>{{user_information.last_name}}</td>
<td>{{user_information.email}}</td>
<td>{{user_information.username}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
<!-- This is my modal -->
<div id="modal-div">
<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">Personal Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<form action="#" method="post">
<label for="firstname"> <p id="firstNameValueId">Some text in the Modal..</p></label>
<div>
<input type="text" class="custom-input1 form-control " id="firstNameValueId" name="firstname" placeholder="First name" />
</div>
</div>
<div class="form-group">
<label for="lastname">Last name</label>
<div>
<input type="text" class="form-control" id="secondNameValueId" name="lastname" placeholder="Last name" />
</div>
</div>
</form>
</div>
</div>
I got bug when I use JQuery data-id in jQuery Datatables. For the first 10 (Ten) record working well. But when I click navigation table to enter to the second page, the data-id value not shown. Please see my code below :
<i class="icon-plus2 pr-2"></i> Tambah Data
<table class="table datatable-basic table-striped table-hover">
<thead>
<tr>
<th class="text-center">#</th>
<th>Nama Jenis Obat</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
<?php
$x = 1;
$sdata = mysqli_query($konek, "SELECT * FROM e_jnsobat ORDER BY nm_jnsobat ASC");
while($ddata = mysqli_fetch_array($sdata)) {
echo "
<tr>
<td class='text-center'>" . $x . ".</td>
<td>" . $ddata['nm_jnsobat'] . "</td>
<td class='text-center'>
<div class='btn-group'>
<a href='#' class='breadcrumb-elements-item dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>
<i class='icon-grid3'></i>
</a>
<div class='dropdown-menu dropdown-menu-right' x-placement='bottom-end' style='position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(310px, 40px, 0px);'>
<a href='#' data-toggle='modal' data-target='#modalEdit' data-id='".$ddata['id_jnsobat']."' class='dropdown-item btedit'><i class='icon-pencil7'></i> Edit Data</a>
<div class='dropdown-divider'></div>
<a href='#' data-toggle='modal' data-target='#modalHapus' data-id='".$ddata['id_jnsobat']."' data-nama='".$ddata['nm_jnsobat']."' class='dropdown-item bthapus'><i class='icon-trash'></i> Hapus Data</a>
</div>
</div>
</td>
</tr>
";
$x++;
}
?>
</tbody>
</table>
<div id="modal_theme_custom" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<div class="modal-header bg-brown">
<h6 class="modal-title">Tambah Data</h6>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" class="form-control" name="nm_jnsobat" placeholder="Nama Jenis Obat" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="tambahin" class="btn bg-brown">Tambah Data</button>
</div>
</form>
</div>
</div>
</div>
<div id="modalEdit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-teal-600">
<h4 class="modal-title">Edit Data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body pb-0">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_edit">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" name="nm_jnsobat" class="form-control" placeholder="Nama Jenis Obat" id="nm_jnsobat" required>
</div>
<div class="form-group">
<div class="alert alert-warning">Pastikan data yang anda tambahkan adalah benar.</div>
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="editin" class="btn bg-teal-800">Edit Data</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="modalHapus" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_hapus">
<div class="modal-header bg-danger">
<h5 class="modal-title">Konfirmasi Hapus Data</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="alert alert-danger">Anda yakin akan menghapus data <b id="nm_jnsobat_hapus"></b>? Data yang sudah dihapus tidak bisa dikembalikan lagi.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="hapusin" class="btn bg-danger">Ya! Hapus permanen data</button>
</div>
</form>
</div>
</div>
</div>
And this is the javascript code:
<script type="text/javascript">
$(document).ready(function() {
$('.btedit').on('click', function() {
const id = $(this).data('id');
$('#id_jnsobat_edit').val(id);
console.log("Datanya : "+id);
$.ajax({
type: 'get',
url: "<?php echo docroot('ajax/jnsobat/'); ?>"+id,
async: false,
dataType: 'json',
success: function(data) {
//console.log("Datanya : "+data);
$('#nm_jnsobat').val(data[0].nm_jnsobat);
}
});
});
$('.bthapus').on('click', function() {
const id = $(this).data('id');
const nama = $(this).data('nama');
$('#id_jnsobat_hapus').val(id);
//$('#nm_userxx').val(nama);
document.getElementById("nm_jnsobat_hapus").innerHTML = nama;
//console.log("data : " + nama);
});
});
</script>
on the first 10 recode its work well, but when I click button to go to the second page of datatable navigation the data-id dosen't work... I dont know where is the problem... sory about my English...
As per the comments above here is the answer...
The below only listens to click events that are rendered before the code is executed.
$('.bthapus').on('click', function() { ... });
Replacing that with the below listens to the click event on the entire document, so dynamically created elements (such as your table pagination) will be included.
$(document).on('click', '.btedit', function() {
I have a Bootstrap dropdown which worked fine till now.Now i have added two bootstrap modals to my code.My dropdown doesn't work after i add modals to my code.If i remove modals it just works fine.I cant figure out why.
Does this has something to do with data-toggle as i can see its the only common thing between both of them
This is my code.
<div class="my-container" ng-controller="compCategoryCtrl">
<div class="compare-table">
<div class="head-info">
<h3>Select colleges to compare</h3>
</div>
<div class="clearfix"></div>
<div class="find-colleges">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value1">{{selected_value1}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg1(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value2">{{selected_value2}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg2(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class=" col-md-4 go">
<button class="btn compare_buton trigger open" ng-click="fetch()">Go</button>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="nav-for-table slider close">
<div id="home">
<table class="table table-striped table-hover table-bordered">
<tr ng-repeat="(key, value) in data1[0]">
<td class="col-md-6 head-field active">{{key}}</td>
<td class="col-md-3" ng-repeat="x in data1">
{{x[key]}}
</td>
<td class="col-md-3" ng-repeat="x in data1">
{{data2[$index][key]}}
</td>
</tr>
<tr>
<td class="col-md-6 head-field active">Departments</td>
<td class="col-md-3" data-toggle="modal" data-target="#show1">
Click here to view Departments
</td>
<td class="col-md-3" data-toggle="modal" data-target="#show2">
Click here to view Departments
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal fade" id="show1" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept1">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="show2" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept2">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script>
$('.trigger.open').on('click', function () {
$('.slider').removeClass('close');
});
$('.trigger.close').on('click', function () {
$('.slider').addClass('close');
});
</script>
Can somebody please help.
Remove the inline styles you have on each Modal:
style="display: block;z-index: 9999;margin-top: 100px;"
Once those are removed the modals fire as expected. I might also recommend removing the .close class from <div class="nav-for-table slider"> as that class is used by Bootstrap and might cause various display conflicts.
See this Bootply for a functional example:
https://www.bootply.com/dFixsdYLpG
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>
I'm a beginner programmer in jQuery and I do not understand why this feature can not perform the second time. The first time the button content changes, after two seconds it returns to the previous state and the second time I can not do the same thing. Please help! Regards
$(document).ready(function() {
$('#registerButtonM').on('click', function() {
$(this).attr("disabled", true);
var btn = '<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>';
if ($('#passRegisterM').val().length >= 8) {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
} else {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
setTimeout(function() {
$('#footerButtonsM').html('');
$('#footerButtonsM').html(btn);
}, 2000);
}
});
});
EDIT:
html:
<div class="modal fade hidden-sm hidden-md hidden-lg" id="registerM" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xs" 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">Register on TaskSave</h4>
</div>
<div class="modal-body">
<form method="post" action="">
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>User <span class="" id="vUserM"></span></p>
<input type="text" placeholder="John" name="user" id="userRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>E-mail <span class="" id="vEmailM"></span></p>
<input type="text" placeholder="mail#example.com" name="email" id="emailRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>Password <span class="" id="vPassM"></span></p>
<input type="password" placeholder="password" name="pass" id="passRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 register-captcha">
<div class="g-recaptcha" data-sitekey=""></div>
</div>
</div>
</div>
<div class="modal-footer" id="footerButtonsM">
<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Change your #footerButtonsM HTML to
<div class="modal-footer" id="footerButtonsM">
<i class="fa fa-spin fa-circle-o-notch" style='display:none'></i>
<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
</div>
and your jquery code to:
$(document).ready(function() {
var btnWrapper = $('#footerButtonsM');
var loading = $('#footerButtonsM .fa-circle-o-notch');
$('#registerButtonM').on('click', function() {
var btn = $(this);
btn.hide();
loading.show();
if ($('#passRegisterM').val().length <= 8) {
setTimeout(function(){
loading.hide();
btn.show();
}, 2000)
}
});
});
The result will be the same, but the approach is better.
To setup late binding, change
$('#registerButtonM').on('click', function() {
To this:
$(document).on('click', '#registerButtonM', function() {
Since you have remove the html button from the DOM the onclick handler is autmotically garbaged (this makes sense since the element present does not exist).
An alternative is to declare and function named clicker.. When you remove and insert the html simply add the function clicker to the new button
See snippet below
function clicker() {
$(this).attr("disabled", true);
var btn = '<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>';
if ($('#passRegisterM').val().length >= 8) {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
} else {
$('#footerButtonsM').html('<i class="fa fa-spin fa-circle-o-notch"></i>');
setTimeout(function() {
$('#footerButtonsM').html('');
$('#footerButtonsM').html(btn);
$("#registerButtonM").on('click', clicker)
}, 2000);
}
}
$(document).ready(function() {
$('#registerButtonM').on('click', clicker);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade hidden-sm hidden-md hidden-lg" id="registerM" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xs" 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">Register on TaskSave</h4>
</div>
<div class="modal-body">
<form method="post" action="">
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>User <span class="" id="vUserM"></span></p>
<input type="text" placeholder="John" name="user" id="userRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>E-mail <span class="" id="vEmailM"></span></p>
<input type="text" placeholder="mail#example.com" name="email" id="emailRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="register-input">
<p>Password <span class="" id="vPassM"></span></p>
<input type="password" placeholder="password" name="pass" id="passRegisterM" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 register-captcha">
<div class="g-recaptcha" data-sitekey=""></div>
</div>
</div>
</div>
<div class="modal-footer" id="footerButtonsM">
<button type="button" class="btn btn-success" name="register" id="registerButtonM"><i class="fa fa-user-circle"></i> Register</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
The reason this doesn't work is that you're removing the button on click of the button. This causes it to not be bound any more.
When you do: $('#footerButtonsM').html(''); this removes the button from the dom object and you lose the early binding that you've setup.
Then you put another button back on the page when you do $('#footerButtonsM').html(btn);
Since this is a completely new button it is no longer bound by the click handler that you have setup.
You have a couple options to fix this issue. You can either rebind or a new click handler either early or late binding to the new button.
A quick fix is to change it to late bind by changing :
$('#registerButtonM').on('click', function() {
to be:
$(document).on('click', '#registerButtonM', function() {
Here is a fiddle of this working