

いつもお世話になっております。  
onsenuiとjqueryでアプリを開発しているのですが、pushpage内でのjsの扱いで困っています。

現在ons-navigator内でjsによりアイテムの一覧をデータベースより取得・表示させています。  
一覧の各アイテムをクリックでpushPage(詳細ページ）に移動する仕様にしております。

pushPage(詳細ページ）に移動した際リストページで取得したキーを元に再度データベースへデータを取りに行きたいのですが、ページ読み込み時にajax通信エラーが出てしまいます。

一旦親ページでデータを取得したpushPage内では再度データの取得はできないのでしょうか？

参考までに詳細ページ内でのjsは以下のように記載しております。

[code]

    $(document.body).on("pageinit", '#hoge', function() {
        var options = myNavigator.getCurrentPage().options;
        var param = { "id": options.itemid};
        $.ajax({
            url: "http://sample.com/app/sample.php",
            type:"POST",
            dataType: JSON.stringify(param),
            success:function(xml){
                $("#done").html('<br><br>サーバーへの接続に成功');
            },
            error:function(){
                $("#err").html('<br><br>サーバーへの接続に失敗しました');
            }
        });
    });
    
[/code]


CC BY-SA 3.0
2015-09-07T06:12:32.207
16342
2015-09-08T00:47:56.433
2015-09-07T07:11:55.810
7676
11129
question
onsen-ui
onsenui ons-navigatorのpushPage内でajax通信（jquery )は可能ですか？


OnsenUIで遷移した後もAjax通信をすることは可能です。

上記コードではHTMLのBODYが読み込み完了した際にしかよばれません。  
似たような回答を下記でも行っていますが、  
OnsenUIの遷移完了時に呼ばれる`ons.ready`を使用する必要があります。

「[タブバーの推移先のhtmlファイルでjsを実行する](https://ja.stackoverflow.com/questions/12982/)」

[code]

    var module = ons.bootstrap('my-app', ['onsen']);
    module.controller('page1_controller', function($scope) {
     ons.ready(function() {
      var today = new Date();
      $("#target").prepend(today.getDate());
     });
    });
[/code]

[code]

    <!DOCTYPE HTML>
    <html lang="ja" ng-app="my-app"><!--モジュール名を指定-->
     <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
     </head>
     <body>
      <ons-page ng-controller="page1_controller"><!--コントローラークラスを割り当て-->
       <ons-toolbar> <div id="target" class="center"> 日 </div> </ons-toolbar> 
      </ons-page>
     </body>
    </html>
[/code]

また、Ajax通信でエラーが出ていると言う事ですが、エラー内容はどのような物でしょうか？  
詳細を記述して頂ければ、もっと詳しい回答が出来るかもしれません。


CC BY-SA 3.0
2015-09-07T06:27:38.943
16343
2015-09-07T06:27:38.943
2017-04-13T12:52:39.113
-1
7676
16342
answer


Ajaxの通信エラーの原因は、$.ajax のオプション指定が間違っているためではないかと思います。  
どのようなリクエストを送っているのかわからないので、paramが正しいリクエストパラメータを表現したオブジェクトだとすると、

[code]

    $.ajax({
        url: "http://sample.com/app/sample.php",
        type:"POST",
        dataType: "json",    // <---- ※ここ
        data: param,         // <---- ※ここ
        success:function(xml){
            $("#done").html('<br><br>サーバーへの接続に成功');
        },
        error:function(){
            $("#err").html('<br><br>サーバーへの接続に失敗しました');
        }
    });
    
[/code]

と指定しないといけないのではないかと思います。ご確認ください。

また、「ページ遷移の度に取得」であれば、pageinitイベントではなく、ons-navigatorのpostpushイベントを使えば良いと思います。


CC BY-SA 3.0
2015-09-08T00:47:56.433
16359
2015-09-08T00:47:56.433
9888
16342
answer