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

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

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

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

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

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

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

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

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

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

javascript
1//①の機能
2$.extend({xResponse : function (){
3  var datalist = []
4  $.ajax({type: "GET", url: "data.xml", dataType: "xml",
5    success: function (rawdata){
6      $(rawdata).find("rootNode").each(function(i,node){ datalist.push(node);
7    }
8  }
9  return datalist;
10}});
11var datalist = $.xResponse();
12
13//②の機能
14$.ajax({type: "GET", url: "data.xml", dataType: "xml",
15  success: function (rawdata){ //ここのrawdataは使わず↑のvar datalistを使います。
16  $("#grid").jqGrid({ .../*datalist使用*/.... };
17});

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

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

javascript
1//①の機能
2$.extend({xResponse : function (){
3  var datalist = []
4  $.ajax({type: "GET", url: "data.xml", dataType: "xml", //
5    success: function (rawdata){
6      datalist=[]
7      $(rawdata).find("rootNode").each(function(i,node){ datalist.push(node);
8    }
9  }
10  return datalist;
11}});
12var datalist = $.xResponse();
13
14//②の機能
15$("#grid").jqGrid({ .../*datalist使用*/.... };

最後に具体的なコードを記載します。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<script src="js/jquery-1.7.2.min.js"></script>
6<script src="js/jquery-ui.min.js"></script>
7<!--jqGrid用-->
8<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
9<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
10<script src="js/grid.locale-ja.js"></script>
11<script src="js/jquery.jqGrid.min.js"></script>
12<script>
13////////////////////////////////////////////////
14//////jqGridやhighchartsで使用する値の準備////////①の機能
15////////////////////////////////////////////////
16
17// Ajaxで取得したデータをdatalistに入れる（想定通りのdatalistにデータが入っていることを確認）
18// 今回はxmlなくても動くようにテキスト直書き
19//$.extend({
20//  xResponse : function (){
21//    var datalist = []
22//    $.ajax({type: "GET", url: "data.xml", dataType: "xml",
23//      success: function (rawdata){ /*本来はここでdatalist.push(data) */ }
24//      return datalist;
25//	}
26//});
27//var datalist = $.xResponse();
28var 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]}]
29
30//////////////////////
31//////jqGrid表示////////②の機能
32//////////////////////
33
34//xxx.xmlは存在しておらず、変数rawdataは使用しません。代わりにdatalistを使用します。（テスト用に簡素化してます）
35$.ajax({ type: "GET", dataType: "xml", url: "xxx.xml", error: function (rawdata){ //rawdataは使用しません。xxx.xmlは存在しておらず、$.xResponse()で取得したdatalistを使用します。
36
37 //「No」「Name」列のあるjqGridテーブル作成
38 $("#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'})
39
40  //セレクトボックスで検索できるようにする関数
41  setSearchSelect = function(columnName) {
42   var uniqueTexts = new Set()
43   $.each(datalist, function(){ uniqueTexts.add(this[columnName]) });
44   var values=":All";
45   $.each (Array.from(uniqueTexts), function() { values += ";" + this + ":" + this; });
46   $("#grid").jqGrid('setColProp', columnName,{ stype: 'select', searchoptions: { value:values, sopt:['eq'] }});
47  };
48  
49  //Name列はセレクトボックスで検索
50  setSearchSelect('Name');
51  
52  //他の列は普通の検索が出来るようにする
53  $("#grid").filterToolbar({defaultSearch:'cn'})
54 }
55});
56//--></script>
57</head>
58<body><table id="grid"></table><div id="pager"></div></body>
59</html>

行動規範の内容に同意します

回答2件

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

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

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

javascript
1$.ajax({}).done(function(data){myFunc(data);});
2
3function myFunc(data){
4  console.log(data);
5}

投稿2018/02/02 01:29

yambejp

総合スコア114777

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

投稿2018/02/02 00:44