JSONP and GET with callbacks - help needed correct

Question

This is my JSONP file:

<?php
   header('Content-type: application/javascript;');
header("access-control-allow-origin: *");
header("Access-Control-Allow-Methods: GET");
  //db connection detils
  $host = "localhost";
  $user = "test";
  $password = "test";
  $database = "myradiostation1";

  //make connection
  $server = mysql_connect($host, $user, $password);
  $connection = mysql_select_db($database, $server);

  //query the database
  $query = mysql_query("SELECT *, DATE_FORMAT(start, '%d/%m/%Y %H:%i:%s') AS start, 
                                   DATE_FORMAT(end, '%d/%m/%Y %H:%i:%s') AS end FROM radiostation1");

    //loop through and return results
  for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
    $row = mysql_fetch_assoc($query);

    $shows[$x] = array("id" => $row["id"], "startminutes" => $row["startminutes"], "start" => $row["start"], "endminutes" => $row["endminutes"],"end" => $row["end"],"mediumname" => $row["mediumname"], "longname" => $row["longname"], "description" => $row["description"],"short_id" => $row["short_id"],"promomessage" => $row["promomessage"],"email" => $row["email"],"phonenumber" => $row["phonenumber"],"textnumber" => $row["textnumber"],"textprefix" => $row["textprefix"],"showimage" => $row["showimage"],"longdescription" => $row["longdescription"],"facebooklink" => $row["facebooklink"],"otherlink" => $row["otherlink"],"websitelink" => $row["websitelink"],"keywords" => $row["keywords"] );     
  }

  //echo JSON to page
  $response = $_GET["callback"] . "(" . json_encode($shows) . ");";
  echo $response; 

?>

