0

My problem is that I create a table with php that displays when you enter the page, and below the where the element information is.

I echo 2 more tr, one with text on each , the other has an input text, a select and a button to send the changes. I want to be able to change the information on each element by sending an AJAX request with the values on my input text and my select when I click the button.

MY php

<?php
$Municipios = $wpdb->get_results("SELECT * FROM cor_municipio INNER JOIN cor_estado ON cor_municipio.estado_id = cor_estado.estado_id;");
echo "<table>";
    echo "<tbody>";
        echo "<tr>";
            echo "<th>Municipio</th>";
            echo "<th>Estado</th>";
            echo "<th>Acciones</th>";
        echo "</tr>";
foreach($Municipios as $Eresult){
    echo "<tr>";
    echo "<td>".$Eresult->nombre_municipio."</td>";
    echo "<td>".$Eresult->nombre_estado."</td>";
    echo "<td><button class='editar' id='".$Eresult->municipio_id."''>Edit</button></td>";
    echo "</tr>";
    echo "<tr class='edit' id='edinfo_".$Eresult->municipio_id."'>";
    echo "<td>MUNICIPIO A CAMBIAR</td>";
    echo "<td>ESTADO A CAMBIAR</td>";
    echo "<td>PRESIONE BOTON PARA ACTUALIZAR</td>";
    echo "</tr>";
    echo "<tr class='edit' id='edit_".$Eresult->municipio_id."'>";
    echo "<td><input class='input' id='name_mun_".$Eresult->municipio_id."' value='".$Eresult->nombre_municipio."' placeholder='Nombre del municipio' type='text' autocomplete='off'>";
    echo "<td><select class='sel'type='text'>";
    echo "<option value='".$Eresult->estado_id."' selected>".$Eresult->nombre_estado."</option>";
    $r = $Eresult->estado_id;
    $A = $wpdb->get_results("SELECT * FROM cor_estado WHERE estado_id != 1 AND estado_id !=$r;");
    foreach ($A as $W ) {
        echo "<option value='".$W->estado_id."' type='text'>".$W->nombre_estado."</option>";
    }
    echo "</select></td>";
    echo "<td><button class='insertar'>Actualizar</button></td>";
    echo "</tr>";
}
    echo "</tbody>";
echo "</table>";
?>

MY jQuery

jQuery(document).ready(function() {
    jQuery(".edit").hide();
    var mun_id;
    var name_mun;
    var id_es;
    jQuery(".editar").click(function() { //this is the button displayed on the table
        mun_id = jQuery(this).attr('id'); // $(this) refers to button that was clicked
        jQuery(".edit").hide(500);
        jQuery("#edinfo_"+ mun_id).show(500);//show the row with text
        jQuery("#edit_"+ mun_id).show(500);//row with inputs
    });
     jQuery('#sp_'+mun_id).on('click',function(){//id of the button on the input row
        jQuery('#name_es'+mun_id).change(function() {//id of the select on the input row
            id_es = jQuery("option:selected", this).val();
        });
        name_mun = jQuery("#name_mun_" + mun_id).val();
        alert("su info es  id: " + mun_id + " municipio: " + name_mun + " estado: " + id_es);
    });
});
</script>

I also have the problem that I can't get the value of the select, even if the selected option has a value attribute. I've tried setting an if, but I couldn't get it right.

I've read that jQuery has problems with dynamic elements that aren't rendered when the page loads, and that the .on('click', function) is the method to use, but I can't get it to work, I don't know if I need to search for a plugin in or something like that.

Juan O Mtz
  • 11
  • 1
  • 6
  • It's not clear where your actual issue. It doesn't look like any of your elements are dynamically generated. Have a read of [mcve] and try to create a **minimal** set of code that reproduces the problem, preferably without all the confusing php hieroglyphs. – freedomn-m Sep 22 '17 at 20:26
  • For getting the selected value, see: https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown – Greg Sep 22 '17 at 20:29
  • Possibly off topic, but may be the issue - don't nest your event handlers. Your 'change' event will only fire if you've click the edit button first and `id_es` won't be set until after you've clicked the button and *then* made a change. – freedomn-m Sep 22 '17 at 20:29
  • @freedomn-m yeah, I kind of just dumped it all, sorry. But your last comment helped me in another part of another issue I was unaware of, thanks! – Juan O Mtz Sep 22 '17 at 20:31
  • @Greg thanks for the link man, it helped a lot! – Juan O Mtz Sep 22 '17 at 20:32
  • FYI I didn't vote as a duplicate, I voted as unclear what you're asking. – freedomn-m Sep 22 '17 at 20:36
  • 1
    @freedomn-m np man, it was the same issue that Santi linked it to. – Juan O Mtz Sep 22 '17 at 20:37

0 Answers0