Подгрузка страниц по клику.

[Vladimir_Kl]

Всем доброго времени суток.

Необходимо реализовать следующую задачу.
Имеется 4 блока. По клику на на блок в центральной части должна загрузиться информация из файла.

<div class="1">
            	<ul>
                <li>Первый блок</li>
                <li>Второй блок</li>
                <li>Третий блок</li>
                <li>Четвертый блок</li>
                </ul>
        </div>
        
        <div class="2">
        </div>

Более подробно.
Имеется 2 сектора: 1- с кнопками и 2ой, где выводится информация.
Изначально в секторе 2 загружена информация по кнопке 1(первый блок). Далее, при клике на любую другую кнопку(блок) в секторе 2 должна замениться информация на загруженную с определенного файла. Т.е. есть 4 файла с информацией и мы их должны подгружать и заменить в секторе 2.

Также должен присутствовать статус загрузки в секторе 2 - обычная гиф картинка.

Ребят, помогите такое сделать. Я в аякс не силен, поэтому и надеюсь на вашу помощь!

Заранее спасибо!

[beard]

вешаешь сюда обработчик на событие click

<li>любой элмент</li>

в обработчике находишь .container (class="2" неправильно)

$(".container").load(url)

load

[Vladimir_Kl]

Так, а если подробнее..

class="2" - чтобы было понятно, что это 2ой сектор.

[beard]

<div class="1">
                <ul>
                     <li onclick="loadData('ссылка1')">Первый блок</li>
                     <li onclick="loadData('ссылка2')">Второй блок</li>
                     <li onclick="loadData('ссылка3')">Третий блок</li>
                     <li onclick="loadData('ссылка4')">Четвертый блок</li>
                </ul>
        </div>
<script>
function loadData(url){
   /*показываем загрузчик*/
   $("#container").load(url, function(){
       /*скрываем загрузчик*/
   })
}
</script>
        <div id="container"></div>
​

[Vladimir_Kl]

Напишите, пожалуйста, полный код, включая тот, что надо повесить на <li>.

[beard]

Vladimir_Kl,
чувак полнее некуда, можно только почистить гавноместа, но на быструю руку я тебе написал, достаточно полно

[Vladimir_Kl]

я писал предыдущее сообщение, когда у Вас предыдущая версия сообщения была (коротко).
Спасибо, сейчас буду тестировать.

[Vladimir_Kl]

Спасибо. А подскажите как добавить статус загрузки!?

[beard]

как ты уже писал пойдет gif animation

создаешь класс

.animation{
    background:white url(animation.gif) no-repeat center center;
    min-height: 300px;
}

$("#container").empty().addClass("animation").load(url, function(){
    $(this).removeClass("animation");
})

должно работать, но я не тестил...

[Vladimir_Kl]

вда, работает. Спасибо!