It does work, up to a point, but getting the {"success":true,"error":"","data":{"schedule": as seen at this site before my json_encode is where I am.

However, I cannot get it to display any data in my table, although it DOES produce code on-screen when I view it at http://www.myradio1.localhost/onairschedule.php.

The actual code is stored at http://www.myradiostations.localhost/schedule.php

and the callback function works OK, one example being http://www.myradiostations.localhost/schedule.php?callback=?&name=Northern+FM and http://www.myradiostations.localhost/schedule.php?callback=?&name=Southern+FM but what do I need to do to make it change like in these examples: this example and this example, and to generate an error message like this if no such file exists.

I'm halfway there, just need some advice on fixing my code!

Basically, what I'm trying to do... get a JSONP to work in my HTML table which will vary the content depending on the URL in my javascript file on my page, which is:

var doFades = true;

var LocalhostRadioStations = {
  Schedule : {}
};

$(document).ready(function(){

  LocalhostRadioStations.Schedule.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

  LocalhostRadioStations.Schedule.Show = function () {
    _s = null;
    _startDate = null;
    _endDate = null;
    this.days = LocalhostRadioStations.Schedule.days;
    _selector = '';

    this.setShow = function(s) {
      this._s = s;

      this._startDate = new Date( parseInt(s.startminutes, 10) * 1000);
      this._endDate = new Date(parseInt(s.endminutes, 10) * 1000 ); 

    };

    this.getEndDate = function(){
      return this._endDate;
    }

    this.getStartDate = function(){ 
      return this._startDate;
    }

    this._getShowDay = function (){
      return this.days[this.getStartDate().getDay()];
    };

    this._getShowUnitsTaken = function(){
      // if it's the same day
      return this._getEndUnits() - this._getStartUnits();
    };

    this._getEndUnits = function(){   
      if(this.getEndDate().getHours() == 0)
      {
        //console.log(this._s.longname  +' ends at midnight');
        return 48;
      }

      return this.getEndDate().getMinutes() !== 0 ? (this.getEndDate().getHours() * 2) : (this.getEndDate().getHours() * 2);
    };

    this._getStartUnits = function(){
      if(this.getStartDate().getHours() == 0)
      {
        return 0;
      }

      return this.getStartDate().getMinutes() !== 0 ? (this.getStartDate().getHours() * 2) : (this.getStartDate().getHours() * 2);
    };

    this.getCellPositions = function() {
      return {
        'start' : this.getStartDate(),
        'end' : this.getEndDate(),
        'colIndex' : this.getStartDate().getDay() + 2,
        'startUnits' : this._getStartUnits(),
        'endUnits' : this._getEndUnits(),
        'unitsTaken' : this._getShowUnitsTaken()
      }
    };

    this.pad = function(number){
      return number < 10 ? '0'+number : number; 
    };

    // return the table cell html.
    this.toHtml = function () {

      var d = new Date();
      var units = this._getStartUnits();

      var rowspan = this._getShowUnitsTaken();    
      var desc = this._s.description;
      var name = this._s.longname;

      var starttime   = this.pad(this.getStartDate().getHours()) + ':' + this.pad(this.getStartDate().getMinutes());
      var endtime   = this.pad(this.getEndDate().getHours()) + ':' + this.pad(this.getEndDate().getMinutes());

      var site = this._s.websitelink;

      var cls = this.isActive() ? 'current-program' : '';

      var isToday = this.getStartDate().getDay() === d.getDay() ? 'active-program' : '';

      var html = '<td class="schedule-show ' + isToday + ' ' + cls + '" rowspan="' + rowspan + '" data-start="' + this.getStartDate() + '" data-end="' + this.getEndDate() + '">';
        html += '<div>';
        html += '<a href="' + site + '" title="' + desc + '">' + name + '</a>';
        html += '</div>';
        if(doFades)
        {
          html += '<div class="schedule_details clearfix" style="display:none;">';
          html += '<img width="105px" height="105px" alt="' + desc + '" src="' + this._s.showimage + '">';
          html += '<strong>' + name + '</strong>';
          html += '<p>' + desc + '</p>';
          html += '<span>' + starttime + ' - ' + endtime +'</span>';
          html += '</div>';
        }
        html += '</td>';      

      return html;
    };

    this.setTableSelector = function(sel){
      this._selector = sel;
    };

    // check if we should add the active class.
    this.isActive = function(){
      var t = new Date();

      return  t >= this.getStartDate() && t <= this.getEndDate();
    };
  };

  LocalhostRadioStations.Schedule.ScheduleGen = function(){

    return {
      insertShow : function(show) {
        var p = show.getCellPositions();

        $('tr#units-' + p.startUnits).append(show.toHtml());
      },

      init : function (stationName){
        var self = this;

        // load the schedule.
        $.getJSON('http://www.myradiostations.localhost/schedule.php?callback=?&name=', {
          name: 'Northern FM'
        }, function(json){
          // loop each show and append to our giant table.
          // this is well sick.

          if(json.success === false)
          {
            $('.content-inner table').remove();

            $('<div>errors</div>').appendTo('.content-inner');
          }
          else
          {
            var currentDay = '';
            var day = 0;
            // highlight the current time..
            var d = new Date();
            var weekStart = new Date();

            weekStart.setDate(d.getDate()-6-(d.getDay()||7));

            $.each(json.data.schedule, function(i, broadcast){


              var dStart = new Date( parseInt(broadcast.startminutes, 10) * 1000);
              var dEnd = new Date(parseInt(broadcast.endminutes, 10) * 1000 ); 


              /*// transform to a show object defined above, if the show spans 2 days we create two show objects.
              // IF THE SHOW STARTS/ENDS AT MIDNIGHT, DON'T SPLIT IT.
              if(dStart.getHours() !== 0 && dEnd.getHours() !== 0 && dStart.getDate() != dEnd.getDate())
              {
                var showOne = new LocalhostRadioStations.Schedule.Show();
                showOne.setShow(broadcast);

                // set to midnight 
                showOne.getEndDate().setHours(0);
                showOne.getEndDate().setMinutes(dStart.getMinutes());


                // append first half of show.
                self.insertShow(showOne);

                // handle second half.
                var showTwo = new LocalhostRadioStations.Schedule.Show();
                showTwo.setShow(broadcast);

                showTwo.getStartDate().setDate(showTwo.getStartDate().getDate() + 1);
                showTwo.getStartDate().setHours(0);
                showTwo.getStartDate().setMinutes(dEnd.getMinutes());

                //console.log('2nd Half Start: ' + showTwo.getStartDate());
                //console.log('2nd Half End: ' + showTwo.getEndDate());

                self.insertShow(showTwo);


              }
              else
              {*/
                var show = new LocalhostRadioStations.Schedule.Show();

                show.setShow(broadcast);
                show.setTableSelector('table#schedule');

                // add the show to the table. Thankfully the order these come out the API means they get added 
                // in the right place. So don't change the schedule builder code!

                self.insertShow(show);
              //}


            });

            var days = LocalhostRadioStations.Schedule.days;   

            // apply the current day / time classes 
            $('th:contains('+ days[d.getDay()]+')').addClass('active');

            $('td.time').each(function(i, cell){
              // get the value, convert to int. 
              var hours = $(cell).html().split(':')[0];

              // compare the hours with now, add class if matched. 
              if(parseInt(hours, 10) === d.getHours())
              {
                $(cell).addClass('current_time');
              }
            });
          }


          if(doFades)
          {
            // apply events to show info fade in / out.
            $('td.schedule-show').hover(function(){
              $(this).find('.schedule_details').fadeIn('fast');
            }, function(){
              $(this).find('.schedule_details').fadeOut('fast');
            });
          }
        });


      }
    };
  }();


  LocalhostRadioStations.Schedule.ScheduleGen.init(twittiName);

});

It should change the schedule according to the JSONP, but what do I do to fix it?

Basically, I am trying to make my own localhost version of http://radioplayer.bauerradio.com/schedule.php?callback=&name=Rock+FM and its JSON / JSONP (I am not sure exactly what type the original is, but then again the site is experimental and on a .localhost domain) for testing purposes where the content is taken from the database, and changes according to station name, e.g. http://radioplayer.bauerradio.com/schedule.php?callback=&name=Metro+Radio and http://radioplayer.bauerradio.com/schedule.php?callback=&name=Forth+One etc.

Edit: The full code for my page can be seen at http://pastebin.com/ENhR6Q9j

Answer 1

I'm not sure exactly what's missing, but from the code you gave so far, I made a jsfiddle:

Demo

I modified some things to make it work (mostly appending stuff), because I don't know your original HTML file. But I also made some changes based on what you say you wanted. First of all I modified your $.getJSON call to be something like:

$.getJSON('http://radioplayer.bauerradio.com/schedule.php?callback=?', {
          name: stationName //stationName is from the argument passed
        }, function(json){...})

Which should give back the station based on what is passed to

LocalhostRadioStations.Schedule.ScheduleGen.init(twittiName);

To make it more interesting, I also added a bit of code that reads from the url. In this case if you go to the page with a domain.htm/page?Northern FM it will read the text after the ? and put it in twittiName.

var twittiName="Rock FM"; //default station

if(window.location.search){
   twittiName=window.location.search.substring(1)   //or window.location.hash
}

Tried to look for other stations that might be on your publics site, but so far I could only test with "?Rock+FM". But does mean you can show the errors, which your code can handle as it is.

• ?Rock+FM
• ?Random Name

So it seems that your code mostly works but do comment if I have missed anything.