Подгрузка только один раз

Dude · November 30, 2008

Подскажите пожалуйста, чем надо дополнить javascript

чтобы при возврате на уже ранее загруженный таб, он заново не загружался.

Как я понимаю мне надо чтобы при загрузке таба, его данние где-то сохранялись, а потом javascript проверял, если данные по каму-то табу пусты, то их нужно записывать, а если уже записаны, то выводить.

Я читал тему: http://forum.htmlbook.ru/index.php?showtopic=11189 , но ничего не понял.

Если вам не сложно, напишите хоть несколько строк. Я буду вам очень благодарен

<html>
    <head>
        <title>jQuery: AJAX Tabs</title>    
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            var pageUrl = new Array();            
            pageUrl[1] = "tab1.html";
            pageUrl[2] = "tab2.html";
            pageUrl[3] = "tab3.html";
            pageUrl[4] = "tab4.html";        

            function loadTab(id)
            {
                if (pageUrl[id].length > 0)
                {
                    $("#preloader").show();
                    $.ajax(
                    {
                        url: pageUrl[id], 
                        cache: false,
                        success: function(message) 
                        {                            
                            $("#tabcontent").empty().append(message);
                            $("#preloader").hide();             
                        }
                    });                    
                }
            }

            $(document).ready(function()
            {
                $("#preloader").hide();

                $("#tab1").click(function()
                {
                    loadTab(1);
                });

                $("#tab2").click(function()
                {
                    loadTab(2);
                });

                $("#tab3").click(function()
                {
                    loadTab(3);
                });

                $("#tab4").click(function()
                {
                    loadTab(4);
                });
            });
        </script>
    </head>
    <body>

    <script type="text/javascript">
            var pageUrl = new Array();            
            pageUrl[1] = "tab1.html";
            pageUrl[2] = "tab2.html";
            pageUrl[3] = "tab3.html";
            pageUrl[4] = "tab4.html";  
			document.write(pageUrl[1]);      
        </script>

        <div class="container">

            <div class="navcontainer">
                <ul>
                    <li><a id="tab1" href="#">Tab 1</a></li>
                    <li><a id="tab2" href="#">Tab 2</a></li>
                    <li><a id="tab3" href="#">Tab 3</a></li>
                    <li><a id="tab4" href="#">Tab 4</a></li>
                </ul>
            </div>

            <div id="preloader">
                <img src="loading.gif" align="absmiddle"> Loading...                
            </div>

            <div id="tabcontent">
            Here is a simple demonstration of how AJAX Tabs work.
            </div>

        </div>
    </body>
</html>

Павел Билькис · November 30, 2008

<html>
<head>
<title>jQuery: AJAX Tabs</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var pageUrl = new Array();
pageUrl[1] = "tab1.html";
pageUrl[2] = "tab2.html";
pageUrl[3] = "tab3.html";
pageUrl[4] = "tab4.html";

function loadTab(id)
{
if (pageUrl[id].length > 0)
{
$("#preloader").show();

$("#tabcontent").load(pageUrl[id]);
$("#preloader").hide();
}
 prov[id] = 0;
}

$(document).ready(function()
{
$("#preloader").hide();

$("#tab1").click(function()
{
 if(prov[1] !== 0){
loadTab(1);
 }
});

$("#tab2").click(function()
{
  if(prov[2] !== 0){
loadTab(2); 
 }
});

$("#tab3").click(function()
{
  if(prov[3] !== 0){
loadTab(3);
 }
});

$("#tab4").click(function()
{
  if(prov[4] !== 0){
loadTab(4);
 }
});
});
</script>
</head>
<body>

<div class="container">

<div class="navcontainer">
<ul>
<li><a id="tab1" href="#">Tab 1</a></li>
<li><a id="tab2" href="#">Tab 2</a></li>
<li><a id="tab3" href="#">Tab 3</a></li>
<li><a id="tab4" href="#">Tab 4</a></li>
</ul>
</div>

<div id="preloader">
<img src="loading.gif" align="absmiddle"> Loading...
</div>

<div id="tabcontent">
Here is a simple demonstration of how AJAX Tabs work.
</div>

</div>
</body>
</html>

