0

我想开发一个有四个 div 的网页，每个 div 上有一些数据和一个编辑按钮，当用户点击 div 的编辑按钮时，用户可以编辑详细信息，当用户点击保存时，保存按钮将出现在编辑位置数据保存。

但是，当您单击编辑页面时的问题不应重新加载，并且新的 div 应该仅在当前屏幕位置加载，当用户单击保存而不是加载新页面时，它应该重新加载具有相同筛选位置的新 div

我尝试了以下代码

<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();
});

radios 和 radios11 的 css 文件如下

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

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

4

1 回答 1

0

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) OnclickEdit按钮显示在 div 上方并隐藏以前的内容 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 保存表单数据。

对于内联更新内容，您还可以参考此链接

于 2013-05-23T13:37:41.497 回答