CODIGO TABLA HTML JS FETCH METODO PUT API JSON

 document.getElementById('caja1').addEventListener('keypress', function (event) {


if (event.keyCode === 13) {

 

   ver_tabla();

}


});



document.getElementById('fetchDataBtn').addEventListener('click', ver_tabla);


//document.getElementById('caja1').addEventListener('keyup', ver_tabla);


 //document.getElementById('caja1').addEventListener('change', ver_tabla); 


let caj = document.getElementById("caja1").value;


<table border="1" width="100%" cellspacing="0" cellpadding="10px">

        <thead>

          <tr>

            <th width="60px">Id</th>

            <th>Name</th>

            <th>Class</th>

            <th>City</th>

            <th width="90px">Edit</th>

            <th width="90px">Delete</th>

          </tr>

        </thead>

        <tbody id="tbody"></tbody>

      </table>


////////////////////


var fname = document.getElementById('fname').value;


if(fname === '' || lname === '' || sClass === '0' || city === ''){

alert('Please Fill All The Fields');

return false;

}else{

var formdata = {

's_id' : id,

'fname' : fname,

'lname' : lname,

'class' : sClass,

'city' : city

}


jsondata = JSON.stringify(formdata);


fetch('php/fetch-update.php',{

method : 'PUT',

body : jsondata,

headers: {

'Content-type' : 'application/json',

}

})

.then((response) => response.json())

.then((result)=>{

if(result.update == 'success'){

show_message('success','Data Updated Successfully.');

loadTable();

hide_modal();

}else{

show_message('error',"Data Can't Updated.");

hide_modal();

}

})

.catch((error) => {

show_message('error',"Data Can't Updated : Server Problem.");

});

}



///////////////////////////


$input = file_get_contents('php://input');

$decode = json_decode($input, true);


$student_id = $decode["s_id"];



if(mysqli_query($conn,$sql)){

echo json_encode(array('update' => 'success'));

}else{

echo json_encode(array('update' => 'failed'));

}



////////////////////////////////////


function loadTable(){ 

fetch('php/load-table.php')

.then((response) => response.json())

.then((data)=>{

var tbody = document.getElementById('tbody');

if(data['empty']){

tbody.innerHTML = '<tr><td colspan="6" align="center"><h3>No Record Found.</h3></td></tr>'

}else{

var tr = '';

for(var i in data){

tr += `<tr>

            <td align="center">${data[i].id}</td>

            <td>${data[i].first_name} ${data[i].last_name}</td>

            <td>${data[i].class_name}</td>

            <td>${data[i].city}</td>

            <td align="center"><button class="edit-btn" onclick="editRecord(${data[i].id})">Edit</button></td>

            <td align="center"><button class="delete-btn" onclick="deleteRecord(${data[i].id})">Delete</button></td>

          </tr>`;

}

tbody.innerHTML = tr;

}

})

.catch((error) => {

show_message('error',"Can't Fetch Data");

});

}


loadTable();

Comentarios

Entradas populares de este blog

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

DETECTAR DIRECCION IP CON PHP Y JS