Load HTML inside a div via AJAX

Question

i have bone.php and forum.php

i want to send data to forum.php from bone.php when i click #result via AJAX

forum.php gets data and does its job inside server and creates an HTML page

i want this HTML page inside bone.php #result .

Is this possible?

i wrote codes like that.

$.ajax({

url: "forum.php",
data: 'webpage_id='+webpage_id ,
success: function( ) {
    $('#result').load("forum.php"); 
},
error: function( xhr, status, errorThrown ) {
  alert( "Sorry, there was a problem!" );
  console.log( "Error: " + errorThrown );
  console.log( "Status: " + status );
  console.dir( xhr );
},

})

I am getting this messsage Undefined index: webpage_id in \\forum.php on line 15 . However i am sending data. What could be the problem?

What is more interesting is it gives no error and loads the forum.php correctly. It just doesn't see the data.

Answer 1

To start with,

$('#result').load("forum.php");

this is an ajax call by itself.

 $.ajax({

url: "forum.php",
success: function( data ) {
    $('#result').html(data); 
});

Equilevant to this.

Answer 2

you're performing the request twice, when you do $('#result').load("forum.php"); in the success block, you're actually running the request a second time. You can do this:

$('#result').load("forum.php?webpage_id=" + webpage_id); 

Or you can do this:

$.ajax({

url: "forum.php",
data: 'webpage_id='+webpage_id ,
success: function(data) {
    $('#result').html(data); 
},
error: function( xhr, status, errorThrown ) {
  alert( "Sorry, there was a problem!" );
  console.log( "Error: " + errorThrown );
  console.log( "Status: " + status );
  console.dir( xhr );
},

})

Answer 3

Try

$.ajax({
   url: "forum.php",
   data: 'webpage_id='+webpage_id ,
   success: function(response) {
      $('#result').html(response);
   },
   error: function( xhr, status, errorThrown ) {
      alert( "Sorry, there was a problem!" );
      console.log( "Error: " + errorThrown );
      console.log( "Status: " + status );
      console.dir( xhr );
   }
});