Comment stocker java toggle comme valeur en sql?

Question

J'ai un shoutbox en superposition sur mon site (il est toujours affiché) que vous pouvez réduire et agrandir en appuyant sur un bouton (bascule).

Le problème est que lorsque je vais sur différentes pages de mon site Web, la boîte de dialogue shoutbox est toujours ouverte. C'est énervant. Je voudrais stocker l'information de savoir si l'utilisateur a minimisé la shoutbox ou pas (par exemple dans un sql db), de sorte que l'état de la shoutbox ne retourne pas toujours.

Toute aide serait appréciée !!

Ci-dessous le code de mon shoutbox:

load_data = {'fetch':1}; 
$.post('<?php echo THEMEPATH; ?>/shout.php', load_data, function(data) { 
    $('.message_box').html(data); 
    var scrolltoh = $('.message_box')[0].scrollHeight; 
    $('.message_box').scrollTop(scrolltoh); 
}); 

//method to trigger when user hits enter key 
$("#shout_message").keypress(function(evt) { 
    if(evt.which == 13) { 
      var iusername = "<?php echo $login; ?>"; 
      var imessage = $('#shout_message').val(); 
      post_data = {'username':iusername, 'message':imessage}; 

      //send data to "shout.php" using jQuery $.post() 
      $.post('<?php echo THEMEPATH; ?>/shout.php', post_data, function(data) { 

       //append data into messagebox with jQuery fade effect! 
       $(data).hide().appendTo('.message_box').fadeIn(); 

       //keep scrolled to bottom of chat! 
       var scrolltoh = $('.message_box')[0].scrollHeight; 
       $('.message_box').scrollTop(scrolltoh); 

       //reset value of message box 
       $('#shout_message').val(''); 

      }).fail(function(err) { 

      //alert HTTP server error 
      alert(err.statusText); 
      }); 
     } 
}); 

//toggle hide/show shout box 
$(".close_btnn").click(function (e) { 
    //get CSS display state of .toggle_chat element 
    var toggleState = $('.toggle_chat').css('display'); 

    //toggle show/hide chat box 
    $('.toggle_chat').slideToggle(); 

    //use toggleState var to change close/open icon image 
    if(toggleState == 'block') 
    { 
     $(".header div").attr('class', 'open_btnn'); 
    }else{ 
     $(".header div").attr('class', 'close_btnn'); 
    } 


}); 

Answer 1

Alors, que vous voulez faire est d'utiliser des cookies en PHP ainsi, par exemple, essayez ceci:

shout.php (à la fin du fichier avant que le contenu est retourné)

setcookie("COOKIENAMEHERE", $output_message, time() + (86400 * 30), '/'); // 86400 = 1 day, therefore 30 days 

ensuite pour récupérer le cookie sur vos pages, vous pouvez définir le contenu de la page HTML (s'il vous plaît fournir votre HTML/PHP je peux l'adapter à votre scénario):

<?php 
$cookie_name = 'COOKIENAMEHERE'; 
if(isset($_COOKIE[$cookie_name])) { ?> 
    <div class="message_box"> 
    <?php echo $_COOKIE[$cookie_name]; ?> 
    </div> 
<?php } ?> 

Afin de rendre la boîte de cri caché par défaut mis dans votre fichier css:

.message_box { 
    display: none; 
} 

Aussi, si/lorsque vous souhaitez mettre à jour ou supprimer le cookie, vous faites la même chose que la création mettre à jour et supprimer:

$cookie_name = 'COOKIENAMEHERE'; 
unset($_COOKIE[$cookie_name]); //removes the cookie from memory 
// empty value and expiration one hour before just to be sure 
$result = setcookie($cookie_name, '', time() - 3600); 

EDIT: pour votre code

... 

elseif($_POST["fetch"]==1) 
{ 
    $results = mysqli_query($sql_con,"SELECT user, message, date_time FROM (select * from table ORDER BY id DESC LIMIT 10) table ORDER BY table.id ASC"); 
    while($row = mysqli_fetch_array($results)) 
    { 
     $output_message = $output_message.'<div class="shout_msg"><time>'.$row["date_time"].'</time><span class="username">'.$row["user"].'</span> <span class="message">'.$row["message"].'</span></div>'; 
    } 
    setcookie("shout_msg", $output_message, time() + (86400 * 30), '/'); // 86400 = 1 day, therefore 30 days 
    echo $output_message; 
} 
else 
{ 
    header('HTTP/1.1 500 Are you kiddin me?'); 
    exit(); 
} 
} 

Dans votre fichier index.php:

<div class="header">Shout Box <div class="close_btn">&nbsp;</div></div> 
    <div class="toggle_chat"> 
    <?php 
$cookie_name = 'shout_msg'; 
if(isset($_COOKIE[$cookie_name])) { ?> 
    <div class="message_box"> 
    <?php echo $_COOKIE[$cookie_name]; ?> 
    </div> 
<?php } ?> 
    <div class="user_info"> 

    <input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" /> 
    </div> 
    </div> 
</div> 

À moins que je lis mal vous Fading .message_box dans la ajouter à votre css:

.message_box { 
    display: none; 
} 

PRO TIP: Mettez vos scripts juste avant la balise de fermeture du corps pour accélérer votre site web, en l'ayant dans la tête le fait charger plus lentement.

Answer 2

