2

jQuery のヘルプが必要です。「前日」と「翌日」ボタンがあるサイドバーのスケジュールを作成しています。私が望むのは、ユーザーがWebサイトにアクセスすると、当日の結果が表示されることです(ボタンをクリックせずに)。ただし、ユーザーが「次へ」または「前へ」をクリックすると、要求された日の結果が表示されます。

データは /home/schedule/ url から取得されます。たとえば、URL が /home/schedule/20130331 の場合、3 月 31 日のスケジュールのサインアップが取得されます。

私はこのコードを持っていますが、もちろん機能していません。私はjQueryが苦手なので、助けていただければ幸いです。

<div class="btn-group" style="padding-bottom:3px;">
  <a href="#" id="prev" class="btn">Previous Day</a>
  <a href="#" id="next" class="btn">Next Day</a>                
</div>
<div id="displayResults" name="displayResults"></div>

<script type="text/javascript">
$("#next, #prev").click(function(e){
    e.preventDefault();
    $.ajax({
        url: '{{ URL::base() }}/home/schedule/' + date,
        data: date,
        type: 'GET',
        success: function (data) {
            $('#displayResults').html(data);
        }
    });
});
</script>
4

1 に答える 1

1

仕上げ:

jsフィドルのHTML 前日翌日 、URLに変更はありません

CSS

#displayResults {
    width: 300px;
    height: 200px;
    border: 1px solid;
    padding: 10px;
}

JS

var tm;//holds timer that checks changing of url
var date='';// holds the date
    $(document).ready(function(){

        getDateFromUrl();

        updateNextBack()

        tm=setInterval(function(){ // check that is the url changed
            var tmp;
            tmp=date;
            getDateFromUrl();
            if(date!=tmp){
                updateNextBack()
                changeDate();
            }
        },300);


        function updateNextBack(){// updates next and back links
            $('#next').attr('href','#'+nextDay(date));
            $('#prev').attr('href','#'+prevDay(date));
        }

        function getDateFromUrl(){//anallyse url
            var str=new String(document.location);
            date='';
            if(str.indexOf('#')>0){
                date=str.substr(str.indexOf('#')+1,str.length-str.indexOf('#'));
            }if(date==''){
                date='20130329';
            }
            date=addToDate(date,0);
        }

        function addToDate(md,i){// adds i to md and then return md
            var tmp=new String(md); // to get date in string format

            var day , month , year; // these will hold year month and day
            day=tmp.substr(6,2);
            month=parseInt(tmp.substr(4,2))-1;
            year=tmp.substr(0,4);
            var myDate=new Date();// create a date object and set its year month and day
            myDate.setFullYear(year);
            myDate.setMonth(month);
            myDate.setDate(day);

            myDate.setDate(myDate.getDate()+i); // adds i day to date
            md=''+myDate.getFullYear();
            md+=''+(myDate.getMonth()<9?'0':'');
            md+=''+parseInt(myDate.getMonth())-(-1);
            md+=''+(myDate.getDate()<10?'0':'');
            md+=''+parseInt(myDate.getDate());

            return md;
        }

        function nextDay(md){// you should write real function
            return addToDate(md,1);
        }

        function prevDay(md){// you should write real function
            return addToDate(md,-1);
        }

        $('#next').click(function(){// for clicking next
        // its empty !!!
        });

        $('#prev').click(function(){// for clicking prev
        // its empty !!!
        });

        function changeDate(){// uses $.get('filename',callbackfunc) to update div value related to date val
            /*$.get('getDate.php?d='+date,function(data){ // you should uncomment this when you are in server
                $('#displayResults').html(data);
            });*/

            //use this when in jsfiddle
            data='content of date:'+date;
            $('#displayResults').html(data);
        }

    });

ここで作業フィドル。

于 2013-04-01T06:06:50.760 に答える