Это мой файл JSONP:
<?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; ?>
Он работает, вплоть до точки, но получая {«успех»: true, «error»: «", "data": {"schedule": как видно на этом сайте, прежде чем мой json_encode будет где я.
Однако я не могу заставить его отображать какие-либо данные в моей таблице, хотя он создает код на экране, когда я просматриваю его по адресу http: //www.myradio1.localhost/onairschedule.php .
Фактический код хранится по адресу http: //www.myradiostations.localhost/schedule.php
и функция обратного вызова работает нормально, одним из примеров является http: //www.myradiostations.localhost/schedule.php? callback =? & name = Northern + FM и http: //www.myradiostations.localhost/schedule.php? callback =? & name = Southern + FM, но что мне нужно сделать, чтобы изменить его, как в этих примерах: этот пример и этот пример , и генерировать сообщение об ошибке, подобное этому, если такой файл не существует.
Я на полпути, мне просто нужен совет по исправлению моего кода!
В основном, что я пытаюсь сделать … получить JSONP для работы в моей таблице HTML, которая будет варьировать содержимое в зависимости от URL-адреса в моем файле javascript на моей странице, а именно:
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); });
Он должен изменить расписание в соответствии с JSONP, но что мне делать, чтобы исправить это?
В основном, я пытаюсь создать свою собственную локальную версию http://radioplayer.bauerradio.com/schedule.php?callback=&name=Rock+FM и ее JSON / JSONP (я не уверен, какой именно тип оригинала, но опять же сайт является экспериментальным и в домене .localhost) для целей тестирования, где контент берется из базы данных, и изменяется в соответствии с именем станции, например http://radioplayer.bauerradio.com/schedule.php?callback= & name = Metro + Radio и http://radioplayer.bauerradio.com/schedule.php?callback=&name=Forth+One и т. д.
Изменить: полный код для моей страницы можно увидеть по адресу http://pastebin.com/ENhR6Q9j
Я не уверен точно, чего не хватает, но из кода, который вы дали до сих пор, я сделал jsfiddle:
демонстрация
Я изменил некоторые вещи, чтобы заставить его работать (в основном добавляя материал), потому что я не знаю ваш оригинальный HTML-файл. Но я также внес некоторые изменения в зависимости от того, что вы говорите, чего хотите. Прежде всего, я изменил ваш вызов $.getJSON
как нечто вроде:
$.getJSON('http://radioplayer.bauerradio.com/schedule.php?callback=?', { name: stationName //stationName is from the argument passed }, function(json){...})
Который должен вернуть станцию на основе того, что передается
LocalhostRadioStations.Schedule.ScheduleGen.init(twittiName);
Чтобы сделать его более интересным, я также добавил немного кода, который читается с URL-адреса. В этом случае, если вы перейдете на страницу с domain.htm/page?Northern FM
он прочитает текст после ?
и поместил его в twittiName
.
var twittiName="Rock FM"; //default station if(window.location.search){ twittiName=window.location.search.substring(1) //or window.location.hash }
Пытался искать другие станции, которые могли бы быть на вашем сайте, но до сих пор я мог тестировать только «Rock + FM». Но это означает, что вы можете показать ошибки, которые ваш код может обрабатывать как есть.
?Rock+FM
?Random Name
Похоже, что ваш код в основном работает, но комментируйте, если я что-то пропустил.