タグ別アーカイブ: trigger

トライ&キャッチ

今回はエラー検出についてです。
エラーがあった場合のみ特定の動作を行います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            $(function(){

                var flgErr = false;
                $('#exec1').click( function(){
                    try {
                        if (flgErr == true) {
                            throw new Error('Test Error Message');
                        }
                    } catch (errObj) {
                        alert('Error : ' + errObj.message);
                    }
                });

                $('#exec2').click( function(){
                    if (flgErr != true) {
                        flgErr = true;
                    } else {
                        flgErr = false;
                    }
                    $('#target_div').text('Error Flg : ' + flgErr);
                });
                $('#exec2').trigger('click');

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="button_area">
                <button id="exec1">error check!</button>
                <button id="exec2">error status change</button>
            </div>

            <div id="disp_area">
                <div id="target_div"></div>
            </div>

        </div>
    </body>
</html>

sample

sample の「error check!」button を click すると error があった時の処理を行います。
今回は error の有る場合と無い場合を「error status change」button で切り替えて
確認しています。
 # 適当なエラー発生が思い付かなかったのでテスト用の error を投げました。

error が発生すると処理が止まってしまう事が良くあります。
色々な箇所で error が発生しそうな場所に埋め込んでおけば安心ですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

セレクトボックスの内容変更

今回は select の処理です。
親となる select を選択することで 子となる select の選択内容を変更します。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            $(function(){

                // Data Set
                var arrMain = new Array();
                    arrMain['A'] = new Array();
                    arrMain['A']['A_1'] = 'Disp_A_1';
                    arrMain['A']['A_2'] = 'Disp_A_2';
                    arrMain['A']['A_3'] = 'Disp_A_3';
                    arrMain['A']['A_4'] = 'Disp_A_4';
                    arrMain['B'] = new Array();
                    arrMain['B']['B_1'] = 'Data_B_1';
                    arrMain['B']['B_2'] = 'Data_B_2';
                    arrMain['B']['B_3'] = 'Data_B_3';
                    arrMain['B']['B_4'] = 'Data_B_4';
                    arrMain['B']['B_5'] = 'Data_B_5';
                    arrMain['C'] = new Array();
                    arrMain['C']['C_1'] = 'Data_C_1';
                    arrMain['C']['C_2'] = 'Data_C_2';
                    arrMain['C']['C_3'] = 'Data_C_3';
                    arrMain['D'] = new Array();
                    arrMain['D']['D_1'] = 'Data_D_1';
                    arrMain['D']['D_2'] = 'Data_D_2';
                    arrMain['D']['D_3'] = 'Data_D_3';
                    arrMain['D']['D_4'] = 'Data_D_4';
                    arrMain['D']['D_5'] = 'Data_D_5';
                    arrMain['D']['D_6'] = 'Data_D_6';
                    arrMain['D']['D_7'] = 'Data_D_7';
                    arrMain['D']['D_8'] = 'Data_D_8';
                    arrMain['D']['D_9'] = 'Data_D_9';


                // Change Main
                $('#select_main').change( function(){

                    $('#select_sub').empty().append("<option>Select Sub Data</opton>");
                    if ($(this).val() == '') {
                        return;
                    }

                    for (var sKey in arrMain[$(this).val()]) {
                        $('#select_sub').append("<option value='" + sKey + "'>" + arrMain[$(this).val()][sKey] + "</opton>");
                    }

                });


                // Init Data
                $('#select_main').empty().append("<option>Select Main Data</opton>");
                for (var mKey in arrMain) {
                    $('#select_main').append("<option value='" + mKey + "'>Select Main " + mKey + "</opton>");
                }
                $('#select_main').trigger('change');

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin       : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="select_area">
                <select id="select_main"></select>
                <select id="select_sub"></select>
            </div>
        </div>

    </body>
</html>

sample

sample では左側の選択内容によって、右側の選択内容を切り替えます。
CMS では「お問い合わせ」などに plugin など良く使うと思いますが、
使用している plugin が select の内容変更に対応しているとは限りせん。
そんなときに今回の内容が使えるのではないのでしょうか。

ちなみに、以前は対象外の option を hide で非表示にしておりましたが、
ブラウザが IE の場合 option は消せないとのことです。
いい加減ブラウザ毎の差異は無くならないかなぁ・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

jQueryでイベントを発生させる。

前回は通常実行されるイベントのキャンセルでした。
今回は通常実行される処理を発生させる方法です。

たとえば a タグなどをクリックすると、通常は href で指定した URL に移動します。
これらのイベントを他の処理を条件に発生させる方法です。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {
                
                // initialize
                $('#message').hide();

                // Base Event
                $('#checkbox').click( function() {
                    alert('checkbox clicked!!');
                });

                // event trigger
                $('#triggerN').click(function(){
                    $("#checkbox").trigger("click");
                });

                // event triggerHandler
                $('#triggerH').click(function(){
                    $("#checkbox").triggerHandler("click");
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            #checkArea, #buttonArea {
                margin : 10px;
            }
        --></style>
        
    </head>
    <body>

        <div id="checkArea">
            <div>
                <p>click me!</p>
                <input type="checkbox" id="checkbox" /><span id="message">checked</span>
            </div>
        </div>

        <div id="buttonArea">
            <div>
                <input type="button" id="triggerN" value="trigger" />
                <input type="button" id="triggerH" value="triggerHandler" />
            </div>
        </div>

    </body>
</html>

sample

sampleページでは checkbox の check 状態が「On」の場合、「checked」という文字が
表示されるようにプログラムしています。
そのため、 checkbox を click すると checkbox の表示状態が変更され、alert が表示されます。

これに対して下部に設置した button を click することで、checkbox を click した時と
同じ処理を発生させることができます。

・・・えっと、button を 2 つ設置しているのには意味があります。
基本の「指定の object に対して、指定のイベントを実行させる」ことは同じです。
ですが、少しだけ処理が異なります。

「trigger」ボタンでは trigger という処理を実行します。
 object に対して、指定した event を実際に行ったような処理を行います。
 そのため、sample のページでは 「trigger」を押すことで check の状態も変更します。
 そのうえで alert も表示されます。

「triggerHandler」ボタンでは triggerHandler という処理を実行します。
 object に対して、指定した event で実行予定の jQuery の内容だけを実行します。
 そのため、sample のページでは 「triggerHandler」を押しても check の状態は変更されません。
 しかし、alert は表示されます。
 また、checkbox の上位の object に別の event が設定してあっても、それらは実行されません。

この 2つを利用すると mauseover を条件に、Link を click した処理を実行するとか使えそうです。
まぁ、メインで使用する事は無いのかも知れませんが・・・
メインで無くとも、ページスクロール時にページ内遷移と同じ処理を行うなど、色々と面白いことができそうですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。