Question

我正在尝试使用jquery和ajax更新数据库。将打开一个弹出窗口以更新字段。我的问题是：数据库没有问题，但是如果没有刷新页面，这些值就不会反映在网页上。我使用jquery .html（）方法来更新内容。请帮我解决这个问题。

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"   type="text/javascript"></script>
<script type='text/javascript' src="js/jquery-1.5.1.min.js"></script>
<script type='text/javascript' src="js/jquery-ui-1.8.13.custom.min.js"></script>
<link rel='stylesheet' href="js/jquery-ui-1.8.13.custom.css" />
<script type='text/javascript'>

$(document).ready(function() {

    $update_dialog = $("#update_dialog").dialog({
        autoOpen:false, 
        title:"Update Sub Sub Section", 
        width: '600px',
        modal:true, 
        buttons:[
            {text: "Submit", click: function() { $('form',$(this)).submit(); }},
            {text: "Cancel", click: function() { $(this).dialog("close"); }},
        ]
    });

    $("#update_dialog form").submit(function() {
        var form = $(this);
        alert($(this).serialize());

        $.post($(this).attr('action'), $(this).serialize(),function(data) {   

            var getbook = $('#book_'+data.id);

            $('.description',getbook).empty().html(data.description);

            $("#update_dialog").dialog('close');
        },'json');

        return false;
    });

    function edit3_link_action() {
        var getbook = $(this).closest('.book');

        //get id from div
        var id = getbook.attr('id').split('_');
        id = id[id.length-1];

        $('#update_dialog input[name="id"]').val(id);

        $('#update_dialog textarea[name="description"]').val($('.description',getbook).html());

        $update_dialog.dialog('open');
        return false;
    }

    $(".edit3").click(edit3_link_action);
});
</script>
</head>
<body>
    <div align="center">
        <form name="userform" method="post">
<?php
$proposalid='P09-001';
$res=mysql_query("Select * from tblproposaldocsections where ProposalID='$proposalid' order by SortOrder;");
for($i=0;$i<mysql_num_rows($res);$i++) 
{
    $row=mysql_fetch_row($res);

    if($row[1]!=$row[2])
    {
        $result=mysql_query("Select * from tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row[1]' order by SortOrder;");
        for($k=0;$k<mysql_num_rows($result);$k++)
        {
            $row1=mysql_fetch_row($result);

            $exp=explode('.',$row1[2]);
            $alter=$row[2].'.'.$exp[1].'.'.$exp[2];
            $result1=mysql_query("Select * from tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row1[2]' order by OrderID;");

            $lastsortorder= mysql_query("SELECT Max(SortOrder) FROM tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row1[1]';")or die(mysql_error());
            $rr = mysql_fetch_row($lastsortorder);
            $lastsortorder = $rr[0];

            if(mysql_num_rows($result1)>0)
            {
            ?>
            <br>
            <?php

                for($j=0;$j<mysql_num_rows($result1);$j++)
                {
                    $row2=mysql_fetch_row($result1);

                    $exp=explode('.',$row2[2]);

                    $alter=$row[2].'.'.$exp[1].'.'.$exp[2].'.'.$exp[3];

                    $lastsortorder= mysql_query("SELECT Max(SortOrder) FROM tblproposaldocsubsections where ProposalID='$proposalid' and InsertOrder='$row2[1]';")or die(mysql_error());
                    $rr = mysql_fetch_row($lastsortorder);
                    $lastsortorder = $rr[0];
                    ?>
                    <div class='book' id='book_<?php echo $row2[2];?>'>
                        <h3 class="title"><?php echo $alter;?>&nbsp;&nbsp;&nbsp;&nbsp;subsubsection_<?php echo $row2[2];?></h3>
                        <p class='description'><?php echo $row2[3];?></p>
                        <a class="edit3" href="#">Edit</a>&nbsp;
                    </div>
                    <br>            
                    <?php
                }
            ?>
            <br>
            <?php
            }
        }
    }
    echo('<br>');
}
?>
</table>  
        </form>
    </div>
    <div id='update_dialog'>
        <form action='edit.php' method='post'>
            <table>
                <tr>
                    <td align="left">Description:</td>
                    <td>
                        <textarea name='description' cols='60' rows='5'></textarea>  
                    </td>
                </tr>
            </table>
            <input type='hidden' name='id' />
            <input type='hidden' name='proposalid' value="<?php echo $proposalid;?>" />   
        </form>
    </div>
</body>
</html>

由blasteralfred编辑

我使用FireBug进行调试，问题与预期相同。 DOM对象无法读取更新的数据。这个获取DOM元素的声明是否正确？这是唯一的问题！

 var getbook = $('#book_'+data.id);

这是声明标签的方式：

<div class='book' id='book_<?php echo $row2[2];?>'>
<table width="80%" align="left">
<tr>
   <td width="10%"><?php echo $alter;?></td>
    <td width="70%" class="description"><?php echo $row2[3];?></td>
    <td width="10%" align="center"><a class="edit" href="#">Edit</a></td>
</tr>
</table>
</div>

Answer 1

如果您的.html（）不起作用，可能是因为您使用它的元素不存在，或者您尝试设置的值未定义。

您可以通过检查在.html（）调用之前是否定义了给定元素和值来弄清楚是什么。我建议使用FireBug进行调试，但这也可以通过alert（）元素和值来完成。

jQuery .html（）方法不更新HTML数据

1 个答案: