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

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

ただいまの
回答率

90.48%

  • JavaScript

    20863questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8315questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CakePHP

    2549questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

jqueryでjquery.bottom-1.0,validateが実行されない。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 776

usuallyi

score 30

以下のjavascriptにて、tweetloadを実行させたのですが、
通信1までlogは行くのですが、
$(window).bind('bottom',function(){
文以降が実行されず、
tweetload内のajaxの表示の部分がでません。
bottom部分をコメント文にした場合は、
予定通り、ajaxの表示が働いている状況です。

また、他のjqueryのプラグインvalidateも追加しましたが、
messageが表示されず。

どちらもエラーはでないのですが、
動作しません。

jqueryは、3.1.1
追記
jqueryを2.2.4に変更しました。
cakephp 2.xです。

var user_id;
var my_id;

$(function(){
  //15秒ごとに読み込み
  tweet_load();
  console.log('sucess');
  setInterval("tweet_load()", 15000);
  console.log('sucess4');
});

$(document).on('click','button',function(event){
  if(!confirm('本当に削除しますか?')){
        /* キャンセルの時の処理 */
        return false;
    }else{
    event.preventDefault();
            $.ajax({
                type:'POST',
                url: '/cakephp/users/json_data',
                dataType: 'json',
                cache : false,
                data : {id : $(this).val()},
                timeout:10000,
                success: function(data) {
                            //console.log(user_id+' '+my_id+' '+$('textarea').val()+' '+time);
                            console.log('delite_success');
                            tweet_load();
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                             alert('error');
                       }
    });}
          });

$(document).on('click','div.submit',function(event) {
    console.log('validate_start');
    $('form').validate({
      rules: {
        textarea: {
          required: true,
          maxlength: 140
        }
      },
      messages :{
        textarea:{
          required: "空白です。",
          maxlength:"140文字以内で入力して下さい。"
        }
      }
    });

    if (!$('form').valid()) {
      console.log('validate_error');
      return false;
    }
    console.log('validate_end');
    event.preventDefault();
            $.ajax({
                type:'POST',
                url: '/cakephp/users/json_data',
                dataType: 'json',
                cache : false,
                data : {'tweet_id': user_id ,'name': my_id , 'tweet' : $('textarea').val()},
                timeout:10000,
                success: function(data) {
                            $('textarea').val("");
                            //console.log(user_id+' '+my_id+' '+$('textarea').val()+' '+time);
                            console.log('sucess');
                            tweet_load();
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                             alert('error');
                       }
              });
});


function tweet_load(){

 var end_flag = 0; //最後のページまでいったら1にして次から読み込ませない
$('div.loading').append('loading...'); 
  $(window).bottom({proximity: 0.5}); //proximityを0.5にするとページの50%までスクロールするとloadingがはじまる
  console.log('通信1');
  $(window).on('bottom',function(){
    console.log('通信2');
        var obj = $(this);
        if (!obj.data("loading")) {
          obj.data("loading", true);

          $('#loading').append('loading...'); //画面にloading...と表示
          setTimeout(function() {
            $('#loading').remove();
$.ajax({
        type:"POST",
        url: '/cakephp/users/json_data',
        dataType: 'json',
        cache : false,
        timeout: 10000})
    .fail(function(){
            //通信失敗時の処理
            alert('通信失敗');
        })
    .done(function(data){
     alert('通信');
    user_id = data.user_id;
    my_id = data.my_id;
    var i=0;
    console.log('sucess_jsondata'+i);
    $("#output").empty();
    for(i in data.json_data){
    $("#output").append('<a href='+data.json_data[i].Tweet.name+'>'+data.json_data[i].Tweet.name+"</br>");
    var tweet =data.json_data[i].Tweet.tweet;
      tweet =tweet.replace(/\r?\n/g, '<br>');
      tweet =tweet.replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ');
    $("#output").append(tweet+"</br>");
    $("#output").append(data.json_data[i].Tweet.tweettime+"</br>");
    //console.log(i);
    if(data.my_id==data.json_data[i].Tweet.name){
    $("#output").append('<button type="button" name="delite" id="delite" value='+data.json_data[i].Tweet.id+'>削除</button></br>');
     }
    $("#output").append("</br>");
    }
  })}, 1500);
      }
    });
      $('html,body').animate({ scrollTop: 0 }, '1');
};


form部分も追加
cakephpのctpです。

<?php 
echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js');
echo $this->Html->script('jquery.bottom-1.0'); 
echo $this->Html->script('jquery.validate');
echo $this->Html->css('index');?>

  <?php
      echo $this->Form->create('Tweet');
      echo nl2br($this->Form->textarea('tweet', array('cols'=>100, 'rows'=>4,'required' => false,'error'=>false)));
      echo $this->Form->hidden('tweet_id',array('value'=> $user['id']));
      echo $this->Form->hidden('name',array('value'=> $user['username']));
      echo $this->Form->submit('投稿',array(/*'onclick'=>'index',*/'name' => 'submit'));
       echo $this->Form->end();
endif;
?>
    <h3>ホーム</h3>
  <div id="output">
    <div id="delite"></div>
    <div class="loading"></div>
  </div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

jQuery.bind() は3.0以降非推奨になっているため、1系統か2系統を使用してみてはいかがでしょうか。

【.bind() | jQuery API Documentation】
http://api.jquery.com/bind/

Returns: jQueryversion deprecated: 3.0

【jQueryのbindとonの違い - Qiita】
http://qiita.com/nmta/items/310aa1cf385fa55129c1

また、エラーは出ていませんか?デベロッパーツールで確認してみてください。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/26 09:28

    bindは非推奨になっていたのですね。
    2系統でしましたが、実行されません。

    コンソールのログで確認しましたが、
    エラーは表示されませんでした。

    キャンセル

  • 2016/10/26 21:26

    tweet_load()を何回も呼んでいますが、$(window).on('bottom',function(){を何回も登録することになるうえ、そのイベントまで動作しないので読み込み(AJAX)は起こらないと思います。

    $(window).on('bottom',function(){の中身がtweet_load関数として定義されるべきものなのでは。

    キャンセル

  • 2016/10/26 23:04

    コメントの通り、$(document).ready(function()の中にtweet_loadの中身を移し、
    setintervalもコメントにし、
    $(window).on('bottom',function()が一度しか動かない様に変更しましたが、動作しませんでした。
    やはり、$(window).on('bottom',function()内のプログラムが実行されていません。

    キャンセル

  • 2016/10/26 23:37

    https://jsfiddle.net/nw411jug/
    とりあえず中の関数を削除して動くかどうか試してから少しずつ中身を実装して行って見るのが良いと思います。

    キャンセル

  • 2016/10/26 23:50 編集

    $(document).ready(function() {
    var end_flag = 0; //最後のページまでいったら1にして次から読み込ませない

    $(window).bottom({proximity: 0.5}); //proximityを0.5にするとページの50%までスクロールするとloadingがはじまる
    console.log('通信1');
    $(window).on('bottom',function(){
    $('div.loading').append('loading...');
    console.log('通信2');

    });
    });
    中の関数を削除して、
    上記の文を実行しましたが、
    console.log('通信2')というログがこなかったので、
    プラグインが機能していない可能性ってあるのでしょうか?
    chromeにてhtmlのソースからjqueryのスクリプトのurlをクリックすると、
    プラグイン内のソースが確認できるので、
    読み込んでいないというわけでは、ないとおもうのですが.....

    キャンセル

  • 2016/10/27 00:03

    > プラグインが機能していない可能性
    読み込みに失敗するとエラーが出るので、わかるとおもいます。
    proximityの値を変えるとかしてみてはいかがでしょうか。

    キャンセル

  • 2016/10/27 00:13

    proximityも0.9,0.01など試しましたが、
    上手く動作しませんでした。

    また、jquery.bottomのdemo.htmlのscript部分と、
    divの要素をhtml内に入れて、
    確認しましたが、
    うまく動作しません。

    何か、cakephp内で根本的にまちがえているのかもしれません。

    キャンセル

  • 2016/10/27 00:52

    jquery.bottomはスクロールが発生しなければ動かないようです。また、HTMLの構文に問題がある場合(閉じタグなどが無く崩れているなど)も予想と違う挙動をすることもあります。

    キャンセル

  • 2016/10/27 01:12

    ajaxでjsonで出力するデータは、
    3000行近くあるので、
    スクロールは、発生しているとおもいます。
    HTMLをもう一度見直します。

    キャンセル

  • 2016/10/27 23:43 編集

    一度、20件ほど初期に表示してから、
    それ以後、jsonにて、
    windowをうごかしましたら、
    jquery.bottomの動作が確認できました。

    page情報をjsonにて送ろうとしたら、
    ajaxがエラーになってしまっていますが、
    また、別に質問いたします。

    回答して頂きありがとうございました。

    キャンセル

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

  • JavaScript

    20863questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8315questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CakePHP

    2549questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。