Develop Reference

Ajax based range search in jquery plugin "Datatables"

I´m using the jquery based table plugin "datatables" and I´m trying to implement an ajax based "range search" between two numbers ("start-date" and "end_date"). These entered values should be used for a query in the MySQL column "order_id".
On the server-sided script (fetch.php) I catch the both values like that.
if(isset($_POST['start_date'], $_POST['end_date'])) {
$query .= 'order_id BETWEEN "'.$_POST["start_date"].'" AND "'.$_POST["end_date"].'" AND ';
}
The problem is I can´t see any errors in the console, but after using the number range search no results are displayed.
The "category select menus" (category and category2) are working as expected.
I´ve setted up a test site, maybe you can help me to find the error: Testsite
This is my script:
$(document).ready(function () {
var category = "";
var category2 = "";
var start_date = "";
var end_date = "";
load_data();
function load_data(is_category, is_category2, start_date, end_date) {
console.log(is_category, is_category2, start_date, end_date);
var dataTable = $('#product_data').DataTable({
"processing": true,
"serverSide": true,
"order": [],
"ajax": {
url: "fetch.php",
type: "POST",
data: {
is_category: is_category,
is_category2: is_category2,
start_date: start_date,
end_date: end_date
},
}
});
}
// Number Range Search
$('#search').click(function () {
console.log($(this).attr('id'), start_date, end_date)
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
if (start_date != '' && end_date != '') {
$('#product_data').DataTable().destroy();
load_data('','',start_date, end_date);
}
else {
alert("Both Date is Required");
}
});
// Select Menu id="category"
$(document).on('change', '#category, #category2', function () {
//console.log($(this).attr('id'), category, category2)
if ($(this).attr('id') === "category") {
category = $(this).val();
} else if ($(this).attr('id') === "category2") {
category2 = $(this).val();
}
//
$('#product_data').DataTable().destroy();
if (category != '') {
load_data(category, category2);
}
else {
load_data();
}
});
// Select Menu id="category2"
$(document).on('change', '#category2', function () {
var category2 = $(this).val();
$('#product_data').DataTable().destroy();
if (category2 != '') {
load_data(category, category2);
}
else {
load_data();
}
});
});
fetch.php
//fetch.php
$connect = mysqli_connect("localhost", "xxxxx", "xxxxx", "xxxxx");
$columns = array('order_id', 'order_customer_name', 'order_item', 'order_value', 'order_date');
$query = "SELECT * FROM tbl_order WHERE ";
if(isset($_POST['start_date'], $_POST['end_date']))
{
$query .= 'order_id BETWEEN "'.$_POST["start_date"].'" AND "'.$_POST["end_date"].'" AND ';
}
if(isset($_POST["is_category"]))
{
$query .= "order_item = '".$_POST["is_category"]."' OR ";
}
if(isset($_POST["is_category2"]))
{
$query .= "order_customer_name = '".$_POST["is_category2"]."' AND ";
}
if(isset($_POST["search"]["value"]))
{
$query .= '
(order_id LIKE "%'.$_POST["search"]["value"].'%"
OR order_customer_name LIKE "%'.$_POST["search"]["value"].'%"
OR order_item LIKE "%'.$_POST["search"]["value"].'%"
OR order_value LIKE "%'.$_POST["search"]["value"].'%")
';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$columns[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].'
';
}
else
{
$query .= 'ORDER BY order_id DESC ';
}
$query1 = '';
if($_POST["length"] != -1)
{
$query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$number_filter_row = mysqli_num_rows(mysqli_query($connect, $query));
$result = mysqli_query($connect, $query . $query1);
$data = array();
while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$sub_array[] = $row["order_id"];
$sub_array[] = $row["order_customer_name"];
$sub_array[] = $row["order_item"];
$sub_array[] = $row["order_value"];
$sub_array[] = $row["order_date"];
$data[] = $sub_array;
}
function get_all_data($connect)
{
$query = "SELECT * FROM tbl_order";
$result = mysqli_query($connect, $query);
return mysqli_num_rows($result);
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => get_all_data($connect),
"recordsFiltered" => $number_filter_row,
"data" => $data
);
echo json_encode($output);

Thats because the is_category and is_category2 are returning 0. You have probably an if statement on your php like if $_POST[is_category] but you also need to do the same in case there is no category selected. Please share the full php to help you out
on your click function replace load_data(start_date, end_date); with load_data('','',start_date, end_date);

Submitted chat not posting and retrieving chat not working

