Reputation: 71
I referenced sols of SO, but nothing solve the error.
I have a file dashboard.html
with search condition and on click it calls loadtable.js
and this loadtable.js
file using search.php
retrives rows from table,
But there is some error Uncaught SyntaxError: Unexpected token S in JSON at position 0
and also i don't want to display the server returned JSON on client side. Instead this i want to display table and put values in that. I am attaching both loadtable.js
and search.php
code.
File loadtable.js
$(document).ready(function(){
var delay = 1000;
// Campaign Submit Info
$('[name="search_submit"]').click(function(e){
e.preventDefault();
var lead_status = $('#filterformpost').find('#lead_status_select option:selected').val();
var campaign_status = $('#filterformpost').find('#campaign_status_select option:selected').val();
var company_name = $('#filterformpost').find('#company_name_select option:selected').val();
var tech_area = $('#filterformpost').find('#tech_area_select option:selected').val();
var firm_size = $('#filterformpost').find('#firm_size_select option:selected').val();
var firm_type = $('#filterformpost').find('#firm_type_select option:selected').val();
var country_name = $('#filterformpost').find('#country_name_select option:selected').val();
var state_name = $('#filterformpost').find('#state_name_select option:selected').val();
var start_date = $('#filterformpost').find('#start_date_search').val();
var end_date = $('#filterformpost').find('#end_date_search').val();
console.log(lead_status)
console.log(campaign_status)
console.log(company_name)
console.log(tech_area)
console.log(firm_size)
console.log(firm_type)
console.log(country_name)
console.log(state_name)
console.log(start_date)
console.log(end_date)
$.ajax({
type: "POST",
url: "http://localhost/CRM/server/search.php",
data: {
"lead_status":lead_status,
"campaign_status":campaign_status,
"company_name":company_name,
"tech_area":tech_area,
"firm_size":firm_size,
"firm_type":firm_type,
"country_name":country_name,
"state_name":state_name,
"start_date":start_date,
"end_date":end_date
},
beforeSend: function() {
$('.message_box').html(
'<img src="tenor.gif" width="40" height="40"/>'
);
},
success: function(data)
{
setTimeout(function() {
$('.message_box').html(data);
}, delay);
}
});
$.ajax({
method: "POST",
url: "./server/search.php"
}).done(function( data ) {
var result= $.parseJSON(data);
var string='<table><thead><th>#</th><th>Lead ID</th><th>Name</th><th>Company</th><th>Location</th><th>Communication</th><th>Last Contact Date</th><th>Next Contact Date</th><th>Lead Status</th><th>Details</th></thead><tbody>';
/* from result create a string of data and append to the div */
var i = 1;
$.each( result, function( key, value ) {
string += "<tr><td>"+i+"</td><td>"+value['Lead_Id']+"</td><td>"+value['FirstName']+' '+value['LastName']+"</td><td>"+value['Company']+"</td><td>"+value['State']+'\n'+value['Country']+"</td><td>"+value['Phone']+'\n'+value['Email']+"</td><td>"+value['LastContactDate']+"</td><td>"+value['NextContactDate']+"</td><td>"+value['LeadStatus']+"</td><td><a href='#'>Click Here</a></td></tr>";
i = i+1;
});
string += '</tbody></table>';
$("#filterRecords").html(string);
});
});
});
File search.php
<?php
include('connection.php');
$sqlFlag = 0;
function queryDelimiter(){
global $sqlFlag;
if ($sqlFlag == 0){
$sqlFlag = 1;
return ' WHERE ';
}else{
return ' AND ';
}
}
$selectSQL = "SELECT * FROM tbl_main_lead_info";
if(isset($_POST['lead_status']) and strlen(trim($_POST['lead_status'])) > 0){
$selectSQL .= queryDelimiter()."LeadStatus = '".$_POST['lead_status']."'";
}
if(isset($_POST['company_name']) and strlen(trim($_POST['company_name'])) > 0){
$selectSQL .= queryDelimiter()."Company = '".$_POST['company_name']."'";
}
if(isset($_POST['tech_area']) and strlen(trim($_POST['tech_area'])) > 0){
$selectSQL .= queryDelimiter()."TechArea = '".$_POST['tech_area']."'";
}
if(isset($_POST['firm_size']) and strlen(trim($_POST['firm_size'])) > 0){
$selectSQL .= queryDelimiter()."FirmSize = '".$_POST['firm_size']."'";
}
if(isset($_POST['firm_type']) and strlen(trim($_POST['firm_type'])) > 0){
$selectSQL .= queryDelimiter()."FirmType = '".$_POST['firm_type']."'";
}
if(isset($_POST['country_name']) and strlen(trim($_POST['country_name'])) > 0){
$selectSQL .= queryDelimiter()."Country = '".$_POST['country_name']."'";
}
if(isset($_POST['state_name']) and strlen(trim($_POST['state_name'])) > 0){
$selectSQL .= queryDelimiter()."State = '".$_POST['state_name']."'";
}
if(isset($_POST['start_date']) and strlen(trim($_POST['start_date'])) > 0){
$selectSQL .= queryDelimiter()."LastContactDate >='".$_POST['start_date']."'";
}
if(isset($_POST['end_date']) and strlen(trim($_POST['end_date'])) > 0){
$selectSQL .= queryDelimiter()."NextContactDate <= '".$_POST['end_date']."'";
}
$selectSQL .= " ORDER BY Lead_Id";
$result_array = array();
$result = $conn -> query ($selectSQL);
// If there are results from database push to result array
if(mysqli_num_rows($result) > 0){
while ($row = mysqli_fetch_array($result)) {
array_push($result_array, $row);
}
}
// send a JSON encoded array to client
echo json_encode($result_array);
$conn->close();
?>
In dashboard.html
i have code as follows
<!-- View Main Lead Table with Filters -->
<section class="operation" id="view_lead_info" style="display: none;">
<!-- Filters -->
<div class="row">
<div class="col">
<label><p><b>Select Filter</b></p></label>
</div>
</div>
<form action='' method='POST' class='filterformpost' id='filterformpost'>
<div class="row">
<div class="col span-1-of-4">
<div class="row">
<div class="col span-1-of-4">
Lead Status:
</div>
<div class="col span-2-of-4">
<select id='lead_status_select'><option value=''>Select</option>
<?php
echo "<option value='All'>All</option>";
echo "<option value='Active'>Active Leads</option>";
echo "<option value='Paused'>Paused Leads</option>";
echo "<option value='Expired'>Expired Leads</option>";
echo "<option value='Unsubscribed'>Unsubscribed</option>";
?>
</select>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="row">
<div class="col span-1-of-4">
Campaign Status:
</div>
<div class="col span-2-of-4">
<select id='campaign_status_select'><option value=''>Select</option>
<?php
echo "<option value='All'>All</option>";
echo "<option value='Active'>Active</option>";
echo "<option value='Paused'>Paused</option>";
echo "<option value='Expired'>Expired</option>";
echo "<option value='Unsubscribed'>Unsubscribed</option>";
?>
</select>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="row">
<div class="col span-1-of-3">
Company Name:
</div>
<div class="col span-2-of-3">
<?php
include('./server/connection.php');
$sqlSelect="SELECT * FROM tbl_main_lead_info ORDER By Company ASC";
$result = $conn -> query ($sqlSelect);
echo "<select id='company_name_select'>";
echo "<option value=''>select</option>";
echo "<option value='All'>All</option>";
while ($row = mysqli_fetch_array($result)) {
echo "<option value='$row[Company]'> $row[Company] </option>";
}
echo "</select>";
?>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col span-1-of-4">
<div class="row">
<div class="col span-1-of-4">
State:
</div>
<div class="col span-2-of-4">
<?php
include('./server/connection.php');
$sqlSelect="SELECT * FROM tbl_state_info ORDER By StateName ASC";
$result = $conn -> query ($sqlSelect);
$result = $conn -> query ($sqlSelect);
echo "<select id='state_name_select' name='StateName'>";
echo "<option value=''>select</option>";
echo "<option value='All'>All</option>";
while ($row = mysqli_fetch_array($result)) {
echo "<option value='$row[StateName]'> $row[StateName] </option>";
}
echo "</select>";
?>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="row">
<div class="col span-1-of-4">
Country:
</div>
<div class="col span-2-of-4">
<?php
include('./server/connection.php');
$sqlSelect="SELECT * FROM tbl_country_info ORDER By CountryName ASC";
$result = $conn -> query ($sqlSelect);
$result = $conn -> query ($sqlSelect);
echo "<select id='country_name_select' name='CountryName'>";
echo "<option value=''>select</option>";
echo "<option value='All'>All</option>";
while ($row = mysqli_fetch_array($result)) {
echo "<option value='$row[CountryName]'> $row[CountryName] </option>";
}
echo "</select>";
?>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="row">
<div class="col span-1-of-3">
Firm Type:
</div>
<div class="col span-2-of-3">
<?php
include('./server/connection.php');
$sqlSelect="SELECT * FROM tbl_firm_type_info ORDER By FirmType_Value ASC";
$result = $conn -> query ($sqlSelect);
$result = $conn -> query ($sqlSelect);
echo "<select id='firm_type_select' name='FirmType'>";
echo "<option value=''>select</option>";
echo "<option value='All'>All</option>";
while ($row = mysqli_fetch_array($result)) {
echo "<option value='$row[FirmType_Value]'> $row[FirmType_Value] </option>";
}
echo "</select>";
?>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col span-1-of-4">
<div class="row">
<div class="col span-1-of-4">
Firm Size:
</div>
<div class="col span-2-of-4">
<?php
include('./server/connection.php');
$sqlSelect="SELECT * FROM tbl_firm_size_info ORDER By FirmSize_Id ASC";
$result = $conn -> query ($sqlSelect);
$result = $conn -> query ($sqlSelect);
echo "<select id='firm_size_select' name='FirmSize'>";
echo "<option value=''>select</option>";
echo "<option value='All'>All</option>";
while ($row = mysqli_fetch_array($result)) {
echo "<option value='$row[FirmSize_Value]'> $row[FirmSize_Value] </option>";
}
echo "</select>";
?>
</div>
</div>
</div>
<div class="col span-1-of-4">
<div class="row">
<div class="col span-1-of-3">
Tech Area:
</div>
<div class="col span-2-of-3">
<?php
include('./server/connection.php');
$sqlSelect="SELECT * FROM tbl_tech_area_info ORDER By TechAreaName ASC";
$result = $conn -> query ($sqlSelect);
$result = $conn -> query ($sqlSelect);
echo "<select id='tech_area_select' name='TechAreaName'>";
echo "<option value=''>select</option>";
echo "<option value='All'>All</option>";
while ($row = mysqli_fetch_array($result)) {
echo "<option value='$row[TechAreaName]'> $row[TechAreaName] </option>";
}
echo "</select>";
?>
</div>
</div>
</div>
<div class="col span-1-of-4">
<div class="row">
<div class="col span-1-of-4">
Start Date:
</div>
<div class="col span-3-of-4">
<?php
echo "<input type='date' id='start_date_search' name='startdate'>";
?>
</div>
</div>
</div>
<div class="col span-1-of-4">
<div class="row">
<div class="col span-1-of-4">
End Date:
</div>
<div class="col span-3-of-4">
<?php
echo "<input type='date' id='end_date_search' name='enddate'>";
?>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="row">
<div class="col span-3-of-4">
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="row">
<div class="col span-3-of-4">
<div class="row">
<div class="col span-1-of-3">
<label></label>
</div>
<div class="col span-2-of-3">
<input type="submit" name='search_submit' value="Search">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col span-1-of-3">
<label></label>
</div>
<div class="col span-2-of-3">
<div class="message_box" style="margin-left: 60px;">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div style="overflow-x:auto;">
<div id="filterRecords"></div>
</div>
</div>
</div>
</section>
Upvotes: 1
Views: 430
Reputation: 478
You are returning more than just the desired json in your search.php
try removing these lines:
echo $selectSQL;
echo "<p></p>";
echo "<p></p>";
for the json output in the frontend: you have 2 ajax calls in your js file, the first one puts the json into the div with the class message_box
for the results not changing: the results come from the 2nd ajax call, which does not send your form data.
try to change your js to this:
$(document).ready(function() {
var delay = 1000;
// Campaign Submit Info
$('[name="search_submit"]').click(function(e) {
e.preventDefault();
var lead_status = $('#filterformpost').find('#lead_status_select option:selected').val();
var campaign_status = $('#filterformpost').find('#campaign_status_select option:selected').val();
var company_name = $('#filterformpost').find('#company_name_select option:selected').val();
var tech_area = $('#filterformpost').find('#tech_area_select option:selected').val();
var firm_size = $('#filterformpost').find('#firm_size_select option:selected').val();
var firm_type = $('#filterformpost').find('#firm_type_select option:selected').val();
var country_name = $('#filterformpost').find('#country_name_select option:selected').val();
var state_name = $('#filterformpost').find('#state_name_select option:selected').val();
var start_date = $('#filterformpost').find('#start_date_search').val();
var end_date = $('#filterformpost').find('#end_date_search').val();
console.log(lead_status)
console.log(campaign_status)
console.log(company_name)
console.log(tech_area)
console.log(firm_size)
console.log(firm_type)
console.log(country_name)
console.log(state_name)
console.log(start_date)
console.log(end_date)
$.ajax({
type: "POST",
// url: "https://tribalyze.com/CRM/server/login.php",
url: "search.php",
data: {
"lead_status": lead_status,
"campaign_status": campaign_status,
"company_name": company_name,
"tech_area": tech_area,
"firm_size": firm_size,
"firm_type": firm_type,
"country_name": country_name,
"state_name": state_name,
"start_date": start_date,
"end_date": end_date
},
beforeSend: function() {
$('.message_box').html(
'<img src="tenor.gif" width="40" height="40"/>'
);
},
success: function(data) {
var result = $.parseJSON(data);
var string = '<table><thead><th>#</th><th>Lead ID</th><th>Name</th><th>Company</th><th>Location</th><th>Communication</th><th>Last Contact Date</th><th>Next Contact Date</th><th>Lead Status</th><th>Details</th></thead><tbody>';
/* from result create a string of data and append to the div */
var i = 1;
$.each(result, function(key, value) {
string += "<tr><td>" + i + "</td><td>" + value['Lead_Id'] + "</td><td>" + value['FirstName'] + ' ' + value['LastName'] + "</td><td>" + value['Company'] + "</td><td>" + value['State'] + '\n' + value['Country'] + "</td><td>" + value['Phone'] + '\n' + value['Email'] + "</td><td>" + value['LastContactDate'] + "</td><td>" + value['NextContactDate'] + "</td><td>" + value['LeadStatus'] + "</td><td><a href='#'>Click Here</a></td></tr>";
i = i + 1;
});
string += '</tbody></table>';
$("#filterRecords").html(string);
$('.message_box').html('');
}
});
});
});
Upvotes: 1