Ceci est le HTML/PHP de la page avec la shoutbox;

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
<!-- 
.shout_box { 
background: #000000; 
width: 260px; 
overflow: hidden; 
position: fixed; 
bottom: 0; 
right: 10px; 
z-index:9; 
} 
.shout_box .header .close_btn { 
background: url(close_btn.gif) no-repeat 0px 0px; 
float: right; 
width: 15px; 
height: 15px; 
} 
.shout_box .header .close_btn:hover { 
background: url(close_btn.gif) no-repeat 0px -16px; 
} 

.shout_box .header .open_btn { 
background: url(close_btn.gif) no-repeat 0px -32px; 
float: right; 
width: 15px; 
height: 15px; 
} 
.shout_box .header .open_btn:hover { 
background: url(close_btn.gif) no-repeat 0px -48px; 
} 
.shout_box .header{ 
padding: 5px 3px 5px 5px; 
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif; 
font-weight: bold; 
color:#fff; 
border: 1px solid rgba(0, 39, 121, .76); 
border-bottom:none; 
cursor: pointer; 
} 
.shout_box .header:hover{ 
background-color: #000000; 
} 
.shout_box .message_box { 
background: #FFFFFF; 
height: 200px; 
overflow:auto; 
border: 1px solid #CCC; 
} 
.shout_msg{ 
margin-bottom: 10px; 
display: block; 
border-bottom: 1px solid #F3F3F3; 
padding: 0px 5px 5px 5px; 
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif; 
color:#7C7C7C; 
} 
.message_box:last-child { 
border-bottom:none; 
} 
time{ 
    font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif; 
font-weight: normal; 
float:right; 
color: #D5D5D5; 
} 
.shout_msg .username{ 
margin-bottom: 10px; 
margin-top: 10px; 
} 
.user_info input { 
width: 98%; 
height: 25px; 
border: 1px solid #CCC; 
border-top: none; 
padding: 3px 0px 0px 3px; 
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif; 
} 
.shout_msg .username{ 
font-weight: bold; 
display: block; 
} 
--> 
</style> 

<script type="text/javascript" src="shoutbox/jquery-1.9.0.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

// load messages every 1000 milliseconds from server. 
load_data = {'fetch':1}; 
//window.setInterval(function(){ 
$.post('shoutbox/shout.php', load_data, function(data) { 
    $('.message_box').html(data); 
    var scrolltoh = $('.message_box')[0].scrollHeight; 
    $('.message_box').scrollTop(scrolltoh); 
}); 
//}, 1000); 

//method to trigger when user hits enter key 
$("#shout_message").keypress(function(evt) { 
    if(evt.which == 13) { 
      var iusername = "java"; 
      var imessage = $('#shout_message').val(); 
      post_data = {'username':iusername, 'message':imessage}; 

      //send data to "shout.php" using jQuery $.post() 
      $.post('shoutbox/shout.php', post_data, function(data) { 

       //append data into messagebox with jQuery fade effect! 
       $(data).hide().appendTo('.message_box').fadeIn(); 

       //keep scrolled to bottom of chat! 
       var scrolltoh = $('.message_box')[0].scrollHeight; 
       $('.message_box').scrollTop(scrolltoh); 

       //reset value of message box 
       $('#shout_message').val(''); 

      }).fail(function(err) { 

      //alert HTTP server error 
      alert(err.statusText); 
      }); 
     } 
}); 

//toggle hide/show shout box 
$(".close_btn").click(function (e) { 
    //get CSS display state of .toggle_chat element 
    var toggleState = $('.toggle_chat').css('display'); 

    //toggle show/hide chat box 
    $('.toggle_chat').slideToggle(); 

    //use toggleState var to change close/open icon image 
    if(toggleState == 'block') 
    { 
     $(".header div").attr('class', 'open_btn'); 
    }else{ 
     $(".header div").attr('class', 'close_btn'); 
    } 


}); 
}); 

</script> 
</head> 

<body> 
<div class="shout_box"> 
<div class="header">Shout Box <div class="close_btn">&nbsp;</div></div> 
    <div class="toggle_chat"> 
    <div class="message_box"> 
    </div> 
    <div class="user_info"> 

    <input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" /> 
    </div> 
    </div> 
</div> 
</body> 
</html> 

et c'est le php de mon shout.php:

if($_POST) 
{ 
//connect to mysql db 
$sql_con = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database'); 

//check if its an ajax request, exit if not 
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') { 
    die(); 
} 

if(isset($_POST["message"]) && strlen($_POST["message"])>0) 
{ 
    //sanitize user name and message received from chat box 
    //You can replace username with registerd username, if only registered users are allowed. 
    $message = filter_var(trim($_POST["message"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH); 
    $date = date("Y-m-d H:i"); 
    $username = filter_var(trim($_POST["username"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH); 
    //insert new message in db 
    if(mysqli_query($sql_con,"INSERT INTO table(user, message, date_time) value('$username','$message','$date')")) 
    { 
     //$msg_time = date('h:i Y-m-d',time()); // current time 
     $msg_time = date("Y-m-d H:i"); 
     echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$username.'</span><span class="message">'.$message.'</span></div>'; 
    } 


} 
elseif($_POST["fetch"]==1) 
{ 
    $results = mysqli_query($sql_con,"SELECT user, message, date_time FROM (select * from table ORDER BY id DESC LIMIT 10) table ORDER BY table.id ASC"); 
    while($row = mysqli_fetch_array($results)) 
    { 

     echo '<div class="shout_msg"><time>'.$row["date_time"].'</time><span class="username">'.$row["user"].'</span> <span class="message">'.$row["message"].'</span></div>'; 
    } 
} 
else 
{ 
    header('HTTP/1.1 500 Are you kiddin me?'); 
    exit(); 
} 
}