Develop Reference

Flask add modal to ask before deleting. How to get working?

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")

How to toogle different modal with different content and change the button as well?

I wanna toggle different models and calculate the results in form individually.
I try to avoid paste too many modal codes and found the sample HERE, however, it use the same ID, so I get stuck!
If you click on
Button A it shows Modal A with Calculate A.
Button B it shows modal B with Calculate B.
Button N it shows modal N with Calculate N.
Is there a way to change the button to another one? or any help?
Much appreciate!
$('#exampleModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('Form click on ' + recipient)
modal.find('.modal-body input').val(recipient)
$("#buttonA").click(function () {
var a = $("#amout").val();
alert("Results: " + a);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="button A">Run button A</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="button B">Run button B</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="button N">Run button ...N</button>
<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">Form 1-N</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
Num: <input id="amout" type="number">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="buttonA">calculate</button>
</div>
</div>
</div>
</div>

The Fastest way is set id for each button you want change and Change innerText of that in your Function.
Html Tag
<button id="AcceptBTN" type="button" class="btn btn-primary">Send message</button>
^
|
Here
jQuery
$('#exampleModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
// Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
$('#AcceptBTN')[0].innerText = recipient; <-----------------Here
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
GoodLuck

Modify data in a modal window when loading it

I have a presentation with user notes. The button processing works for me, a modal window appears. Now I need to set its title and body when downloading. I get the body from the parent class of the button, no problem with that.
Here is my code:
const buttons = Array.from(document.querySelectorAll('.card .btn-info'));
function heangleClick() {
const parent = this.parentNode;
console.log($(this).parent().find('.fullBody').html());
$('#exampleModalCenter').modal('show');
$('#exampleModalLongTitle').val('123'); // not work
};
buttons.forEach((button) => {
button.addEventListener('click', heangleClick);
});
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="~/js/showTittleTodo.js"></script>
How can i set values ​​in js file exampleModalLongTitle and modalBody

You try below which is not work.
$('#exampleModalLongTitle').val('123');// not work
Please replace below instead of that
$('#exampleModalLongTitle').text('123');

Try to set html or text instead val.
$('#exampleModalLongTitle').html('123');

try with this code:
$('#exampleModalCenter').modal('show');
$('#exampleModalCenter').on('shown.bs.modal', function() {
$('#exampleModalLongTitle').val('123');
})

Update your js as following, using shown.bs.modal event on modal element you can attach a callback which fires when the modal window is completely shown
const buttons = Array.from(document.querySelectorAll('.card .btn-info'));
function heangleClick() {
const parent = this.parentNode;
console.log($(this).parent().find('.fullBody').html());
$('#exampleModalCenter').one('shown.bs.modal', function() {
$('#exampleModalLongTitle').val('123');
})
$('#exampleModalCenter').modal('show');
};
buttons.forEach((button) => {
button.addEventListener('click', heangleClick);
});

Delete button show only user which book event and Admin in fullcalendar.js

I'm making event booking system using fullCalendar.js with the backhand of codeigniter, first there is 2 role user and Admin, User can book the event and delete the event but i want to show delete button only Admin and user which book the event. So can anyone please tell me how this can be possible.The delete button in modal box and show on eventClick in Calendar.My Html and javascript are
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Event Details</h4>
</div>
</div>
<input type="hidden" id="eventID"/>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-danger" id="deleteButton">Delete</button>
</div>
</div>
//----------------------Javascript-------------------------------
$('#deleteButton').on('click', function(){
// delete button
doDelete();
});
function doDelete(){
$("#calendarModal").modal('hide');
var eventID = $('#eventID').val();
var baseUrl = document.location.origin;
$.ajax({
url: baseUrl+'/mrbs/api/post_api',//
data: 'action=delete&id='+eventID,
type: "POST",
});
$('#calendar').fullCalendar('refetchEvents');
}
Thanks in advance ........:)

You should probably control display of the delete button on the server-side, not in Javascript on the client. That means using Codeigniter when rendering the modal, so for example:
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<?php if ( ... test if user is admin ... ) { ?>
<button type="submit" class="btn btn-danger" id="deleteButton">Delete</button>
<?php } ?>
</div>
You should also confirm in your controller method (/mrbs/api/post_api) that the user is an admin before actually doing the delete.
UPDATE
If you want to display only events created by the current user, you should handle that on your server-side event source. You have not posted your Fullcalendar code, but you must have something like:
$('#calendar').fullCalendar({
// ... code
events: "some/path/to/server-side-json",
});
In your some/path/to/server-side-json controller method, check the user id of the user making this query, and only return events created by that user.

Use modal in place of 'show' views

I am trying to use modals in place of the traditional 'show' views in Ruby. When a user clicks on a item in the index view, a modal popup shows instead of redirecting the user to a new 'show' page.
How can I accomplish this?
Let's assume that the controller looks something like this:
#list = Items.all
I want the modal to show the characteristics of each item on the #list object. For instance, one modal would show #list[0] and another would be #list[1]. How can I pass the index values to the modal?

An approach I might take would be, assuming that on your index there is a dropdown and a submit button ...
jQuery
$('#submit').click(function(){
$.ajax({
url: "items/get_item",
type: "GET",
data: { item: $('#select').val() },
success: function (data) {
//Populate modal in here with item details
$('#myModal modal-body').html(data)
}
});
});
Item Controller
def get_item
return :json => Item.where({:name => params[:item]}).to_json
end
View
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body"></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>
</div>
</div>

You need to render a javascript template from the show action
def show
#list = Items.all
respond_to do |format|
format.js { render 'your_js_template' }
end
end
Then in your template you can use the #list instance variable to create the jQuery for the modal