0

我在 jQuery ui-tab 上有表单，它将数据加载到显示在同一 ui-tab 上的列表中。我已经设法加载数据，并且显示返回到相同的选项卡以输入其他项目。但是，根据列表的排序顺序，新项目并不总是在视觉上很明显，我想淡入一条消息，但我无法让它在没有手动页面刷新的情况下返回到同一个选项卡一起工作。我已经附上了我正在尝试使用的两个脚本。

脚本 A

<script> // this one loads data perfectly but no success message appears
$(document).ready(function() { 
    $("#addtodoitem").live( 'submit' , function(evt) {
        evt.preventDefault();
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) { 
                $('.ui-tabs-panel:visible').html(data);
                $('.itemadded').fadeIn(1000).delay(4000).fadeOut(1000);
           };       
        });
    });
});

脚本 B

<script>    //this one shows the message and loads the data, but it also loads another 
        //copy of ui-tabs overlapping the original
$(document).ready(function() { 
    $('#addtodoitem').ajaxForm(function(data) { 
        $('.ui-tabs-panel:visible').html(data);
        $(".itemadded").fadeIn(1000).delay(4000).fadeOut(1000);
    }); return false;  
});

HTML

<div id="tabs_5" class="tabs">

<h2 id="todo5" class="tablecaption">Add To-do</h2>

<p>To raise a new issue please enter the description of the issue below.</p>

    <form id="addtodoitem" class="todo" method="post" action="todo_do.php?do=<?=$todo_do != '' ? "edit&to_id={$_GET['to_id']}" : 'add'?>&pub=1&site_ref=NA">
        <input type="hidden" value="0" name="status" id="status">
        <textarea name="todo" id="todo" placeholder="To raise a new issue, please type the details of the issue here"><?=$todo_free_text?></textarea> <br />
        <input type="submit" value="Submit" class="button" />
    </form>

<h2 class="tablecaption itemadded">Thank you, your item has been added to the list.</h2>
4

1 回答 1

0

通过使用单独的刷新链接按钮和 php 页面在发布后导致刷新，我得到了一个令人满意的解决方案，因此脚本是这样的：

<script type="text/javascript">
$(document).ready(function(){
    $('#addtodo').click(function(e){
        e.preventDefault();
        if($('#todo').val()!="")
            {
            $.ajax({
                type: 'POST',
                url: 'todo_do.php',
                data: { 'status': $('#status').val(),
                        'todo': $('#todo').val()
                    },
                success: function(data){
                        $('.itemadded').slideDown(500).delay(2000).fadeOut(500);
                        $('.refreshtodo').slideDown(500);
                        $('#addtodoitem')[0].reset(); 
                        $('#tabs > ul').tabs({selected: 5 });
                    }
                });
            }
            else{$('.nothing').slideDown(500).delay(1000).fadeOut(500)}
        });
    });

额外的 php 页面只包含

<?
header("Location: resident.php#tabs_5");
?>
于 2013-02-02T08:34:42.550 回答