I use smarty class and bootstrap, and have this html tag:
`<a class="close" href="#" data-confirm="Are you sure you want to delete {$item.name} item? " ></a`>
Where {$item.name} is item name,from database.
For modal window,using this Js code:
<script>
$(document).ready(function() {
$('a[data-confirm]').click(function(ev) {
var href = $(this).attr('href');
var cat = document.getElementById("catname").value;
if (!$('#dataConfirmModal').length) {
$('body').append('<div id="dataConfirmModal" class="modal fade" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><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 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><b></b><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-danger" id="dataConfirmOK">Delete</a></div></div></div></div>');
}
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmOK').attr('href', href);
$('#dataConfirmModal').modal({show:true});
return false;
});
});
</script>
All is fine,modal working ,text that I add in data-confirm in tag shows and I get message like this :
Are you sure you want to delete Car item?
and,I try to be like this:
Are you sure you want to delete Car item?
I try with tags in data-confirmation,don't work,also try to made vairable var and show directly in js code,no result..
Thanks,
P
Why don't you use a span and replace the content inside the tag by this span.
Something like this:
<span id="delConfirmLabel" href=# > Are you sure you want to delete
<b> {$item.name} </b> item?</span>
now, replace the attribute "data-confirm" with delConfirmLabel's content.
Related
I have read the Bootsrap documentation and even tested their "Varying modal content based on trigger button" example, but that doesn't work.
Any idea on how can I pass a data to a modal so that I will not create multiple modals in my page.
Here is the button that triggers the modal:
<a class="btn btn-danger" data-toggle="modal" data-target="#deleteSubject" data-whatever="<?= $subj_id ?>" role="button" title="Delete Subject"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
And here is the modal:
<div class="modal fade" id="deleteSubject" tabindex="-1" role="dialog" aria-labelledby="deleteSubjectLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="#" method="post">
<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="deleteSubjectLabel">Delete Subject</h4>
</div>
<div class="modal-body">
<h4>Do you want to delete this subject?</h4>
<input type="text" id="subjid" name="subjid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Delete</button>
</div>
</form>
</div>
</div>
</div>
And here is the javascript:
<script>
$('#deleteSubject').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var subjId = button.data('whatever')
var modal = $(this)
modal.find('.modal-body input').val(subjId)
})
</script>
I also tried the show.bs.modal but nothing happens. I tried to create a separate script to test if the $subj_id is being read through the use of alert but it works.
Any ideas?
you need to wrap the code in a document ready and since your input is named and has an id - target it directly and then you wont need the find either:
<script>
$(document).ready(function(){
$('#deleteSubject').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var subjId = button.data('whatever');
$('#subjid').val(subjId);
})
})
</script>
I think you forgot the $ on your modal instance , it should be $modal
<script>
$('#deleteSubject').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var subjId = button.data('whatever')
var $modal = $(this)
$modal.find('.modal-body input').val(subjId)
})
</script>
Simply set the value of input subjid using JavaScript / jQuery during the on click event.
$('#subjid').val(*value*);
Here is my code:
<div class="superBlock" id="blabla">
<a class="watch"><img src="images/blabla.png"/></a>
</br>
<div class="btn-group-xs" role="group">
<a type="button" class="btn btn-info info" data-toggle="modal" data-target="#myModal">Information</a>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-footer">
<a type="button" class="btn btn-success watch" data-dismiss="modal">Watch</a>
</div>
</div>
</div>
</div>
$('.info').click(function() {
var $watchID = $(this).parents('.superBlock').attr('id');
});
$('.watch').click(function() {
if($(this).parents('.superBlock').attr('id') != "") {
var $watchID = $(this).parents('.superBlock').attr('id');
}
alert($watchID);
});
What I'd like to do is to set the $watchID to the .superBlock's ID whether I click on the .watch button or on the .info button.
And I get $watchID is "undefined" when I click on the modal watch button after clicking on the info button.
And I'd like the $watchID to keep on being set to the .superBlock's ID if the $(this).parents('.superBlock').attr('id') is undefined. So the $watchID not to change to the undefined $(this).parents('.superBlock').attr('id').
What should I do? Is this only about syntax? If so, how should I change this?
This HTML divs are repeating with different IDs, that's why I can't just set the ID to "blabla".
To tell if a selector matches anything, check the length of the jQuery object.
var superblock = $(this).closest(".superBlock");
if (superblock.length > 0) {
$watchID = superblock.attr('id');
}
Also, if you want the $watchID variable to persist between calls, it should be declared outside the functions. Your variable is local to each function, so it gets discarded when the function returns.
And since you just want the closest parent with that class, use .closest() rather than .parents(), which searches the entire DOM hierarchy for multiple matches.
I have a link like this:
<a class="glyphicon glyphicon-remove glyphicon-color-red btn-delete" data-toggle="modal" data-target="#myModal" user-id="56f52ea551d72027711157d6"></a>
And with jquery, on click I take parameter user-id and I change action URL, this code isn't working cause when I click the delete button modal popup appears, but if I do inspect element I see that action is empty?
$('.btn-delete').click(function () {
var user_id = $(this).attr('user-id');
$('#modal-form').attr('action', "{{ url_for('admin.delete_user', id=" +user_id+" ) }}");
});
The method that I use in route admin.delete_user in python is:
def delete_user(self, id):
mongo.db.users.remove({'_id': ObjectId(id)})
return redirect(url_for('admin.users'))
And the modal popup:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></h4>
</div>
<form id="modal-form" action=" " method="POST">
<div class="modal-body">
<p>Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm btn-style" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-default btn-sm btn-filter-apply btn-style" >Yes</button>
</div>
</form>
</div>
</div>
I don't understand why in jquery the action URL is not added?
Make sure that the DOM has loaded before you make any changes, for which you can use ready():
$(document).ready(function(){ /* your code */ });
I would change your url_for function to to produce part of the url you need, then place it in the action attr. Then, use jquery to append the user_id to the string. Make sure you modify whatever is grabbing the url to parse a parameter. Here's an example:
url_for returns something like: http://www.example.com?delete_user=
Then your form action:
<form id="modal-form" action="{{url_for(delete_user)}}" method="POST">
And your jquery would then:
$('.btn-delete').click(function () {
var user_id = $(this).attr('user-id');
var action = $('#modal-form').attr('action');
$('#modal-form').attr('action', action + user_id);
});
Finally, whatever is parsing your form would look for the url parameter delete_user= and use the user_id you appended to it.
Im trying to make a item editor.
For example:
I have a product and I want to remove the Serial number of it.(It's all stored in a database)
So I press the minus icon I 'borrowed' thats located next to the product's name:
<i class="icon-minus"></i>
This opens a modal named 'RemoveSerialNumberModal' with a 'Are you sure' button.
This works all fine, but there are multiple products underneath each other and how can I tell the modal on what product it needs to remove the serial number? (All product have there own pair of icons).
The modal it's code is in the same file as the product list. But not in the same foreach loop.
I prefer to not use JS, but if there is no other way. It has to do.
---------------EDIT---------------
The products do have there own id ofcourse.
---------------EDIT---------------
Here is the modal:
<!-- Modal -->
<div id="RemoveSerialNumberModal" class="modal hide fade">
<div class="modal-header">
×
<h3>Update serienummers</h3>
</div>
<div class="modal-body">
<p>Selecteer het serienummer dat je wilt verwijderen.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Sluiten</button>
<button id="RemoveSerialNumber" class="btn btn-danger eerste" type="submit">Verwijderen</button>
</div>
</div>
Use data-id attribute.
I guess in your modal you have the below html :
<input type="text" name="yourid" id="yourid" value=""/>
//triggered when modal is about to be shown
$('#RemoveSerialNumberModal').on('show.bs.modal', function(e) {
//get data-id attribute of the clicked element
var yourid = $(e.relatedTarget).data('id');
//populate the textbox
$(e.currentTarget).find('input[name="yourid"]').val(yourid);
});
Use data attribute and class names to toogle while clicking:
<a class="click" href="#RemoveSerialNumberModal" data="2121" data-toggle="modal"><i class="icon-minus"></i></a>
$('.click').click(function(){
$('.click').removeClass('clicked');
$(this).addClass('clicked');
});
$('#RemoveSerialNumberModal').on('show.bs.modal', function(e) { // triggered when showing the modal
var data = $('.clicked').attr('data');
});
Im trying to get the value of the data-id which contains and id in my database. I need to get the admin_id and place it into a twitter bootstrap modal. How am I going to get that value using java script?
<a data-toggle="modal" data-id="<?=$row['ADMIN_ID'];?>" href="#view_contact" class="btn btn-info btn-xs view-admin">View</a>
here is my modal
<div class="modal fade" id="view_contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Admin modal!!</h4>
</div>
<div class="modal-body">
Admin Id:<p id="showid"></p>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
here is my java script
<script type="text/javascript">
$(document).on("click", ".view-admin", function () {
var adminid = $(this).data('id');
$(".modal-body #showid").val( adminid );
$('#view_contact').modal('show');
});
</script>
its not showing in my modal. They are all in the same page. How do I do this? Kinda new at this.
Problem is, you are trying to assign the value to a p tag. p tag does not have value property. Use text() or html()
$(document).on("click", ".view-admin", function() {
var adminid = $(this).data('id');
$(".modal-body #showid").text(adminid);
$('#view_contact').modal('show');
});
You can just replace
$(".modal-body #showid").val( adminid );
with
$("#showid").text( adminid );
You don't need to reference class name .modal-body for the id #showid as there must be only one id name in a page according to W3C Validation. And referencing with the id is the fastest way to access any html elements.