I using the below php chat script to create chat section between two users on my web app. I am having a problem with the Ajax posting. When a user submits a chat it doesn't post or show in the chat window. I tried to inspect the error and this is the error message
Failed to load resource: the server responded with a status of 404 (Not Found)
The same error message is shown for submit.php and refresh.php.
Here's my code:
JS
//CHAT FUNCTION
var lastTimeID = 0;
$(document).ready(function() {
$('#btnSend').click( function() {
sendChatText();
$('#chatInput').val("");
});
startChat();
});
function startChat(){
setInterval( function() { getChatText(); }, 2000);
}
function getChatText() {
$.ajax({
type: "GET",
url: "refresh.php?lastTimeID=" + lastTimeID
}).done( function( data )
{
var jsonData = JSON.parse(data);
var jsonLength = jsonData.results.length;
var html = "";
for (var i = 0; i < jsonLength; i++) {
var result = jsonData.results[i];
html += '<div style="color:#' + result.color + '">(' + result.chattime + ') <b>' + result.usrname +'</b>: ' + result.chattext + '</div>';
lastTimeID = result.id;
}
$('#view_ajax').append(html);
});
}
function sendChatText(){
var chatInput = $('#chatInput').val();
if(chatInput != ""){
$.ajax({
type: "GET",
url: "submit.php?chattext=" + encodeURIComponent( chatInput )
});
}
}
chatClass.php
<?PHP
class chatClass
{
public static function getRestChatLines($id)
{
$arr = array();
$jsonData = '{"results":[';
$statement = $db->prepare( "SELECT id, usrname, color, chattext, chattime FROM chat WHERE id > ? and chattime >= DATE_SUB(NOW(), INTERVAL 1 HOUR)");
$statement->bind_param( 'i', $id);
$statement->execute();
$statement->bind_result( $id, $usrname, $color, $chattext, $chattime);
$line = new stdClass;
while ($statement->fetch()) {
$line->id = $id;
$line->usrname = $usrname;
$line->color = $color;
$line->chattext = $chattext;
$line->chattime = date('H:i:s', strtotime($chattime));
$arr[] = json_encode($line);
}
$statement->close();
$jsonData .= implode(",", $arr);
$jsonData .= ']}';
return $jsonData;
}
public static function setChatLines( $chattext, $usrname, $color) {
$statement = $db->prepare( "INSERT INTO chat( usrname, color, chattext) VALUES(?, ?, ?)");
$statement->bind_param( 'sss', $usrname, $color, $chattext);
$statement->execute();
$statement->close();
}
}
?>
submit.php
<?php
require_once( "chatClass.php" );
$chattext = htmlspecialchars( $_GET['chattext'] );
chatClass::setChatLines( $chattext, $_SESSION['usrname'], $_SESSION['color']);
?>
refresh.php
<?php
require_once( "chatClass.php" );
$id = intval( $_GET[ 'lastTimeID' ] );
$jsonData = chatClass::getRestChatLines( $id );
print $jsonData;
?>

show only one value from ajax return array

How can I display only one thing from the array. Now it shows the whole array but I only want to show the reason from the array. because the rest is't really important. I have added index.php to show what I do there. I would like that it only showed the reason from data.
test.js
$(document).ready(function() {
var date = "";
var begin = "";
var tijdsduur = "";
var aantal = "";
$('#datum').change(function() {
date = $("#datum").val();
console.log(date);
});
$('#beginTijd').change(function() {
begin = ($(this).val());
console.log(begin);
});
$('#Tijdsduur').change(function() {
tijdsduur = ($(this).val());
console.log(tijdsduur);
});
$('#aantalSloepen').change(function() {
aantal = ($(this).val());
console.log(aantal);
$.ajax({
type: "POST",
url: "index.php",
data: {
date: date,
begin: begin,
eind: tijdsduur,
quantity: aantal
},
success: function(data) {
$('#testajax').html(data);
console.log(data);
}
});
});
});
index.php
<?php
$date = "";
$begin = "";
$tijdsduur = "";
$aantal = "";
if (isset($_POST['date']) && isset($_POST['quantity'])) {
if (isset($_POST['date'])) {
print_r($_POST);
// echo "Yes, mail is set";
$date = $_POST['date'];
$begin = $_POST['begin'];
$tijdsduur = $_POST['eind'];
$aantal = $_POST['quantity'];
$eind = $begin + $tijdsduur;
$startTijd = "$date " . $begin;
$eindTijd = "$date " . $eind . ":00";
// echo $date . "<br>";
// echo "$startTijd". "<br>";
// echo "$eindTijd". "<br>";
// echo $aantal. "<br>";
$canmakereservation = "https://www.planyo.com/rest/?method=can_make_reservation&api_key=YOURKEY&resource_id=110556&start_time=$startTijd&end_time=$eindTijd&quantity=$aantal";
$cleancanmakereservation = preg_replace("/ /", "%20", $canmakereservation);
$reservationavailable = file_get_contents("$cleancanmakereservation");
$reservationAvailable = json_decode($reservationavailable, true);
// echo "$cleancanmakereservation";
echo json_encode($reservationAvailable);
}
else {
echo "No, mail is not set";
}
exit;
}
?>
console.log

