id:appfb
ポイントあり100ptベストアンサーあり
ウェブ制作

jQuery の別関数での変数使い回しの質問です。

コードは補足に記載しています。
Smarty などで変数を受け取る場合、 [ var query = '<{$query}>'; ] としていたのですが、 ajax だけで完結する場合どうやって [ ajaxセーブ ] で作られた [ query ] を [ $(function(){ ... ] に渡す場合や、クリックイベントで指定した変数を [ ajaxセーブ ] に渡す場合、どうやるのか？
画面移管を従わず、ajax だけで上記のような変数使い回しは可能でしょうか？


またコードの中の
$("#idDescSort").on("click", loadFunc('id', 'desc', query));
と
$("#idDescSort").click(function(){
loadFunc('id', 'desc', query);
});
は意味が違うのですか？
クリックイベントを与えたいのですが、前者では動かず後者では動いています。
別なファイルでは、前者の書き方で問題なく動作しているので混乱しています。


よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録：
  • 終了：2013/11/04 17:24:14
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
id:appfb

質問者から

appfb2013/11/04 16:07:03 
<!DOCTYPE html>
<html lang="ja">
<head>
   <{$content_type|smarty:nodefaults}>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script type="text/javascript" src="../js/textchange/jquery.textchange.min.js"></script>

<script>
function loadFunc(order, dasort, query){
   var fb_id = '<{$fb_id}>';
   var url = '<{$devuser_index_url}>';
   setTimeout(function(){
      $.ajax({
         type: 'post',
         url: '<{$ajax_devserrch_url}>',
         data: {fbid:fb_id, order:order, dasort:dasort, q:query},
         success: function(data){
            var results = JSON.parse(data);
            showData(results);
         },
         error: function(jqXHR, status, error){
            location.href=url+ "?fbid=" +fb_id;
         }
      });
   }, 0);
}

function showData(results) {
   var container = $("#searchResult");
   container.html("");
   for (var i = 0; i < results.length; i++) {
      var qQuestion = $('<div class="qQuestion">' + results[i].quiz_question + '</div>');
      var qComment = $('<div class="qComment">' + results[i].quiz_comment + '</div>');
      container.append(qQuestion);
      container.append(qComment);
   }
}

$(function(){
   var query = '<{$query}>';
   loadFunc('id', 'desc', query);

// $("#idDescSort").on("click", loadFunc('id', 'desc', query));
// $("#idAscSort").on("click", loadFunc('id', 'asc', query));
   $("#idDescSort").click(function(){
      loadFunc('id', 'desc', query);
   });
   $("#idAscSort").click(function(){
      loadFunc('id', 'asc', query);
   });
});
</script>
</head>

<body>
   <ul>
      <li id="idDescSort">ID▼</li>
      <li id="idAscSort">ID▲</li>
   </ul>

   <div id="searchResult"></div>
</body>

<script>
   // ajaxセーブ
   var timeout;
   $('#ajaxSave').bind('textchange', function () {
      clearTimeout(timeout);
      $('#ajaxFired').html('Typing...');
      var self = this;
      var order = '<{$order}>';
      var dasort = '<{$dasort}>';
      timeout = setTimeout(function () {
         $('#ajaxFired').html('Saved: ' + $(self).val());
         var query = encodeURIComponent($("#ajaxSave").val());
         loadFunc(order, dasort, query);
      }, 1000);
   });
</script>

</html>
規約違反として通知

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

ポイント100pt

まず、.on("click", ...) と .click(...) の方から。

$("#idDescSort").click(function(){
    loadFunc('id', 'desc', query);
});

と同じ意味を持つのは、

$("#idDescSort").on("click", function(){
    loadFunc('id', 'desc', query);
});

です。

$("#idDescSort").on("click", loadFunc('id', 'desc', query));

では、loadFunc を呼び出した戻り値が、click のイベントにひも付けられてしまう。
こう書いているのと一緒です。

var result = loadFunc('id', 'desc', query);
$("#idDescSort").on("click", result);

on メソッドの引数に function を書いている方（つまり、正しく動く方）は、分かりやすく書くとこう。

var click_handler = function(){
        loadFunc('id', 'desc', query);
    });
$("#idDescSort").on("click", click_handler);

もしくは、こう。

function click_handler(){
    loadFunc('id', 'desc', query);
});
$("#idDescSort").on("click", click_handler);



んで、変数の使いまわしについて。

