javascript - Refresh/reload the content in Div using jquery/ajax -

i want reload div on click of button. not want reload full page.

here code:

html:

<div role="button" class="margintop50 marginbottom">     <input type="button" id="getcameraserialnumbers" value="capture again" class="disabled" />     <input type="button" id="confirmnext"  value="confirm & proceed" class="disabled marginleft50" /> </div> 

on click of <input type="button" id="getcameraserialnumbers" value="capture again"> button <div id="list">....</div> should reload without loading or refreshing full page.

below jquery tried, not working:-

$("#getcameraserialnumbers").click(function () {     $("#step1content").load(); }); 

please suggest.

here div on page, contains pictures , serial numbers of products... coming database 1st time on page load. user faces issue he'll click tthe "capture again" button "<input type="button" id="getcameraserialnumbers" value="capture again">" load information again.

the html code of div:-

<div id="step1content" role="step1showcameracaptures" class="marginleft">  <form>     <h1>camera configuration</h1>     <!-- step 1.1 - image captures confirmation-->     <div id="list">         <div>             <p>                 <a id="pickheadimagelightbox" data-lightbox="image-1" title="" href="">                     <img alt="" id="pickheadimage" src="" width="250" height="200" />                 </a>             </p>             <p>                 <strong>pickhead camera serial no:</strong><br />                 <span id="pickheadimagedetails"></span>             </p>         </div>         <div>             <p>                 <a id="processingstationsideimagelightbox" data-lightbox="image-1" title="" href="">                     <img alt="" id="processingstationsideimage" src="" width="250" height="200" />                 </a>             </p>             <p>                 <strong>processing station top camera serial no:</strong><br />                 <span id="processingstationsideimagedetails"></span>             </p>         </div>         <div>             <p>                 <a id="processingstationtopimagelightbox" data-lightbox="image-1" title="" href="">                     <img alt="" id="processingstationtopimage" src="" width="250" height="200" />                 </a>             </p>             <p>                 <strong>processing station side camera serial no:</strong><br />                 <span id="processingstationtopimagedetails"></span>             </p>         </div>         <div>             <p>                 <a id="cardscanimagelightbox" data-lightbox="image-1" title="" href="">                     <img alt="" id="cardscanimage" src="" width="250" height="200" />                 </a>             </p>             <p>                 <strong>card scan camera serial no:</strong><br />                 <span id="cardscanimagedetails"></span>             </p>          </div>     </div>     <div class="clearall"></div>      <div class="margintop50">         <p><input type="radio" name="radio1" id="optionyes" />yes, infomation captured correct.</p>         <p><input type="radio" name="radio1" id="optionno" />no, please capture again.</p>     </div>     <div role="button" class="margintop50 marginbottom">         <input type="button" id="getcameraserialnumbers" value="capture again" class="disabled" />         <input type="button" id="confirmnext"  value="confirm & proceed" class="disabled marginleft50" />     </div> </form> 

now on click of <input type="button" id="getcameraserialnumbers" value="capture again" class="disabled" /> button, information in <div id="list">... </div> should loaded again.

please let me know if need more information.

i use this, works perfect.

$(document).ready(function(){         $(function(){         $('#ideal_form').submit(function(e){                 e.preventdefault();                 var form = $(this);                 var post_url = form.attr('action');                 var post_data = form.serialize();                 $('#loader3', form).html('<img src="../../images/ajax-loader.gif" />       please wait...');                 $.ajax({                     type: 'post',                     url: post_url,                      data: post_data,                     success: function(msg) {                         $(form).fadeout(800, function(){                             form.html(msg).fadein().delay(2000);                          });                     }                 });             });         });          });