Set the dataType: 'json' in ajax request like
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
type: "POST",
url: "indextest.php",
dataType: 'json',
data: {
date: '',
begin: '',
eind: '',
quantity: ''
},
success: function(data) {
console.log(data.date);
}
});
</script>
and in php
<?php
$data = array('date' => '10-10-2010','date2' => '10-10-2010');
echo json_encode($data);
?>

only show some data of array on ajax return

Is there a way to only show [reason] from the array and not everything inside data? somebody said that I need to use JSON but I tried contentType: "application/json" with stringify() but then success: function(data) returns my whole HTML instead of the array.
My question is how can I show only [reason] in $('#testajax').html(data); instead of everything inside data?
console.log
script.js
$(document).ready(function(){
var date = "";
var begin = "";
var tijdsduur = "";
var aantal = "";
$('#datum').change(function() {
date = $("#datum").val();
console.log(date);
});
$('#beginTijd').change(function(){
begin =( $(this).val() );
console.log(begin);
});
$('#Tijdsduur').change(function(){
tijdsduur =( $(this).val() );
console.log(tijdsduur);
});
$('#aantalSloepen').change(function() {
aantal = ($(this).val());
console.log(aantal);
$.ajax({
type: "POST",
url: "index.php",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data: {
date: date,
begin: begin,
eind: tijdsduur,
quantity: aantal
},
success: function(data) {
$('#testajax').html(data);
console.log(data);
}
});
});
});
UPDATED index.php
<?php
$date = "";
$begin = "";
$tijdsduur = "";
$aantal = "";
if (isset($_POST['date']) && isset($_POST['quantity'])) {
if (isset($_POST['date'])) {
print_r($_POST);
echo "Yes, mail is set";
$date = $_POST['date'];
$begin = $_POST['begin'];
$tijdsduur = $_POST['eind'];
$aantal = $_POST['quantity'];
$eind = $begin + $tijdsduur;
$startTijd = "$date " . $begin;
$eindTijd = "$date " . $eind . ":00";
echo $date . "<br>";
echo "$startTijd". "<br>";
echo "$eindTijd". "<br>";
echo $aantal. "<br>";
$canmakereservation = "https://www.planyo.com/rest/?method=can_make_reservation&api_key=YOURKEY&resource_id=110556&start_time=$startTijd&end_time=$eindTijd&quantity=$aantal";
$cleancanmakereservation = preg_replace("/ /", "%20", $canmakereservation);
$reservationavailable = file_get_contents("$cleancanmakereservation");
$reservationAvailable = json_decode($reservationavailable, true);
echo "$cleancanmakereservation";
echo json_encode($reservationAvailable);
}
else {
echo "No, mail is not set";
}
exit;
}
?>
console.log(date[0].reason);
console.log(date);

Return data in json_encode from your index.php
Then in your ajax success function just get it by
success: function(data) {
console.log(data.reason); //if its comming then add it to your html.
$('#testajax').html(data.reason);
}

Update function dialog jquery php