ajax だけで完結する場合どうやって [ ajaxセーブ ] で作られた [ query ] を [ $(function(){ ... ] に渡す

並び替えの「▲ID」をクリックしたときに、後で入力したテキストの内容を渡たしたいんだ、と言いたいんですよね？

クリックイベントで指定した変数を [ ajaxセーブ ] に渡す場合、どうやるのか？

最後にクリックしたソート順を、textchange の処理で指定するには、どうしたら良いんだ、と言いたいんですよね？


元のソースを、なるべく維持するようにいじってみました。

<script>
// ★引数を減らしました
function loadFunc(){
   var fb_id = '<{$fb_id}>';
   var url = '<{$devuser_index_url}>';
   // ★毎回、要素から取得します
   var query = encodeURIComponent($("#ajaxSave").val());
   var dasort = $("#daSort").val();
   var order = $("#order").val();
   setTimeout(function(){
      $.ajax({
         type: 'post',
         url: '<{$ajax_devserrch_url}>',
         data: {fbid:fb_id, order:order, dasort:dasort, q:query},
         success: function(data){
            var results = JSON.parse(data);
            showData(results);
         },
         error: function(jqXHR, status, error){
            location.href=url+ "?fbid=" +fb_id;
         }
      });
   }, 0);
}

function showData(results) {
   var container = $("#searchResult");
   container.html("");
   for (var i = 0; i < results.length; i++) {
      var qQuestion = $('<div class="qQuestion">' + results[i].quiz_question + '</div>');
      var qComment = $('<div class="qComment">' + results[i].quiz_comment + '</div>');
      container.append(qQuestion);
      container.append(qComment);
   }
}

$(function(){
   var query = '<{$query}>';
   // ★引数を減らしました
   loadFunc();

// $("#idDescSort").on("click", loadFunc('id', 'desc', query));
// $("#idAscSort").on("click", loadFunc('id', 'asc', query));
   $("#idDescSort").click(function(){
      // ★隠れ要素の value を変えてから、loadFunc を呼び出します
      $("#daSort").val('desc');
      // ★引数を減らしました
      loadFunc();
   });
   $("#idAscSort").click(function(){
      // ★隠れ要素の value を変えてから、loadFunc を呼び出します
      $("#daSort").val('asc');
      // ★引数を減らしました
      loadFunc();
   });
});
</script>
</head>

<body>
<span class="wrap">
   <input id="ajaxSave" type="text" name="qKey" value="<{$query}>" size="25">
   <!-- ★隠し要素を、ふたつ追加しました -->
   <input id="order" type="hidden" name="order" value="<{$order}>">
   <input id="daSort" type="hidden" name="daSort" value="<{$dasort}>">
</span>
<span id="ajaxFired" class="wrap"></span>
   <ul>
      <li id="idDescSort">ID▼</li>
      <li id="idAscSort">ID▲</li>
   </ul>

   <div id="searchResult"></div>
</body>

<script>
   // ajaxセーブ
   var timeout;
   $('#ajaxSave').bind('textchange', function () {
      clearTimeout(timeout);
      $('#ajaxFired').html('Typing...');
      var self = this;
      timeout = setTimeout(function () {
         $('#ajaxFired').html('Saved: ' + $(self).val());
         // ★ loadFunc の中に、引っ越しました
//       var query = encodeURIComponent($("#ajaxSave").val());
         // ★引数を減らしました
         loadFunc();
      }, 1000);
   });
</script>

関数 loadFunc に引数で渡していた三つの値を、query だけではなく、三つとも画面上の要素で持たせました。
loadFunc では、引数で受け取るのではなく、その中の処理で値を取りに行っています。

question:1383414143 の補足のコードのように、並び替えの対象となる列が複数あるときには、$("#order") の値もクリックの処理で変更するようにしてください。

id:appfb

ご回答ありがとうございます。

.on("click", ...) と .click(...)
は全然意味が違いますね。
これは、別なファイルでは偶然動いているのだということが解りました。
解り易く解説していただいてありがとうございます。
早速別ファイルも書き直します。

なるほどですね～。
隠し要素を使うとは。
これは勉強になりました。
今後随所で使うことになるでしょうね。
無事動作いたしました。
ありがとうございました。

問題を推察していただいてありがとうございますm(_ _)m
プログラムばかりでなく日本語も怪しいです(-_-;)

2013/11/04 17:23:34

その他の回答（0件）

id:appfb

質問者から

appfb2013/11/04 13:21:04

質問文を編集しました。詳細はこちら。

規約違反として通知
id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

ポイント100pt

まず、.on("click", ...) と .click(...) の方から。

$("#idDescSort").click(function(){
    loadFunc('id', 'desc', query);
});

と同じ意味を持つのは、

$("#idDescSort").on("click", function(){
    loadFunc('id', 'desc', query);
});

です。

$("#idDescSort").on("click", loadFunc('id', 'desc', query));

では、loadFunc を呼び出した戻り値が、click のイベントにひも付けられてしまう。
こう書いているのと一緒です。

var result = loadFunc('id', 'desc', query);
$("#idDescSort").on("click", result);

on メソッドの引数に function を書いている方（つまり、正しく動く方）は、分かりやすく書くとこう。

var click_handler = function(){
        loadFunc('id', 'desc', query);
    });
$("#idDescSort").on("click", click_handler);

もしくは、こう。

function click_handler(){
    loadFunc('id', 'desc', query);
});
$("#idDescSort").on("click", click_handler);



