4 Replies - 656 Views - Last Post: 25 June 2020 - 06:49 AM Rate Topic: -----

#1 basak88   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 02-June 20

ajax jquery running fine in my localhost but not in online server

Posted 02 June 2020 - 10:13 AM

Sir,

I am new in php, I have download a ajax jquery sourse code which is running fine in my xampp server but when I host it in online server the following warning showing

DataTables warning: table id=sample_data - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1


Can anyone help me to solve the problem



index.php
<html>
 <head>
  <title>RENEWAL OF VEHICLE INSURANCE POLICY</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
<style>
th, td {
    font-size: 11px;
  }
th{
	background-color:green;
	color:white;
  }
</style>

 </head>
 <body>
  <div class="container">
   <h2 align="center">RENEWAL OF VEHICLE INSURANCE POLICY</h2>
   <br />
   <div class="panel panel-primary">
    <div class="panel-heading">Pending Insurance Renewal</div>
    <div class="panel-body">
     <div class="table-responsive">
      <table id="sample_data"class="table table-border table-striped">
       <thead>
        <tr>
         
         <th>Loan No</th>
         <th>Reg No</th>
		 <th>Customer Name</th>
		 <th>Policy No</th>
		 <th>Exp Dt</th>
		 <th>FE Name</th>
		 <th>Remarks</th>
         <th>Issue/Not</th>
        </tr>
       </thead>
       <tbody></tbody>
      </table>
     </div>
    </div>
   </div>
  </div>
  <br />
  <br />
 </body>
</html>

<script type="text/javascript" language="javascript" >
$(document).ready(function(){

 var dataTable = $('#sample_data').DataTable({
  "processing" : true,
  "serverSide" : true,
  "order" : [],
  "ajax" : {
   url:"fetch.php",
   type:"POST"
  }
 });

 $('#sample_data').on('draw.dt', function(){
  $('#sample_data').Tabledit({
   url:'action.php',
   dataType:'json',
   columns:{
    identifier : [0, 'id'],
    editable:[ [6,'remark1'],[7, 'remark2', '{"1":"Renew","2":"Not Renew"}']]
   },

   restoreButton:false,
   onSuccess:function(data, textStatus, jqXHR)
   {
    if(data.action == 'delete')
    {
     $('#' + data.id).remove();
     $('#sample_data').DataTable().ajax.reload();
    }
   }
  });
 });
  
}); 
</script>


<html>
 <head>
  <title>RENEWAL OF VEHICLE INSURANCE POLICY</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
<style>
th, td {
    font-size: 11px;
  }
th{
	background-color:green;
	color:white;
  }
</style>

 </head>
 <body>
  <div class="container">
   <h2 align="center">RENEWAL OF VEHICLE INSURANCE POLICY</h2>
   <br />
   <div class="panel panel-primary">
    <div class="panel-heading">Pending Insurance Renewal</div>
    <div class="panel-body">
     <div class="table-responsive">
      <table id="sample_data"class="table table-border table-striped">
       <thead>
        <tr>
         
         <th>Loan No</th>
         <th>Reg No</th>
		 <th>Customer Name</th>
		 <th>Policy No</th>
		 <th>Exp Dt</th>
		 <th>FE Name</th>
		 <th>Remarks</th>
         <th>Issue/Not</th>
        </tr>
       </thead>
       <tbody></tbody>
      </table>
     </div>
    </div>
   </div>
  </div>
  <br />
  <br />
 </body>
</html>

<script type="text/javascript" language="javascript" >
$(document).ready(function(){

 var dataTable = $('#sample_data').DataTable({
  "processing" : true,
  "serverSide" : true,
  "order" : [],
  "ajax" : {
   url:"fetch.php",
   type:"POST"
  }
 });

 $('#sample_data').on('draw.dt', function(){
  $('#sample_data').Tabledit({
   url:'action.php',
   dataType:'json',
   columns:{
    identifier : [0, 'id'],
    editable:[ [6,'remark1'],[7, 'remark2', '{"1":"Renew","2":"Not Renew"}']]
   },

   restoreButton:false,
   onSuccess:function(data, textStatus, jqXHR)
   {
    if(data.action == 'delete')
    {
     $('#' + data.id).remove();
     $('#sample_data').DataTable().ajax.reload();
    }
   }
  });
 });
  
}); 
</script>


<html>
 <head>
  <title>RENEWAL OF VEHICLE INSURANCE POLICY</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
<style>
th, td {
    font-size: 11px;
  }
th{
	background-color:green;
	color:white;
  }
</style>

 </head>
 <body>
  <div class="container">
   <h2 align="center">RENEWAL OF VEHICLE INSURANCE POLICY</h2>
   <br />
   <div class="panel panel-primary">
    <div class="panel-heading">Pending Insurance Renewal</div>
    <div class="panel-body">
     <div class="table-responsive">
      <table id="sample_data"class="table table-border table-striped">
       <thead>
        <tr>
         
         <th>Loan No</th>
         <th>Reg No</th>
		 <th>Customer Name</th>
		 <th>Policy No</th>
		 <th>Exp Dt</th>
		 <th>FE Name</th>
		 <th>Remarks</th>
         <th>Issue/Not</th>
        </tr>
       </thead>
       <tbody></tbody>
      </table>
     </div>
    </div>
   </div>
  </div>
  <br />
  <br />
 </body>
</html>

