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

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

ただいまの
回答率

90.49%

  • JavaScript

    16932questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Webサイト

    1095questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

  • Groovy

    35questions

    Groovyは、Java用のオブジェクト指向型プログラミング言語です。PythonやRuby、Perl、そしてSmalltalkに似た特徴を有する動的な言語です。

JavaScript ボタンクリックイベント時ソースコード 不明点を明らかにしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 771

nekomura

score 124

よろしくお願いいたします。

まず、曖昧な質問になってしまいますことをお詫びします。
ただ解決ができず、何かのとっかかりになればとこちらに書き込ませていただきました。

機器管理システムを、webアプリとして作っており、下記ソースはそのenentlisnerの部分です。
編集ボタンのイベントです。

下記のソースコードですが、おかしい所があるとの事です。

JavaScriptとGroovy は現在まったく勉強したことが無く、ネットで調べたのですが
(調べたキーワードはonsubmitや、editable。また、JavaScriptの構文など)
よくわかりません。

現在使用中の開発環境ではコンパイルがかけられず、おかしいといわれる箇所がわからない為
有職者の方、何か気づかれる事がございましたらご教示いただけませんか。

※¥マークはバックスラッシュを意味しています。

// -------------------------------------------------------------------------
// ※独自開発環境のの汎用カスタマイズでは、ScriptSection に埋め込む JavaScript は、ドル記号を
//   バックスラッシュでエスケープする必要があります。
//    コメントにドル記号を記述した場合もエスケープしないとエラーになります。
//   (汎用カスタマイズでは、jsp への展開の前に Groovy の処理系を通過しますが、
//    Groovy の処理系がドル記号を Groovy 式の始まりと認識するため、エスケープしないと
//    Groovy の処理系で Groovy 構文と認識されてしまいます。)
// -------------------------------------------------------------------------
// 変更のボタン処理
// -------------------------------------------------------------------------

// 編集
function henshu_onclick() {
    var result = (\$("input[name='is_editable']").val() == "1");
    if (!result) {
        alert("データは処理できません。");
    }

    return(result);
}

// 編集ボタン 上下に 2 つあり
jQuery(function(\$) {
    \$(function() {
        // 当初、ボタンの属性を変更しようとしてましたが、IE8だとエラーになるので
        // form に onsubmit 属性を付与することにしました
        var \$form = \$("#detailForm");
        \$form.attr("onsubmit", "return(henshu_onclick());");
    });
});
</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

そもそも、なぜおかしいことがあると思ったんですか?
エラーになったとかですかね?
そうすると、エラーの内容を記載すると、回答者のみなさんも助かると思います。

ざっと見た感じ特別ここがダメだ!というところはないようも見えるのですが、
書き直すとしたら、以下のような感じでしょうか。

