• ベストアンサー
  • すぐに回答を!

jQueryでcookie 追加書き込み

jQueryでcookieに追加書き込みをしたいのですが、どうやってもわかりません。 ここからクッキを追加書き込みを実現したいのですが、 どうやっても頭が回らず困って、混乱気味になっています。 誰か助けてください! おねがいいたします! <!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> //入力された値をCookieに保持する function cookie(){ $.cookie("cookie", $("#cookieValue").val()); $("#result").html($.cookie("cookie")); } //現在のCookieの値を出力 $(function() { $("#result").html($.cookie("cookie")); }); </script> <title></title> </head> <body> <input id="cookieValue" type="input"> <a href="index.html" onclick="cookie()">クッキー</a> <p><span id="result"></span></p> </body> </html>

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数425
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.1
  • utun01
  • ベストアンサー率40% (110/270)

テストはしていないので、フィーリングでのお答えになりますが、 "cookie"のキーが同じだからではないでしょうか。 ブラウザによって同じキーの場合、先に登録された方を優先する場合と後に登録された方を優先する場合があった気がします。 上書きされる訳ではなかったと思うので、 前者であった場合、そのソースでは見た目上cookieが変わっていないように見えるのではないでしょうか。 ちなみに、Firefoxのプラグインに現在設定されているクッキーを簡単に見れるものがあるので、その辺でチェックされると動作が分かりやすいかと思います。 http://mozilla-remix.seesaa.net/article/145244923.html

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • jquery.cookie.jsの使い方が分かりません。

    jquery.cookie.jsの使い方が分かりません。 Web経験浅く、質問の仕方や内容に不足や不備があるかもしれませんが、ご容赦ください。 入力フォームでcookie.jsを使いたいのですが、どのようにスクリプトを書けばよいのか分かりません。 単純に、入力フォームに入力したデータを保存したいだけなのですが・・・。 いろいろ調べてみたいのですが、分かりやすいソースサンプルを見つけることが出来ず、困っております。 どなたか教えて下さいませんでしょうか? ちなみに、ソースサンプルは以下の通りです。 ------------------------------------------------------------------ <html> <head> <title>テスト</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> ????????????ここのスクリプトをどうしたらよいのか分かりません。 </script> </head> <body onload="getck()"> <form name="input">   性別:<input type="radio" name="sex" value="男性" />男性/      <input type="radio" name="sex" value="女性" />女性<br />   名前:<input type="text" name="name" /><br />   住所:<input type="text" name="add" /><br />   <input type="button" value="記録" onClick="setck()" /><br />   <input type="button" value="呼び出し" onClick="getck()" /><br /> </form> </body> </html> ------------------------------------------------------------------ 上記ソースではボタンクリックで呼び出しとしていますが、実際には、入力したフォームのページ(入力ページ1)とは別のフォームページ(入力ページ2)で、入力データを再利用する作りとなります。 要するに、入力ページ2を呼び出すと、入力ページ1で入力したデータが入力されている、という状態を求めております。 なので、<body onload="getck()">としてあります。 (テストも兼ねたサンプルソースなので、1ファイルで全てチェックできるようにしています) 説明が分かりにくいところもあるかと存じますが、何とぞご教示いただけますよう、宜しくお願い申し上げます。

    • ベストアンサー
    • AJAX
  • jQueryで質問です。

    jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。

  • jQuery-datepicker on IE8

    以下のような非常にシンプルなHTMLでjqueryのdatepicker()を使用しています。 他のブラウザでは問題なく動作するのですが、IE8でのみ、カレンダーは表示されるものの、 日付を選択してもカレンダーが閉じず、テキストボックスにも選択日付が設定されません。 どなたか解決方法をご存知の方、教えてください。 以下にHTMLソースと、テスト用に設置してあるURLを記載します。 よろしくお願いします。 http://apps.spiral-software.com/test/datepicker.html <html> <head> <title>datepicker</title> <link rel="stylesheet" href="jquery-ui.css" type="text/css" /> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.11.min.js"></script> <script type="text/javascript"> $(function () { $("#incidentDateId").datepicker({ dateFormat: "yy/mm/dd" }); }); </script> </head> <body> <form> <input id="incidentDateId" name="incidentDateName" type="text" value="" /> </form> </body> </html>

  • jqueryを使った共通html埋め込みができない

    各ページに共通なヘッダ部分を、jqueryを使って読み込みたいと以下のコードを書いたのですが、なぜか読み込まれません。 test.htmlとheader.htmlは同階層(トップレベル)にあって、jsディレクトリにjquery-1.7.1.min.jsを置いています。 どうか知恵をお貸しください。 よろしくお願いします。 test.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> <!–- $(function(){ $("#header").load("header.html"); }); // -–> </script> <title>test</title> </head> <body> <div id="header"></div> main </body> </html> header.html <div id="header">header</div>

  • jQueryで追加した要素がマウスホバーに反応しない

    jQueryを使って、ボタンを押すと要素を追加しています。 後から追加された要素はマウスホバーなどが有効にならないのですが、 対象方法などあるでしょうか。 下記のようなソースで質問の状態になります。 よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ jQuery(".edit").hover( function () { jQuery(this).css("background","yellow"); }, function () { jQuery(this).css("background","none"); } ); jQuery(".insert").click(function () { var html = "<div class='edit'><p>add-text</p></div>"; jQuery("#sortable .edit:first").before(html); }); }); // --> </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div><!-- id="sortable" --> </body> </html>

  • Jquery と JqueryUIについて

    現在、Jquery と JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。 やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。 現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(1.4.4でもだめでした) JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。 また、補足ですが、これが上手くいけば、script内の show メソッドのかわりに toggleを使いたいと考えています。 上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • jQueryについて質問です。

    jQueryについて質問です。 複数のプラグインを一つのページに組み込み同時に使いたいのですが、 それぞれが干渉しているのかどれか一つしか使えません。 http://solidstate.jp/Navigation/treeMenu/script_54.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html http://solidstate.jp/Navigation/houseOfCake/script_172.html こちらに紹介されている記事を参考に <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.navigmenu.js"></script> <script type="text/javascript"> $(function(){ $('#menu').navigmenu(); }); </script> <script type="text/javascript" src="accordian.pack.js"></script> <script type="text/javascript"> window.onload = function() { new Accordian('basic-accordian',5,'header_highlight'); } </script> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#filetree").treeview({//ターゲットとなる要素に付加するID animated: "fast", //アニメーション設定(削除するとアニメ無し) collapsed: true, //開閉設定(削除するとロード時にメニューを全開) unique: true, //動作設定(削除すると自動的に閉じなくなる) persist: "cookie", //Cookie }); }); </script> このような記述を行いました。 ですが、動くのはひとつだけです。 これらを同時に動かすにはどうすればよいでしょうか? 優先順位は上からです。

  • jQuery UIのdraggableについて

    こちらでは初めて質問させていただきます。 よろしくお願いします。 現在、jQuery UI の draggable を使用してWebブラウザ上での ドラッグ&ドロップを実装中なのですが、 期待通りに動作させることが出来ません。 <script></script> …… (1) <html> <head> <script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.draggable.js"></script> <style> #a { height:100px; width:300px; overflow:scroll; border:solid 1px Black; } #b { width:60px; height:40px; background:lime; position:absolute; top:10px; left:50px } #c { width:60px; height:40px; background:lime; position:absolute; top:60px; left:50px } </style> <script type="text/javascript"> $j = jQuery.noConflict(); $j(function($) { $('#b').draggable(); }); $j(function($) { $('#c').draggable(); }); </script> </head> <body> <div id="a"> <span id="b">Drag Element1</span> <span id="c">Drag Element2</span> </div> </body> </html> ドラッグ対象は複数存在するため、ドラッグ対象を<div>エリア内で スクロール(必須です)させています。 ドラッグ対象を<div>エリア外にドラッグしたいのですが、 <div>エリア内しかドラッグできません。 ((1)の記述がないと、ドラッグ対象が<div>エリア内でスクロール しませんでした。???) どなたか、よきアドバイスをお願いします。

  • JQueryで$("dt span")クリック動作

    JQueryで$("dt span")をクリックしたときに 隣接するddタグの部分を表示させるには以下の記述を どのように修正すればよいのでしょうか? <html> <head> <style type="text/css"> dl { margin-bottom: 20px; } dd { display: none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("dt span").click(function(){ $("+dd",this).slideToggle(); }); }); </script> </head> <body> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> </body> </html> ご存じの方がおられましたらご回答をよろしくお願いします。

  • jqueryにて

    こちらではお初にお世話になります。 よろしくおねがいします! さて、jqueryを用いてScrollFollowを実装中なのですが、 正常に動作させることが出来ません。 ソースは <script type="text/javascript" src="./jslib/ui.core.js"></script> <script type="text/javascript" src="./jslib/jquery-1.2.6.js"></script> <script type="text/javascript" src="./jslib/jquery.scrollfollow.js"></script> <script type="text/javascript" src="./jslib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./jslib/jquery.cookie.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('test').scrollFollow({ }); }); </script> をヘッド部分に、 <div id="test"> コンテンツ </div> をBODYに記述しています。 動作せずにFirefoxのエラーコンソールで確認したところ エラー: jQuery is not defined ソースファイル: (省略)update/jslib/ui.core.js 行: 238 エラー: $("test").scrollFollow is not a function ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/ 行: 13 と表示されました。jsファイルの生存は確認できており、 その系統のミスではないと思うのですが。。。 どなたかアドバイスをお願いします!