Comment utiliser le plugin jQuery Cookie pour créer un cookie qui se met à jour sans actualisation de la page?

Question

J'enregistre la classe/l'id/le texte sur lequel les utilisateurs cliquent pendant l'affichage d'une page. Quoi qu'il en soit, le code fonctionne ci-dessous (à l'exception de la valeur du cookie) ...

// JavaScript Document 
$(document).ready(function() { 

    $("div,input,a,select,option,button,img,td",this).click(function(){ 

     var clickedText = $(this).text().substring(0, 30); 

     // Get Element Values 
     var elementClass = $(this).attr('class');      
     var elementID = $(this).attr('id'); 

     // If element has no class then set var to "" 
     if (typeof elementClass !== 'undefined' && elementClass !== false) { 
      var elementClass = " " + elementClass; 
     } else { 
      var elementClass = ""; 
     } 

     // If element has no class then set var to "" 
     if (typeof elementID !== 'undefined' && elementID !== false) { 
      var elementID = "/" + elementID + " |"; 
     } else { 
      var elementID = ""; 
     } 

     // Create string 
     var clickedCookie = elementClass + elementID; 

     // Print output on delevopment 
     $("#show-cookies").append(clickedCookie + clickedText); 

     // Set Cookie 
     $.cookie('lastClicked', clickedText); 

    }); 
}); 

Je le plugin cookie jQuery, et utilisent actuellement sur d'autres scripts jQuery. Avec ce qui précède, un cookie est créé, mais sa valeur est quelque chose comme "0A%09%20%0A%20%20%20%20%20%0A%20%20%20%20%20%0A%20%20%20%20%20%0A%09". Y a-t-il quelque chose dans mon code qui créerait une valeur de cookie bizarre?

Il devrait être similaire à la sortie de $("#show-cookies").append(clickedCookie + clickedText); droite?

Cela produit la3down |/lc-btn |/live-chat-contain |/live-chat |/contentWide |/frame-wrap comme je le veux. Essentiellement, je dois obtenir la valeur du cookie pour lire comme ci-dessus. Quelqu'un at-il une expérience avec jQuery Cookie Plugin? https://github.com/carhartl/jquery-cookie/ Est-ce que je fais quelque chose de mal?

En fin de compte, j'ai besoin de mettre à jour la valeur de cookie chaque fois qu'un élément est cliqué ... Ce qui signifie que j'ai besoin de .append() la valeur du cookie (je pense?). Toujours la recherche de la commande _gaq.push ... Pointers sur ce serait un bonus trop lol ...

Answer 1

Parce que les cookies se déplacent en http requêtes qu'ils obtiennent url-encoded, d'où une valeur brute de cookie peut devenir différent de son original valeur. est un exemple ci-dessous:

Valeur originale:

dimanche, 09 Septembre 2012

valeur encodée:

dimanche% 2C + 09 + Septembre + 2012

Lorsque vous utilisez le plug-in de cookie jQuery, vous n'avez pas e vous inquiéter à ce sujet car il gère l'encodage/décodage pour vous. Toutefois, si vous essayez de lire la valeur du cookie côté serveur, vous devrez peut-être la décoder. Jetez un oeil à this SO Question pour plus d'informations.

Answer 2

