Я использую автозаполнение jquery-ui в двух полях ввода HTML-формы в приложении Sinatra. Они работают на моей локальной машине, но не на Heroku. DatePicker JQuery-UI работает на этой же странице, поэтому я знаю, что Javery-файлы JQuery и JQuery-UI загружаются правильно. Кроме того, я вижу, что переменная, которую я использую в качестве источника для автозаполнения, фактически заполняется из базы данных. Также нет ошибок консоли.
Вот HTML:
<form action="/add-event" method="post">
Date: <input id="datepicker" class="required" type="text" maxlength="50" name="date" /><br />
Headliner: <input id="headliner" class="required" type="text" maxlength="50" name="headliner" /><br />
Venue: <input id="venue" class="required" type="text" maxlength="50" name="venue_name" /><br />
</form>
В форме есть и другие поля, но они не играют никакой роли.
Вот Jquery:
<script type="text/javascript">
var artist_names = [<%= @artist_names %>];
var venue_names = [<%= @venue_names %>];
$(document).ready(function() {
//Set button disabled
$("input[type=submit]").attr("disabled", "disabled");
var submitForm = function(date, headliner, venue) {
//If form is validated enable form
if ((date != "") && ($.inArray(headliner, artist_names) != -1) && ($.inArray(venue, venue_names) != -1))
{
$("input:submit#event").removeAttr("disabled");
}
else
{
$("input:submit#event").attr("disabled", true);
}
$('#typing').html(date+headliner + venue);
}
$("#datepicker").datepicker({
onSelect: function(dateText, inst) { submitForm(this.value, $('#headliner').val(), $('#venue').val()) }
});
$("#headliner").autocomplete({
source: artist_names,
select: function(event, ui) {
submitForm($('#datepicker').val(), ui.item.value, $('#venue').val());
$('#add-artist').empty();
}
});
$("#venue").autocomplete({
source: venue_names,
select: function(event, ui) {
submitForm($('#datepicker').val(), $('#headliner').val(), ui.item.value);
$('#add-venue').empty();
}
});
//Append a change event listener to you inputs
$('#headliner').keyup(function() {
var val = $('#headliner').val();
if ($.inArray(val, artist_names) == -1)
{
if (val=="")
{
$('#add-artist').empty();
}
else
{
$('#add-artist').html("<strong>" + val + "</strong> isn't in our database. you must first add a profile for them to add this event!<br /><form action='/add-artist-event' method='post'><br />Artist Name: <input type='text' maxlength='50' name='artist_name' value='" + val +"' /><br /> Website: <input type='text' maxlength='50' name='artist_website' /><br /> Facebook: <input type='text' maxlength='50' name='artist_facebook' /><br />Twitter: <input type='text' maxlength='50' name='artist_twitter' /><br />Soundcloud: <input type='text' maxlength='50' name='artist_soundcloud' /><br />Bandcamp: <input type='text' maxlength='50' name='artist_bandcamp' /><br /><button type='button' id='add-artist-button' onclick='addNewArtist();'>Add New Artist!</button></form><br /><br />" );
}
$("input:submit#event").attr("disabled", true);
}
else
{
$('#add-artist').empty();
submitForm($('#datepicker').val(), $('#headliner').val(), $('#venue').val());
}
});
$('#venue').keyup(function() {
var val = $('#venue').val();
if ($.inArray(val, venue_names) == -1)
{
if (val=="")
{
$('#add-venue').empty();
}
else
{
$('#add-venue').html("<strong>" + val + "</strong>" + " is not in our database. you must first add a profile for this venue to add this event!<br /><form action='/add-venue-event' method='post'><br />Venue Name: <input type='text' maxlength='50' name='venue_name' value='" + val +"'/><br />Address: <input type='text' maxlength='50' name='venue_address' /><br />City: <input type='text' maxlength='50' name='venue_city' /><br />State: <input type='text' maxlength='50' name='venue_state' /><br />Zip: <input type='text' maxlength='50' name='venue_zip' /><br />Phone: <input type='text' maxlength='50' name='venue_phone' /><br /> Website: <input type='text' maxlength='50' name='venue_website' /><br /> Facebook: <input type='text' maxlength='50' name='venue_facebook' /><br />Twitter: <input type='text' maxlength='50' name='venue_twitter' /><br /><button type='button' id='add-venue-button' onclick='addNewVenue();'>Add New Venue!</button> </form><br /><br />");
}
$("input:submit#event").attr("disabled", true);
}
else
{
$('#add-venue').empty();
submitForm($('#datepicker').val(), $('#headliner').val(), $('#venue').val());
}
});
});
var addNewArtist = function() {
$.post('/add-event/new-artist', {
artist_name: $(':input[name="artist_name"]').val(),
website: $(':input[name="artist_website"]').val(),
facebook: $(':input[name="artist_facebook"]').val(),
twitter: $(':input[name="artist_twitter"]').val(),
soundcloud: $(':input[name="artist_soundcloud"]').val(),
bandcamp: $(':input[name="artist_bandcamp"]').val()
},
function(output) {
artist_names = output.split(',');
$('#add-artist').html(output);
$('#headliner').autocomplete("option", { source: artist_names });
});
};
var addNewVenue = function() {
$.post('/add-event/new-venue', {
venue_name: $(':input[name="venue_name"]').val(),
street_address: $(':input[name="venue_address"]').val(),
city: $(':input[name="venue_city"]').val(),
state: $(':input[name="venue_state"]').val(),
zip: $(':input[name="venue_zip"]').val(),
phone: $(':input[name="venue_phone"]').val(),
email: $(':input[name="venue_email"]').val(),
website: $(':input[name="venue_website"]').val(),
facebook: $(':input[name="venue_facebook"]').val(),
twitter: $(':input[name="venue_twitter"]').val()
},
function(output) {
venue_names = output.split(',');
$('#add-venue').html(output);
$('#venue').autocomplete("option", { source: venue_names });
});
};
</script>
Я надеялся избежать включения всех javascript в вопрос, но я думаю, что это лучше, чем я. Единственная другая часть заключается в том, что когда я «просматриваю источник» в chrome, я вижу, что две переменные действительно заполняются данными:
var artist_names = [["'Bubonic Bear', "]];
var venue_names = [["'Electric Factory', "]];
UPDATE
Если я жестко закодирую список для функции автозаполнения поля "headliner", автозаполнение работает.
$("#headliner").autocomplete({
//source: artist_names,
source: ["band1", "band2", "band3"],
select: function(event, ui) {
submitForm($('#datepicker').val(), ui.item.value, $('#venue').val());
$('#add-artist').empty();
}
});
Я до сих пор не уверен в решении, кажется странным, что переменная будет доступна в локальном экземпляре приложения, а не на герою. В любом случае, я добавлю больше, если узнаю больше.