error in modals

Using Django Templates & Frontend
1

Hello,
I am creating modals for the form, but I get the error ','expected on the line

<button type="button" class="btn btn-primary" onclick="abrir_modal_edicion('{% url 'editarrec' reclamaciones.id %}');"></button>

I have the following jquery code:

function abrir_modal_edicion(url) {
    $('#edicion').load(url, function () {
        $(this).modal('show');
    });
}

And also the button described above so that when clicked it overlays a form, the issue is that since it gives me the error ‘,’ expected it doesn’t work for me.

I don’t know if it’s a jquery or html syntax problem
Can you help me?
Thank you

2

What is the specific error you are getting? Is this an error in your JavaScript in the browser or in the rendering process on the server?
If on the server, please post the complete error message.

3

I have the following:
Claims.html where I list my records.

{% extends "reclamaciones/base.html" %}

{% block contenido %}  

<div class="card">
    <div class="card-header">
        Lista Reclamaciones
    </div>
    <div class="card-body">
        <a name="" id="" class="btn btn-success" href="{% url 'crear_reclamacion' %}" role="button">Nueva Reclamacion</a>
    
        <div class="table-responsive">
        </br>
            <table class="table table-primary">
                <thead>
                    <tr>
                        <th scope="col">Codigo</th>
                        <th scope="col">Motivo</th>
                        <th scope="col">Fecha Creacion</th>
                        <th scope="col">Debe aprobar</th>
                        <th scope="col">Origen</th>
                        <th scope="col">Estado</th>
                        <th scope="col">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for reclamaciones in Reclamaciones %}
                    <tr class="">
                        <td>{{ reclamaciones.num_reclamacion }}</td>
                        <td>{{ reclamaciones.motivo }}</td>
                        <td>{{ reclamaciones.fecha_reclamacion }}</td>
                        <td>{{ reclamaciones.aprueba }}</td>
                        <td>{{ reclamaciones.delegacion_departamento }}</td>
                        <td>{{ reclamaciones.estado }}</td>
                        <td>
                            <!-- <a name="" id="" class="btn btn-info" href="{% url 'editarrec' reclamaciones.id %}" role="button">Editar</a> -->
                            <button class="btn btn-warning" onclick​="abrir_modal_edicion('{% url 'editarrec' reclamaciones.id %}')">Editar</button>
                            <!-- <button type="button" class="btn btn-warning" onclick="abrir_modal_edicion('{% url 'editarrec' reclamaciones.id %}');"></button> -->
                            <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#edicion" onclick="abrir_modal_edicion('{% url 'editarrec' reclamaciones.id %}');"></button> -->
                            <a name="" id="" class="btn btn-danger" href="{% url 'eliminar_reclamacion' reclamaciones.id %}" role="button">Borrar</a>
                        </td>
                    </tr>

                    {% endfor %}
                </tbody>
            </table>
        </div>


    </div>
    <div class="card-footer text-muted">
        
    </div>
</div>

<div id="idicion" class="modal fade" role="dialog"></div>

{% endblock %}

{% block extrajs %}


<script type="text/javascript">
    var $ = jQuery.noConflict();
    function abrir_modal_edicion(url) {
        $('#edicion').load(url, function () {
            $(this).modal('show');
        });
    }
</script>


{% endblock extrajs %}

I have the jquery where I refer to the abrir_modal_edicion function which in turn I use on the button with onclick

<button class="btn btn-warning" onclick​="abrir_modal_edicion('{% url 'editarrec' reclamaciones.id %}')">Editar</button>

So far no problem. I also have in the view.py

class ActualizarReclam(UpdateView):
    model = Rec
    form_class = RecForm
    template_name = 'reclamaciones/reclamacion.html'
    success_url = reverse_lazy('Reclamaciones')

This class goes to reclamacion.html

<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">Edición de Reclamacion</h2>
            <button class="close" type="button" data-dismiss = "modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
            <div class="modal-body">
            {{ form.as_p }}
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" type="button" data-dismiss="modal">Cancelar</button>
                <button class="btn btn-primary" type="submit">Confirmar</button>
            </div>
        </form>        
    </div>
</div>

In principle, you must place on the edit button and the reclamacion.html modal should open, but it does nothing. It’s like a button that doesn’t go anywhere.

4

There are lots of things you can look at to try and diagnose this.

Check the html that was rendered and sent to your browser using your browser’s developer tools.

Check the browser console for error messages.

Look at your server’s console log to see if the request is being made to your view to retrieve the page.

5

In the browser inspector two errors appear but they seem to be from css

‘-webkit-text-size-adjust’ is not supported by Chrome, Chrome Android, Edge 79+, Firefox, Safari. Add ‘text-size-adjust’ to support Chrome 54+, Chrome Android 54+, Edge 79+.

html {
    -webkit-text-size-adjust: 100%;
}

SOLICITAR

[http://127.0.0.1:8000/static/lib/bootstrap-4.4.1-dist/css/bootstrap.min.css]

and the other:

A ‘cache-control’ header contains directives with invalid values: ‘stale-while-revalidate=2592000’

Cache-Control: public, max-age=31536000, stale-while-revalidate=2592000

SOLICITAR

[https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js]

in the application console:

[09/Feb/2023 14:47:52] “GET /reclamaciones/ HTTP/1.1” 200 10693
[09/Feb/2023 14:47:52] “GET /static/lib/bootstrap-4.4.1-dist/css/bootstrap.min.css HTTP/1.1” 200 159515
[09/Feb/2023 14:47:52] “GET /static/img/usuario.png HTTP/1.1” 200 27233
[09/Feb/2023 14:47:52] “GET /static/lib/bootstrap-4.4.1-dist/css/bootstrap.min.css.map HTTP/1.1” 200 641867

6

I have tried another jquery code to see if it was something related to that and I see that it works well for me, I have put the following code and it works:

<script>
$(document).ready(function(){
  $("p").click(function(){
    alert("The paragraph was clicked.");
  });
});
</script>

I don’t know where to see why the modal doesn’t open or do anything…

7

Hello,
I give some more information, with the following code in both the button and the modal and the jquery if the modal opens, but only if I put the modal code on the same page as the button and jquery, if I put the modal code on another page Besides, it doesn’t work anymore.

modal:

<div id="miModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Contenido del modal -->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <p>Texto del modal</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
</div>

button:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal">Abrir Modal</button>

jQuery:

$("#miModal").modal("show");

thank you

8

I’m also now a bit confused by your last couple of posts. Are you rendering this modal form as part of your page, or are you trying to retrieve it from the server using AJAX?

If you’re trying to retrieve it using AJAX, then you need to check the network tab in your developer tools to see if the request is being issued. If they are, then you need to check your server’s console log to see what response is being returned.

If you’re not using AJAX, then you need to examine the html in your browser’s developer tools. Do you have everything on the page that you’re expecting to have? Are all your css and js files being loaded? Do the required div elements exist?

9

Hello,

in the end i have used another way which seems to work fine in the modal theme.
Now the problem comes with displaying the fields, I am trying several ways but there is no way.
I imagine that in the views.py file I have something wrong.

class CrearReclamacion(CreateView):
    model = Rec
    form_class = RecForm
    template_name = 'reclamaciones/crear_reclamacion.html'
    success_url = reverse_lazy('Reclamaciones')

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['formulario'] = RecForm()
        return context

html page where the modal is displayed:

<div class="modal fade" id="myModalClient" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <form action="" method="POST" enctype="multipart/form-data" class="form-control">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {% for field in formulario.visible_fields %}
            <div class="form-group">
                <label for="email">{{ field.label }}:</label>
                {{ field|add_class:'form-control'|attr:'autocomplete:off' }}
            </div>
          {% endfor %}
        </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>
  </form>
</div>

for something I am not understanding or putting incorrectly.

In views.py I have a CrearReclamacion class where it goes to a form crear_reclamacion.html. This part is the one I want to modify so that it goes to the modal.

I also sample the .js file

var table = $(function() {
    $('#data').DataTable({
        responsive: true,
        autoWidth: false,
        destroy: true,
        deferRender: true,
        ajax: {
            url: window.location.pathname,
            type: 'POST',
            data: {
                'action': 'searchdata'
            },
            dataSrc: ""
        },
        columns: [
            {"data": "fecha_reclamacion"},
            {"data": "num_reclamacion"},
            {"data": "num_cliente"},
            {"data": "empresa"},
            {"data": "tipo"},
            {"data": "atiende"},
            {"data": "delegacion_departamento"},
        ],
        columnDefs: [
            {
                targets: [-1],
                class: 'text-center',
                orderable: false,
                render: function (data, type, row) {
                    var buttons = '<a href="#" class="btn btn-warning btn-xs btn-flat"><i class="fas fa-edit"></i></a> ';
                    buttons += '<a href="#" type="button" class="btn btn-danger btn-xs btn-flat"><i class="fas fa-trash-alt"></i></a>';
                    return buttons;
                }
            },
        ],
        initComplete: function (settings, json) {

        }
    });

	$("#myModalClient").modal("show");

For now it only makes it show the modal when loading the page, for now I only want to load the fields of my table inside the modal, that’s what I don’t get.

thank you