Question

I have:

$("#option1").live("click", function(){
    $(".active").removeClass('active');
    $(this).addClass('active');
    $("#main").load("option1.php", function(){
    });
});

and the script inside runs perfectly. However what I really need is to call only one section of the option1.php page, like this:

$("#option1").live("click", function(){
    $(".active").removeClass('active');
    $(this).addClass('active');
    $("#main").load("option1.php #container", function(){
    });
});

Bute then the script stops working, I’m assuming that is because I’m leaving out the head tags that contain the script. How can I make it run while loading only one section of the page? is it possible?

Answer 1

It is a PHP script, you can easily send only a part of your page.
After, to load that, you can use the $.ajax jquery object :

function loadContainer()
{
    var ajaxobject = $.ajax(
    {
        type:"POST",
        url:"option1.php",
        cache:false,
        async:true,
        global:false,
        dataType:"html",
        data:"part=container",
        timeout:10000,
        success:function(data)
        {
            $('#container').html(data);
        },
        error:function()
        {
            alert('Error; Unable to load option1.php');
        }
    });
    if(ajaxobject == undefined)
        alert('Ajax object creation failed');
}

On the PHP side, you just need to check if $_POST['part'] equals container.
If yes, send only the part you want to send.