load different divs without reloading the page

Question

I want to develop a web page with four divs and each divs have some datas on it and one edit button,when user clicks on edit button of div user can edit the details and save button will appear instaed of edit , when user clicks on save data saves.

But the problem when you click on edit the page should not reload and new div should be loaded with current screen position only also when user clicks on save instead of loading new page it should reload a new div there with same screening position

i tried the following code

<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>

to load editing div i used following query

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

the css file for radios and radios11 were as follows

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

The problem now is i cant save the page without changing the screen position. Could any one suggest me an idea to acheive this, even any new ideas other than this would also be help full for me.

Answer 1

1) Inside each content div take one hidden div . In hidden div placed one texarea with appropriate content

eg :-

  <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) Onclick on Edit button show above div and hide previous content div and edit button.

3) Remove <form> tag from and type button type submit within your forms. Take normal edit button

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

4) Onclick on "Save" button call ajax function and take content div value.

   $(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) Inside ajax.php write down you code to save data and return updated content.

Complete HTML will be :-

<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>

Another Solutions: -

If you have multiple fields to update in your content. then you should use model box or any popup window, Open your form in model window and save form data using ajax.

For inline update content you can also refer this link