Question

我想开发一个带有四个div的网页，每个div都有一些数据和一个编辑按钮，当用户点击div用户的编辑按钮时可以编辑细节，保存按钮会出现编辑，当用户点击保存数据保存。

但是点击编辑页面时的问题不应该重新加载，只有当用户点击保存而不是加载新页面时才应该加载当前屏幕位置的新div它应该重新加载具有相同筛选位置的新div / p>

我尝试了以下代码

<div id="off1" class="radios">
    <div id="off" class="gradients1">Details</div>
    <div style="border:3px solid #151B8D;margin-left:auto;margin-right:auto;width:800px;">
        <form id="form1" action="" method="post" name="offedit">
            <input type="submit" id="offchange" name="offchange" value="Save" onclick="" />
            <input type="submit" name="cancel" value="Cancel" onclick="" />
            <br>
            <table width="800" border="0" cellspacing="0" cellpadding="0">
                <tr style="background-color:#ECE5B6;height:31px;">
                    <td style="font-size:120%;" width="85px">
                        <input stlye="width:65px;" type="text" id="acno" name="acno" value="<?php echo $rows['acno'];?>" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<div id="off2" class="radios11">
    <div class="gradients1">Details</div>
    <div style="border:3px solid #151B8D;margin-left:auto;margin-right:auto;width:800px;">
        <form action="" method="post" name="officeedit">
            <input type="submit" id="offdetails" name="offdetails" value="Edit" />
            <br>
            <table width="800" border="0" cellspacing="0" cellpadding="0">
                <tr style="background-color:#ffffff;height:31px;">
                    <td style="font-size:120%;" width="85px">
                        <?php echo $rows[ 'acno'];?>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

加载编辑div我使用以下查询

$('#offdetails').click(function (e) {
    $('.radios').show();
    $('.radios11').hide();
    e.preventDefault();
});

无线电和无线电11的css文件如下

.radios {
    display:none;
}
.radios11 {
    display:show;
}

现在的问题是我无法在不改变屏幕位置的情况下保存页面。任何人都可以建议我实现这一点，即使是除此之外的任何新想法对我来说也会有所帮助。

Answer 1

1）在每个内容div中，取一个隐藏的div。在隐藏的div中放置一个具有适当内容的texarea

例如： -

  <div class="hidden_div">
      <textarea cols="40" row="3" id="content_1">Context text will be display here </textarea>
      <input type="button" id="saveBtn_1" name="saveBtn_1" data-idval="1" value="Save" />
  </div>

2）点击显示在div上方的Edit按钮并隐藏上一个内容div和编辑按钮。

3）从表单中删除<form>标记，然后在表单中输入按钮类型提交。采取正常的编辑按钮

    <input type="button" id="editBtn_1" name="editBtn_1" data-idval="1" />

4）点击“保存”按钮调用ajax函数并获取内容div值。

   $(document).ready(function(){
   $("id^='saveBtn_1'").click(function(){
       var clickedDivId = $(this).data("idval");
       var content    = $('#content_'+clickedDivId).val();
         $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {content:name, id:clickedDivId}
        }).done(function( result ) {
           //load your updated result and hide textarea div here
        });

   });
 });

5）在ajax.php内写下您的代码以保存数据并返回更新的内容。

完整的HTML将是： -

<div class="content_row">
    <div class="content_display">
    <div id="content_display_1">Content text will be display here</div>
    <input type="button" id="editBtn_1" name="editBtn_1" data-idval="1" />
    </div>
    <div class="hiddedn_div">
    <textarea cols="40" row="3" id="content_1">Context text will be display here</textarea>
    <input type="button" id="saveBtn_1" name="saveBtn_1" data-idval="1" value="Save" />
    </div>
</div>
<div class="content_row">
    <div id="content_display_2">-----</div>
    <div class="hiddedn_div">------</div>
</div>

另一种解决方案： -

如果您的内容中有多个要更新的字段。然后你应该使用模型框或任何弹出窗口，在模型窗口中打开表单并使用ajax保存表单数据。

对于内联更新内容，您还可以refer this link

加载不同的div而不重新加载页面

1 个答案: