Question

我在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>

Answer 1

我通过使用单独的刷新链接按钮和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");
?>

如何在Jquery ui-tab中提交ajax表单后显示我的成功消息

1 个答案: