A
Anonymous
Guest
Hi all,
I try to populate html table by query and ajax.
The idea is that i have a textbox in which the user enter a code, the system get its description upon focusout event from the database. (This section works well)
After that, upon double click on the description that was retrived, the js should populate the table upon the code the user enterd. The problem is that in this case i get an error:
Uncaught TypeError: Cannot use 'in' operator to search for 'length' in
I tried to search the web. Most suggest to add JSON.parse. But the data is already on JSON format, so I dont need to do it. Does anyone see what do I miss in here?
Here are my codes files
Thank you
index
hp
GlDbOra.php
global_functions.php
Here is the javascript file i use name item_funcs.js:
I try to populate html table by query and ajax.
The idea is that i have a textbox in which the user enter a code, the system get its description upon focusout event from the database. (This section works well)
After that, upon double click on the description that was retrived, the js should populate the table upon the code the user enterd. The problem is that in this case i get an error:
Uncaught TypeError: Cannot use 'in' operator to search for 'length' in
I tried to search the web. Most suggest to add JSON.parse. But the data is already on JSON format, so I dont need to do it. Does anyone see what do I miss in here?
Here are my codes files
Thank you
index
hp
Code:
<!DOCTYPE html>
<?php
require_once("../xxx/Includes/GlDbOra.php");
if ($_SERVER['REQUEST_METHOD'] == "POST" && !empty($_POST['CATALOG_ID']))
{
session_start();
$_SESSION['CATALOG_ID'] =$_POST['CATALOG_ID'];
}
?>
<html>
<head>
<meta charset="UTF-8">
<title>Budget Items</title>
<script type="text/javascript" src="../../php-ajax/jquery-3.5.1.js"></script>
<script src="../../bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
<script type='text/javascript' src='js/item_funcs.js'></script>
<link href="../xxx/css/global_style.css" type="text/css" rel="stylesheet" madia="all"/>
<link href="../../bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div id="page-wrap">
<section id="main-content">
<div id="guts">
<span style="clear: both; float: left; margin-left: 5%;">
<label for="catalog_id">Catalog Id</label>
<input type="text" name="catalog_id" class="catalog_id" value=" <?php echo htmlspecialchars($catalog_id, ENT_QUOTES); ?>" placeholder="<?php echo catalog_id; ?>"/>
<input type="text" name="catalog_id_desc" class="catalog_id_desc" readonly />
</span>
<br>
<div class="container">
<div class="row">
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title">Items</h3>
</div>
<table class="table table-fixed">
<thead>
<tr class="filters">
<th><input type="text" class="col-xs-2" placeholder="Item Id" disabled></th>
<th><input type="text" class="col-xs-6" placeholder="Description" disabled></th>
<th class="col-xs-2"></th>
<th class="col-xs-2"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<form name="AddNewItem" action="budget_items.php">
<button class="load_form" value="insert_with_predifined"><span class="glyphicon glyphicon-plus"></span> Add Item</button>
</form>
</div>
</div>
</div>
</section>
</div>
</body>
</html>GlDbOra.php
Code:
<?php
class DBOracle
{
private static $instance = null;
private $OracleUser="xxx";
private $OraclePwd="xxx";
private $OracleDB="xxx";
public static function getInstance()
{
if (!self::$instance instanceof self)
{
self::$instance = new self;
}
return self::$instance;
}
// The clone and wakeup methods prevents external instantiation of copies of the Singleton class,
// thus eliminating the possibility of duplicate objects.
public function __clone()
{
trigger_error('Clone is not allowed.', E_USER_ERROR);
}
public function __wakeup()
{
trigger_error('Deserializing is not allowed.', E_USER_ERROR);
}
public function __construct ()
{
$this->con = oci_connect($this->OracleUser, $this->OraclePwd, $this->OracleDB);
if (!$this->con) {
$m = oci_error();
echo $m['message'], "\n";
exit;
}
}
public function get_general_codes_desc($table_code, $value_code)
{
$query = "begin get_gcodes_desc(:table_code_bv, :value_code_bv, :value_desc_bv); end;";
$stid = oci_parse($this->con, $query);
oci_bind_by_name($stid, ':table_code_bv', $table_code);
oci_bind_by_name($stid, ':value_code_bv', $value_code);
oci_bind_by_name($stid, ':value_desc_bv', $value_desc,30);
oci_execute($stid);
oci_free_statement($stid);
oci_close($this->con);
return $value_desc;
}
public function get_items($catalog_id)
{
$id=0;
$query = "select * from items_catalog where catalog_id=:catalog_id_bv";
$stid = oci_parse($this->con, $query);
oci_bind_by_name($stid, ':catalog_id_bv', $catalog_id);
oci_execute($stid);
while($value = oci_fetch_assoc($stid))
{
$row1[$id]['item_id'] = $value['ITEM_ID'];
$row1[$id]['item_name'] = $value['ITEM_NAME'];
$id++;
}
return $row1;
}
}
?>global_functions.php
Code:
<?php
require_once("Includes/GlDbOra.php");
// function selector
switch($_GET['method'])
{
case 'get_catalog_desc':
get_catalog_desc();
break;
case 'get_items':
get_items();
break;
default:
echo "Unknown method";
break;
}
function get_catalog_desc()
{
//get username from oracle DB
$catalog_id=$_POST['catalog_id'];
$data = (DBOracle::getInstance()->get_general_codes_desc("CATIND",$catalog_id));
echo json_encode($data);
}
function get_items()
{
$catalog_id=$_POST['catalog_id'];
$data = (DBOracle::getInstance()->get_items($catalog_id));
echo json_encode(array_values($data));
}
?>Here is the javascript file i use name item_funcs.js:
Code:
$(document).on('focusout', '.catalog_id', function()
{
var catalog_id=$(this).val();
catalog_id=$.trim(catalog_id);
if (catalog_id!==' ')
{
$.ajax
({
method:"POST",
url:"../xxx/global_functions.php?method=get_catalog_desc",
data:
{
"catalog_id": catalog_id,
},
datatype:"JSON" ,
success:function(data)
{
data=data.replace(/['"]+/g, "");
$('.catalog_id_desc').val(data);
// load_items(catalog_id);
},
error: function(data)
{
alert(data.errorMsg);
}
});
}
else
{
alert("Please enter code");
}
});
$(document).on('dblclick', '.catalog_id_desc', function()
//function load_items(catalog_id)
{
var catalog_id=$('input[name=catalog_id]').val();
$.ajax
({
method:"POST",
url:"../xxx/global_functions.php?method=get_items",
data:
{
"catalog_id": catalog_id,
},
datatype:"JSON" ,
success:function(data)
{
load_items(data)
},
error: function(data)
{
alert(data.errorMsg);
}
});
});
function load_items(data)
{
$.each(data, function(index, obj)
{
var row = $('<tr>');
row.append('<td>' + obj.item_id + '</td>');
row.append('<td>' + obj.item_name + '</td>');
$('tbody').append(row);
});
}