最初のダイアログを開き続けたまま別ページに移動したい

http://low-cost-travel.lk6.co/test109.php

■test109.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <title>jquery ipop_multi.jsのサンプル</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript" src="./test109.js"></script> 

    <script type="text/javascript"> 
	$(function(){ 
		/*検索ダイアログの表示イベントのフック*/ 
		$('#open1').click(function() { 
			/*検索ダイアログ表示*/ 
			$("#mado1").ipop(); 
		} ); 

		/*画面遷移の直前にダイアログの状態をcookieに保存*/ 
		$(window).on("beforeunload",function(){
			/*ダイアログは見えてる？*/ 
			if($('#mado1').css('display') == 'block') { 
				/*表示中状態を保存*/ 
				setCookie("OPEN","OPEN"); 
			} 
		    	else
			{ 
				/*消えているので削除*/ 
				setCookie("OPEN",""); 
			} 
		});

		$(function(){
			/*cookieに保存した状態を確認*/ 
			if(getCookie("OPEN")){ 
				/*正常に取得できたならダイアログ表示*/ 
				$("#mado1").ipop(); 
			} 
		});

		/*cookie の取得と中身の有無を確認*/
		$(function getCookie(keyname) {
			return ($.cookie(keyname)!="undefined");
		});

		/*cookie の保存処理*/
		$(function setCookie( keyname, val ) {
			
			/*値が指定されていたら保存、空文字列なら削除*/
			if( state != "" ){
				/*cookieに保存*/
				$.cookie(keyname, val)
			}
			else{
				/*cookieのクリア*/
				$.cookie(keyname, "", {expires: -1});
			}
		});
	}); 
    </script> 
    <style type="text/css"> 
        .ipop { 
            padding: 0; 
            background-color: #fed; 
            width: 300px; 
            height: 200px; 
            border: 1px solid #aaa; 
             
            /* この３行は必須 */ 
            position: absolute; 
            display: none; 
            z-index: 9999; 
        } 
        .ipop_search { 
            padding: 0; 
            background-color: #fed; 
            width: 300px; 
            height: 400px; 
            border: 1px solid #aaa; 
             
            /* この３行は必須 */ 
            position: absolute; 
            display: none; 
            z-index: 9999; 
        } 
        .ipop_title { 
            background-color: #fdc; 
            cursor: move; 
        } 

        .ipop_close { 
            cursor: pointer; 
            float: right; 
        } 
    </style> 
    <title>ポップアップウインドウテスト</title> 
</head> 
<body> 
    <a href=./test109.php?id=1>テスト０</a><br> 
    <?php 
        if ($_GET["id"] == "1") 
        { 
            echo "テスト１<br>"; 
        } 
    ?> 
    <input type='button' value='検 索' id='open1'> 
     
    <div class="ipop_search" id="mado1"> 
        <div class="ipop_close">×</div> 
        <div class="ipop_title">検索</div> 
                <?php 
            echo "<form action='./test109.php' method='post'>"; 
                echo"<input type='text' name='keyword' style='width:240px;'><input type='submit' value='検索'>"; 
            echo "<form>"; 
     
            $keyword = $_POST['keyword']; 
                     
            echo '<div id="kwd">'.$keyword.'</div>';  
     
        ?> 
    </div> 


</body>

</html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ■test109.js

(function($) {
$.fn.ipop = function() {

    var $this = $(this);

    var wx, wy;        // ウインドウの左上座標
    var mx, my;        // マウスの座標

    // ウインドウの座標を画面中央にする。
    wx = $(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) / 2;
    if (wx < 0) wx = 0;
    wy = $(document).scrollTop() + ($(window).height() - $(this).outerHeight()) / 2;
    if (wy < 0) wy = 0;

    // ポップアップウインドウを表示する。
    $this.css('top', wy).css('left', wx).fadeIn(100);

    // 閉じるボタンを押したとき
    $this.find('.ipop_close').click(function(){ $this.fadeOut(100);});

    // タイトルバーをドラッグしたとき
    $this.find('.ipop_title').mousedown(function(e) {
        mx = e.pageX;
        my = e.pageY;
        $(document).mousemove(mouseMove).mouseup(mouseUp);
        return false;
    });
    function mouseMove(e) {
        wx += e.pageX - mx;
        wy += e.pageY - my;
        $this.css('top', wy).css('left', wx);
        mx = e.pageX;
        my = e.pageY;
        return false;
    }
    function mouseUp() {
        $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
    }
}

})(jQuery);

