人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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);
});
は意味が違うのですか?
クリックイベントを与えたいのですが、前者では動かず後者では動いています。
別なファイルでは、前者の書き方で問題なく動作しているので混乱しています。


よろしくお願いします。

●質問者: appfb
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から
<!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>

1 ● a-kuma3
●100ポイント ベストアンサー

まず、.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") の値もクリックの処理で変更するようにしてください。


appfbさんのコメント
ご回答ありがとうございます。 .on("click", ...) と .click(...) は全然意味が違いますね。 これは、別なファイルでは偶然動いているのだということが解りました。 解り易く解説していただいてありがとうございます。 早速別ファイルも書き直します。 なるほどですね?。 隠し要素を使うとは。 これは勉強になりました。 今後随所で使うことになるでしょうね。 無事動作いたしました。 ありがとうございました。 問題を推察していただいてありがとうございますm(_ _)m プログラムばかりでなく日本語も怪しいです(-_-;)
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