Edited November 30, 2008 by -=PSU=-

Dude · November 30, 2008

Шото у меня не работает. Я нажимаю, но ничего не происходит...

Edited November 30, 2008 by Dude

Павел Билькис · November 30, 2008

поглядите на javascript консоль ошибок. в мозиле Инструменты - Консоль ошибок. а в опере Инструменты - Дополнительно - Консоль ошибок

Dude · November 30, 2008

поглядите на javascript консоль ошибок. в мозиле Инструменты - Консоль ошибок. а в опере Инструменты - Дополнительно - Консоль ошибок

Там пишет шо : "prov" is not defined.

когда я удаляю сточку if(prov[число] !== 0) , то загружается также как прежде(при переключении загружается заново).

Павел Билькис · December 1, 2008

<html>
<head>
<title>jQuery: AJAX Tabs</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var prov = new Array();
var pageUrl = new Array();
pageUrl[1] = "tab1.html";
pageUrl[2] = "tab2.html";
pageUrl[3] = "tab3.html";
pageUrl[4] = "tab4.html";
prov[1] = 1
prov[2] = 1
prov[3] = 1
prov[4] = 1

function loadTab(id)
{
if (pageUrl[id].length > 0)
{
$("#preloader").show();

$("#tabcontent").load(pageUrl[id]);
$("#preloader").hide();
}
prov[id] = 0;
}

$(document).ready(function()
{
$("#preloader").hide();

$("#tab1").click(function()
{
if(prov[1] !== 0){
loadTab(1);
}
});

$("#tab2").click(function()
{
  if(prov[2] !== 0){
loadTab(2);
}
});

$("#tab3").click(function()
{
  if(prov[3] !== 0){
loadTab(3);
}
});

$("#tab4").click(function()
{
  if(prov[4] !== 0){
loadTab(4);
}
});
});
</script>
</head>
<body>

<div class="container">

<div class="navcontainer">
<ul>
<li><a id="tab1" href="#">Tab 1</a></li>
<li><a id="tab2" href="#">Tab 2</a></li>
<li><a id="tab3" href="#">Tab 3</a></li>
<li><a id="tab4" href="#">Tab 4</a></li>
</ul>
</div>

<div id="preloader">
<img src="loading.gif" align="absmiddle"> Loading...
</div>

<div id="tabcontent">
Here is a simple demonstration of how AJAX Tabs work.
</div>

</div>
</body>
</html>

Edited December 1, 2008 by -=PSU=-

Dude · December 1, 2008

Чонечно большое спасибо, все работает, но я имел в виду, что при возврате на ранее загруженный таб, его содержимое заново загружатся не будет, но будет показываться. Как будто данные с предыдущего таба на странице есть, но находятся в скрытом диве.

Dude · December 1, 2008

Может мне легче использовать какой-то другой скрипт. Например тот, где все загружается сразу. Только сделать так, чтобы при переключении, выполнялась функция подгрузки.

Dude · December 1, 2008

Большое спасибо -=PSU=- . Проблема почти решена. Я скачал обычные табы(переключение без подгрузки) и там вписал скрипт, чтобы выполнялась подгрузка. Но все было как раньше. При возврате все подгружалось заново. Именно тогда я воспользовался скриптом, который написал -=PSU=- . теперь при возврате, подгрузка блокируется, и просто выводится уже загруженный ранее таб. Вот только если я подгрузку делаю в несколько табов, то они перестают переключаться. Никто не знает что можно сделать?

Edited December 1, 2008 by Dude

s0rr0w · December 2, 2008

Никто не знает что можно сделать?

Можно подучить матчасть. JavaScript например...

s0rr0w · December 2, 2008

Кто мне может рассказать негативные стороны данного скрипта и данного подхода, который выдал нам Dude?

Dude · December 3, 2008

Кто мне может рассказать негативные стороны данного скрипта и данного подхода, который выдал нам Dude?

Я скрипт выбрал первый, что мне попался, и я не знаю чем они могут отлитатся. А нащет подхода, то я даже не знаю с какой стороны подойти. Все, что я не делаю, у меня ничего не получается. А я уже две недели пытаюсь.

Sign In

Подгрузка только один раз

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information