ShunsukeIzuiのおかげでエラーが出ていた所を解決しましたが、新たに
また別のエラーが発生しました。

『if(getCookie("OPEN")){』の行で以下のエラーが発生しております。
Uncaught ReferenceError: getCookie is not defined

バージョンに問題があるのかとかcookieの定義の仕方に問題があるのか
調べてみましたが解決策が上手く見つかりません。
大変恐縮ですが、また皆様のお力をお借りしたくご教示頂くようお願い
申し上げます。

行動規範の内容に同意します

回答1件

lang
1$(window).on('beforeunload', function(){} function{});

このような形になっているのが原因です。
遷移直後に動作するようにしたいのなら、以下のようにすべきです。

lang
1$(window).on("beforeunload", function(){
2    /*ダイアログは見えてる？*/ 
3    if($('#mado1').css('display') == 'block') { 
4        /*表示中状態を保存*/ 
5        setCookie("OPEN","OPEN"); 
6    } 
7    else
8    { 
9        /*消えているので削除*/ 
10        setCookie("OPEN",""); 
11    } 
12});
13$(function(){
14    /*cookieに保存した状態を確認*/ 
15    if(getCookie("OPEN")){ 
16        /*正常に取得できたならダイアログ表示*/ 
17        $("#mado1").ipop(); 
18    } 
19});

投稿2015/06/11 00:32

orange0190

総合スコア1698

退会済みユーザー

2015/06/11 14:25

$(window).on("beforeunload", function(){ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ エラー：Uncaught TypeError: $(...).on is not a function 前回のエラーは消えましたが、今度は別の場所でエラーがでました。探しておりますが今現時点で解決に繋がるものが見つかっておりません。大変恐縮ですが、再度ご教示頂けないでしょうか？？

orange0190

2015/06/11 23:55

修正して、別のエラーが出たときのコードを提示していただけないでしょうか。

orange0190

2015/06/11 23:58

jQueryのバージョンが古いです。on()を使いたい場合には、1,7以上のバージョンが必要です。

退会済みユーザー

2015/06/12 11:41

/*cookie の取得と中身の有無を確認*/ $(function getCookie(keyname) { return ($.cookie(keyname)!="undefined"); }); 今度はこの行で以下のエラーが発生しております。 Uncaught ReferenceError: getCookie is not defined どうやらgetcookieの定義がされていないらしいのですがどうすれば解決できますでしょうか。

退会済みユーザー

2015/06/12 11:43

間違えました。この行のifの文です。大変失礼いたしました。 $(function(){ /*cookieに保存した状態を確認*/ if(getCookie("OPEN")){ /*正常に取得できたならダイアログ表示*/ $("#mado1").ipop(); }

退会済みユーザー

2015/06/12 11:47

if(getCookie("OPEN")){ 今度はこの行で以下のエラーが発生しております。 Uncaught ReferenceError: getCookie is not defined

orange0190

2015/06/12 23:34

ご自身の1つ前の質問で作ったコードを見ましたが、setCookie()、getCookie()はご自身で作成しなければなりません。私が見たコードの必要な部分を以下に写しますので、よく理解してから使ってください。以下のプラグインが必要です。 <script type="text/javascript" src="jquery.cookie.js"></script> /*cookie の取得と中身の有無を確認*/ function getCookie(keyname) { return ($.cookie(keyname)!="undefined"); } /*cookie の保存処理*/ function setCookie( keyname, val ) { /*値が指定されていたら保存、空文字列なら削除*/ if( state != "" ){ /*cookieに保存*/ $.cookie(keyname, val) } else{ /*cookieのクリア*/ $.cookie(keyname, "", {expires: -1}); } }

行動規範の内容に同意します