Is it possible populate the updated data in a repeater with out refreshing the page/using and update panel?

H All,

Is it possible to populate the updated data from the database to a repeater with out refreshing the page and with out using an update panel?

This is my requirement.

I have an option to save Name & Age to the database

eg:

Name <*textbox accepts name开发者_Go百科> : Age <*textbox accepts the name> Save Button

i have a repeater which displays first 50 items displayed below save panel. eg:

Name Age

Rahul 30

Sameera 32

Manju 28

On click of the Save button I am calling Jquery to insert my data into the database. After this i need to update my repeater as well.

I don't wanna refresh the page or to use update panel. Is there any option to do so???using some jquery or some thing like that????

---

1-use JQuery to call PageMethods or a webservice 2-grab the results 3-update the repeater area

this function calls a webservice and grabs back a list of items in json format:

function LoadLatestLocations(ParentPage) {
    $.ajax({
        type: "POST",
        url: "../Admission/AdmissionService.asmx/LoadLocations",
        data: "{'ParentPage':'" + ParentPage + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            //write the code to create the repeater structure in html from data.d
            var str = '<table>.....</table>';
            $('.repeaterDiv').html(str);
        }
    });
}

---

Ok. if you don't want to bother with serverside and json and xml and restful api and etc, just use this code. It correspond to "Unobtrusive JavaScript" principle, so your page will work also without JavaScript. And it doesn't require any changes at serverside.

HTML body:

<div id="wrapper">
  <form id="new-person" action="./create-new-person.html" method="POST">
    <label>Name: <input type="text" id="name" name="name" /></label>
    <label>Age: <input type="text" id="age" name="age" /></label>
    <input type="submit" name="save" id="save" />
  </form>

  <div class="persons">
    <p class="person"><span class="name">Darth</span>, <span class="age">60</span></p>
    <p class="person"><span class="name">Luk</span>, <span class="age">25</span></p>
  </div>
</div>

<div id="hidden-container" style="display: none;"/>

jQuery script:

$(document).ready(function(){
  $('#save').click(function(e){
    var url = $('#new-person').attr('action');
    var outgoingData = {
        name: $('#name').val(),
        age: $('#age').val()
    };
    var showPersons = function(data) {
      $('#hidden-container').html(data);
      $('#wrapper .persons').html($('#hidden-container .persons').html());
      $('#hidden-container').empty();
    };

    $.ajax({
      type: 'POST',
      url: url,
      data: outgoingData,
      success: showPersons,
      context: document.body
    });    

    // prevent really submitting a form
    e.preventDefault();
    return false;
  });
});

Of course, action page may be the same as current.