Onchange javascript在jquerymobile中提交表单中断
onchange javascript to submit form breaks in jquerymobile
我使用了这样的javascript…
<select onchange="document.langForm.submit();" ... >
但是当我开始使用jquerymobile时，它就坏了。
我知道这个问题已经提过100次了。但是先前案例的超链接在这里没有帮助，因为我已经读了几十个，不幸的是，我只是不够聪明，无法理解任何其他的讨论。认真对待。我完全糊涂了。
另一方面，我花时间做了一个非常非常简单的例子来展示我的头痛。所以，如果有人能确切地告诉我如何修复这两页，那将是非常感激的。 http://activemetrics.ch/test/en.html http://activemetrics.ch/test/de.html请注意，您可以在浏览器中加载其中任何一个，然后通过更改选择列表中的选择切换到另一个页面。但是，在进入第二页之后，您不能使用类似的操作返回到第一页。
是的，这与ajax有关。我知道这么多。但如何解决这两个页面的问题才能让用户轻松地在两个页面之间切换呢?
欢迎所有建议。
非常感谢那些花时间为我考虑这个问题的人!
jd
说明:
要理解这种情况，您需要了解 jQuery Mobile 的工作原理。它使用ajax加载其他页面。
第一个页面正常加载。其中 HEAD 和 BODY 被加载到 DOM 中，等待其他内容。当加载第二个页面时，只有它的 BODY 内容被加载到 DOM 中。
从我在你的回答中你明白这一点，但你犯了一个错误。有两个html文件: en.html 和 de.html ，但它们的名字并不重要。重要的是页面id或id的属性 data-role="page" div。在您的情况下，您有2个页面具有相同的div和相同的选择id。因为它们都被加载到中，所以DOM 事件绑定将始终转到第一个加载的页面。
你需要做的是为你的页面和你的选择框使用唯一的id。
工作示例:
en.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1">
<h3>this is english</h3>
<form name="langForm" id="langForm" action="BookNow.asp?" method="get" style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Some Sort of Change</option>
</select>
</form>
<script>
$(document).on('pageinit', '#sbePage1' ,function () {
$(document).off('change', '#langId').on('change', '#langId',function (event) {
$.mobile.changePage('de.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
de.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage2">
<h3>this is german</h3>
<form name="langForm2" id="langForm2" action="BookNow.asp?" method="get" style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId2" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Something Else</option>
</select>
</form>
<script>
$(document).on('pageinit', '#sbePage2' ,function () {
$(document).off('change', '#langId2').on('change', '#langId2',function (event) {
$.mobile.changePage('en.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
编辑:
虽然我理解你的愿望，但我仍然必须告诉你这是不可能的。在当前示例中，您不能使用jQuery Mobile拥有具有相同id的2个页面。考虑一下，您将有两个具有相同id的页面加载到DOM中。每次您尝试访问页面DIV时，您将始终访问第一页，因为它是第一行。如果你想创建一个多语言页面，你不需要几个html页面。只要找一个好的jQuery多语言插件。
另一方面，如果你关闭ajax，你可以做你想做的，但你会失去动画过渡。
没有ajax的例子，但页面有相同的id
en.html:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1en">
<h3>this is english</h3>
<form name="langFormEn" id="langFormEn" action="BookNow.asp?" method=get style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Some Sort of Change</option>
</select></form>
<script>
$("#sbePage1en").live('pageshow', function () {
$('#langFormEn').bind('change', function (event) {
$.mobile.changePage('de.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
de.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1de">
<h3>this is german</h3>
<form name="langFormDe" id="langFormDe" action="BookNow.asp?" method=get style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Something Else</option>
</select></form>
<script>
$("#sbePage1de").live('pageshow', function () {
$('#langFormDe').bind('change', function (event) {
$.mobile.changePage('en.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
相关文章：
- Jquery提交表单而不刷新
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- 每次提交表单时都会重新加载网页
- Razor中的自动提交表单
- 使用 JavaScript 自动提交表单
- 点击相同的按钮打开模型，然后提交表单
- 添加和删除隐藏字段数组中的值，而不提交表单
- 使用Ajax提交表单
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在不重新加载的情况下提交表单，并使用Node+Express将数据传递回同一页面
- 有登录表单时无法提交表单
- 带有select的jquery提交表单不起作用
- 如何防止回车键提交表单，但仍然允许回车工作
- 使用按钮和单选按钮提交表单，但始终使用相同的值
- 在提交表单之前确定重复值
- 如何创建动态ajax提交表单
- HTML提交表单，同时包含空字段检查和按钮隐藏
- 如何使用jQueryAjax使用动态html输入texbox提交表单
- 当触发下拉列表的onchange事件时，使用JavaScript提交表单
- 提交表单后，Watir文本框输入未持续(重置为以前的文本框输入）
