Question

我有一个Web应用程序，用户可以在其中添加Notes，有一个表单，当用户按下Add按钮时，应该创建新的note div并添加注释。已经有一个使用PHP填充值的div，但是当用户刷新页面时，此注释可见。

按下“添加”按钮后，我可以在数据库中成功添加注释，但只有在刷新页面后才能看到该注释，因为PHP函数会显示，

我想要的是当添加音符时，它只是在音符中添加新的div，

以下是我的HTML代码，

<?php
    foreach($testingnotes_array as $testingnote)
    {
    ?>

    <div id="testingnoteappend">
        <div id="testingnoteclone">
            <div class="todo-tasklist-item todo-tasklist-item-border-red" id="testingnotebox<?php echo $testingnote['thread_id'];?>">
                <img class="todo-userpic pull-left" src="<?php echo base_url().'/uploads/dp/'.$testingnote['user_profiledp'];?>" width="28px" height="28px">
                <div class="todo-tasklist-item-title">
                    <?php echo $testingnote['user_firstname']." ".$testingnote['user_lastname'];?>
                    <span class="todo-tasklist-date">
                        <i class="fa fa-calendar"></i>
                        <?php echo date($datetimesetting->ss_datetimeformat, strtotime($testingnote['threadcreated_time']));?>
                    </span>
                    <a href="javascript:removetestingnote<?php echo $testingnote['thread_id'];?>();">
                        <i class="fa fa-trash-o pull-right"></i>
                    </a>
                </div>                                              
                <div class="todo-tasklist-item-text">
                    <?php echo $testingnote['testingbody'];?>
                </div>
            </div>
        </div>
    </div>

    <?php
     }
?>

以下是我的JS，

$("#testingnotes_fm").submit(function(event) {
    event.preventDefault();

    $.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>index.php/phase/testings/addtestingnotes/"+<?php echo $testinginfo->testing_id; ?>,
    data: $("#testingnotes_fm").serialize(),
    success: function(data) 
    {
        $( "#testingnoteclone" ).clone().appendTo( "#testingnoteappend" );
    }   
});
});

使用上面的代码，我可以看到我现有笔记的克隆，但是我希望克隆div结构，但是使用来自DB的新值，

我可以从服务器获取JSON值，

您可以帮助我在不重新加载页面+新数据的情况下添加新笔记吗？

Answer 1

我不打算为你写这个（因为我在很多层面都不喜欢PHP，你需要重做很多），但是这里有很多关于可以接近它的建议问题。

克隆现有条目通常容易出错，因此以下显示了使用单个空模板的一种方法。您会发现这种方法更易于阅读和维护：

通过Ajax和JSON数据获取笔记。这将减少带宽的使用（与将格式化结果直接注入页面相比。
建议：始终通过Ajax获取您的笔记（即使是第一次通话）。这使得初始页面加载响应更快，并且只表示生成笔记所需的一组代码。
在页面中保留一个空模板以用于备注。例如将其存储在带有type="text/template"的虚拟脚本块中（然后被浏览器忽略）。
使用$('#notetemplate').html()或类似内容访问模板。
将模板文本中的标记替换为相关数据字段。
切勿在重复数据中使用硬连线ID。重复的ID是无效的HTML，jQuery / Javascript只能看到第一个匹配。
在初始加载时，通过Ajax获取所有相关注释，并通过重复使用您将用于单个注释的代码进行显示。
使用data-属性为客户端代码使用注入值。例如以下示例中为{{threadid}}。

样本模板（使用胡须样式标记）：

<script id="notetemplate" type="text/template">
    <div>
        <div class="todo-tasklist-item todo-tasklist-item-border-red" data-threadid="{{threadid}}">
            <img class="todo-userpic pull-left" src="{{profileurl}}" width="28px" height="28px">
            <div class="todo-tasklist-item-title">{{firstname}} {{lastname}}<span class="todo-tasklist-date">
                        <i class="fa fa-calendar"></i>
                        {{date}}
                    </span>
 <a href="{{removealurl}};">
                        <i class="fa fa-trash-o pull-right"></i>
                    </a>

            </div>
            <div class="todo-tasklist-item-text">{{testingbody}}</div>
        </div>
    </div>
</script>

一旦你尝试了所有这些，就回到这里一个新问题：）

使用Jquery使用新值克隆DIV

1 个答案: