I have a test page that when a user clicks on a form button, a bootstrap modal appears and displays a yes/no message to the user. It seems to be working OK.
However, I have been trying to change the code so that the bootstrap modal is displayed / triggered when the user checks a checkbox, but I am having trouble understanding the code I have.
I am hoping someone can show me how to adapt my code so the checked checkbox triggers the modal display.
Here is the script code that I have
<script>
// START: photograph remove modal code.
$('a[photograph-remove-confirm]').click(function(ev) {
var href = $(this).attr('href');
if (!$('#photographRemoveConfirmModal').length) {
$('body').append('<div id="photographRemoveConfirmModal" class="modal modal-confirm-small-width hide fade" role="dialog" aria-labelledby="miscConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true"><icon class="icon-remove"></icon></button><h4 class="modal-title" id="miscConfirmLabel">{% trans "Confirm" %} - {% trans "Remove" %} {% trans "Photograph" %}</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button> <a class="btn-u btn-u-blue" id="photographRemoveConfirmOK">{% trans "Remove" %} {% trans "Photograph" %}</a></div></div>');
}
$('#photographRemoveConfirmModal').find('.modal-body').text($(this).attr('photograph-remove-confirm'));
$('#photographRemoveConfirmOK').attr('href', href);
$('#photographRemoveConfirmModal').modal({show: true});
return false;
});
// FINISH: photograph remove modal code.
</script>
Here is the template button code that displays the modal when clicked:
{% trans "Test" %}
Here is the template checkbox code that I want to use to trigger the modal:
<input type="checkbox" id="id_remove_photograph" name="remove_photograph" class="checkbox_resize" onchange="remove_photograph_change();"> Remove Photograph</input>
Here is the onchange="remove_photograph_change" function displayed in the checkbox above.
function remove_photograph_change() {
if ($('#id_remove_photograph').is(':checked')) {
// just some code
}
}
I think that the following changes will fix the issue you have.
Change your checkbox code to this:
<input type="checkbox" id="id_remove_photograph" name="remove_photograph" class="checkbox_resize" onchange="remove_photograph_change();" photograph-remove-confirm="Your Photograph will be removed only after you save the form!"> Remove Photograph</input>
Change your modal code to this:
// START: photograph remove modal code.
$('[photograph-remove-confirm]').click(function(ev) {
if (!$('#photographRemoveConfirmModal').length) {
$('body').append('<div id="photographRemoveConfirmModal" class="modal modal-confirm-small-width hide fade" role="dialog" aria-labelledby="miscConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true"><icon class="icon-remove"></icon></button><h4 class="modal-title" id="miscConfirmLabel">{% trans "Confirm" %} - {% trans "Remove" %} {% trans "Photograph" %}</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button> <a class="btn-u btn-u-blue" id="photographRemoveConfirmOK">{% trans "Remove" %} {% trans "Photograph" %}</a></div></div>');
}
$('#photographRemoveConfirmModal').find('.modal-body').text($(this).attr('photograph-remove-confirm'));
$('#photographRemoveConfirmModal').modal({show: true});
return false;
});
// FINISH: photograph remove modal code.
Related
In my Flask APP i have a page with a link to delete:
Is inside a table each row have this id, here I am sending the ID (that normaly I use to delete):
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id="submits" onclick="send_to_modal('{{post.id}}')">
Borrar
</button>
Here is my javascript:
function send_to_modal(id){
document.getElementById("exampleModalLabel").innerHTML = id;
};
The modal:
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" onclick="modal_a_funccion()">SI</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">NO</button>
</div>
</div>
</div>
</div>
I don´t know how to send the ID to another function that is charged to delete the specified data:
This is my function that works correcty and delete the data giving the ID:
function modal_a_funccion(id){
console.log("Solicitando un report para: "+id);
//fetch('/report/' + olt_hostname).then(function(response) {
fetch('/task/report_celery/' + id).then(function(response) {
response.json().then(function(data) {
for (var x of data.ip) {
console.log("REPORT_fetch recibe (IP): " +x.ip_oob)
console.log("REPORT_fetch recibe (ESTADO): " +x.estado)
};
});
});
};
I would like to know how to to it.
What I intend to do is add a modal to ask the user for confirmation whether or not to delete. I can't find a way to pass the Id to the function that is in charge of doing the deletion. I would like to know how to do it. Thank you so much.
A possible solution (in a different way)
When user clicks on delete for a row, add a class e.g. to_delete. Then display the modal popup asking if user wants to go ahead with the delete or not.
If user says no, close the modal and remove the class again
If user says yes, call the delete function
For 3, you do something like
// Find the element that user has marked for delete
const element = document.querySelect(".to_delete")
const id = element.id;
For 2, you do something like
// Find the element that user has marked for delete and remove the delete mark
document.querySelect(".to_delete").classList.remove("to_delete")
I have a page where multiple images are present and I want to make the users able to crop any of them so I made a for loop to make a modal for each image and I looped the js function also.
this is my modal.
{% for image in Patient_detail.images.all %}
<div class="modal fade" id="modalCrop{{image.pk}}">
<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">Crop the photo</h4>
</div>
<div class="modal-body">
<img src="" id="image{{image.pk}}" style="max-width: 100%;">
</div>
<div class="modal-footer">
<div class="btn-group pull-left" role="group">
<button type="button" class="btn btn-default js-zoom-in">
<span class="glyphicon glyphicon-zoom-in"></span>
</button>
<button type="button" class="btn btn-default js-zoom-out">
<span class="glyphicon glyphicon-zoom-out"></span>
</button>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
<button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
</div>
</div>
</div>
</div>
{% endfor %}
and here's the function I used
{% for image in Patient_detail.images.all %}
$(function () {
/* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
$("#crop{{image.pk}}").click(function () {
var img_src = document.getElementById("img{{image.pk}}").src
$("#image{{image.pk}}").attr("src", img_src);
$("#modalCrop{{imahge.pk}}").modal("show");
}
});
/* SCRIPTS TO HANDLE THE CROPPER BOX */
var $image = $("#image{{image.pk}}");
var cropBoxData;
var canvasData;
$("#modalCrop{{image.pk}}").on("shown.bs.modal", function () {
$image.cropper({
viewMode: 1,
aspectRatio: 1/1,
minCropBoxWidth: 200,
minCropBoxHeight: 200,
ready: function () {
$image.cropper("setCanvasData", canvasData);
$image.cropper("setCropBoxData", cropBoxData);
}
});
}).on("hidden.bs.modal", function () {
cropBoxData = $image.cropper("getCropBoxData");
canvasData = $image.cropper("getCanvasData");
$image.cropper("destroy");
});
$(".js-zoom-in").click(function () {
$image.cropper("zoom", 0.1);
});
$(".js-zoom-out").click(function () {
$image.cropper("zoom", -0.1);
});
/* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
$(".js-crop-and-upload").click(function () {
var cropData = $image.cropper("getData");
$("#id_x{{image.pk}}").val(cropData["x"]);
$("#id_y{{image.pk}}").val(cropData["y"]);
$("#id_height{{image.pk}}").val(cropData["height"]);
$("#id_width{{image.pk}}").val(cropData["width"]);
$("#formUpload{{image.pk}}").submit();
});
});
{% endfor %}
but the problem is the modal never shows so I don't really get what's the problem ?
what should I do to make this work is the problem with the first function to show the modal is there easier way to do this all i want is the users to be able to specify a part of the image they want ?
The usecase of my app is to show a list of furnitures in the homepage. There is quick preview button in all those furnitures which when clicked should show its detail information. I tried to use ajax for that.
If i click on the furniture quick preview button, I get the clicked furniture slug from which I do the query and get that furniture detail information. Upto this, its working and also the modal is shown but could not show the content. How can i now show the content in the modal-body?
Here is what I have tried
def ajax_furniture_detail(request):
furniture_slug = request.GET.get('slug', None)
qs = Furniture.objects.get(slug=furniture_slug)
cart_obj, new_obj = Cart.objects.new_or_get(request)
context = {
'furniture': model_to_dict(qs),
'cart': model_to_dict(cart_obj),
'status': 'ok'
}
return JsonResponse(context)
{% block content %}
{% include 'furnitures/furnitures_home.html'%}
{% endblock content %}
{% block js %}
{{ block.super }}
<script>
$(document).ready(function(){
$('.quick-view-button').click(function() {
var _this = $(this);
var slug = _this.attr("data-slug");
$.ajax({
url: '/ajax/furniture',
type: "get",
data: {'slug': slug},
success: function(data) {
$('#product-quick-view-modal').modal('show');
$('#product-quick-view-modal').find('.modal-body').html(data.html);
},
error: function(err) {
console.log('error', err);
}
})
})
});
</script>
{% endblock js %}
furnitures_home.html
{% load static %}
<div class="furnitures" id="content">
{% for furniture in furnitures %}
{% if forloop.first %}<div class="row products">{% endif %}
<div class="col-md-4 col-sm-3">
<div class="product">
<div class="image" style="height: 205px;">
<div class="quick-view-button" data-slug={{ furniture.slug }}>
Quick view
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
<div class="modal fade" id="product-quick-view-modal" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<p>Hello</p>
<p>{{furniture.name}}</p>
</div>
</div>
</div>
<!--/.modal-dialog-->
</div>
One neat way to do this is to use a snippet html for product detail and send the product detail html snippet using render_to_string and just replace that html snippet in the modal.
rendered = render_to_string('product_detail_snippet.html', context,
context_instance=RequestContext(request))
return JsonResponse({'product_snippet': rendered})
And in the ajax success:
$('#product-quick-view-modal').find('.modal-body').html(data.product_snippet);
I have some JavaScript that displays a confirm dialog box to the user to confirm their action with passed in variables.
However, I must change the plain confirm dialog to a twitter-bootstrap modal.
I have tried several times, read a lot of SO posts and read the twitter bootstrap docs, but I cannot get it to work as my knowledge of js is not good enough. I am getting stuck on the display of the variables in the twitter bootstrap modal.
I am hoping that some one can help me out by giving me some pointers.
Here is my current js dialog code:
function checkboxUpdated(checkbox, count, label, id) {
if (checkbox.checked) {
$('#menu_entry_' + id).show();
} else {
if (count > 0) {
if (! confirm('{% trans "You have '+ count +' saved '+ label +'.\n\nIf you leave this option un-checked your saved '+ label +' will be deleted only after you update this page.\n\nAre you sure you want to delete your ' + count + ' saved ' + label +'?" %}')) {
checkbox.checked = true;
return;
}
}
$('#menu_entry_' + id).hide();
}
}
EDIT: ADDED CODE OF #menu_entry_ as requested in comment:
{% for id, menu_entry, selected, item_count in menu_entries %}
<li id="menu_entry_{{ id }}" {% if not selected %}style="display:none;"{% endif %}>
<a
{% if id == 4 %}
href="{% url summary_details %}"
{% elif id == 8 %}
href="{% url objective_details %}"
{% elif id == 12 %}
href="{% url leading_employment_details %}"
{% elif id == 16 %}
href="{% url desired_occupation_details %}"
....
{% elif id == 112 %}
href="/"
{% else %}
href="/"
{% endif %}
onclick="showProgressAnimation();">
Note that I need to transform the following js confirm code to twitter bootstrap modal code:
if (! confirm('{% trans "You have '+ count +' saved '+ label +'.\n\nIf you leave this option un-checked your saved '+ label +' will be deleted only after you update this page.\n\nAre you sure you want to delete your ' + count + ' saved ' + label +'?" %}')) {
You can write your own jQuery plugin. First, add the Bootsrap's modal component to your document.
<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="confirm-label" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<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="confirm-label"></h4>
</div>
<div class="modal-body">
<p class="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default dismiss" data-dismiss="modal"></button>
<button type="button" class="btn btn-primary confirm" data-dismiss="modal"></button>
</div>
</div>
</div>
</div>
Basically, the plugin should display the modal when invoked and trigger a confirm event if the confirmation button is pressed or dismiss otherwise.
$.fn.confirm = function (options) {
var settings = $.extend({}, $.fn.confirm.defaults, options);
return this.each(function () {
var element = this;
$('.modal-title', this).html(settings.title);
$('.message', this).html(settings.message);
$('.confirm', this).html(settings.confirm);
$('.dismiss', this).html(settings.dismiss);
$(this).on('click', '.confirm', function (event) {
$(element).data('confirm', true);
});
$(this).on('hide.bs.modal', function (event) {
if ($(this).data('confirm')) {
$(this).trigger('confirm', event);
$(this).removeData('confirm');
} else {
$(this).trigger('dismiss', event);
}
$(this).off('confirm dismiss');
});
$(this).modal('show');
});
};
An improvement we can make to the code above is to expose the default plugin settings.
$.fn.confirm.defaults = {
title: 'Modal title',
message: 'One fine body…',
confirm: 'OK',
dismiss: 'Cancel'
};
Usage example:
$('#confirm').confirm().on({
confirm: function () {
console.log('confirm');
},
dismiss: function () {
console.log('dismiss');
}
});
See live example here: http://jsfiddle.net/cdog/4q9t9pk5/.
If you don't want to write your own solution you can try existing projects like: https://github.com/nakupanda/bootstrap3-dialog. It looks like what you were looking for. Docs and demos available here: http://nakupanda.github.io/bootstrap3-dialog/.
DEMO
You want to change your function as shown below. Then there's modal markup to add to the page (see demo) and the event listeners shown below:
function checkboxUpdated(checkbox, count, label, id) {
if (checkbox.checked) {
$('#menu_entry_' + id).show();
} else {
if (count > 0) {
//save data to use later
$('#message_p').text( '<the-message-to-show-on-the-modal>' )
.data('elem', '#menu_entry_' + id)
.data('chkbox', checkbox);
//set modal title
$('#title_h4').text( '<Modal Title>' );
//show modal
$('#confirm_modal').modal('show');
}
}
}
$(document).ready(function() {
$('.button-yes').on('click',function() {
var checkbox = $('#message_p').data('chkbox');
checkbox.checked = true;
$('#confirm_modal').modal('hide');
});
$('#confirm_modal').on('hidden.bs.modal', function() {
var elem = $('#message_p').data('elem');
$(elem).hide();
});
});
NOTE: Let us know if you have any questions.
I am trying to pass an id to a twitter bootstrap model for a delete confirmation (basic CRUD page) and for the life of me I can't get this working. Looked at several examples still unable to get to work. I need to get the data-id to pass to the model and append the href link so that for example they confirm it takes them to the appropiate page (eg: delete.php?id=5) Any ideas would be greatly appreciated. Heres my code:
The link:
<a href="#msgDelete" data-toggle="modal" class="open-dialog btn btn-mini btn-danger" data-id="'.$row["id"].'">
The Model:
<div id="msgDelete" 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">Are You Sure?</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this product? This action can not be reversed. <br /><br /><em>Remember if you want to just hide the product from your store you can mark it as inactive.</em></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<a href="delete.php?id=" class="btn btn-danger" id="clink" >Delete Product</a>
</div>
The JavaScript:
<script type="text/javascript">
$(document).on("click", ".open-dialog", function () {
var productId = $(this).data('id');
console.log(productId);
//$(".modal-body #clink").href( 'delete.php?id=' + productId );
$("#clink").attr("href", "delete.php?idd=" + productId);
// As pointed out in comments,
// it is superfluous to have to manually call the modal.
// $('#addBookDialog').modal('show');
});
</script>
Look like your code has misprint.
$("#clink").attr("href", "delete.php?idd=" + productId);
-----^
Should be
$("#clink").attr("href", "delete.php?id=" + productId);
At least http://jsfiddle.net/egX3W/ shows that you href changes as you want.
in your code
<a href="#msgDelete" data-toggle="modal" class="open-dialog btn btn-mini btn-danger" data-id="'.$row["id"].'">
change it to
<a data-href="delete.php?id=<?php=productId?>" data-toggle="modal" class="open-dialog btn btn-mini btn-danger" data-id="'.$row["id"].'">
so, it will be automatically pass to your javascript... and you won't need to pass it in script...
change your script to this
$(document).on("click", ".open-dialog", function () {
var productId = $(this).data('id');
console.log(productId);
});