包含 selectize.js 和来自 XML 文件的数据的列表框
Listbox with selectize.js and data from XML file
我正在尝试在 HTML 中创建一个由列表框、评论框和提交按钮组成的简短表单。该表格允许一个人从列表框中 select 最多 7 个项目,然后留下关于 his/her selection 的评论。列表框的项目本身来自 XML 文件,该文件与 html、php、js 和 css 文件位于同一服务器上。
从 XML 文件和表单的其余部分填充列表框工作正常。但是,当我尝试将列表框与 selectize.js 结合使用时,我 运行 就遇到了问题。 Selectize.js 本身正在工作,我可以更改列表框,定义可以 selected 的最大项目等。但是列表框的选项突然丢失了。好像 XML 文件的项目不再正确加载。一旦我禁用 selectize.js,选项又回来了。
如果这是一个非常基本甚至重复的问题,我提前道歉。我对 jQuery 不是很好,并且将各种来源的代码拼凑在一起。我还尝试通过谷歌搜索类似问题大约一天来寻求帮助,但到目前为止没有运气。所以非常感谢任何帮助。
这是我的代码。
index.php
<?php
if($_POST['submit'] == "Submit") {
$errorMessage = "";
if(empty($_POST['select-songs'])) {
$errorMessage .= "<li>You forgot to select a song!</li>";
}
$log = "";
foreach ($_POST['select-songs'] as $song) {
$log .= $song . ",";
}
$log .= $_POST['comment'];
// $songs = $_POST['select-songs'];
// $comment = $_POST['comment'];
if(!empty($errorMessage)) {
echo("<p>There was an error with your form:</p>\n");
echo("<ul>" . $errorMessage . "</ul>\n");
} else {
$fs = fopen("mydata.txt","a");
fwrite($fs,$log . "\n");
fclose($fs);
header("Location: thankyou.html");
exit;
}
}
?>
<html>
<head>
<title>Fav5 Song Selector</title>
<meta charset="UTF-8">
<!-- jQuery libraries -->
<script src="libraries/jquery-3.2.0.min.js"></script>
<script src="libraries/selectize.min.js"></script>
<!-- scripts -->
<script language="javascript" type="text/javascript" src="ui.js"></script> <!-- include the reload.js file -->
<!-- stylesheets -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="selectize.css">
</head>
<body>
<h1>Fav5 Demo UI</h1>
<form action="index.php" method="post">
<select id="songLib" name="songLib[]" class="demo-default">
<option value="" disabled selected hidden>Select a maximum of 7 songs from your playlist</option>
</select>
</br>
<textarea name="comment" rows="5 "cols="25"></textarea>
</br>
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
ui.js
$(document).ready(function(){
$.ajax({
type: 'GET',
url: 'songs.xml',
dataType: 'xml',
success: function(xml){
$(xml).find('song').each(function() {
$('#songLib').append(
'<option>' +
$(this).find('title').text() +
'</option>'
);
});
}
});
$('#songLib').selectize({
delimiter: ',',
persist: false,
maxItems: 7
});
});
好的,我找到了解决问题的方法。
我无法让 selectize.js 与我原来问题中的 jQuery/AJAX 一起工作。但事实证明 selectize.js 确实有自己的方法将数据导入列表框。而不是在 XML 中提供我的数据,我不得不使用 JSON.
这是代码,以防有人遇到同样的问题。
HTML
<?php
if($_POST['submit'] == "Submit") {
$errorMessage = "";
if(empty($_POST['songLib'])) {
$errorMessage .= "<li>You forgot to select a song!</li>";
}
$log = "";
foreach ($_POST['songLib'] as $song) {
$log .= $song . ",";
}
$log .= $_POST['comment'];
if(!empty($errorMessage)) {
echo("<p>There was an error with your form:</p>\n");
echo("<ul>" . $errorMessage . "</ul>\n");
} else {
$fs = fopen("mydata.txt","a");
fwrite($fs,$log . "\n");
fclose($fs);
header("Location: thankyou.html");
exit;
}
}
?>
<html>
<head>
<title>Fav5 Song Selector</title>
<meta charset="UTF-8">
<!-- jQuery libraries -->
<script src="libraries/jquery-3.2.0.min.js"></script>
<script src="libraries/selectize.min.js"></script>
<!-- scripts -->
<script language="javascript" type="text/javascript" src="ui.js"></script> <!-- include the reload.js file -->
<!-- stylesheets -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="selectize.css">
</head>
<body>
<h1>Fav5 Demo UI</h1>
<form action="index.php" method="post">
<select id="songLib" name="songLib[]" class="demo-default" placeholder="Select a maximum of 7 songs from your playlist"></select>
</br>
<textarea name="comment" rows="5 "cols="25"></textarea>
</br>
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
JS
$(document).ready(function(){
$('#songLib').selectize({
valueField: 'title',
labelField: 'title',
searchField: ['artist','title'],
options: [],
maxItems: 7,
preload: true,
plugins: ['remove_button', 'restore_on_backspace'],
delimiter: ',',
sortField: [
{
field: 'artist',
direction: 'asc'
},
{
field: '$score'
}
],
load: function(query, callback) {
$.ajax({
url: 'songs.json',
type: 'GET',
dataType: 'json',
data: {
title: query,
artist: query,
},
error: function() {
console.log("fail");
callback();
},
success: function(res) {
console.log("success");
console.log(res);
callback(res);
}
});
},
render: {
option: function(item, escape) {
return '<div>'
+ escape(item.artist) + ' - '
+ escape(item.title)
+ '</div>';
},
item: function(item, escape) {
return '<div>'
+ escape(item.artist) + ' - '
+ escape(item.title)
+ '</div>';
}
}
});
});
JSON
[
{"artist": "Simon & Garfunkel","title": "Mrs. Robinson"},
{"artist": "Simon & Garfunkel","title": "The Boxer"},
{"artist": "Crosby, Stills, Nash & Young","title": "Almost Cut My Hair"},
{"artist": "Queen","title": "Another One Bites the Dust"},
{"artist": "Queen","title": "Don't Stop Me Now"},
{"artist": "CCR","title": "I Heard It Through the Grapevine"},
{"artist": "Iggy Pop","title": "The Passenger"},
{"artist": "Roy Orbinson","title": "In Dreams"},
{"artist": "Scorpions","title": "Wind Of Change"},
{"artist": "CCR","title": "Lookin' Out My Backdoor"},
{"artist": "The Who","title": "Behind Blue Eyes"},
{"artist": "Dexys Midnight Runners","title": "Come On Eileen"},
{"artist": "Neil Young","title": "Heart Of Gold"},
{"artist": "Neil Young","title": "Old Man"},
{"artist": "Buffulo Springfield","title": "Stop Children What's That Sound"},
{"artist": "Pink Floyd","title": "Wish You Were Here"},
{"artist": "Leatherbag","title": "On Down the Line"},
{"artist": "Negative Lovers","title": "Faster Lover"},
{"artist": "Crowded House","title": "Take the Weather With You"},
{"artist": "Crowded House","title": "Don't Dream It's Over"},
{"artist": "Townes Van Zandt","title": "Dead Flowers"},
{"artist": "Polo And Pan","title": "Canopee"},
{"artist": "Polo And Pan","title": "Plage Isolee"},
{"artist": "Polo And Pan","title": "Dorothy"},
{"artist": "Polo And Pan","title": "Rivolta"}
]
我正在尝试在 HTML 中创建一个由列表框、评论框和提交按钮组成的简短表单。该表格允许一个人从列表框中 select 最多 7 个项目,然后留下关于 his/her selection 的评论。列表框的项目本身来自 XML 文件,该文件与 html、php、js 和 css 文件位于同一服务器上。
从 XML 文件和表单的其余部分填充列表框工作正常。但是,当我尝试将列表框与 selectize.js 结合使用时,我 运行 就遇到了问题。 Selectize.js 本身正在工作,我可以更改列表框,定义可以 selected 的最大项目等。但是列表框的选项突然丢失了。好像 XML 文件的项目不再正确加载。一旦我禁用 selectize.js,选项又回来了。
如果这是一个非常基本甚至重复的问题,我提前道歉。我对 jQuery 不是很好,并且将各种来源的代码拼凑在一起。我还尝试通过谷歌搜索类似问题大约一天来寻求帮助,但到目前为止没有运气。所以非常感谢任何帮助。
这是我的代码。
index.php
<?php
if($_POST['submit'] == "Submit") {
$errorMessage = "";
if(empty($_POST['select-songs'])) {
$errorMessage .= "<li>You forgot to select a song!</li>";
}
$log = "";
foreach ($_POST['select-songs'] as $song) {
$log .= $song . ",";
}
$log .= $_POST['comment'];
// $songs = $_POST['select-songs'];
// $comment = $_POST['comment'];
if(!empty($errorMessage)) {
echo("<p>There was an error with your form:</p>\n");
echo("<ul>" . $errorMessage . "</ul>\n");
} else {
$fs = fopen("mydata.txt","a");
fwrite($fs,$log . "\n");
fclose($fs);
header("Location: thankyou.html");
exit;
}
}
?>
<html>
<head>
<title>Fav5 Song Selector</title>
<meta charset="UTF-8">
<!-- jQuery libraries -->
<script src="libraries/jquery-3.2.0.min.js"></script>
<script src="libraries/selectize.min.js"></script>
<!-- scripts -->
<script language="javascript" type="text/javascript" src="ui.js"></script> <!-- include the reload.js file -->
<!-- stylesheets -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="selectize.css">
</head>
<body>
<h1>Fav5 Demo UI</h1>
<form action="index.php" method="post">
<select id="songLib" name="songLib[]" class="demo-default">
<option value="" disabled selected hidden>Select a maximum of 7 songs from your playlist</option>
</select>
</br>
<textarea name="comment" rows="5 "cols="25"></textarea>
</br>
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
ui.js
$(document).ready(function(){
$.ajax({
type: 'GET',
url: 'songs.xml',
dataType: 'xml',
success: function(xml){
$(xml).find('song').each(function() {
$('#songLib').append(
'<option>' +
$(this).find('title').text() +
'</option>'
);
});
}
});
$('#songLib').selectize({
delimiter: ',',
persist: false,
maxItems: 7
});
});
好的,我找到了解决问题的方法。
我无法让 selectize.js 与我原来问题中的 jQuery/AJAX 一起工作。但事实证明 selectize.js 确实有自己的方法将数据导入列表框。而不是在 XML 中提供我的数据,我不得不使用 JSON.
这是代码,以防有人遇到同样的问题。
HTML
<?php
if($_POST['submit'] == "Submit") {
$errorMessage = "";
if(empty($_POST['songLib'])) {
$errorMessage .= "<li>You forgot to select a song!</li>";
}
$log = "";
foreach ($_POST['songLib'] as $song) {
$log .= $song . ",";
}
$log .= $_POST['comment'];
if(!empty($errorMessage)) {
echo("<p>There was an error with your form:</p>\n");
echo("<ul>" . $errorMessage . "</ul>\n");
} else {
$fs = fopen("mydata.txt","a");
fwrite($fs,$log . "\n");
fclose($fs);
header("Location: thankyou.html");
exit;
}
}
?>
<html>
<head>
<title>Fav5 Song Selector</title>
<meta charset="UTF-8">
<!-- jQuery libraries -->
<script src="libraries/jquery-3.2.0.min.js"></script>
<script src="libraries/selectize.min.js"></script>
<!-- scripts -->
<script language="javascript" type="text/javascript" src="ui.js"></script> <!-- include the reload.js file -->
<!-- stylesheets -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="selectize.css">
</head>
<body>
<h1>Fav5 Demo UI</h1>
<form action="index.php" method="post">
<select id="songLib" name="songLib[]" class="demo-default" placeholder="Select a maximum of 7 songs from your playlist"></select>
</br>
<textarea name="comment" rows="5 "cols="25"></textarea>
</br>
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
JS
$(document).ready(function(){
$('#songLib').selectize({
valueField: 'title',
labelField: 'title',
searchField: ['artist','title'],
options: [],
maxItems: 7,
preload: true,
plugins: ['remove_button', 'restore_on_backspace'],
delimiter: ',',
sortField: [
{
field: 'artist',
direction: 'asc'
},
{
field: '$score'
}
],
load: function(query, callback) {
$.ajax({
url: 'songs.json',
type: 'GET',
dataType: 'json',
data: {
title: query,
artist: query,
},
error: function() {
console.log("fail");
callback();
},
success: function(res) {
console.log("success");
console.log(res);
callback(res);
}
});
},
render: {
option: function(item, escape) {
return '<div>'
+ escape(item.artist) + ' - '
+ escape(item.title)
+ '</div>';
},
item: function(item, escape) {
return '<div>'
+ escape(item.artist) + ' - '
+ escape(item.title)
+ '</div>';
}
}
});
});
JSON
[
{"artist": "Simon & Garfunkel","title": "Mrs. Robinson"},
{"artist": "Simon & Garfunkel","title": "The Boxer"},
{"artist": "Crosby, Stills, Nash & Young","title": "Almost Cut My Hair"},
{"artist": "Queen","title": "Another One Bites the Dust"},
{"artist": "Queen","title": "Don't Stop Me Now"},
{"artist": "CCR","title": "I Heard It Through the Grapevine"},
{"artist": "Iggy Pop","title": "The Passenger"},
{"artist": "Roy Orbinson","title": "In Dreams"},
{"artist": "Scorpions","title": "Wind Of Change"},
{"artist": "CCR","title": "Lookin' Out My Backdoor"},
{"artist": "The Who","title": "Behind Blue Eyes"},
{"artist": "Dexys Midnight Runners","title": "Come On Eileen"},
{"artist": "Neil Young","title": "Heart Of Gold"},
{"artist": "Neil Young","title": "Old Man"},
{"artist": "Buffulo Springfield","title": "Stop Children What's That Sound"},
{"artist": "Pink Floyd","title": "Wish You Were Here"},
{"artist": "Leatherbag","title": "On Down the Line"},
{"artist": "Negative Lovers","title": "Faster Lover"},
{"artist": "Crowded House","title": "Take the Weather With You"},
{"artist": "Crowded House","title": "Don't Dream It's Over"},
{"artist": "Townes Van Zandt","title": "Dead Flowers"},
{"artist": "Polo And Pan","title": "Canopee"},
{"artist": "Polo And Pan","title": "Plage Isolee"},
{"artist": "Polo And Pan","title": "Dorothy"},
{"artist": "Polo And Pan","title": "Rivolta"}
]