当我点击另一个链接时,获取ajax jquery重置

时间:2014-01-15 20:04:07

标签: php jquery ajax post

的index.php

        $(document).ready(function(){
        $('a.bruker').click(function() {

            var idx = $(this).attr('id');
        $.ajax({
                url:'bruker.php',
                type:'POST',
                data: 'id='+idx,
                cache: false,
                success:function(data) { 
                    $('#bruker').html(data);
                }
        });
    });
    });
    echo "<div id='bruker'></div>";
    <a class='bruker' id='1'>name1</a>
    <a class='bruker' id='2'>name2</a>

bruker.php

if(isset($_POST['id'])) {
    echo "<script> $(function() {
    $('.bruker-box').dialog({
        autoOpen:true,
        resizable: false,
        closeOnEscape: true,
        width:600,
        height:500,
        show: 'fade',
        modal: true,
        open: function(event, ui) {  },
        position: { my: 'center', at: 'center' }
    })
    $('#ui-id-2').css('border', 'none');
    $('.ui-widget-overlay').click (function () {
    $('.bruker-box').dialog( 'close' );
});

  });</script>";

echo "<div class='bruker-box' title='(".$_POST['id'].")'>";
echo "example";
echo "</div>";

当我单击第一个框(name1)并单击name2时,我想只获得名称2,但第一个框(name1)首先出现而不是name2。

我怎样才能做到这一点?当我点击一个新的时候有没有办法重置某些东西?

1 个答案:

答案 0 :(得分:0)

这种情况正在发生,因为每次单击一个锚点时,您都​​会注入一个包含设置为autoOpen的对话框的新div。 (在Chrome中启用开发人员工具F12并观察会发生什么。

autoOpen divs accumulate,重新显示自己对DOM的每次更改。

要解决此问题,您可以在显示后remove()显示div。将您的bruker.php文件更改为:

请注意在对话框定义中添加close:函数:

<强> PHP:

if(isset($_POST['id'])) {
    $out = "
    <script> 
        $(function() {
            $('.bruker-box').dialog({
                autoOpen:true,
                resizable: false,
                closeOnEscape: true,
                width:600,
                height:500,
                show: 'fade',
                modal: true,
                open: function(event, ui) {  },
                position: { my: 'center', at: 'center' },
                close: function() {
                    $('div.ui-dialog').remove();
                }
            }); //END .dialog()

            $('#ui-id-2').css('border', 'none');

            $('.ui-widget-overlay').click (function () {
                $('.bruker-box').dialog( 'close' );
            });

        }); //END document.ready
    </script>";

    $out .= "<div class='bruker-box' title='Name: (" .$_POST['id']. ")'>";
    $out .= "example";
    $out .= "</div>";
    echo $out;
}