I have a table that has an on click event per row to open a modal, and am looking to create a column of actions in the table for some split buttons using bootstrap
the issue is that the tr click events are interfering with the split button click events
here is my demo
Click on a table row, you will see the table row modal
Click on the action button, you will see the separate action modal
However, click on the split group button's drop down, it opens the drop down AND opens the table row modal
The reason is due to overlapping onclick functions Click events on overlapping items
The action button onclick used to have this issue as well, so I added an onclick stop propagation to the button, preventing overlay clicks from occuring
onclick="$('#dd-modal').modal('show');event.stopPropagation();"
So that solves my button issue, but my dropdown of the button , I cannot figure out how to programmatically show the dropdown without triggering the tr onclick event
I think that
.trigger('click.bs.dropdown');
may have something to do with it, but unsure on how to implement
Thanks for any help
$(document).ready(function () {
$("#table").on("click", "tr", function () {
$('#tr-modal').modal({
backdrop: 'static',
keyboard: false
});
});
});
function opener() {
$('#dd-modal').modal('show');
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table id="table" class="table table-striped">
<tr>
<td>My Name</td>
<td>Date</td>
<td>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger" onclick="$('#dd-modal').modal('show');event.stopPropagation();">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Some other Name</td>
<td>Date</td>
<td>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-success" onclick="$('#dd-modal').modal('show');event.stopPropagation();">Action</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
</td>
</tr>
</table>
<div class="modal fade" id="tr-modal">
<div class="modal-dialog">
<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">Table Row Modal</h4>
</div>
<div class="modal-body">
<p>Table row modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Dismiss</button>
<button type="button" class="btn btn-primary">Ok!</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="dd-modal">
<div class="modal-dialog">
<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">split button modal</h4>
</div>
<div class="modal-body">
<p>split button modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Dismiss</button>
<button type="button" class="btn btn-primary">Ok!</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
You can do a quick check for the tagName of the target and ignore if it's a button or if the parent is a button (this is in case you happen to click in the "span" for the caret icon) to get around this issue pretty quickly.
Wrap you modal opening call with this if statement checking the target type...
$("#table").on("click", "tr", function (e) {
if (e.target.tagName !== "BUTTON" && e.target.parentElement.tagName !== "BUTTON") {
$('#tr-modal').modal({
backdrop: 'static',
keyboard: false
});
}
}
replace the contents of your document ready js with that
note: take note of the event paremeter in the first line
function (e)
Working Demo
Related
I have a panel with buttons
<div class="panel panel-default" style="padding-left:15px; padding-top:5px; padding-right:15px; float:left">
<button class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="">Edit</button>
<div class="btn-group btn" style="padding:0;">
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Line</li>
<li>Bar</li>
</ul>
</div>
<button class="btn btn-default">Show</button>
</div>
</div>
and for the dropdown, when the user selects an option, it should change the name of the button
$(function () {
$(".dropdown-menu li a").click(function () {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
#*<button type="button" class="btn btn-danger" style="float:left;" data-dismiss="modal">Cancel</button>*#
<button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
but it also changes the name of the Edit button. I don't know what am I doing wrong :( It is possible to group a dropdown in left and a Show button to the right, change the left button name according to the selection without affecting the rest of the buttons and also, to display one popup based on the selection when the user presses Show (each selection has it's own popup)?
I'm pretty new in JavaScript programming so please be gentle :)
You code was not working because you CSS selector .btn:first-child is selecting multiple btn elements thus updating multiple buttons text.
If you want to update the toggle button you can do this as follows.
You can select the toggle button using this selector .btn.dropdown-toggle
in you jquery.
I would suggest you to add an id to the button and select it using an id.
SNIPPET
$(function() {
$(".dropdown-menu li a").click(function() {
//$('.btn.dropdown-toggle').text($(this).text());
$('#toggle').text($(this).text());
});
$('#show').click(function(){
var show = $('#toggle').text();
alert(show);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-default" style="padding-left:15px; padding-top:5px; padding-right:15px; float:left">
<button class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="">Edit</button>
<div class="btn-group btn" style="padding:0;">
<button id="toggle" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Line</li>
<li>Bar</li>
</ul>
<button id ="show" class="btn btn-default">SHOW</button>
</div>
</div>
I have a bootstrap modal window, and in it I have a bootstrap list-group-item of buttons. In my jquery/js I enable a submit button when one of the button is clicked, but if I click somewhere else on the modal window the button gets unchecked! How can I look for this event so that I can disable my submit button?
Or can I prevent the button from getting unchecked if I press somewhere else on the modal window?
Here is my modal window.
$(".removeReason").off('click').on('click', function() {
$("#removeMember").prop('disabled', false);
});
// I need a .removeReason event that gets triggered when any button is unchecked
<div id="removeMemberModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">#(ViewBag.IsTeacher == true ? "Remove Teacher" : "Remove Student")</h4>
</div>
<div class="modal-body">
<p>
<h4>Why do you want to remove this #(ViewBag.IsTeacher == true ? "Teacher" : "Student")</h4>
</p>
<p>
<div class="list-group">
<button type="button" class="list-group-item removeReason">Bad Reviews</button>
<button type="button" class="list-group-item removeReason">Made offensive comment</button>
<button type="button" class="list-group-item removeReason">Shows up late or misses class altogether</button>
<button type="button" class="list-group-item removeReason">Would like to register a different #(ViewBag.IsTeacher == true ? "Teacher" : "Student")</button>
<button type="button" class="list-group-item removeReason">Other</button>
</div>
</p>
<p>
#if(ViewBag.IsTeacher == true) {
<div>The teacher and all registered students will be notified by email that he/she has been removed from this event.</div>
} else {
<div>The student will be notified that he/she has been removed from this event.</div>
}
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="removeMember" data-member-id=#ViewBag.MemberId type="button" class="btn btn-primary" disabled>Submit</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
I solved this by adding an active class to each button that gets pressed.
like so
$(".removeReason").off('click').on('click', function() {
$(".removeReason").removeClass('active');
$(this).addClass('active');
$("#removeMember").prop('disabled', false);
});
Good solution you find but take a look of this .toggleClass method :) http://api.jquery.com/toggleclass/
$(".removeReason").click(function() {
$( this ).toggleClass("active");
});
I'm working on a project(struts framework) where I want to change UI of design.In exist project there are menu tab.In exist project after clicking each menu the jsp page is opening on new browser window.I want to open in on modal(popup) instead of new browser window.I added following code.
topMenu.jsp contain menu tab with various submenu.
topMenu.jsp
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-8">
<ul class="nav navbar-nav">
<li><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
Menu1 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a data-toggle="modal" data-target="#js-custom1" href="" onclick="$('#js-custom1').load('showCustomerList.do');">Customers</a></li>
<li><a data-toggle="modal" data-target="#js-custom2" href="" onclick="$('#js-custom2').load('showVendorList.do');">Vendors</a></li>
<li><a data-toggle="modal" data-target="#js-custom3" href="" onclick="$('#js-custom3').load('showVendorEditList.do');">VenderEdit</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Load the modal -->
<div class="modal fade" id="js-custom1" tabindex="-1" role="dialog"></div>
<div class="modal fade width-more" id="js-custom2" tabindex="-1" role="dialog"></div>
<div class="modal fade width-more" id="js-custom3" tabindex="-1" role="dialog"></div>
After clicking on "VenderEdit" menu it will load the VendorEdit.jsp along with dynamic data on popup(modal).After clicking on "Search" button the form get submitted but response get display on new tab of browser instead of "testResult" div.
VendorEdit.jsp
<script language="JavaScript">
function checkSearch() {
$(document).ready(function() {
document.VendorEditListForm.direction.value = "Search";
$.ajax({
data: $('#frmAPVendorEdit').serialize(),
type: $('#frmAPVendorEdit').attr('method'),
url: $('#frmAPVendorEdit').attr('action'),
success: function(response) {
$('#testResult').html(response);
}
});
return false;
});
}
</script>
<formFieldErrors:formErrors form="VendorEditListForm"/>
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
<div class="modal-body">
<html:form scope="request" action="/showVendorEditList" method="post" styleId="frmAPVendorEdit">
//...these area contain form fields like input,check box,combo box,etc..
<div class="row">
<div class="btn-group btn-group-right">
Help
<html:submit value="Search" onclick="checkSearch();" property="submitButton" styleClass="btn btn-light" ></html:submit>
</div>
</div>
</html:form>
<div id="testResult"></div>
</div>
</div>
</div>
struts-config.xml
<struts-config>
<form-beans>
<form-bean name="VendorEditListForm" type="com.ui.struts.form.VendorEditListForm" /> ...
</form-beans>
<global-forwards>
<forward name="ShowVendorEditJsp" path="/showVendorEditList.do" /> ...
</global-forwards>
<action-mappings>
<action name="VendorEditListForm" path="/showVendorEditList" scope="session" type="com.ui.struts.action.ShowVendorList" unknown="false" validate="false">
<forward name="ShowVendorListJsp" path="/VendorEdit.jsp" redirect="false" />
</action> ...
</action-mappings>
</struts-config>
What can I do so that response get display on modal/pop-up instead of new browser tab? Where I need to do changes in my code?Suggest
I would try to remove the form submit button and replace it for a normal button. It should be enough because you are using the onclick.
<button type="button" class="btn btn-default" onclick="checkSearch();" >Search</button>
Node express app using EJS.
I'm creating a table - each cell has a button to trigger a modal. This code is inside a for loop:
<td>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Catalog Numbers</h4>
</div>
<!-- Body -->
<div class="modal-body">
<% for(var j = 0; j < user.notifications.length; j++) { %>
<%= user.notifications[j] %>
<% } %>
</div>
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="...">
<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products </button><br><br>
</div>
</td>
Every thing loads fine, the rendered html shows that each cell has it's own modal with it's own data but every button triggers myModal and they're all called myModal so every button loads the modal from the first cell.
Is there a way to dynamically create the div id like myModal1, myModal2, etc.?
I've tried
<div class="modal fade" id="<%=user.id%> ...>
Should I be doing this another way?
One such would be to use a single modal, but then vary the modal content based on the trigger button.
What happens is that an event is bound to the modal, which is triggered when the button opens the target modal. You can still hide the modal content inside the table, which the event will find and populate the modal body with.
Here is a simple example which you'll need to adapt to your code:
$(function() {
// when the modal is shown
$('#myModal').on('show.bs.modal', function(e) {
var $modal = $(this);
// find the trigger button
var $button = $(e.relatedTarget);
// find the hidden div next to trigger button
var $notifications = $button.siblings('div.hidden');
// transfer content to modal body
$modal.find('.modal-body').html($notifications.html());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Notifications</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>
<div class="hidden">
<ul>
<li>Product one</li>
<li>Product two</li>
<li>Product three</li>
</ul>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products</button>
</td>
</tr>
<tr>
<td>Maria</td>
<td>
<div class="hidden">
<ul>
<li>Product three</li>
<li>Product four</li>
<li>Product five</li>
</ul>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products</button>
</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Catalog Numbers</h4>
</div>
<!-- Body -->
<div class="modal-body"></div>
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have a Twitter Bootstrap list whose items have badged to show the amount of each item. I want to open a modal dialog to edit that amounts. But since it is going to be a long dynamic list, I can't write a function for each badge, but an only function which is able to determine who called the modal and:
Get the actual amount of the caller badge to be shown at the modal
Store the new amount when user changes the modal
HTML:
<div class="panel panel-primary">
<div class="panel-heading">Shopping cart</div>
<div class="panel-body">
<ul id="cart-list" class="list-group">
<li href="#" class="list-group-item" data-type="banana">Bananas
<div class="pull-right"> <span id="badge" class="badge">5</span>
</div>
</li>
<li href="#" class="list-group-item" data-type="pear">Pears
<div class="pull-right"> <span id="badge" class="badge">2</span>
</div>
</li>
</ul>
</div>
</div>
<!-- Input-spinner modal dialog -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="input-group spinner">
<input type="text" class="form-control" value="42">
<div class="input-group-btn-vertical">
<button class="btn btn-default"><i class="fa fa-caret-up"></i>
</button>
<button class="btn btn-default"><i class="fa fa-caret-down"></i>
</button>
</div>
</div> <span class="help-block">Set the number of items</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
JS:
// Create shopping cart list
var cart_list_element = document.getElementById("cart-list");
var cart_list = new Sortable(cart_list_element, {
group: {
name: "fruit_group",
pull: true,
put: true
},
});
// Configure click action over the badges
jQuery(".badge").click(function() {
console.log('Clicked badge, showing modal');
$("#myModal").modal('show');
});
// Input-spinner function
(function ($) {
$('.spinner .btn:first-of-type').on('click', function () {
$('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
});
$('.spinner .btn:last-of-type').on('click', function () {
$('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
});
})(jQuery);
This is a jsfiddle with my attempt. I don't know why the modal does not show up, it works localy. I suppose I made some mistake writting the example, o maybe jsfiddle just don't like modals. Anyway I think it shows what am I trying to achieve.
Any help?
something like this? http://jsfiddle.net/upjy4s5b/
using jquery and formatting your html structure with classes allows you to find different things in relation to other things. calling the bootstrap modal via jquery call instead of the inline call allows for easy transfer of the information you want.
$(document).ready(function() {
$('.edit').on('click', function() {
var name = $(this).closest('.item').find('.name').html();
var count = $(this).closest('.item').find('.count').html();
$('#myModal').find('.modal-body').find('.itemName').html(name);
$('#myModal').find('.modal-body').find('.itemCount').html(count);
$('#myModal').modal('show');
});
});
<ul class="list">
<li class="item">
<span class="name">Item 1</span>
<span class="count">Count 1</span>
Edit
</li>
<li class="item">
<span class="name">Item 2</span>
<span class="count">Count 2</span>
Edit
</li>
<li class="item">
<span class="name">Item 3</span>
<span class="count">Count 3</span>
Edit
</li>
</ul>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
Name: <span class="itemName"></span>
Count: <span class="itemCount"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->