无法从jQuery UI中获得可排序的post数据(发送到相同的文件)
Can't get post data from jQuery UI sortable (sent to the same file)
我用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
?>
接下来,显示问题的html:
<!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();
});
我把它删除了,因为我不应该把它放在这里。我想我应该再多考虑一下。我相信这是相关的,但可能根本不清楚。但无论如何,为了避免在我的服务器上发生进一步的奇怪的事情,我删除了它,所以考虑它从未说过。祝你好运,希望你能尽快得到答案。
- 如何使用.log数据文件显示EXT-js网格
- 如何在javascript中使用会话特定的数据文件
- 数据文件出现 D3 错误
- HTML 对象数据文件(如果未找到)
- 在 JSFiddle 中链接外部 JSON 数据文件
- 如何从 SDK 插件数据文件夹加载 DLL
- 使用 jquery 从 json 数据文件动态填充选择元素
- 节点模块包括数据文件作为全局变量
- 如何获取 HTML 标记的“数据文件”属性的内容
- 在 d3.js 散点文件中使用数据数组而不是外部数据文件
- 我用PHP调用的数据文件神秘地被更改了.用户是否覆盖了它
- 从数据文件导入数组
- 谷歌驱动器API应用程序数据文件夹,是真的那么困难
- XML数据文件已更改,但更改不会;t出现在gmaps中的html页面上
- 大文件(超过~2Mb)上传-引发错误“;键'数据文件'在<MultiValueDict:{}>
- 将数据文件转换为blob
- 如何使用链接检索整个数据文件(ajax?)
- firefox(9),javascript,由于大数据文件导致分配大小溢出.有什么办法可以避免这种情况吗
- 我们可以在json数据文件中添加图像,并使用D3.js在页面上调用它
- IANA (Internet Assigned Numbers Authority)数据文件和来自www.timeand