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 に答える