0

No entiendo demasiado de javaScript estoy integrando una funcionalidad simple pero se ejecuta al hacer 2 clicks en el botón como que primero lo tiene que reconocer y luego ejecutar.

Este es el código de la función:


$(function () {
    // crear estado
    $(".agregar-estado").modalForm({formURL: "{% url 'complemento:agregar_estado' %}"});
    // actualizar estado   
    $(document).on('click', '.actualizar-estado', function(){
      $(this).modalForm({formURL: $(this).data('id')});
    });
    // eliminar estado
    $(document).on('click', '.eliminar-estado', function(){
      $(this).modalForm({formURL: $(this).data('id')});
    });
  });

El de los botones:

<button  class="actualizar-estado btn btn-sm btn-primary" data-id="{% url 'complemento:editar_estado' estado.pk %}">
     <span class="fa fa-pencil"></span>
</button>

<button class="eliminar-estado btn btn-sm btn-danger" data-id="{% url 'complemento:eliminar_estado' estado.id %}">
    <span class="fa fa-trash"></span>
</button>

2
  • modalForm <-- que componente es? y porque lo ejecutas sobre $(this) que es el boton actual?, me suena a que tendrias que poner: $('.actualizar-estado').modalForm(); y $('.eliminar-estado').modalForm(); justo después de crear los botones, primero les dices que son de tipo modalForm y después pueden funcionar como tales, no se si es el caso, pero algo así pasa cuando crear ejemplo un calendar combo, mientras que no lo conviertas a calendar en un inicio, funcionara como un simple input. Commented el 11 nov. 2019 a las 20:31
  • modalForm es una funcion que obtengo de jquery.bootstrap.modal.forms.js
    – LeandroX
    Commented el 11 nov. 2019 a las 21:38

1 respuesta 1

0

¿Por qué en vez de asignar la función al boton $(document) la asignas al documento y después le dices el elemento? $('#idDelElemento')

Trata de esta forma:

$(function () {
    // crear estado
    $(".agregar-estado").modalForm({formURL: "{% url 'complemento:agregar_estado' %}"});
    // actualizar estado   
    $("#btn-actualizar").on('click', function(){
      $(this).modalForm({formURL: $(this).data('id')});
    });
    // eliminar estado
    $("#btn-eliminar").on('click', function(){
      $(this).modalForm({formURL: $(this).data('id')});
    });
  });

Y para el HTML:

<button id="btn-actualizar" class="actualizar-estado btn btn-sm btn-primary" data-id="{% url 'complemento:editar_estado' estado.pk %}">
     <span class="fa fa-pencil"></span>
</button>

<button id="btn-eliminar"class="eliminar-estado btn btn-sm btn-danger" data-id="{% url 'complemento:eliminar_estado' estado.id %}">
    <span class="fa fa-trash"></span>
</button>

Si aún no entiendes bien JavaScript deberías aprender Vanilla antes de entrar a usar JQuery desde mi punto de vista.

5
  • claro esa era la primera opción pero al cambiar de lista en el data table no reconoce las funciones
    – LeandroX
    Commented el 11 nov. 2019 a las 18:50
  • Entonces en los botones añade el onclick="nombreFuncion()" entre los parentesis puedes enviar el boton colocando this y se envia con todos y sus "data-" ya podrías acceder a ellas con this.getAttribute() e incluso reasignar valores a ese mismo elemento Commented el 11 nov. 2019 a las 18:52
  • si entiendo que es simple lo que tratas de decir pero no llevo mucho tiempo viendo javaScript asi que en lo del getAttribute no sabria como obtener los valores y menos adaptarlo a lo que estaba haciendo
    – LeandroX
    Commented el 11 nov. 2019 a las 19:07
  • Te recomiendo la web de mozilla developer.mozilla.org/es/docs/Web/JavaScript para aprender y para buscar dudas que tengas, igual en google, aunque parezcan dudas muy específicas siempre hay alguien que ya pregunto algo similar y puede ayudar Commented el 11 nov. 2019 a las 22:43
  • despues de ver unos temas basicos de vanilla probe la forma que me comentaste que la llegue a comprender y aun asi no lo reconoce a la primera solo a la 2da tambien hice la prueba de que ingresara a la funcion y se ejecuta 2 veces cuando coloco un comentario tienes alguna otra sugerencia para el problema ?
    – LeandroX
    Commented el 14 nov. 2019 a las 18:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.