CODEWITHSUNDEEP
htmlajax
MizziPizzi
MizziPizzi

Reputation: 103

filling div using ajax?

I've recently created a website with a menu-bar to the left. My next step is to update the right side of the page with content based on what option you choose on the in the menu. I know you can use iframe but I was wondering if there is an alternative to it, like a more dynamic one!

Most of the menu options are input-forms, I've read about ajax-calls to fill a div but couldn't find a good tutorial on how to achieve it.

edit:

Here's a sketch http://imageshack.us/photo/my-images/16/smlithis.png/

Upvotes: 2

Views: 12184

Answers (4)

skndstry
skndstry

Reputation: 671

Consider using JQuery. Handling Ajax requests is so much easier than using ordinary JS. Documentation for the ajax function: http://api.jquery.com/jQuery.ajax/

Using the success callback (the function that is executed upon success) you can fill in your div:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Instead of .result, point the selector to your main div. The .html() function fills your div with data, which is the data returned from the ajax request.

Edit: It's 2018. Use the Fetch API.

Upvotes: 6

lvil
lvil

Reputation: 4336

You can use jQuery This is how your menu button will look like: 

<a href='#' onclick='return fillDiv(1)'>GoTo1</a>  
<script>  
function fillDiv(pageNum){
  $("#id_of_div_to_load_to").load("some_page.php",{ 'pahe_num': pageNum } );  
return false;  
}
</script>

It is just one of many ways to do it.

Upvotes: 3

lleto
lleto

Reputation: 684

You mean something like this: How to update div when on select change in jquery

If you actually want to get the data dynamically from another source that would be an entire different matter.

Upvotes: 0

Rob
Rob

Reputation: 15158

Ajax can get data from a server but it cannot fill anything. Ajax is just javascript used to communicate with the server. Javascript can take that data and insert data and create elements to fill that div.

Upvotes: 0

Related Questions