Monty Monty - 4 months ago 12
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

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.