質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

「colorbox.js」でフォームを実装したいのですが、閉じるボタンをクリックしたときに「Uncaught TypeError」が出ます。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 4,281

cat0138

score 31

「colorbox.js」を使ってフォームを作成したい

ボタンをClickするとポップアップが出て来て、幾つかの質問に答えメールアドレスを入力すると結果が返ってくるような
フォームを実装したいのですが、colorbox.js内で「jquery.js」を読み込んでいるはずなのに「Uncaught TypeError」が出てしまいます。
何か別の方法で実装する必要があるのでしょうか?

発生している問題・エラーメッセージ

下記のjsを動かしたいのですが、

$(".btnClose02").click(function(){
            $('#testid').parents().colorbox.close();
            return false;
        });

↓このようなエラーが出てcolorboxを閉じることが出来ません。

Uncaught TypeError: Cannot read property 'close' of undefined

補足

さらに必要な情報がございましたら、お手数ですが教えて頂いてもよろしいでしょうか?

追加情報

動かないボタンは、下記になります。

<p class="ボタンのクラス名"><a href="#"><img src="画像パス" width="" height="" alt="閉じる"></a></p>

iframeで実装しておりまして、headerタグの中にjqueryを読み込むタグも記述しているのですが。。。

<head>
省略
<script type="text/javascript" src="省略/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.3"></script>
<script type="text/javascript" src="省略/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.0"></script>
</head>

「colorbox」の詳細

iframeで実装されているものは下記になります。また、testidのオブジェクトについても記載しております。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<script type="text/javascript" src="省略/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.3"></script>
<script type="text/javascript" src="省略/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.0"></script>
</head>
<body id="testid">
    <section id="test07" class="">
        <h1 class=""><img src="" width="" height="" alt=""></h1>
        <p class=""><img src="" width="" height="" alt=""></p>
        <p class=""><img src="" width="" height="" alt=""></p>
        <p class=""><img src="" width="" height="" alt=""></p>
        <p class="btnClose02"><a href="#"><img src="" width="" height="" alt="閉じる"></a></p>
</section>
<script type="text/javascript">
    (function ($) {
        jQuery(function ($) {
            $("btnClose02").click(function(){
               $('#testid').parents().colorbox.close();
               return false;
            });
       })
    })(jQuery);
</script>
</body>
</html>


また、colorboxは下記のように設定しております。

<section id="testname">
                    <p class="btn"><a href="/test07.php"><img src="" width="" height="" alt=""></a></p>
        </section>
<script>
jQuery(function($) {
    $("#testname").find("a").colorbox({
        iframe: true,
        width: "936px",
        height: "395px"
    });
})
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • masaya_ohashi

    2016/06/02 16:17

    JavascriptのみではなくHtmlの方も記載いただくと問題の特定に繋がると思います。

    キャンセル

  • masaya_ohashi

    2016/06/02 16:34

    $('#testid')で取得しているtestidのオブジェクトはなんですか?
    いまのところ開示されているコードの中にtestidというidが割り当てられたオブジェクトがありません。
    また、iframeで実装されているとのことですが、どの部分がフレームになっているかによってJavascriptの有効範囲が違います。その辺も含めて開示していただかないと問題の特定につながりません。よろしくお願いいたします。

    キャンセル

  • kei344

    2016/06/02 16:39

    masaya_ohashiさんの書かれている箇所と、#testidを含む部分のHTMLと、colorboxの設定部分前後のHTMLを開示ください。

    キャンセル

回答 2

+1

追加情報のURLを見たところWordPressをご利用でしょうか。

その場合jQueryの使用には注意が必要です。
下記が参考になるかと思います。

http://kiyotatsu.com/web44/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/02 17:11

    はい、WordPressを使用しております(記載漏れすみません。)
    本来のソースでは
    <?php wp_head(); ?>
    と記述しておりまして、その中身を今回の質問では記述しております。

    今見てみるとfooterの方に
    <?php wp_footer(); ?>
    の記述がありませんでしたので、追加してみます。

    キャンセル

  • 2016/06/02 17:47

    追加してみたのですが、エラーはそのままでした!

    キャンセル

checkベストアンサー

0

こんな感じでしょうか。

$( '.btnClose02' ).click( function() {
    parent.$.colorbox.close();
    return false;
} ); // iframe内で。

【ColorBoxで表示してるiframe内のjsから自分自身をcloseする - thinking now...】
http://blog.mitsuto.com/archives/102032

【jQueryプラグイン「ColorBox」でオリジナルの閉じるボタン(Closeボタン)を設置する | blog|blow→in】
http://blow-in.net/blog/entry-1515.html

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/02 20:21

    parent.$.colorbox.close();

    コチラの書き方で無事動かすことが出来ました。
    なぜ出来なかったのか、理由は分からないのですが今日中に必要な部分でしたので非常に助かりました。
    ありがとうございます。

    キャンセル

  • 2016/06/02 20:28

    $('#testid').parents() は 多分 HTML要素をさしますが、parent.はwindow.parent.の省略形、つまり別物をさしています。それが理由かと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • JavaScriptに関する質問
  • 「colorbox.js」でフォームを実装したいのですが、閉じるボタンをクリックしたときに「Uncaught TypeError」が出ます。