22595


monacaを利用して、webアプリケーションで制作したものをアプリに落とし込んでおります。  
webアプリケーションではprototype.jsを利用して、定期的に情報更新がないかを確認&更新があれば更新数を表示するプログラムを組んでおりましたが、monacaにうまく適用できずにいます。。

エラー内容は以下になります。  
prototype.jsを入れることにより、pushpage関数に不具合が生じていますか？？

Error: Class.extend is not a function. (In
'Class.extend({push:function(enterPage,leavePage,callback){callback()},pop:function(enterPage,leavePage,callback){callback()}})',
'Class.extend' is undefined)

以下がコードになります。  
サーバー側処理は更新の数(値)を返しております。  
jQuery (Monaca version)及びprototype.jsを、js/cssコンポーネントに追加しております。

(head)

[code]

    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <script>
      ons.bootstrap();
      jQuery.noConflict();
      var j$ = jQuery;
      (function(){
        'use strict';
        j$(document).on('pageinit', '#top-page', function() {
          j$('#message_board', this).on('click', function() {
            app.navi.pushPage('message.html');
          });
          watch_new();
        });
      })();
    
      function watch_new(){
        var id = "1";
        var myajax = new Ajax.PeriodicalUpdater('new', 'url', {postBody: 'id=' + id, frequency: 10000});
      }
    </script>
    
[/code]

(html)

[code]

    <ons-navigator page="top.html" var="app.navi"></ons-navigator>
    <ons-template id="top.html">
      <ons-page id="top-page">
        <ons-list-item modifier="chevron" class="item" id="message_board">
          <ons-row>
            <ons-col class="title">
              <header>
                <span class="item-title">掲示板</span>
                <div id="new"></div>
              </header>
            </ons-col>
          </ons-row>
        </ons-list-item>
       ・・・
      </ons-page>
    </ons-template>
    
    <ons-template id="message.html">
      <ons-page id="message-page">
        <ol id="message"></ol>
      </ons-page>
    </ons-template>
    
[/code]


CC BY-SA 3.0
2016-02-21T11:45:36.407
22357
2016-02-27T07:27:49.030
2016-02-27T06:49:54.533
14300
14300
question
monaca ajax
monacaでprototype.jsを使用したいのですが、上手くいきません


結論を先に書くと、prototype.jsを併用するのはあきらめた方が良いように思われます。

`jQuery.noConflict();`と言うのは、あなたが使用しているすべてのJavaScriptコンポーネントにおいてconflictを防止することができるのではなく「`$`をjQueryオブジェクトではなく、元の定義に戻しておく」だけのものです。  
したがって、あなたが使用しようと思うJavaScriptコンポーネントのどれか一つにでも「`$`はjQueryオブジェクトのこと」と期待してコーディングされたものが存在すれば、そのコンポーネントは`jQuery.noConflict();`を実行した後は一切動作しなくなります。  
monacaで使用されているJavaScriptのコンポーネントがprototype.jsとの共存を仮定したコードになっているのかどうかは確認できなかったのですが、現在`jQuery.noConflict();`に対応して、「`$`を直接jQueryオブジェクトとして参照しない」と言った作法で記述されたJavaScriptコンポーネントはほとんど見かけられなくなってきています。あなたのprototype.jsを使った処理の方をjQuery対応に書き換える方が現実的で将来にも有効な手法ではないかと思います。

少なくともmonacaのように提供されるJavaScriptコンポーネントをそのまま使用せざるを得ない場合にprototype.jsベースのコードを一緒に使用するのは無理だと思った方が良いでしょう。


CC BY-SA 3.0
2016-02-27T07:27:49.030
22595
2016-02-27T07:27:49.030
13972
22357
answer