Monty Monty - 1 year ago 48
jQuery Question

How to change this code in JSON format

This is my code which i need to get convert into "JSON" format..
i want to sent the data into JSON format and receive and show it in table...
can anyone help me to change it in the way i think..below code is of index.php

<html>
<head>
<title>Register</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<h3 align="center">Live Table Add Edit Delete </h3><br />
<div id="live_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '#btn_add', function(){
var name = $('#name').text();
var lastname = $('#lastname').text();
var email = $('#email').text();
var duser = $('#duser').text();
var mob = $('#mob').text();
var pass= $('#pass').text();
var website = $('#website').text();

if(name == '' || lastname == ''|| email == ''|| duser == ''|| mob == ''|| pass == ''|| website == '')
{
alert("Enter the Blank field");
return false;
}

//--------------------------------------------------------------------------------------------------------
$.ajax({
url:"insert.php",
method:"POST",
data:{name:name, lastname:lastname,email:email, duser:duser,mob:mob, pass:pass,website:website},
dataType:"text",
success:function(data)
{
alert(data);
fetch_data();
}
})
});

//---------------------------------------------------------------------------------------------------------
function edit_data(id, text, column_name)
{
$.ajax({
url:"edit.php",
method:"POST",
data:{id:id, text:text, column_name:column_name},
dataType:"text",
success:function(data){
alert(data);
}
});
}
$(document).on('blur', '.name', function(){
var id = $(this).data("id1");
var name = $(this).text();
edit_data(id, name, "name");
});
$(document).on('blur', '.lastname', function(){
var id = $(this).data("id2");
var lastname = $(this).text();
edit_data(id,lastname, "lastname");
});
$(document).on('blur', '.email', function(){
var id = $(this).data("id3");
var email = $(this).text();
edit_data(id, email, "email");
});
$(document).on('blur', '.duser', function(){
var id = $(this).data("id4");
var duser = $(this).text();
edit_data(id,duser, "duser");
});


$(document).on('blur', '.mob', function(){
var id = $(this).data("id5");
var mob = $(this).text();
edit_data(id, mob, "mob");
});
$(document).on('blur', '.pass', function(){
var id = $(this).data("id6");
var pass = $(this).text();
edit_data(id,pass, "pass");
});
$(document).on('blur', '.website', function(){
var id = $(this).data("id7");
var website = $(this).text();
edit_data(id,website, "website");
});

//--------------------------------------------------------------------------------------------------------
$(document).on('click', '.btn_delete', function(){
var id=$(this).data("id8");
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
url:"delete.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data){
alert(data);
fetch_data();
}
});
}
});
});
</script>


select.php

<?php
$connect = mysqli_connect("localhost", "root", "", "cellar");
$output = '';
$sql = "SELECT * FROM user";
$result = mysqli_query($connect, $sql);

$output .= '
<div >
<table class="table table-bordered">
<tr>
<th width="5%">ID</th>
<th width="10%">name</th>
<th width="10%">lastname</th>
<th width="10%">email</th>
<th width="10%">duser</th>
<th width="10%">mob</th>
<th width="10%">pass</th>
<th width="10%">website</th>
<th width="5%">Delete</th>
</tr>';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td class="name" data-id1="'.$row["id"].'" contenteditable>'.$row["name"].'</td>
<td class="lastname" data-id2="'.$row["id"].'" contenteditable>'.$row["lastname"].'</td>
<td class="email" data-id3="'.$row["id"].'" contenteditable>'.$row["email"].'</td>
<td class="duser" data-id4="'.$row["id"].'" contenteditable>'.$row["duser"].'</td>
<td class="mob" data-id5="'.$row["id"].'" contenteditable>'.$row["mob"].'</td>
<td class="pass" data-id6="'.$row["id"].'" contenteditable>'.$row["pass"].'</td>
<td class="website" data-id7="'.$row["id"].'" contenteditable>'.$row["website"].'</td>
<td><button type="button" name="delete_btn" data-id8="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
</tr>
';
}
$output .= '
<tr>
<td></td>
<td id="name" contenteditable></td>
<td id="lastname" contenteditable></td>
<td id="email" contenteditable></td>
<td id="duser" contenteditable></td>
<td id="mob" contenteditable></td>
<td id="pass" contenteditable></td>
<td id="website" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success" >+</button></td>
</tr>
';
}
else
{
$output .= '<tr>
<td colspan="4">Data not Found</td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;
?>


insert.php

<?php
$connect = mysqli_connect("localhost", "root", "", "cellar");
$sql = "INSERT INTO user(name, lastname,email,duser,mob,pass,website) VALUES('".$_POST["name"]."','".$_POST["lastname"]."','".$_POST["email"]."','".$_POST["duser"]."','".$_POST["mob"]."','".$_POST["pass"]."', '".$_POST["website"]."')";
if(mysqli_query($connect, $sql))
{
echo 'Data Inserted';
}
?>


edit.php

<?php
$connect = mysqli_connect("localhost", "root", "", "cellar");
$id = $_POST["id"];
$text = $_POST["text"];
$column_name = $_POST["column_name"];
$sql = "UPDATE user SET ".$column_name."='".$text."' WHERE id='".$id."'";
if(mysqli_query($connect, $sql))
{
echo 'Data Updated';
}
?>


delete.php

<?php
$connect = mysqli_connect("localhost", "root", "", "cellar");
$sql = "DELETE FROM user WHERE id = '".$_POST["id"]."'";
if(mysqli_query($connect, $sql))
{
echo 'Data Deleted';
}
?>


This code is complete helpful for those who want live add,edit,delete table value with use of Ajax,jquery in php

Answer Source

in your select.php you must convert your array with json_encode()

And in your $.ajax, you must say it's json format and parse the json result for use the column..

$.ajax({  
        url:"select.php",  
        method:"POST", 
        dataType: "json",
        success: function(results) {
            $.each(results, function(k, v){
                        $('#start_date').val(v.start_date);
           });
        } 
   }); 

Your select.php must look like this:

<?php
header('Content-Type: text/html; charset=UTF-8'); 
$connect = mysqli_connect("localhost", "root", "", "cellar");  
$output = '';  
$sql = "SELECT * FROM user";  
$result = mysqli_query($connect, $sql);

$return_array = array();   
if(mysqli_num_rows($result) > 0)  {  
  while($row = mysqli_fetch_array($result)) {
       $output['id']    = $row["id"];
       $output['name']  = $row["name"]; 
       $output['lastname'] = $row["lastname"];  
       $output['email'] = $row["email"];  
       $output['duser'] = $row["duser"];  
       $output['mob'] = $row["mob"];  
       $output['pass'] = $row["pass"];  
       $output['website'] = $row["website"];   

       array_push($return_arr,$output);            
  } 
}
echo json_encode($return_arr, JSON_UNESCAPED_UNICODE);
?>

In your jquery, you'll have an array and you can put the value in the table.