<script type="text/javascript" language="javascript" >
$(document).ready(function(){

 var dataTable = $('#sample_data').DataTable({
  "processing" : true,
  "serverSide" : true,
  "order" : [],
  "ajax" : {
   url:"fetch.php",
   type:"POST"
  }
 });

 $('#sample_data').on('draw.dt', function(){
  $('#sample_data').Tabledit({
   url:'action.php',
   dataType:'json',
   columns:{
    identifier : [0, 'id'],
    editable:[ [6,'remark1'],[7, 'remark2', '{"1":"Renew","2":"Not Renew"}']]
   },

   restoreButton:false,
   onSuccess:function(data, textStatus, jqXHR)
   {
    if(data.action == 'delete')
    {
     $('#' + data.id).remove();
     $('#sample_data').DataTable().ajax.reload();
    }
   }
  });
 });
  
}); 
</script>




fetch.php

<?php

//fetch.php

include('database_connection.php');

$column = array("id", "lno", "vno","cname","policy","expdt","fname","remark1", "remark2");

$query = "SELECT * FROM tbl_sample ";

if(isset($_POST["search"]["value"]))
{
 $query .= '
 WHERE lno LIKE "%'.$_POST["search"]["value"].'%" 
    OR vno LIKE "%'.$_POST["search"]["value"].'%" 
    OR cname LIKE "%'.$_POST["search"]["value"].'%"
	OR policy LIKE "%'.$_POST["search"]["value"].'%"
	OR expdt LIKE "%'.$_POST["search"]["value"].'%"
	OR fname LIKE "%'.$_POST["search"]["value"].'%"
	OR remark1 LIKE "%'.$_POST["search"]["value"].'%"
    OR remark2 LIKE "%'.$_POST["search"]["value"].'%" 
 ';
}

if(isset($_POST["order"]))
{
 $query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
 $query .= 'ORDER BY id DESC ';
}
$query1 = '';

if($_POST["length"] != -1)
{
 $query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}

$statement = $connect->prepare($query);

$statement->execute();

$number_filter_row = $statement->rowCount();

$statement = $connect->prepare($query . $query1);

$statement->execute();

$result = $statement->fetchAll();

$data = array();

foreach($result as $row)
{
 $sub_array = array();
 
 $sub_array[] = $row['lno'];
 $sub_array[] = $row['vno'];
 $sub_array[] = $row['cname'];
 $sub_array[] = $row['policy'];
 $sub_array[] = $row['expdt'];
 $sub_array[] = $row['fname'];
 $sub_array[] = $row['remark1'];
 $sub_array[] = $row['remark2'];
 $data[] = $sub_array;
}

function count_all_data($connect)
{
 $query = "SELECT * FROM tbl_sample";
 $statement = $connect->prepare($query);
 $statement->execute();
 return $statement->rowCount();
}

$output = array(
 'draw'   => intval($_POST['draw']),
 'recordsTotal' => count_all_data($connect),
 'recordsFiltered' => $number_filter_row,
 'data'   => $data
);

echo json_encode($output);

?>


<?php

//action.php

include('database_connection.php');

if($_POST['action'] == 'edit')
{
 $data = array(
  ':lno'  => $_POST['lno'],
  ':vno'  => $_POST['vno'],
  ':vno'  => $_POST['cname'],
  ':policy'  => $_POST['policy'],
  ':fname'  => $_POST['fname'],
  ':expdt'  => $_POST['expdt'],
  ':fname'  => $_POST['fname'],
  ':remark1'  => $_POST['remark1'],
  ':remark2'   => $_POST['remark2'],
  ':id'    => $_POST['id']
 );

 $query = "
 UPDATE tbl_sample 
 SET lno = :lno, 
 vno = :vno,
 cname = :cname,
 policy = :policy,
 fname = :fname,
 expdt = :expdt,
 remark1= :remark1, 
 remark2 = :remark2 
 WHERE id = :id
 ";
 $statement = $connect->prepare($query);
 $statement->execute($data);
 echo json_encode($_POST);
}

if($_POST['action'] == 'delete')
{
 $query = "
 DELETE FROM tbl_sample 
 WHERE id = '".$_POST["id"]."'
 ";
 $statement = $connect->prepare($query);
 $statement->execute();
 echo json_encode($_POST);
}


?>


This post has been edited by Dormilich: 02 June 2020 - 10:51 AM


Is This A Good Question/Topic? 0
  • +

Replies To: ajax jquery running fine in my localhost but not in online server

#2 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3150
  • View blog
  • Posts: 11,954
  • Joined: 03-December 12

Re: ajax jquery running fine in my localhost but not in online server

Posted 02 June 2020 - 10:19 AM

Check the response you are getting.

If you are in free hosting for your site, they are going to send extra stuff and break the json.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: ajax jquery running fine in my localhost but not in online server

Posted 03 June 2020 - 03:02 AM

When testing your code in a browser, use its developer tools to check the response details. Or use a third-party tool such as Fiddler.
Was This Post Helpful? 0
  • +
  • -

#4 nicephotog   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 36
  • Joined: 06-June 20

Re: ajax jquery running fine in my localhost but not in online server

Posted 24 June 2020 - 06:11 AM

find table sample_data (id=sample_data) in the JSON scripting call and swap it anywhere it occurs with id=tbl_sample
(not sure whether JSONs sample_data is a variable or a string)
That not ripped first i believe would only be the result.
Was This Post Helpful? 0
  • +
  • -

#5 nicephotog   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 36
  • Joined: 06-June 20

Re: ajax jquery running fine in my localhost but not in online server

Posted 25 June 2020 - 06:49 AM

Also should said in other post,
Check the full URL path to all scripts are called properly in the online pages
NB implicit paths are dangerous in various because of X browser accepted syntax and finally be sure you have the correct script element syntax for the markup DTD in use apart also the versioning of ecma 262
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1