filling div using ajax?

Question

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/

Have you tried something? You should better try to do something and post questions with a code which could be revised. — Viktor S., Nov 27 '12 at 12:15
You can post link to a picture (screenshot of your website?) — kernelpanic, Nov 27 '12 at 12:15

skndstry · Answer 1 · 2018-06-19T16:14:15.207

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.

lvil · Accepted Answer · 2012-11-27T12:28:21.103

3

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.

edited Nov 27 '12 at 12:28

answered Nov 27 '12 at 12:20

lvil

4,326
9
48
76

That looks great but do I have to write a similar line of code for each different page i want to load into the div? sorry if i sound like a noob but i'v enever used jQuery :) – MizziPizzi Nov 27 '12 at 12:43
"some_page.php" gets variable pageNum, and can determine which page to load. The next menu button can be GoTo2 – lvil Nov 27 '12 at 12:50
@user1789143: also check this example:http://demo.tutorialzine.com/2009/09/simple-ajax-website-jquery/demo.html – lvil Nov 27 '12 at 12:56

score 0 · Answer 3 · answered Nov 27 '12 at 12:14

0

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.

answered Nov 27 '12 at 12:14

Rob

14,746
28
47
65

score 0 · Answer 4 · edited May 23 '17 at 11:48

0

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.

edited May 23 '17 at 11:48

Community

1
1

answered Nov 27 '12 at 12:18

lleto

674
2
7
25

filling div using ajax?

4 Answers4