Fetch data from URL and Display with HTML

Question

I need some help with jQueury. I'm building a sidebar schedule which has a "Previous Day" and a "Next Day" button. What I want is if the user visits the website, it'll display the results for the current day (without clicking any buttons). But if the user clicks either "next" or "previous", it will show the results for the requested day.

The data is fetched from the /home/schedule/ url. For example, if the url is: /home/schedule/20130331, it'll fetch schedule signups for March 31st.

I have this code, however, it of course is not working. I'm not great with jQuery, so any help would be appreciated.

<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>

I'm honestly not sure how to define it. Specifically how to define it so it'll pull the date form the url query string. — Dutchcoffee
– Dutchcoffee, Commented Apr 1, 2013 at 3:24
Not related to your original question but don't forget about timezones (UTC) or you'll be giving out the wrong data for part of the day. — Aaron D
– Aaron D, Commented Apr 1, 2013 at 3:26
@imsiso if a user clicks the next button X times, it'll move the date X days ahead of the current date, fetching data for the new date. Same thing for the previous button. — Dutchcoffee
– Dutchcoffee, Commented Apr 1, 2013 at 3:29
What's {{ URL::base }}? Are you using some templating system? — Paul Schreiber
– Paul Schreiber, Commented Apr 1, 2013 at 3:30

Sina R. · Accepted Answer · 2013-04-02 00:41:14Z

1

the finil:

HTML Previous Day Next Day in js fiddle you wont see any change in 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);
        }

    });

Here the working fiddle.

edited Apr 2, 2013 at 0:41

answered Apr 1, 2013 at 6:06

Sina R.

1,7782 gold badges19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dutchcoffee Over a year ago

It almost works...one thing I noticed though is it doesn't know when it's the last day of the month. So for example, 20130331 (march 31st), it kept going forward 20130332...20130333...etc, when it should switch to 20130401.

Dutchcoffee Over a year ago

It'd be great if you could help!

Sina R. Over a year ago

ok first come to chat. chat.stackoverflow.com/rooms/27298/…

Dutchcoffee Over a year ago

I'm on mobile right now. I will be available in about 4 hours.

Dutchcoffee Over a year ago

You betcha! Thanks for your help.

Collectives™ on Stack Overflow

Fetch data from URL and Display with HTML

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related