hello I have a problem to show several images that are in my database when calling the modal, they just show up one of them from my gallery. I have found little information about it and what I have found seems very difficult to follow. Can you help me explain how it would be to show the images that are in my database through my modal?
The images are loading well in the database, the only problem is displaying all the images when I click to call my modal
HTML
{% for carro in carros %}
<tr>
<td>{{carro.fecha_registros}}</td>
{% if carro.fotosCarro %}
</td>
<a data-bs-toggle="modal" data-bs-target="#exampleModal{{ forloop.counter }}">
<img src="{{carro.fotosCarro.url}}" height="68">
</a>
</td>
{% endif %}
<td>{{carro.placas}}</td>
<td>{{carro.año}}</td>
<td>{{carro.modelo}}</td>
<td>{{carro.color}}</td>
<td>{{carro.cliente.nombre}}</td>
</tr>
{% endfor %}
modal
{% for carro in carros %}
<div class="modal fade" id="exampleModal{{ forloop.counter }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<!-- <h5 class="modal-title" id="exampleModalLabel"></h5> -->
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="table-responsive">
<div class="row">
<div class="col-lg-12">
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/fotos/{{carro.fotosCarro}}" height="68"></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- end row -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
JS
<script>
$('#exampleModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
views.py
def list_cars(request):
if request.method == 'POST':
fromdate=request.POST.get('fromdate')
todate = request.POST.get('todate')
searchresult = Carro.objects.filter(fecha_registros__range=(fromdate, todate))
return render(request,'carros/index.html',{'carros':searchresult})
else:
displaydata = Carro.objects.all()
return render(request, 'carros/index.html', {'carros': displaydata})
Related
I have a webpage (Flask powered) that loads lots of modals by using a loop:
{% for _, product in products_table.items() %}
<div class="modal fade" tabindex="-1" id="modal-{{product.CODIGO}}" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ product.PRODUTO }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table" id="product-detail">
<thead>
<tr>
<th scope="col">Loja</th>
<th scope="col">Estoque</th>
</tr>
</thead>
<tbody>
{% for store in toy_store_list %}
<tr id="tr-{{ store.alias }}">
<td>{{ store.name }}</td>
<td><span style='font-weight: bold' hx-trigger="load target:#modal-{{product.CODIGO}}" hx-get="{{ url_for('product.get_product_stock', store=store.alias, search_term=product.CODIGO) }}"
hx-swap="innerHTML" hx-target="this">
<div class="spinner-border spinner-border-sm htmx-indicator" role="status"></div>
</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endfor %}
I want HTMX to only make the GET request when ONE bootstrap modal is launched (clicked). Currently, when the page loads, it is making one request for each modal in page.
I tried using hx-trigger="load target:#modal-{{product.CODIGO}} without any good results.
I have this management page that lists my employees from my sqlite database, but when I click Add New Employees, nothing happens, and I don't get an error message as well...
I went over Bootstrap5 documentation to make sure I didn't misspell anything but still stuck...
{% extends 'base.html' %}
{% include 'header.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class "col md-12">
<div class="bg-light p-3">
<h2>Manage <b>Employees </b> <button type="button" class="btn btn-success float-end" data-bs-toggle="modal" data-bs-target="#mymodal">Add New Employees</button> </h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success alert-dismissable" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<table class="table table-hover table-striped">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
{% for row in employee %}
<tr>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.email}}</td>
<td>{{row.phone}}</td>
<td>
Edit
Delete
</td>
</tr>
<!-- Modal Add Employee-->
<!-- Modal Edit Employee-->
</div>
</div>
</div>
{% endblock %}
on the Manage Employees button you are setting data-bs-toggle and data-bs-target, which should be data-toggle and data-target. Besides that you have to specify your target in data-target, you are defining a modal that doesn't exist (#mymodal doesn't exist in your code, that's why nothing happens).
Here is a working sample with your code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
{% extends 'base.html' %}
{% include 'header.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="bg-light p-3">
<h2>Manage <b>Employees </b> <button type="button" class="btn btn-success float-end" data-toggle="modal" data-target="#mymodal">Add New Employees</button> </h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success alert-dismissable" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<table class="table table-hover table-striped">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
{% for row in employee %}
<tr>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.email}}</td>
<td>{{row.phone}}</td>
<td>
Edit
Delete
</td>
</tr>
<!-- Modal Add Employee-->
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add new Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Create your html form here ...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add New Employee</button>
</div>
</div>
</div>
</div>
<!-- Modal Edit Employee-->
<div class="modal fade" id="modaledit{{row.id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle2">Modal Edit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal Edit 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">Edit Employee</button>
</div>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
By the way, you have an error on your code after your class row, you have class "col md-12" which should be class="col-md-12". (missing the equals and hyphen sign).
More information about modals can be found here: https://getbootstrap.com/docs/4.0/components/modal/
Hope it helps! :)
I did solved it by placing the Add New Employee model code just below the Add New Employee button code...
I have a page that display the user products, a user can edit a product. If the the user click on the button edit he will be redirect to the edit page : http://127.0.0.1/symfony/web/app_dev.php/post/125
I would like to display the edit form in a modal so the user will not be redirect.
I have the following error:
An exception has been thrown during the rendering of a template ("The
identifier id is missing for a query of Xxx\XxxxxBundle\Entity\Post")
in src\Xxx\XxxxxBundle\Resources\views\Post\index.html.twig at line
404.
My link was like this:
<div class="action">
EDIT
</div>
I changed it to:
<div class="action">
EDIT
</div>
This is how I render my controller in my modal:
<div class="container">
<div class="row">
<div class="cd-user-modal">
<div class="cd-user-modal-container">
<div id="cd-signup">
<div class="col-sm-12 col-sm-offset-2 form-box">
<div class="form-bottom">
{{render(controller('FLYBookingsBundle:Post:edit')) }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is the edit form:
<form action="{{ path('post_update', { 'id': entity.id }) }}" method="post" {{ form_enctype(edit_form) }}>
{{ form_errors(edit_form) }}
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-lg form-group-icon-left">
<i class="fa fa-phone input-icon"></i>
<label>Phone number</label>
{{ form_widget(edit_form.telephone, {'type':'phone' ,'attr': {'id': 'phone','class': 'form-control phone',} }) }} {{ form_errors(edit_form.telephone) }}
</div>
</div>
<div class="col-md-7">
<div class="form-group form-group-lg form-group-icon-left">
<i class="fa fa-map-marker input-icon"></i>
<label>Address</label>
{{ form_widget(edit_form.address, { 'attr': {'class': 'form-control',} }) }} {{ form_errors(edit_form.address) }}
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-3">
{{ form(edit_form) }}
</div>
</div>
</form>
Controller of listing page:
public function indexAction($user)
{
$user = $this->container->get('security.token_storage')->getToken()->getUser();
$em = $this->getDoctrine()->getManager();
$findEntities = $em->getRepository('FLYBookingsBundle:Post')->findByBusId($user);
$entities = $this->get('knp_paginator')->paginate($findEntities, $this->get('request')->query->get('page', 1), 5
);
return array(
'entities' => $entities,
'user' => $user,
);
}
Edit controller:
/**
* Displays a form to edit an existing Post entity.
*
* #Route("/{id}/edit", name="post_edit")
* #Method("GET")
* #Template()
*/
public function editAction($id)
{
$em = $this->getDoctrine()->getManager();
$user = $this->getUser();
$this->getDoctrine()->getManager()->getRepository('FLYBookingsBundle:Post')->findBy(array('user' => $user));
$entity = $em->getRepository('FLYBookingsBundle:Post')->find($id);
if (!$entity) {
throw $this->createNotFoundException('Unable to find Post entity.');
}
$editForm = $this->createEditForm($entity);
return array(
'entity' => $entity,
'edit_form' => $editForm->createView(),
);
}
Quick browse I would guess the error gives a clue, you are rendering your edit controller that has a parameter /{id}/edit, which you are not passing it
{{ render(controller('FLYBookingsBundle:Post:edit', {}, { 'id': id, 'active': true } )) }}
check symfony2 render controller with get parameters
Ok i'm not to sure of your implementation so I'm just going to show you one I did with no code prettying or standardizing.
My modals
{% for meat in meats %}
<div class="modal fade" id="{{ meat[0] }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">
{% if waitingProduct[meat[0]]|length > 0 %}
{{ waitingProduct[meat[0]][0].itemdescription }}
{% else %}
No Product available, please contact stores
{% endif %}
</h4>
</div>
<form action="{{ path('formulation_change') }}" method="post">
<div class="modal-body">
{% for product in waitingProduct[meat[0]] %}
<input type="radio" name="pallet" value="{{ product.id }}" > {{ product.typenumber }}
<br />
{% endfor %}
<input type="hidden" name="recipe" value="{{ recipe }}" >
{% if waitingProduct[meat[0]]|length > 0 %}
<input type="hidden" name="itemCode" value="{{ waitingProduct[meat[0]][0].itemcode }}" >
{% endif %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Set Active</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
{% endfor %}
the button to toggle the separate modals
{% for meat in meats %}
<td>
<div class="btn btn-sm btn-success" data-toggle="modal" data-target="#{{ meat[0] }}" id="map">Set Active</div>
</td>
{% endfor %}
I use blueimp-gallery with the bootstrap plugin and all portrait pictures are 90° rotate on left. Is this a bug from blueimp or navigator?
Here is my code:
<!-- Gallery -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<!-- The modal dialog, which will be used to wrap the lightbox content -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="links" class="hidden">
{% for image in images %}
<a href="{{ image.image.url }}" title="{{ image.name }}" data-gallery>
<img src="{{ image.image.url }}" alt="{{ image.name }}">
</a>
{% endfor %}
</div>
And the javascript:
$("#diapBtn").on('click', function(e){
links = $('#links a');
blueimp.Gallery(links, {useBootstrapModal: false});
});
The blueimp-gallery documentation doesn't talk about flip or rotation of pictures.
I have worked with Django and Bootstrap, and I have a problem with onclick attribute. When I click on a button, it does not show me nothing. Here are the HTML:
{% extends 'base_profile.html' %}
{% block profile %}
<br />
<div id="content">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
<div class="fb-profile">
<img id='background_picture' align="left" class="fb-image-lg" src="https://s-media-cache-ak0.pinimg.com/originals/ad/38/bd/ad38bd348826054d3fd5e940950b1124.jpg" alt="Profile image example"/>
{% load staticfiles %}
<img id='profile_picture' align="left" class="fb-image-profile thumbnail" src="{% static 'media/{{path}}' %}" alt="media/{{path}}"/>
<!-- 200 x 200 -->
<div class="fb-profile-text">
{{ user.first_name }} {{ user.last_name }}
<div id="wrap">
<p>
<ul class="nav nav-tabs">
<li role="presentation" class="active">My profile</li>
<li role="presentation">Fallowers</li>
<li role="presentation">Fallowing</li>
<li role="presentation">Logout</li>
<li role="presentation">
<button id="compose" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Compose Twitt
</button> </li>
</ul>
</p>
<p>{{ user_profile.moto }}</p>
{% for twitt in all_twitters reversed %}
<hr>
<div class="media">
<div class="media-left media-middle">
<a href="#">
{% load staticfiles %}
<img class="media-object" src="{% static 'twittapp/images/logo_profile.png' %}" alt="Some picture">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ user.first_name }} {{ user.last_name }}</h4>
{{ twitt.content }}
</div>
</div>
<hr>
<span class="glyphicon glyphicon-trash"></span> Delete
<span class="glyphicon glyphicon-comment"></span> Comment
<span class="glyphicon glyphicon-eye-open"></span> See the comments
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Compose Twitt</h4>
</div>
<form action="/profile/compose/" method="post">{% csrf_token %}
<div class="modal-body">
<textarea style="resize:none" class="form-control" rows="3" cols="20" name="twitt_content" id="textarea"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save_twitt" type="submit" class="btn btn-primary">Twitt</button>
</div>
<p id="left_chars">sdks</p>
</form>
</div>
</div>
</div>
{% endblock profile %}
Here is a function located in the external js file:
function deleteTwitt(){
$.post('/delete', {twitt_id: '{{ twitt.id }}'});
};
First make sure you have embedded external js file using script tag in current page and if it is not then please embed it and check. If file is embedded then just change following in your HTML code
<span class="glyphicon glyphicon-trash"></span> Delete
Here I just removed "javascript:void(0)" from href of anchor tag. Still if it's does not work then let me know.