{% for key,value in config.items %}
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-id={{ key }} data-target="#myModal"><i class="glyphicon glyphicon-pencil" aria-hidden="true"></i></button>{{key}}
</td>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog" id= {{ forloop.counter }>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Version for <strong>{{key}}</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder={{key}} {{ forloop.counter }}>
{{ forloop.counter }}
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok-sign"></span> Accept</button>
<button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove-circle"></span> Reject</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
{% endfor %}
//I have a datatable where the rows are getting populated based on the loop values.
Now inside the datatable in one particular row I have a button upon clicking it I should display the values of the particular row.
But the problem I am facing is only the first value is getting displayed in the modal.
when I am trying to check through {{ forloop.counter }} The value is always 1 inside the modal.But if i check outside the modal it is incrementing.
Can anyone guide me
Related
Having some issues with my flask app. I am trying to use modal to delete a row from my database. Essentially I ran a for loop for each 'image' in my database, and I have tagged a unique ID to each modal. With the modal, I am able to delete any image I want, except for the very first image, with ID of 1.
HTML CODE:
{% if images %}
{% for image in images.items %}
<div class="content-section">
<div class="media align-items-center">
<img class="w-75 rounded" src="{{ url_for('static', filename='questionbank/' + image.img) }}">
<div class="text-center media-body">
<a class="btn btn-secondary btn-sm mt-1 mb-1" href="{{ url_for('homeworks.update_questionbank',questionbank_id=image.id) }}">Update Questionbank <i class="fa-solid fa-pen-to-square"></i></a>
<button type = "button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteQB{{image.id}}">Delete Questionbank <i class="fa-solid fa-trash-can"></i></button>
<h3><span class="badge badge-pill badge-info">Qn: {{ image.id }}</span></h3>
<h3><span class="badge badge-pill badge-success">Answer: {{ image.answer }}</span></h3>
</div>
</div>
</div>
<!--Modal-->
<div class="modal fade" id="deleteQB{{image.id}}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Delete Questionbank?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form action="{{ url_for('homeworks.delete_questionbank', questionbank_id=image.id) }}" method="POST">
<input class="btn btn-danger" type="submit" value="Delete">
</form>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
Routes.py code.
#homeworks.route("/questionbank/<int:questionbank_id>/delete", methods=['GET','POST'])
#login_required
def delete_questionbank(questionbank_id):
qb = Questionbank.query.get_or_404(questionbank_id)
delete_q = Questionbank.__table__.delete().where(Questionbank.id == questionbank_id)
db.session.execute(delete_q)
db.session.commit()
flash('Your questionbank has been deleted!', 'success')
return redirect(url_for('homeworks.questionbank', grade="ALL",tags="ALL",difficulty="ALL"))
I'm having difficulties with the modal using Bootstrap 5, my Delete button should show a message confirming the action by the user, but the Modal confirmation button doesn't work.
The action I want of which is to delete a record doesn't work.
Delete button
<!-- Form -->
<form action="{{ url("delete/$hxh->id") }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
<button type="button" id="myButton" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash"></i> Delete</button>
</form>
Modal and Script
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Delete Hunter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you really want delete <b>{{$hxh->name_hunter}}</b>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-xmark"></i> Cancel</button>
<button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
<!-- Script Modal -->
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myButton').trigger('focus')
})
</script>
It is because there is no action performing on delete button so you should make it form the delete button
<!-- Form -->
<button type="button" id="myButton" class="btn btn-danger" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash"></i> Delete</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Delete Hunter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you really want delete <b>{{$hxh->name_hunter}}</b>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-xmark"></i> Cancel</button>
<form action="{{ url("delete/$hxh->id") }}" method="POST">
{{ method_field('DELETE') }} {{ csrf_field() }}
<button type="submit" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-trash"></i> Delete</button>
</form>
<button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
</div>
</div>
I have a situation like display table with different columns, say the first column is id and the second column is name, the third column has a button which on click opens up a modal; the data in the table is coming from foreach loop.
I want to pass the id to the modal when button clicked.
<td>{{ $emp->req_id}} </td>
<td>{{ $emp->empid}} </td>
<td>{{ $emp->visit_title}} </td>
<td>{{ $emp->stays_nights}}</td>
<td>{{ $emp->apply_date }}</td>
<td>{{ $emp->travel_charges }}</td>
<td>{{ $emp->hotel_charges }}</td>
<td>{{ $emp->meal_charges }}</td>
<td>{{ $emp->approv_status}}</td>
#endforeach
</tr>
</tbody>
For this, you can use jquery
step(1) add this code in your blade file
<button type="button" data-toggle="modal" data-target-id="{{ $emp->id }}" data-target="#modelName">Button name </button>
step (2) define your jquery method
<script>
$(document).ready(function () {
$("#modelName").on("show.bs.modal", function (e) {
var id = $(e.relatedTarget).data('target-id');
$('#pass_id').val(id);
});
});
</script>
step (3) Make Modal
<div class="modal fade" id="modelName" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog data-dialog-centerd" 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 text-center" id="myModalLabel">Model header Name</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="#"
method="post"
enctype="multipart/form-data">
{{ csrf_field() }}
<div class="portlet-body form">
<div class="form-body">
<div class="form-group">
<input class="form-control" name="name" type="text"
id="pass_id">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
give an identifiable class say employee <tr class="employee"> and put the id of the entry in the same tag like this <tr class="employee" data-id="{{$emp->id}}">. Then when you would click on the row you could do something like this:
const employees = document.querySelectorAll('.employee');
employees.forEach( employee => {
employee.addEventListener(e => {
const employeeId = e.target.getAttribute('data-id');
// do what you need to do with the id
})
})
I suggest you to refactor this
<a title="Approve" data-toggle="modal" data-target="#modal-block-popout" class="btn btn-outline-success btn-sm" href="approve<?php $emp->id; ?>">Approve </a>
to
<button type="button" title="Approve" class="btn btn-outline-success btn-sm btn-toggle-modal-block-popout" data-id="<?php $emp->id; ?>" >Approve</button>
And add this Javascript
$(document).on('click', '.btn-toggle-modal-block-popout', function() {
var id = $(this).attr('data-id');
//DO WHAT EVER YOU NEED
$('#modal-block-popout').modal('show');
};
Of course for disapprove it will be the same.
The Answer To The Question (The One That Worked For Me)
Step#1 Add Button in the column Of the table:
<button type="button" onclick="myfunction( {{$a->id }})" > My Button </button>
Step#2 Add Script for The function that is calling from the button:
<script>
function myfunction(e){
var x = e;
$('#edit_req_id').val(req_id); //The id where to pass the value
$('#modal-block-popout').modal('show'); //The id of the modal to show
};
</script>
Step#3: Add Modal to which you want to pass the value to:
<div class="modal fade" id="modal-block-popout">
<div class="modal-content ">
<div class="block-options">
<button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close" name="btn"> <i class="fa fa-fw fa-times"></i></button>
</div>
<div class="block-content">
<input class="form-control form-control-alt " type="text" id="edit_req_id" name="empid">
</div
</div>
This is working for me you can try this :
<i class="mdi mdi-eyedropper px-2" type="button" data-bs-toggle="modal"
data-target-id="{{ $item->id }}" data-bs-target="#modelName"></i>
then :
Modal for Update
<div class="modal fade" id="modelName" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog data-dialog-centerd" 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 text-center" id="myModalLabel">Model header Name</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="#" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="portlet-body form">
<div class="form-body">
<div class="form-group">
<input class="form-control" name="name" type="text" id="pass_id">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
then
<script>
$(document).ready(function() {
$("#modelName").on("show.bs.modal", function(e) {
var id = $(e.relatedTarget).data('target-id');
$('#pass_id').val(id);
});
});
</script>
THis is my html code with the modal function
<div class="modal fade" id="listSensorModal" tabindex="-1" role="dialog" aria-labelledby="listSensorModal">
<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" id="deviceModal">Followers List</h4>
</div>
<div class="modal-body">
<br>
<div class="row form-group has-feedback" ng-repeat="sensors in listedSensors">
<div class="col-md-6">
{{sensors.id}}
</div>
<div class="col-md-3">
<!-- <input type="checkbox" ng-model="devices.deviceActive" bootstrap-switch class="make-switch" data-on="success" data-off="warning" ng-change="changeStatus(devices)"> -->
</div>
<!-- <div class="col-md-3">
<button type="button" class="btn btn-primary" ng-click="editSensors(sensors)"><i class="fa fa-edit"></i></button>
<button type="button" class="btn btn-primary" ng-click="removeSensor(sensors.id)"><i class="fa fa-trash"></i></button>
<button type="button" class="btn btn-primary" ng-show="!sensors.deviceId" ng-click="linkToDevice(sensors)"><i class="fa fa-plus"></i></button>
<button type="button" class="btn btn-primary" ng-show="sensors.deviceId" ng-click="UnlinkDevice(sensors)"><i class="fa fa-minus"></i></button>
</div> -->
</div>
<div class="row form-group has-feedback" ng-show="listedSensors.length==0">
<h3 align="center">No Sensors here</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary" ng-click="showAddSensorModal()">Add a New Sensor</button> -->
</div>
</div>
</div>
</div>
</div>
This is my Js code which shows the modal.Am getting data here but not the modal.
$scope.launchSensorModal = function(){
// $rootScope.showLoadingMessage('Please Wait');
API.followers().
then(function(responseData){
if(typeof responseData === 'object'){
// $rootScope.hideLoadingMessage('Please Wait');
$scope.listedSensors = responseData.data[0];
console.log("Sensor",responseData.data);
console.log("Sensor",responseData.data[0].full_name);
$('#listSensorModal').modal('show');
console.log("Sensor",responseData.data);
console.log("Sensor",responseData.data[0].full_name);
}
else{
console.log("Failed to get Listed Sensor. Please try again",responseData);
}
},function(responseData){
console.log("Failed to get Listed Sensor. Please try again",responseData);
})}
my console looks like this:
Sensor [Object]0: Objectfull_name: "Skater Gal"id: "2351640229"profile_picture: "https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xft1/t51.2885-19/11906329_960233084022564_1448528159_a.jpg"username: "_skaterg1rl"__proto__: Objectlength: 1__proto__: Array[0]
navbar.js:45 Sensor Skater Gal
navbar.js:47 Sensor [Object]
navbar.js:48 Sensor Skater Gal
Am not getting the data to the list in my modal.
can anyone help me??
I am creating spans in a jinja2 loop, when the user click on them, a modal should appear with a dynamic content . The dynamic item more specifically is the image of the map inside each modal :
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
To avoid one static modal that will repeat itself within the loop, I added a dynamic id to the modal dialog :
<div class="modal-dialog" id="{{id}}" >
But it seems that this doesn't work . Here is my code :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</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>
If your are in a loop, you must use different modal id, try :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal{{id}}">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal{{id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</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>
I think i figured this out.Don't keep id as a number but add some random text in front. e.g; id="#modal{{ id }}".
I was also caught in this problem and this solved it. I just made a check by console logging the element with id='{{ id }}' and it was showing error on the console but when i added some text like id='modal{{ id }}', it worked perfectly.
If Anyone is still looking for a solution then try the following code (Note: I have done it in PHP as you can see php block there in code.) this it will work for sure
<?php
$id=0;//define on the top of your function
foreach()
<button type="button" class="btn-link" data-toggle="modal" data-target="#myModal<?php echo $id;?>">Read More</button></div>
<div id="myModal<?php echo $id;?>" class="modal fade" role="dialog">
<div class="modal-dialog"> <!-- Modal content-->
<div class="modal-content">
//Popup content
</div>
</div>
</div>
$id=$id+;//increase id value by for next iteration?>
endforech;