Je vois où vous allez, mais $("div,input,a,select,option,button,img,td",this).click(function(){ lie tous les éléments que vous sélectionnez, y compris les éléments imbriqués. Il est donc probable que vous obtenez plusieurs valeurs chaque fois que les utilisateurs cliquent, pas sûr si c'est ce dont vous avez besoin.

Et pour votre question, les cookies sont encodés en url, vous pouvez obtenir le texte décodé via decodeURIComponent(clickedText). La prochaine fois si vous êtes perdu, utilisez console.log pour tracer le problème, beaucoup.

Answer 3

J'ai fait des bacs complets pour le problème ci-dessus. voici le lien de démo aussi ...

Démo:http://codebins.com/bin/4ldqp7i

HTML

<span> 
    <div id="show-cookie" class="cookie"> 
    </div> 
</span> 
<span> 
    <button id="btnread" class="btnclass"> 
    Read Cookie 
    </button> 
    <button id="btnreset" class="btnclass"> 
    Reset Cookie 
    </button> 
</span> 
<span> 
    <div class="divblock"> 
    Div-Text 
    </div> 
</span> 
<span> 
    <input type="text" class="input" size="15" value="InputValue" id="txtinput"/> 
</span> 
<span> 
    <a href="#" id="aLink" class="linkclass"> 
    My Text Link 
    </a> 
</span> 
<span> 
    <select id="select_tag" class="selclass"> 
    <option> 
     Option-1 
    </option> 
    <option> 
     Option-2 
    </option> 
    <option> 
     Option-3 
    </option> 
    <option> 
     Option-4 
    </option> 
    </select> 
</span> 
<span> 
    <img src="http://profile.ak.fbcdn.net/hprofile-ak-prn1/50305_151863314933391_163751676_q.jpg" id="img1" class="imgclass" /> 
</span> 
<span> 
    <table class="table" cellspacing="1" cellpadding="1"> 
    <tr> 
     <td class="cell1" id="td1"> 
     Cell-1 
     </td> 
     <td class="cell2" id="td2"> 
     Cell-2 
     </td> 
     <td class="cell3" id="td3"> 
     Cell-3 
     </td> 
    </tr> 
    </table> 
</span> 

<span> 
    <input type="button" id="btn1" class="btnclass" value="Submit" /> 
</span> 

jQuery

$(function() { 

    $("div,input,a,select,option,button,img,td").not(':button[id=btnread],:button[id=btnreset]').click(function() { 
     var clickedText = ""; 
     if (typeof $(this).attr('value') != 'undefined') { 
      clickedText = $(this).attr('value').trim().substring(0, 30); 
     } else { 

      clickedText = $(this).text().substring(0, 30); 

     } 

     var elementClass = " "; 
     var elementID = ""; 
     if (typeof $(this).attr('class') != 'undefined') { 
      if ($(this).attr('class').trim() != "") elementClass += $(this).attr('class').trim(); 
     } 

     if (typeof $(this).attr('id') != 'undefined') { 
      if ($(this).attr('id').trim() != "") elementID += "/" + $(this).attr('id').trim() + " |"; 
     } else { 
      elementClass += " |"; 
     } 
     // Create string 
     var clickedCookie = elementClass.toString() + elementID.toString(); 

     // Print output on delevopment 
     $("#show-cookie").append(clickedCookie + clickedText); 
     //Check Existing Cookie 
     var ckVal = ($.cookie('lastClicked')); 
     if (ckVal != 'undefined' || ckVal != null) { 
      ckVal += " " + clickedText; 
     } else { 
      ckVal = clickedText; 
     } 

     // Set Cookie 
     $.cookie('lastClicked', ckVal, { 
      expires: 2, 
      path: "/" 
     }); 
     $("#show-cookie").show(500); 
    }); 

    $("#btnread").click(function() { 
     var ck = ($.cookie('lastClicked')); 
     alert(ck); 
    }); 
    $("#btnreset").click(function() { 
     $.cookie('lastClicked', ""); 
     $("#show-cookie").html("").hide(400); 
    }); 
}); 

CSS:

span { 
    display:block; 
    margin-top:5px; 
} 
.divblock { 
    background:#94dca8; 
    color:#333; 
    width:300px; 
    text-align:center; 
} 
.input { 
    border:1px solid #335599; 
    color:#335599; 
} 
.selclass { 
    border:1px solid #1122a9; 
    color:#1122a9; 
    background:#94dca8; 
} 
.imgclass { 
    border:1px solid #1122a9; 
} 
.table { 
    width:50%; 
    border:1px solid #2255dc; 
} 
td { 
    text-align:center; 
} 
.cell1 { 
    background:#caa8a9; 
} 
.cell2 { 
    background:#a8b8ed; 
} 
.cell3 { 
    background:#a8bfac; 
} 
.btnclass { 
    border:1px solid #333; 
    background:#ada5a4; 
} 
.btnclass:hover{ 
    background:#cdcaca; 
} 
.cookie{ 
    background:#fda5b7; 
    border:1px solid #fa6289; 
    display:none; 
} 

Démo:http://codebins.com/bin/4ldqp7i