on click make a server request to change php variable - php

Question

I thought I solved the issue in a preceding question but it is sill not working. I want to change the php variables ($start and $end called by var b1 and var b2) if the admin clicks on button. After this the new code should be availble for every visitor, so it should make a server request. Here is my updated code:
<?php
if(date('w') == 4){ // day 2 = Tuesday
$start = strtotime('9:30');
$end = strtotime('12:30');
$timenow = date('U');
if ($timenow >= $start && $timenow <= $end) {
echo'<div id="iar_eu">';
echo quick_chat(200, 'default', 1, 'left', 0, 0, 1, 1, 1);
echo'</div>';
} }
?>
</div>
<?php if ( is_user_logged_in() ) { ?>
<input type="submit" value="Start Chat" id="start_chat" style="position: absolute; top: 30px; left: 10px;" />
<?php
} ?>
<script type="text/javascript">
if(jQuery('#start_chat').data('clicked')) {
// change var b1 and b2
$.ajax({
type: "POST",
url: "/web/htdocs/www.fattorefamiglia.com/home/wp-content/themes/child_care_creative/chat.php",
dataType: 'json',
data: { b1: "1:00", b2: "23:00" }
}).done(function(data) {
b1 = data.b1;
b2 = data.b2;
});}
else {
$.ajax({
type: "POST",
url: "/web/htdocs/www.fattorefamiglia.com/home/wp-content/themes/child_care_creative/chat.php",
dataType: 'json',
data: { b1: "9:00", b2: "18:00" }
}).done(function(data) {
b1 = data.b1;
b2 = data.b2;
});}
jQuery('#start_chat').click(function(){
$(this).data('clicked', true);
var b1 = '<?php echo $start; ?>';
var b2 = '<?php echo $end; ?>';
});
</script>
chat.php:
<?php
// variables
if (!empty($_POST)) {
$data['b1'] = $_POST['b1'];
$data['b2'] = $_POST['b2'];
}
// to not lose them
$_SESSION['chat'] = $data;
// to keep it compatible with your old code
$start = $data['b1'];
$end = $data['b2'];
// send the JSON formatted output
echo json_encode($data);
?>
Nothing happens when I click the button. What am I doing wrong?

Answer 1

There is a problem with the way jQuery is being used. All jQuery references should be made in functions that are only called after the page is ready, or in a wrapper that makes sure the page is ready.
For example, this code needs to be wrapped:
jQuery('#start_chat').click(function(){
$(this).data('clicked', true);
var b1 = '<?php echo $start; ?>';
var b2 = '<?php echo $end; ?>';
});
Like this:
jQuery(function(){
jQuery('#start_chat').click(function(){
$(this).data('clicked', true);
var b1 = '<?php echo $start; ?>'
var b2 = '<?php echo $end; ?>';
});
});
Setting the .data() isn't going to do you any good here. You're setting some info to the actual var instead of the element because of the way that method works.
But there's another problem with the way you're deciding to make AJAX requests, simply putting an if statement there won't make it happen. You would need a listener to make an action actually happen. But rather than get into that why don't you just simplify and do it like this?
<script type="text/javascript">
var b1 = '<?= $start ?>', b2 = '<?= $end ?>';
$(function(){
$('#start_chat').click(function(){
$.post('/web/htdocs/www.fattorefamiglia.com/home/wp-content/themes/child_care_creative/chat.php', { b1: '1:00', b2: '23:00' },
function(data) {
b1 = data.b1;
b2 = data.b2;
}, 'json');
});
});
</script>

Answer 2

This line
if(jQuery('#start_chat').data('clicked')) {
will never be true since .data('clicked') is not set until #start_chat is clicked which always will happen after the check has been made.
You need to rethink your process of what you want to accomplish.