我用php编写了一个小测验，有两种类型的问题:通过单选按钮的单选答案和通过复选框的多项选择答案。代码运行在一个文件("quiz.php")中，该文件处理问题的显示以及答案的处理。
一切都很顺利，直到我不得不为答案的"排序列表"添加第三种类型——人们必须重新排序选项列表。
经过一番研究，我找到了我认为的答案:jQuery UI的"可排序"交互。简单，直接，容易实现…即使我似乎不能使它工作!
我的问题是，如果我知道一点PHP/MySql，我知道很少的Javascript，当然不知道足够的编写或调试它正确。
下面是代码，从所有用于显示问题和处理答案的php开始:
// File quiz.php
<?php session_start();
// if the form has just been submitted, handle the answers
if (isset($_POST['submit'])) {
// Do something, on a case by case basis :
switch ($_SESSION['questionType']) {
case 1 : // for radio buttons
// some code to process and save the answer to the database
break ;
case 2 : // for checkboxes
// some code to process and save the answer to the database
break ;
case 3 : // for sortable lists
// some code to process and save the answer to the database
break ;
}
}
// Here, get the elements to show from the DB, including
// the question type for the switch below
// questionType = 1 for single choice answer
// questionType = 2 for multiple choice answer
// questionType = 3 for sortable choice answer
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz</title>
<link rel="stylesheet" href=./quiz.css">
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery-ui.min.js"></script>
</head>
<body>
<?php // A bunch of code to echo the question ?>
<form action="quiz.php" method="POST">
<?php // A switch to adapt the display to the type of questions :
switch ($_SESSION['questionType']) {
case 1 : // for single choice answer
// A bunch of code to echo the possible choices w/ radio buttons
break ;
case 2 : // for multiple choice answer
// A bunch of code to echo the possible choices w/ checkboxes
break ;
case 3 : // for sortable lists ?>
<!-- the following would normaly be generated via php with info from the DB -->
<ul id="sort">
<li id="choice_1">Item 1</li>
<li id="choice_2">Item 2</li>
<li id="choice_3">Item 3</li>
<li id="choice_4">Item 4</li>
<li id="choice_5">Item 5</li>
</ul>
<?php break ; ?>
<?php } ?>
<input type="submit" name="submit" value="Submit">
</form>
这是它的断点
<script type="text/javascript">
$(function() {
$("#sort").sortable({
var newOrder = $(this).sortable('serialize');
// the 'quiz.php' file called below is the one we're in
$.post('quiz.php', {sort: newOrder };
});
$("#sort").disableSelection();
});
</script>
</body>
</html>
让我难倒的是，不仅是结果没有发送到$_POST后表单已提交-所以什么都没有发生-但$("#sort").sortable()函数内的2行代码完全破坏交互行为，即列表是不可排序的，文本可以被选择。
有什么提示吗?
[编辑]:感谢Jordan，我已经得到了可排序的部分运行，但数据仍然没有被发送。
现在使用的代码:
<script type="text/javascript">
$(function() {
$('#sort-form').on('submit',function(event){
// Prevent the form from being submitted normally
event.preventDefault();
var newOrder = $(this).sortable('serialize');
$.post('quiz.php', {sort: newOrder };
});
</script>
不会导致任何结果，在Chrome的控制台现在说有一个"未捕获的SyntaxError:输入的意外结束"就在结束标记之前。我不知道这是否相关但这让我想到要么我错过了一个错别字，要么函数需要更多的参数…
[EDIT 2]将<li> id上的"-"替换为下划线(更符合w/jQuery UI指南)
序列化和ajax调用在可排序函数中不起作用，因为您试图将它们定义为可排序组件本身的选项。您应该侦听按钮何时被按下，然后获得序列化并调用ajax函数
你可以在
中加入id<form action="quiz.php" method="POST" id="sort-form">
然后在jQuery中侦听表单何时试图提交
$('#sort-form').on('submit',function(event){
// Prevent the form from being submitted normally
event.preventDefault();
var newOrder = $('#sort').sortable('serialize', {
key: 'sort'
});
$.post('quiz.php', newOrder);
});
现在当你调用可排序组件时就像这样调用
$("#sort").sortable();
$("#sort").disableSelection();
如果不希望使用Ajax提交表单数据，可以尝试设置一个隐藏输入，将值设置为序列化的排序数据，如下所示
$('#sort-form').on('submit',function(event){
// Prevent the form from being submitted normally
event.preventDefault();
var newOrder = $('#sort').sortable('serialize', {
key: 'sort'
});
$('.hidden-input-class').val(newOrder);
// Submit the form like normal
$(this).submit();
});
我把它删除了，因为我不应该把它放在这里。我想我应该再多考虑一下。我相信这是相关的，但可能根本不清楚。但无论如何，为了避免在我的服务器上发生进一步的奇怪的事情，我删除了它，所以考虑它从未说过。祝你好运，希望你能尽快得到答案。