んで、変数の使いまわしについて。

ajax だけで完結する場合どうやって [ ajaxセーブ ] で作られた [ query ] を [ $(function(){ ... ] に渡す

並び替えの「▲ID」をクリックしたときに、後で入力したテキストの内容を渡たしたいんだ、と言いたいんですよね？

クリックイベントで指定した変数を [ ajaxセーブ ] に渡す場合、どうやるのか？

最後にクリックしたソート順を、textchange の処理で指定するには、どうしたら良いんだ、と言いたいんですよね？


元のソースを、なるべく維持するようにいじってみました。

<script>
// ★引数を減らしました
function loadFunc(){
   var fb_id = '<{$fb_id}>';
   var url = '<{$devuser_index_url}>';
   // ★毎回、要素から取得します
   var query = encodeURIComponent($("#ajaxSave").val());
   var dasort = $("#daSort").val();
   var order = $("#order").val();
   setTimeout(function(){
      $.ajax({
         type: 'post',
         url: '<{$ajax_devserrch_url}>',
         data: {fbid:fb_id, order:order, dasort:dasort, q:query},
         success: function(data){
            var results = JSON.parse(data);
            showData(results);
         },
         error: function(jqXHR, status, error){
            location.href=url+ "?fbid=" +fb_id;
         }
      });
   }, 0);
}

function showData(results) {
   var container = $("#searchResult");
   container.html("");
   for (var i = 0; i < results.length; i++) {
      var qQuestion = $('<div class="qQuestion">' + results[i].quiz_question + '</div>');
      var qComment = $('<div class="qComment">' + results[i].quiz_comment + '</div>');
      container.append(qQuestion);
      container.append(qComment);
   }
}

$(function(){
   var query = '<{$query}>';
   // ★引数を減らしました
   loadFunc();

// $("#idDescSort").on("click", loadFunc('id', 'desc', query));
// $("#idAscSort").on("click", loadFunc('id', 'asc', query));
   $("#idDescSort").click(function(){
      // ★隠れ要素の value を変えてから、loadFunc を呼び出します
      $("#daSort").val('desc');
      // ★引数を減らしました
      loadFunc();
   });
   $("#idAscSort").click(function(){
      // ★隠れ要素の value を変えてから、loadFunc を呼び出します
      $("#daSort").val('asc');
      // ★引数を減らしました
      loadFunc();
   });
});
</script>
</head>

<body>
<span class="wrap">
   <input id="ajaxSave" type="text" name="qKey" value="<{$query}>" size="25">
   <!-- ★隠し要素を、ふたつ追加しました -->
   <input id="order" type="hidden" name="order" value="<{$order}>">
   <input id="daSort" type="hidden" name="daSort" value="<{$dasort}>">
</span>
<span id="ajaxFired" class="wrap"></span>
   <ul>
      <li id="idDescSort">ID▼</li>
      <li id="idAscSort">ID▲</li>
   </ul>

   <div id="searchResult"></div>
</body>

<script>
   // ajaxセーブ
   var timeout;
   $('#ajaxSave').bind('textchange', function () {
      clearTimeout(timeout);
      $('#ajaxFired').html('Typing...');
      var self = this;
      timeout = setTimeout(function () {
         $('#ajaxFired').html('Saved: ' + $(self).val());
         // ★ loadFunc の中に、引っ越しました
//       var query = encodeURIComponent($("#ajaxSave").val());
         // ★引数を減らしました
         loadFunc();
      }, 1000);
   });
</script>

関数 loadFunc に引数で渡していた三つの値を、query だけではなく、三つとも画面上の要素で持たせました。
loadFunc では、引数で受け取るのではなく、その中の処理で値を取りに行っています。

question:1383414143 の補足のコードのように、並び替えの対象となる列が複数あるときには、$("#order") の値もクリックの処理で変更するようにしてください。

id:appfb

ご回答ありがとうございます。

.on("click", ...) と .click(...)
は全然意味が違いますね。
これは、別なファイルでは偶然動いているのだということが解りました。
解り易く解説していただいてありがとうございます。
早速別ファイルも書き直します。

なるほどですね～。
隠し要素を使うとは。
これは勉強になりました。
今後随所で使うことになるでしょうね。
無事動作いたしました。
ありがとうございました。

問題を推察していただいてありがとうございますm(_ _)m
プログラムばかりでなく日本語も怪しいです(-_-;)

2013/11/04 17:23:34

コメント（0件)

コメントはまだありません

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