我正在使用一个ajax表单，它假设通过单击按钮提交。我见过类似的项目，但我遇到了死胡同。我遇到的问题是输入字段值没有在选项卡2中得到回显。我设置了一个参数var currentTab来指示和比较何时点击下一个选项卡。
谢谢
AJAX / JS功能
<script>
var currentTab = 0;
$(function() {
var $tabs = $('#tabs').tabs({
disabled: [0, 1]
, select: function() {
if (currentTab == 0) {
$.ajax({
type: "POST",
url: "tabs.php",
data: { "textarea": $("#textarea_input").html(),
"title": $("#title_input").html()
},
success: function(result) {
$("#tab-2").html(result);
}
});
}
}
, show: function(event, ui) {
currentTab = ui.index;
}
});
$(".ui-tabs-panel").each(function(i) {
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
var tabIndex = $(this).attr("rel");
$tabs.tabs('enable', tabIndex)
.tabs('select', tabIndex)
.tabs("option","disabled", [0, 1]);
return false;
});
});
</script>
PHP
<?
if (isset($_POST['title'])){
$title = $_POST['title'];
echo ('<div id="title_result"><span class="resultval"><h2>Title Echo result:</h2>'.$title.'</span></div>');
}
if (isset($_POST['textarea'])){
$textarea = $_POST['textarea'];
echo ('<div id="textarea_result"><span class="resultval"><h2>Textarea Echo result:</h2>'.$textarea.'</span></div>');
}
?>
HTML Tab2是结果应该是php echo out
的地方<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<label for="title">Title</label>
<input type="text" id="title_input" name="title_input" size="60" autocomplete="off" value="<?=$title?>"/><br>
<label for="textarea_input">Textarea</label>
<textarea id="textarea_input" name="textarea_input"><?=$textarea?></textarea>
</div>
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
<div id="title_result" style="padding:20px;"></div>
<div id="textarea_result" style="padding:20px;"></div>
</div>
答案 0 :(得分：3)
一些评论：
你应该首先从PHP添加回显的html，然后才可以使用$（“＃resultval”）从jquery访问它
我会解释 - 看看你的“成功”处理程序
success: function(result) {
$('#textarea_result').html( $('#resultval', result).html());
$('#title_result').html( $('#resultval', result).html());
}
代码应为
success: function(result) {
$('#textarea_result').html( result);
$('#title_result').html( result);
}
如果有的话...但我不认为这就是你的意思。
如果您想问我 - 在PHP中渲染整个下一个标签并执行$("#tab2").html(result);
评论＃2 你有2个相同的ID - resultval ..
评论＃3 - 你在Ajax中发送“textarea”和“title”，但引用$ _POST [“textarea_input”]和$ _POST [“title-input”]
评论＃4 -
您使用$("#textarea-input").html()来获取值而不是$("#textarea-input").val()。同样适用于“title_input”
这是我的工作版本（只需删除“头”的东西）。
这是我的main.php -
<html>
<head>
<link rel="stylesheet" type="text/css" href="/stackoverflow/public/jquery-ui-1.8.22.custom.css" media="screen" />
<script src="/stackoverflow/public/jquery-1.7.2.min.js"></script>
<script src="/stackoverflow/public/jquery-ui-1.8.22.custom.min.js"></script>
</head>
<body>
<div id="page-wrap">
<div id="tabs">
<ul>
<li><a href="#tab-1"> TAB1</a></li>
<li><a href="#tab-2"> TAB2</a></li>
</ul>
<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<label for="title_input">Title</label>
<input type="text" id="title_input" name="title_input" size="60" autocomplete="off" value="my title"/><br>
<label for="textarea-input">Textarea</label>
<textarea id="textarea-input" name="textarea-input"></textarea>
</div>
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
</div>
</div>
</div>
<script>
var currentTab = 0;
$(function() {
var $tabs = $('#tabs').tabs({
disabled: [0, 1]
, select: function() {
console.log("selecting a new tab " + currentTab);
if (currentTab == 0) {
$.ajax({
type: "POST",
url: "tabs.php",
data: { "textarea": $("#textarea-input").val(),
"title": $("#title_input").val()
},
success: function(result) {
$("#tab-2").html(result);
}
});
}
}
, show: function(event, ui) {
currentTab = ui.index;
}
});
$(".ui-tabs-panel").each(function(i) {
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
var tabIndex = $(this).attr("rel");
$tabs.tabs('enable', tabIndex)
.tabs('select', tabIndex)
.tabs("option","disabled", [0, 1]);
return false;
});
});
</script>
</body>
</html>
这是我的“tabs.php”
我的工作示例可以在my site
找到<?php
echo "This is the result are you ready?";
if (isset($_POST['title'])){
$title = $_POST['title'];
echo ('<div id="title_result"><span id="resultval"><h2>Title Echo result:</h2>'.$title.'</span></div>');
}
else{
echo "title_input is not defined!";
}
if (isset($_POST['textarea'])){
$textarea = $_POST['textarea'];
echo ('<div id="textarea_result"><span id="resultval"><h2>Textarea Echo result:</h2>'.$textarea.'</span></div>');
}
?>
让我知道是否还有其他事情。
答案 1 :(得分：1)
您可能需要先考虑清理HTML并正确使用PHP ...您的HTML标签2应为：
<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<label for="title">Title</label>
<input type="text" id="title_input" name="title_input" size="60" autocomplete="off" value="<?=$title?>"/><br>
<label for="textarea-input">Textarea</label>
<textarea id="textarea-input" name="textarea-input"><?=$textarea?></textarea>
</div>
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
<div id="title_result" style="padding:20px;"></div>
<div id="textarea_result" style="padding:20px;"></div>
</div>
你在title_input名称之后有一个额外的引用，当你想在没有回声的情况下吐出PHP代码时，请像这样使用它：
<?=$title?>
顺便说一下，你的php中有额外的脏代码......这个：
if (isset($_POST['title_input"'])){
$title = $_POST['title_input"'];
echo ('<div id="title_result"><span id="resultval"><h2>Title Echo result:</h2>'.$title.'</span></div>');
}
应该是：
if (isset($_POST['title_input'])){
$title = $_POST['title_input"'];
echo ('<div id="title_result"><span id="resultval"><h2>Title Echo result:</h2>'.$title.'</span></div>');
}
你在php中有一个额外的引用：
$_POST['title_input"']
通过并清理您的代码