Im using fullcalendar. And when i click on an event it opens a dialog where i see the current event title/description/startdate/enddate. I have an update edit button so when i change one of the variables it wil change the variable in the database. But that doesnt work somehow.
agenda_view.php:
<html>
<head>
<link href='<?=base_url();?>testcalendar/css/fullcalendar.css' rel='stylesheet' />
<script src='<?=base_url();?>testcalendar/js/jquery-1.9.1.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/fullcalendar.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/fullcalendarextern.js'></script>
<script src='<?=base_url();?>testcalendar/js/nieuweafspraak.js'></script>
<link href="<?=base_url();?>testcalendar/assets/css/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" />
<style>
body {
margin-top: 40px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="dialogstatusevent" style="display:none" title="Mijn Afspraak">
<form>
<div class="control-group">
<div class="controls">
<label class="control-label">Titel:</label>
<input type="text" name="title" id="titlestatus" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Description:</label>
<input type="text" name="description" id="descstatus" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Van:</label>
<input type="text" name="datestatusstart" id="datestatusstart" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Tot:</label>
<input type="text" name="datestatusend" id="datestatusend" class="text ui-widget-content ui-corner-all">
</div>
</div>
</form>
</div>
<div id='calendar'></div>
</body>
</html>
Fullcalendarextern.js:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "../testcalendar/fullcalendar/events.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
},
eventClick: function(calEvent, jsEvent, view) {
$( "#dialogstatusevent" ).dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true,
closeOnEscape:true,
resizable:false,
show:'fade',
buttons: {
"Edit": function() {
var titlestatus = $("#titlestatus").val(),
descstatus = $('#descstatus').val(),
datestart = $('#datestatusstart').val(),
dateend = $('#datestatusend').val();
$.post('../testcalendar/db/processupdate.php',{
user_name: titlestatus, user_desc: descstatus, user_start: datestart, user_end: dateend, action:'joined'
}); var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);//End Post
$("#titlestatus").val('');
$("#descstatus").val('');
$("#datestatusstart").val('');
$("#datestatusend").val('');
$(this).dialog("close");
},
"Cancel": function() {
$("#titlestatus").val('');
$("#descstatus").val('');
$("#datestatusstart").val('');
$("#datestatusend").val('');
$(this).dialog("close");
}
}
}
);
$("#titlestatus").val(calEvent.title),
$("#descstatus").val(calEvent.description),
$("#datestatusstart").val(calEvent.end),
$("#datestatusend").val(calEvent.start),
$("#datestatusstart").datepicker({ dateFormat: 'yy-mm-dd' }),
$("#datestatusend").datepicker({ dateFormat: 'yy-mm-dd' });
$( "#dialogstatusevent" ).dialog( "open" );
},
eventMouseover: function(event, domEvent) {
var layer = '<div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100"><a><img src="../testcalendar/editbt.png" title="edit" width="14" id="edbut'+event.id+'" border="0" style="padding-right:3px; padding-top:2px;" /></a><a><img src="../testcalendar/delete.png" title="delete" width="14" id="delbut'+event.id+'" border="0" style="padding-right:5px; padding-top:2px;" /></a></div>';
$(this).append(layer);
$("#delbut"+event.id).hide();
$("#delbut"+event.id).fadeIn(300);
$("#delbut"+event.id).click(function() {
$.ajax({
url: '../testcalendar/fullcalendar/delete_events.php',
data: 'id=' + event.id ,
type: "POST",
});
var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);
});
$("#edbut"+event.id).hide();
$("#edbut"+event.id).fadeIn(300);
$("#edbut"+event.id).click(function() {
var title = prompt( '\n\nNew Event Title: ');
if(title){
$.ajax({
url: '../testcalendar/fullcalendar/update_title.php',
data: 'title='+ title+'&id='+ event.id ,
type: "POST",
});
var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);
}
});
},
eventMouseout: function(calEvent, domEvent) {
$("#events-layer").remove();
},
});
});
processupdate.php:
<?php
//include db configuration file
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end){
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
{
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined'){
user_joined($user_name, $user_desc, $user_start, $user_end);
}
}
/*if ( (isset($_POST["id"]) && strlen($_POST["id"]) >= 3 && strlen($_POST["id"]) <= 60) &&
(isset($_POST["name"]) && strlen($_POST["name"]) >= 3 && strlen($_POST["name"]) <= 50) &&
(isset($_POST["age"]) && strlen($_POST["age"]) >= 3 && strlen($_POST["age"]) <= 40) )
{ //check $_POST["name"] and $_POST["address"] and $_POST["city"] are not empty
$id = $_POST["id"];
$name = $_POST["name"];
$age = $_POST["age"];
$q = "INSERT INTO tbltest ( id, name, age) VALUES
('".$id."','".$name."','".$age."')";
mysql_query($q);
}*/
?>
connection.php:
<?php
$db_host = "localhost";
// Place the username for the MySQL database here
$db_username = "roots";
// Place the password for the MySQL database here
$db_pass = "root";
// Place the name for the MySQL database here
$db_name = "blackboks-calendar";
// Run the actual connection here
mysql_connect("$db_host","$db_username","$db_pass") or die ("could not connect to mysql");
mysql_select_db("$db_name") or die ("no database");
?>

Try if you are getting an alert ?
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end)
{
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
print_r($_POST);
?>
Pass id through POST as well , you need to send the required id value
$.post('../testcalendar/db/processupdate.php',
{ 'user_name' : titlestatus, 'user_desc': descstatus, 'user_start' : datestart, 'user_end' : dateend, 'action':'joined' ,'id' : id },
function(response){
alert(response);
});

It doesnt echo the id.
processupdate.php:
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end)
{
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
$id=$_POST['id'];
$user_name=$_POST['title'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
echo $id;
print_r($_POST); ?>

Like this? it doesnt output something in the alert either:(
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end){
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
{
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
} ?>