jQuery(function(\$) {
    \$("#detailForm").on("submit", henshu_onclick);
});

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/15 13:04

    root_jp様
    曖昧な質問にお答え頂き感謝です。
    ありがとうございます。

    文法的に、on("submit", henshu_onclick);
    });
    onは外に出した方がよいという事でしょうか?

    本コードの製作者が現在不在の為、おかしい箇所があるとの指示のみで、
    理由は現在わかっていません。
    このご回答を元に試行錯誤してみますので、また追記など載せたいと思います。

    本当にありがとうございました。

    キャンセル

  • 2016/04/15 13:15

    root_jp様
    たびたびのコメントで申し訳ありません。
    もし、可能であれば追加でご教示いただきたいのですが、
    本コードから、root_jp様の直したコードに変えることによる変化…といいますか、
    違いを教えていただければ幸いです。

    キャンセル

  • 2016/04/15 13:16

    横からですが。
    「.attr("onsubmit", "return(henshu_onclick());");」←これではhtmlの属性値を追加するだけで、EventListenerへの登録はできないようです。
    EventListenerへの登録にはやはり「.on("submit", henshu_onclick);」の記述が必要なようです。

    キャンセル

  • 2016/04/15 13:21

    tkturbo様!
    いつもお世話になっております。
    そうなんですね、ありがとうございます!
    勉強になります。

    キャンセル

  • 2016/04/15 13:31

    root_jp様
    tkturbo様

    五月雨式の質問で申し訳ありません。
    「.on("submit", henshu_onclick);」
    とする場合、
    attrはどうなるのか(不要なのかどうか)を、教えていただけないでしょうか。。。。
    よろしくお願いいたします。

    キャンセル

  • 2016/04/15 13:39

    > nekomuraさん
    すみません、先ほどの「←これではhtmlの属性値を追加するだけで」のくだりは誤りでした。(.attr(name, value)のvalueへのセットの仕方を間違って確認してましたorz)
    「attrはどうなるのか(不要なのかどうか)」←そのままでも大丈夫でしょうが、「EventHandlerを使用している」というのが明示的にわかるので、「.on(eventName, function)」のほうがいいと思います。

    キャンセル

  • 2016/04/15 14:25

    >文法的に、on("submit", henshu_onclick);
    >});
    >onは外に出した方がよいという事でしょうか?

    文法的に外に出すというよりも、
    onというfunctionの引数にイベント名を書いています。

    http://www.jquerystudy.info/reference/events/on.html
    この辺りご参考ください。

    >変えることによる変化…といいますか、
    >違いを教えていただければ幸いです。

    動きとしての変化はないと思いますが、まず
    jQuery(function(\$) {
    \$(function() {

    }
    }

    これは無駄です。同じことを2回しています。
    個人的に書き方として、jQuery(fuction) の方が好みですので
    外側だけ残しました。

    attr と on の違いですが、例えば
    \$form.attr("onsubmit", func1);
    \$form.attr("onsubmit", func2);
    と2行書くと、起動されるのは func2 だけになってしまいますが

    \$form.on("submit", func1);
    \$form.on("submit", func2);
    と書くと、func1, func2 の順序で2つとも呼ばれます。
    処理を追加していけます。
    イベントリスナーという仕組みです。

    どちらでもいいんですが、後々の事を考えると、
    イベントリスナーにしておいたほうが、色々と融通がきく感じですかね。

    >「.on("submit", henshu_onclick);」とする場合、attrはどうなるのか

    不要です。
    まるっと置き換えてもらって大丈夫です。


    >本コードの製作者が現在不在の為、おかしい箇所があるとの指示のみ

    おかしい箇所があると指示を出している人に、
    何がどうおかしいのかを、聞いた方がいいと思いますよ。
    丸投げも甚だしいかとw

    キャンセル

  • 2016/04/15 15:53 編集

    root_jp様
    ※先ほど投稿した内容を変更しています。
    私の勘違いがあったため。

    大変丁寧でわかりやすいご回答に、本当に感謝しています。
    とても勉強になりますし、例や参考URLもあってとても助かります。
    本当にありがとうございます。
    初心者の私にもわかりやすく、まさにこういったご回答を求めていました。


    >おかしい箇所があると指示を出している人に、
    >何がどうおかしいのかを、聞いた方がいいと思いますよ。
    そうですよね…ただ、その者が現在不在で、聞けずじまいです。。。
    ご迷惑おかけしてすみません。

    またの機会に何かご教示いただければ幸甚です。

    キャンセル

  • 2016/04/15 16:19

    tkturbo様
    >「attrはどうなるのか(不要なのかどうか)」←そのままでも大丈夫でしょうが、「EventHandlerを使用している」というのが明示的にわかるので、「.on(eventName, function)」のほうがいいと思います。
    なるほど~。。。
    理由付けがわかると、頭に入りやすいです。
    とても勉強になりました。
    いつもありがとうございます^^!

    キャンセル

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16932questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Webサイト

    1095questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

  • Groovy

    35questions

    Groovyは、Java用のオブジェクト指向型プログラミング言語です。PythonやRuby、Perl、そしてSmalltalkに似た特徴を有する動的な言語です。