Is there a way to restart all the scripts on the page?

0

My problem is as follows.

I have a div#resultado , which contains a table which is filled with data that I consume from a WebService. In this table there is a button for each row that activates a modal to modify the values of the row.

<button type="button" class="btn" name="btn_Mcontactos" id="btn_Mcontactos" value="{{contactoId}}">
    <img src="public/img/carpeta.png" alt="Ver" style="height:25px; width:25px;" />
</button>

When I insert a new value in the table, what I do is that I update the content of div#resultado (I create the table again via AJAX). The problem is that when I click on the button of the table nothing happens, I imagine that the script that shows the modal is not activated.

Is there a way to restart the scripts without reloading the page?

Code: show and fill modal of the contact to edit

  $("button[name='btn_Mcontactos']").click(function(){
         var valor = $(this).val();
         var txtcontactoId = $("<input type='text' name='txtajax_contactoid' class='loader' />").val(valor);
         var valor2 = $('#txt_Contactos_ProveedorId').val();
         var txtproveedorid = $("<input type='text' name='txtajax_proveedorid' class='loader' />").val(valor2);
         var valor3 = $('#txt_Contactos_ProveedorNombre').val();
         var txtproveedornombre = $("<input type='text' name='txtajax_proveedornombre' class='loader' />").val(valor3);

              $('#frm_ContactosLista').append(txtcontactoId);
              $('#frm_ContactosLista').append(txtproveedorid);
              $('#frm_ContactosLista').append(txtproveedornombre);

              var url = "./webservice/llenarcontactos.php";

              $.ajax({
                  type:"POST",
                  url: url,
                  data: $("#frm_ContactosLista").serialize(),
                  success: function(data){
                      $("#Mcontenido1").html(data);
                      $("#Modal_MContactos").modal();

                  }
              });

              return false;
          });

Table with the button

Modal to modify

    
asked by Wilfredo Aleman 13.07.2017 в 17:28
source

1 answer

1

Change the scope of your button in this:

$("button[name='btn_Mcontactos']").click(function(){

to this:

$("button[name='btn_Mcontactos']").unbind('click');
$(document).on("click","button[name='btn_Mcontactos']", function (event, xhr, settings) {

normally what happens is that modifying the DOM is no longer accessible by the jquery element map, but jquery has this other script method to handle dynamic content. Greetings let me know if it works for you.

Also remember to clean the cache of the page, since the js sometimes do not update ..

    
answered by 13.07.2017 / 17:42
source