I downloaded a web admin template with has a lot of HTML, JavaScript and CSS.
I am doing a JSP application and make a for statement, where the "delete" button opens a Modal which I copy pasted from the template
<% for(Group g:(List<Group>)request.getAttribute("data")){ %>
<tr>
<td>
<%=g.getName()%>
</td>
<td> <i class="fa fa-pencil"></i>
<div class="btn btn-xs btn-danger btn-flat" data-toggle="modal" data-target="sd"><i class="fa fa-times"></i>
</div>
</td>
<div id="uidemo-modals-alerts-danger" class="modal modal-alert modal-danger fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="fa fa-times-circle"></i>
</div>
<div class="modal-title">Are you sure?</div>
<div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">No</button>
</div>
</div>
<!-- / .modal-content -->
</div>
<!-- / .modal-dialog -->
</div>
<!-- / .modal -->
</tr>
<%} %>
The thing is that when the "Yes" of the modal is clicked it always shows id=1, because the div is repeated and the "Delete" button always go to the first div appearence.
How can I make the modal get the id without touching the CSS and JavaScript because this modal id has much javascript and css code related, and i dont want to change it because of feature template updates, and also i dont know how many divs im going to print
Related
Hello I hope you can help me with the problem I'm having right now.
I'm trying to execute a code in JS using modals when pressing a button, the thing is, the HTML code who has the button generates itself
Main View page
<tr class="odd">
<td class=" sorting_1">CU</td>
<td class="">Cliente Unico</td><td class="">101</td>
<td class="">
<span id="edit_CU" class="ui-icon ui-icon-pencil" data-toggle="modal" data-target="#modal_edit"></span>
<span id="delete_CU" class="ui-icon ui-icon-trash" data-toggle="modal" data-target="#modal_delete"></span>
</td>
</tr>
In the id="edit_CU" the CU changes when the HTML code is generated, so is not always the same thats also with the id="delete_CU"
When you click in the span icon will trigger the modal and show this:
View page when you click Edit or Delete button
<div id="modal_delete" class="modal fade">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete vertical</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_delete">Yes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="<?php echo base_url('assets/js/helper/func_verticales.js');?>"></script>
In this view page ask the user if they want to delete their information when they click "Yes" it should pop up a message... but it does nothing, someone can give me a hand?
This is the JavaScript
$("#modal_delete").on('show.bs.modal', function(event){
alert("hello");
});
});
if i understand you correctly than you've to delegate the click event
try something like this:
Your button needs some adaption - because i don't see a reason for data-toggle and data-target
<button type="button" class="btn btn-primary">Yes</button>
After that - in your JS Code:
$("button.btn-primary").on("click","#modal_delete",function()
{
alert("hello");
});
Run that alert off your button, not the modal
<button id="modal_delete">Yes</button>
$("#modal_delete").on('click', function(event){
alert("hello");
});
});
or use a confirm box
$('#modal_delete').click(function(ev){
ev.preventDefault();
var r = confirm("Are you sure?");
if (r == true) {
//run delete code here
}
});
I have a Bootstrap modal popup form which is opened as per button click in AngularJS, I am wondering how is it still showing even if a button is disabled.
please take a look button code below:
<a class="btn btn-sm btn-info" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="!ItemName || ItemDescription">
Submit
</a>
I have below model popup code:
<div id="modal-form-submit" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger"> DEMO MODEL FORM </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label" for="toitems">To:</label>
<div class="tags full-width">
<span class="tag" ng-repeat="tag in tags">{{ tag.Description }}</span>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="modal-footer">
<button class="btn btn-sm" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Cancel
</button>
<button class="btn btn-sm btn-primary " ng-disabled="!ItemCode || !ItemDescription"
ng-click="SaveEntireFormData()" type="button">
<i class="ace-icon fa fa-check"></i>
Confirm
</button>
</div>
</div>
</div>
</div>
I don't want to use the jquery js, I really want to resolve this using angular js.
Just add disabled to your anchor tag class
<a class="btn btn-sm btn-info disabled" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="ItemName || ItemDescription">
The disabled attribute doesn't work for anchor tags. They are built for tags like button, fieldset etc.
Consider adding this CSS to fix this issue:
a[disabled] {
pointer-events: none;
}
I did this and its working perfect.
<a class="btn btn-sm btn-info" ng-class="{'disabled':(!ItemName || !ItemDescription)}" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false">
try this
ng-disabled="(!ItemName) || (ItemDescription) "
if possible plz tell what is ItemName and ItemDescription.
remember that in angularjs if you want to disable any field you have to do this
ng-disabled = 'true' ;
Hello I have a list of images. User can click on any image and it will open a bootstrap modal. In this boostrap modal, I need the image, that the user clicked on, to appear.
Please, view my comments in the below code for more clarity.
Any help would greatly be appreciated. Thank you.
<center>
<div id="items" class="transitions-enabled">
<% #images.each do |image| %>
<div class="box panel panel-default">
<div class="square_item_image">
#HERE IS THE IMAGE I WANT TO APPEAR IN THE BOOSTRAP MODAL
<%= image_tag(image["images"]["low_resolution"]["url"]) %>
</div>
<div class="item_info">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Create Outfit</button>
</div>
</div>
<% end %>
</div>
</center>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Create</h4>
</div>
<div class="modal-body">
#I WOULD LIKE THE IMAGE TO APPEAR HERE
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
by using javascript you can do it
JAVASCRIPT
$(document).on("click", ".open-AddImgDialog", function () {
var imgsrc = $(this).data('id');
$('#my_image').attr('src',imgsrc););
});
HTML code
<div class="item_info">
<button type="button" class="btn btn-info btn-lg open-AddImgDialog" data-id="img/img.jpg" data-toggle="modal" data-target="#myModal">Create Outfit</button>
</div>
MODAL Pop
<div class="modal-body">
<img id="my_image" />
</div>
Here data-id="img/img.jpg" is your image path and add class name open-AddImgDialog in button.
Is there one too many ";" in
$('#my_image').attr('src',imgsrc););
Should be:
$('#my_image').attr('src',imgsrc));
I have partial to enable a modal(pop up window) in my rails 4 app with a drop down list to select from it. The problem I am facing is that if I click on the drop down list and select an option it automatically closes, but I need the value to be remain there, still I click on the Close button or Save button.
My Modal Code is given bellow: _doctorselect.html.erb
<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>Add Referral to Doctors </h4>
</div>
<div class="modal-body">
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Please Assign Referral <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- <li>Please Assign Referral</a></li> -->
<% #practices.each do |practice| %>
<!-- <li><b>Dr.<%= practice.firstname %></b></li> -->
<li><b>Dr.<%= practice.firstname %></b></li>
<% end %>
</ul>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Submit</button>
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
And the Js file is: doctorlist.js.erb
$("#modal-window").html("<%= escape_javascript(render :partial => 'doctorselect') %>");
$("#modal-window").modal()
Your problem is probably associated with "clicking outside the modal window".
See Bootstrap documentation for modal:
backdrop Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
So you should open your modal like this:
$("#modal-window").modal({ backdrop: 'static' })
or specify it in data-backdrop attribute of a button/link which launches this dialog. Now your modal should not close by clicking outside of the window.
Finally the bellow code with some modifications in my view code and .js file worked for me:
_doctorselect.html.erb
<%= form_tag (assignreffaral_practices_path), id: "myform", method: 'get', remote: true do |f| %>
<div class="modal-dialog ">
<div class="modal-content modal-md">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class=" glyphicon glyphicon-pencil"> Add/Edit/Remove Referral to: Dr.<%= #Practitioner_name %></h4>
</div>
<div class="modal-body">
<div class="btn-group">
<table class="table ld-margin-top-20">
<thead>
<tr>
<td>
<!-- Single button -->
<%= collection_select(:customer, :id, #practices, :id, :full_name, {:prompt => 'Remove Referral' }, :class =>"form-control") %>
</td>
<td>
<button type="submit" onclick="window.location = '/practices'" class="btn btn-success">Submit</button>
</td>
<td>
<button class="btn btn-danger" id="doctor" data-dismiss="modal" aria-hidden="true">Cancel</button>
</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<% end %>
doctorselect.js.erb
$("#modal-window").html("<%= escape_javascript(render :partial => 'doctorselect') %>");
$("#modal-window").modal()
I have a <li> which when clicking on it, I wish to open a modal before perfoming a certain action. Is this possible? As all the modal examples I found were all concerning button but I do not want to change it.
This is the code I'm using (and what I've tried so far)
Modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Are you sure you want to Add an Iteration?
</div>
<div class="modal-footer">
#using (Html.BeginForm("AddNewIteration", "Index"))
{
#Html.AntiForgeryToken()
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-warning">Add Iteration</button>
}
</div>
</div>
<li> in concern
<!-- Start of Add New Iteration -->
<li>
<a href="#myModal" data-toggle="#myModal">
<span class="ca-icon"><i class="fa fa-plus-square fa-3x"></i></span>
<div class="ca-content">
<h2 class="ca-main"> Add new Iteration</h2>
<h3 class="ca-sub"> Add New Iteration to the Project!</h3>
</div> <!-- End of ca-content-->
</a>
</li> <!-- Add New Iteration -->
Thanks in advance
No Matter, I found what I was doing wrong.
Was declaring the tag wrong Had to change it to:
<a href="#" data-toggle="modal" data-target="#myModal">