通过ajax重新加载特定div的内容

Question

I have a page that has a leftContent and rightContent Div ids, there is a form inside leftContent when that gets submitted I want the leftContent to display a message whereas the rightContent div should stay put and not change or reload.

To achieve this I tried the following on AJAX Success

Attempt 1

$('#leftContent').load('test.php');

Problem with this is, the leftContent ends up showing the entire page rather than the message only

Attempt 2

$('#leftContent').load('test.php #container');

Problem with this is, although this works perfectly fine for the leftContent but the rightContent div disappears.

I will really appreciate if I can get some assistance in this.

Answer 1

I suggest using jQuery.ajax instead of load (), the performance is better and the code is more structured.

example:

jQuery.ajax ({
     url: 'your_url'
     type: 'get',
     dataType: 'html',
     success: function (data)
    {
        _html = jQuery var (data);
        // do some thing With html eg. _html.find ('div') addClass ('red')
        jQuery ('# target') html (_html.);
    }
});

Answer 2

This should work.

$('#leftContent').load(document.URL +  ' #leftContent');

Give a space inside the string that is appended.