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

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

ただいまの
回答率

87.96%

$.ajaxの外側に出したjqGridのコードが動かない

受付中

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 2,649

score 14

実現したいことがコードで表現できないため、ぜひ皆様のお知恵を拝借したく質問します。

■解決したいこと
$.ajaxのsuccess内に大量のコードを書くのを避けるため、コードを$.ajaxの外側に出したいと思っております。
例えば、以下のようなコードがあった場合

$.ajax({ ... success: function(){ getdata(); jqGrid(); });

以下のようにコードを変更しても動作するのかと思ったのですが、同じように動かなくなりました。

$.extend({xResponse : function (){ getdata();});
$.xResponse();
jqGrid();

どういった問題があるのでしょうか。

具体的に経緯を説明します。
まずは以下2機能を実装するためにコードを書きました。
①jqGrid(やhighcharts等)で使用するデータをAjaxを使用してdatalistに格納
②datalistのデータをjqGridで表形式で表示

$.ajax({type: "GET", url: "data.xml", dataType: "xml",
  success: function (rawdata){
  //①の機能
  datalist=[]
  $(rawdata).find("rootNode").each(function(i,node){ datalist.push(node); }
  //②の機能
  $("#grid").jqGrid({ .../*datalist使用*/.... };
});

そのあと、①を分離して、datalistを他からも使えるようにしました。
動作は上記と同じなことを確認しました。

//①の機能
$.extend({xResponse : function (){
  var datalist = []
  $.ajax({type: "GET", url: "data.xml", dataType: "xml",
    success: function (rawdata){
      $(rawdata).find("rootNode").each(function(i,node){ datalist.push(node);
    }
  }
  return datalist;
}});
var datalist = $.xResponse();

//②の機能
$.ajax({type: "GET", url: "data.xml", dataType: "xml",
  success: function (rawdata){ //ここのrawdataは使わず↑のvar datalistを使います。
  $("#grid").jqGrid({ .../*datalist使用*/.... };
});

さらに$.ajax();の部分を削除して以下の状態にしたところ、問題が発生しました。
F12のコンソールにもエラーメッセージが表示されず、
今までjqGridが表示されていた画面も真っ白しか表示さなくなりました。

非同期実行のため発生するのかと思いましたが、「async: false」を記載しても変わりません。
②の実行直前にdatalistをconsole.logで確認した所、値は入っておりました。
なにが問題なのでしょうか。

//①の機能
$.extend({xResponse : function (){
  var datalist = []
  $.ajax({type: "GET", url: "data.xml", dataType: "xml", //
    success: function (rawdata){
      datalist=[]
      $(rawdata).find("rootNode").each(function(i,node){ datalist.push(node);
    }
  }
  return datalist;
}});
var datalist = $.xResponse();

//②の機能
$("#grid").jqGrid({ .../*datalist使用*/.... };

最後に具体的なコードを記載します。
イメージ説明

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!--jqGrid用-->
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<script src="js/grid.locale-ja.js"></script>
<script src="js/jquery.jqGrid.min.js"></script>
<script>
////////////////////////////////////////////////
//////jqGridやhighchartsで使用する値の準備////////①の機能
////////////////////////////////////////////////

// Ajaxで取得したデータをdatalistに入れる(想定通りのdatalistにデータが入っていることを確認)
// 今回はxmlなくても動くようにテキスト直書き
//$.extend({
//  xResponse : function (){
//    var datalist = []
//    $.ajax({type: "GET", url: "data.xml", dataType: "xml",
//      success: function (rawdata){ /*本来はここでdatalist.push(data) */ }
//      return datalist;
//    }
//});
//var datalist = $.xResponse();
var datalist = [{"No":"1","Name":"1st data", "Values":[1,2,3]},{"No":"2","Name":"2nd data", "Values":[3,4,5]},{"No":"2","Name":"3rd data", "Values":[5,6,7]}]

//////////////////////
//////jqGrid表示////////②の機能
//////////////////////

//xxx.xmlは存在しておらず、変数rawdataは使用しません。代わりにdatalistを使用します。(テスト用に簡素化してます)
$.ajax({ type: "GET", dataType: "xml", url: "xxx.xml", error: function (rawdata){ //rawdataは使用しません。xxx.xmlは存在しておらず、$.xResponse()で取得したdatalistを使用します。

 //「No」「Name」列のあるjqGridテーブル作成
 $("#grid").jqGrid({ datatype : 'local' , colNames : ['No', 'Name'] , colModel : [{name:'No', index:'No', width:20},{name:'Name', index:'Name', width:20}] , data : datalist , height : 100, width : 300 , rowNum:2 , pager : 'pager'})

  //セレクトボックスで検索できるようにする関数
  setSearchSelect = function(columnName) {
   var uniqueTexts = new Set()
   $.each(datalist, function(){ uniqueTexts.add(this[columnName]) });
   var values=":All";
   $.each (Array.from(uniqueTexts), function() { values += ";" + this + ":" + this; });
   $("#grid").jqGrid('setColProp', columnName,{ stype: 'select', searchoptions: { value:values, sopt:['eq'] }});
  };

  //Name列はセレクトボックスで検索
  setSearchSelect('Name');

  //他の列は普通の検索が出来るようにする
  $("#grid").filterToolbar({defaultSearch:'cn'})
 }
});
//--></script>
</head>
<body><table id="grid"></table><div id="pager"></div></body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+1

ajaxは非同期処理なので、基本的に書いていただいたプログラムのようにreturnして簡単に便利に使う、ということは出来ません。全部コールバック関数の中に処理を入れる必要があります。必ずsuccessの中で次の処理をおこなってください。
(次の処理の関数を作って、successの中でそれを呼ぶ、というのであれば可能ですし見やすいです)
$.extendとかは全く必要ないと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

$.ajax()の外側におくことだけが目的なら
successをやめてdoneにしてください
(そういうことではない?)

$.ajax({}).done(function(data){console.log(data);});

もちろん、コールバック内でユーザー関数を呼んでもよいでしょう

$.ajax({}).done(function(data){myFunc(data);});

function myFunc(data){
  console.log(data);
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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