我currenlty工作与jQuery UI选项卡（仅限于下一/ previous按钮，它们的工作）和一个textarea。我已经开发了一个AJAX / JS的功能，将自动提交存储在文本区域的价值和PHP呼应的结果选项卡＃2。但我现在想改变从自动提交表单当用户点击下一步按钮adavance下提交方法。我怎样才能点击一个jQuery UI选项卡下一个按钮时提交的文本字段中的值？这是我的例，并自动提交
preVIOUS /下一步
＆LT;脚本＆GT;
$（函数（）{
变量$标签= $（'＃标签）。标签（{
禁用：[0,1]}）;
$（UI-标签面板）。每个（函数（一）{
VAR totalSize = $大小（） - 1（UI-标签面板。）。
如果（我！= totalSize）{
接下来= I + 2;
$（本）.append（＆LT; A HREF =＃类='下一个标签发相对='+接下来+'＆gt;接下来页面和放大器;＃187;＆LT; / A＆gt;中）;
}
如果（ⅰ！= 0）{
preV =我;
$（本）.append（＆LT; A HREF =＃类='preV-标签先行者相对='+ preV +'＆GT;＆安培;＃171; preV页及所述; / A＆gt;中）;
}
}）;
$（'。下一个选项卡，。preV-选项卡）。点击（函数（）{
VAR的tabIndex = $（本）.attr（相对）;
$ tabs.tabs（启用，的tabIndex）
.tabs（选择，的tabIndex）
.tabs（选项，残障人士，[0,1]）;
返回false;
}）;
}）;
HTML / PHP
＆LT ;?
如果（使用isset（$ _ POST ['wmdVal']））{
$ wmdVal = $ _ POST ['wmdVal'];
回声（＆LT; DIV ID =wmd_result＆GT;＆LT;跨度ID =resultval＆GT;＆LT; H2＆GT; PHP的回声结果：其中; / H＆GT;'。$ wmdVal'＆LT; / SPAN＆GT;＆LT; / DIV＆GT;'）;
}
？＆GT;
＆LT; textarea的ID =大规模杀伤性武器输入NAME =大规模杀伤性武器输入＆GT;＆LT; / textarea的＆GT;
＆LT;输入类型=隐藏ID =myhiddenNAME =myhidden值=＆LT ;? $ wmdVal＆GT;＆GT;
解决方案
记住你是哪个选项卡（currentTab ）。如果一个选项卡被选中，检查第一个选项卡离开;如果是与当前的 preVIEW HTML 的发送Ajax请求;没有成功的处理程序是需要的，我们并不需要任何客户端的改变。如果下一个选项卡中显示，重置 currentTab 指数。在服务器端（PHP），你可以如将数据保存到数据库中，但并不需要任何的结果。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN＆GT;
＆LT; HEAD＆GT;
＆LT;元字符集=utf-8＆GT;
＆LT;冠军＆GT;你好＆LT; /标题＆GT;
＆LT;链接类型=文/ CSS的href =CSS / postingtabs.css相对=样式＆GT;
＆LT;链接类型=文/ CSS的href =CSS / wmd.css相对=样式＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / wmd.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / showdown.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
变种currentTab = 0;
$（函数（）{
变量$标签= $（'＃标签）。标签（{
禁用：[0,1]
，选择：函数（）{
如果（currentTab == 0）{
$阿贾克斯（{
键入：POST，
网址：test1.php
数据：{wmdVal：$（＃wmd- preVIEW）HTML（）}
}）;
}
}
，显示：功能（事件，UI）{
currentTab = ui.index;
}
}）;
$（UI-标签面板）。每个（函数（一）{
VAR totalSize = $大小（） - 1（UI-标签面板。）。
如果（我！= totalSize）{
接下来= I + 2;
$（本）.append（＆LT; A HREF =＃类='下一个标签发相对='+接下来+'＆gt;接下来页面和放大器;＃187;＆LT; / A＆gt;中）;
}
如果（ⅰ！= 0）{
preV =我;
$（本）.append（＆LT; A HREF =＃类='preV-标签先行者相对='+ preV +'＆GT;＆安培;＃171; preV页及所述; / A＆gt;中）;
}
}）;
$（'。下一个选项卡，。preV-选项卡）。点击（函数（）{
VAR的tabIndex = $（本）.attr（相对）;
$ tabs.tabs（启用，的tabIndex）
.tabs（选择，的tabIndex）
.tabs（选项，残障人士，[0,1]）;
返回false;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =页面包＆GT;
＆LT; DIV ID =标签＆GT;
＆LT; UL＆GT;
＆LT;李＆GT;＆LT; A HREF =＃标签-1＆GT; 1＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃标签-2＆GT; 2'; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; DIV ID =标签-1级=UI-标签面板UI的标签隐藏＆GT;
＆LT; DIV ID =大规模杀伤性武器的编辑器级=大规模杀伤性武器面板＆GT;
＆LT; DIV ID =大规模杀伤性武器按钮栏＆GT;＆LT; / DIV＆GT;
＆LT; textarea的ID =大规模杀伤性武器输入NAME =大规模杀伤性武器输入＆GT;＆LT; / textarea的＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =wmd- preVIEW级=大规模杀伤性武器面板＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =标签-2级=UI-标签面板UI的标签隐藏＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
===更新===
如果你真的想暂时看到的结果进行测试，再次添加成功处理程序阿贾克斯参数：
成功：函数（结果）{
$（'＃wmd_result）HTML（$（'＃resultval，结果）。html的（））;
}
和追加的结果 DIV 再次第一个选项卡的末尾：
＆LT; DIV ID =wmd_result＆GT;＆LT; / DIV＆GT;
I am currenlty working with jquery ui tabs(which works only with next/previous buttons) and a textarea. I have developed an ajax/js function that will auto submit the value stored in the text area and php echo the result in tab#2. But I am currently want to change the method from auto submitting the form to submit when the user clicks the Next button to adavance to the next. How can I submit the value inside a text field when clicking the next button in a jquery ui tabs? Here is my EXAMPLE with autosubmit
PREVIOUS/NEXT
<script>
$(function() {
var $tabs = $('#tabs').tabs({
disabled: [0, 1] });
$(".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;
});
});
HTML/PHP
<?
if (isset($_POST['wmdVal'])){
$wmdVal = $_POST['wmdVal'];
echo ('<div id="wmd_result"><span id="resultval"><h2>PHP Echo result:</h2>'.$wmdVal.'</span></div>');
}
?>
<textarea id="wmd-input" name="wmd-input"></textarea>
<input type="hidden" id="myhidden" name="myhidden" value="<? $wmdVal ?>">
解决方案
Remember on which tab you are (currentTab). If a tab is selected, check if the first tab is leaving; if yes send the ajax request with the current preview html; no success handler is needed, we don't need any client changes. If the next tab is shown, reset the currentTab index. On server side (php) you can e.g. save the data to the database but doesn't need any result.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
<link type="text/css" href="css/postingtabs.css" rel="stylesheet">
<link type="text/css" href="css/wmd.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script type="text/javascript" src="js/wmd.js"></script>
<script type="text/javascript" src="js/showdown.js"></script>
<script type="text/javascript">
var currentTab = 0;
$(function() {
var $tabs = $('#tabs').tabs({
disabled: [0, 1]
, select: function() {
if (currentTab == 0) {
$.ajax({
type: "POST",
url: "test1.php",
data: { "wmdVal": $("#wmd-preview").html() }
});
}
}
, 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>
</head>
<body>
<div id="page-wrap">
<div id="tabs">
<ul>
<li><a href="#tab-1">1</a></li>
<li><a href="#tab-2">2</a></li>
</ul>
<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea id="wmd-input" name="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel"></div>
</div>
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide"></div>
</div>
</div>
</body>
</html>
=== UPDATE ===
If you really want to see a result temporarily for testing, add the success handler again to the ajax parameters:
success: function(result) {
$('#wmd_result').html( $('#resultval', result).html());
}
And append the result div again to the end of first tab:
<div id="wmd_result"></div>
相关推荐
最新文章