milacay milacay - 6 months ago 9
jQuery Question

JQuery - Refresh Div With Data, Not Working with IE

Updated .....

I am new with JQuery and I am stuck on this and hoping someone can help me. What I am trying to do is refresh the data in the DIV without reload entire page. The because the page is huge, I am trying to summarize this.

--- This form is right after the body, not wrab with DIV or anything, no submit button. I want to submit the value in the textbox when user hit ENTER key.

<form name="form1" id="form1" method="post" action="PurchaseRequestList.asp">
<input type="text" name="CompanyName" id="CompanyName" value="" class="box2">
</form>
--- Below the form is the DIVs, where I like to refresh the data everytime user enter in the CompanyName textbox and hit Enter key.

<div id="div1-wrapper">
<div id="div1" style="border:solid 1px red; width: 100%;">
<table width="90%" align="center" class="RowDetail">
<-- This is where the loop using ASP to display the data -->
</table>
</div>
</div>


So far, I have this code, but it is not working as refresh only data within the DIV.

$(document).ready(function() {

$('#CompanyName').on('keypress', function(e) {
if (e.keyCode == 13)
{
var data = $('form').serialize();
$.ajax({
method: 'post',
data: data,
url: 'PurchaseRequestList.asp?#div1',
success: function(res) {
$('#div1-wrapper').load(url + ' #div1');
}
});
}
});
});


I appreciated you guys are trying to help. Let me know if you need me to clarify any.

Thank you,

Answer

Try this code

var url = 'PurchaseRequestList.asp?order=1';  
  $( "form" ).on( "submit", function( event ) {
   event.preventDefault();
   var data =  $( this ).serialize();
   $.ajax({
     method: 'post',
     data: data,
     url: url  + '?#div1',
     success: function(res) {
       $('#div1-wrapper').load(res);//u need to change here 
    }
  });
 });

or

  $('#CompanyName').on('keypress', function(e) {
    if (e.keyCode == 13)
    {
        var data =  $('form').serialize();
        $.ajax({
            method: 'post',
            data: data,
            url: url  + '?#div1',
            success: function(res) {
                $('#div1-wrapper').load(res); 
            }
        });
    }
});