Need some help with jQuery AJAX request loading a PHP document into a DIV Container.

Question

I need a little bit of help here. First off, I am not sure if i should use the .ajax function or the .load function. I want to grab a PHP file on the server and just load the page into a DIV container. How could i go about this?

EDIT:

Thankyou for the help. Now I am running into another problem. Here is the code i am using.

            <script>
            var spinner = $('#wrapper');

$('.title').live('click',function() {
    var count = 0,
        timeout = setInterval(function() {
            spinner.children('div').css({
                '-moz-transform': 'scale(0.5) rotate(' + count + 'deg)',
                '-webkit-transform': 'scale(0.5) rotate(' + count + 'deg)',
            });

            if (count == 360) {
                count = 0
            }
            count += 45;
        }, 100);

    spinner.fadeIn(300);
    this.disabled = 'true';

    var pageURL=$('.title').attr('href');
    $.ajax({
        url: pageURL,
        type: 'GET',
        data: {
            delay: 4
        },
        success: function(data) {
            $('#b2').html(data);
            $('#ajax').text(data).attr('disabled', false);
            spinner.fadeOut(300, function(){
                clearInterval(timeout);
            });
        }
    });

    return false;
});
</script>

Initially by using PHP I am querying a databse and by use of mysql_fetch_assoc I am displaying a number of links in a list. These links all are styled with the class "title". When I click on the title, it loads a spinning animation which is what part of the code above is, and the file into the container, but it only will load once, and only loads the first url. Can someone help me fix this problem?

Answer 1

assume a div as follows

<div id="holder"></div>

and then some ajax such as

$.get("my.php", function(data){
  $("#holder").html(data);
});

Answer 2

.load() is the simplest approach. It's convenient in that it's a method, rather than a global function. You can get the same functionality from .get() or .ajax(), which expose progressively more options.

Easiest:

$('#yourdiv').load('/someURL.php');

Which is similar to:

$.get('/someURL.php', function(data){
  $('#yourdiv').html(data);
});

Which is a bit easier than:

$.ajax({
  url: '/someURL.php',
  type: 'get',
  success: function(data){
    $('#yourdiv').html(data);
});

Answer 3

Take a look at jQuery's .load()-method. Use it like this:

$('#container').load('your_script.php');