Загрузка содержимого вкладок по одной вкладке за раз

Мне нужно загружать содержимое каждой вкладки по одной, а не до тех пор, пока пользователь не нажмет кнопку отправки в каждой форме.

Я знаю, что это обсуждалось несколько раз, но я не могу найти конкретного ответа на то, как я загружаю свой контент во вкладки. Итак, вот оно:

РОДИТЕЛЬСКАЯ СТРАНИЦА HTML

<!--Content Area -->
<div id="tab-container">
<!--Tabs Area -->
<div id="tabs">
    <ul>
                <li><a href="#tabs-1">PAGE1</a></li>
                <li><a href="#tabs-2">PAGE2</a></li>
                <li><a href="#tabs-3">PAGE3</a></li>
                <li><a href="#tabs-4">PAGE4</a></li>
                <li><a href="#tabs-5">PAGE5</a></li>
                <li><a href="#tabs-6">PAGE6</a></li>
    </ul>
<!--End Tabs Area -->
<!--Tabs Content Area -->
    <div id="tab-content">
            <div id="tabs-1">
            </div>
            <div id="tabs-2">
            </div>
            <div id="tabs-3">
            </div> 
            <div id="tabs-4">
            </div>        
            <div id="tabs-5">
            </div>  
            <div id="tabs-6">
            </div>  
    </div>            
</div>
<!--End Tabs Content Area-->
</div>
<!--End Content Area-->
</div>

ЯВАСКРИПТ

$(function() {

    $("#tabs").tabs({disabled: [0,1,2,3,4,5]});

)};

        $('#tabs-1').load('data/PAGE1.htm');
        $('#tabs-2').load('data/PAGE2.htm');
        $('#tabs-3').load('data/PAGE3.htm');
        $('#tabs-4').load('data/PAGE4.htm');
        $('#tabs-5').load('data/PAGE5.htm');
        $('#tabs-6').load('data/PAGE6.htm');

ДЕТСКАЯ СТРАНИЦА С ФОРМОЙ

ЯВАСКРИПТ

$(function() {
    $('#submit1').click(function() {
        var name= $("#firstname").val();
        var genderx= $("#gender").val();
        $.ajax({
            async : "false",
            type: "POST", 
            url: "http://localhost/test/ActionServlet",
            data: { step : 1, firstname: name, gender: genderx },
            success: function(data) {
                var $emptabs = $('#tabs').tabs();
                var selected = $emptabs.tabs('option', 'selected');
                $emptabs.tabs("option", "disabled", []);
                $emptabs.tabs('select', selected+1);
                $emptabs.tabs("option", "disabled", [0,2,3,4,5]);
                $("h2").html(data);
            }

        });
    });
});

jquery tabs
person alien.ninja    schedule 25.10.2012    source источник
comment
никто не может помочь мне с этим? Я отчаянно нуждаюсь в том, чтобы решить эту проблему как можно скорее! Я был бы очень признателен за любую помощь, пожалуйста. Спасибо. :)   -  person alien.ninja    schedule 26.10.2012

Ответы (1)


arrow_upward
2
arrow_downward

Хорошо, я нашел решение для этого и поделюсь им со всеми вами. Это на самом деле - из того, что я видел, как делают другие - гораздо более простой способ сделать это.

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

Все это работало нормально, пока мы не попытались загрузить одну страницу за раз, а не все страницы одновременно. Была серьезная задержка с момента загрузки родительской страницы до появления содержимого первой вкладки - вот с чего все это началось. Однако по какой-то причине решения, которые будут работать в HTML, не будут работать в JSP, но мы, наконец, пришли к следующему решению, которое работает в обоих случаях.

Родительская страница -

JAVASCRIPT - верхняя часть страницы в теге HEAD

var $emptabs;
$(function() {
    $("#tabs").tabs({disabled: [0,1,2,3,4,5]});
    $emptabs = $('#tabs').tabs();
});

HTML

<!--Tabs Area -->
    <div id="tabs">
        <ul>
                <li><a href="#tabs-1">Personal</a></li>
                <li><a href="#tabs-2">Emergency</a></li>
                <li><a href="#tabs-3">Job Related</a></li>
                <li><a href="#tabs-4">Salary</a></li>
                <li><a href="#tabs-5">Miscellaneous</a></li>
                <li><a href="#tabs-6">Dependents</a></li>
        </ul>
<!--End Tabs Area -->
<!--Tabs Content Area -->
    <div id="tab-content">
            <div id="tabs-1">
            </div>
            <div id="tabs-2">
            </div>
            <div id="tabs-3">
            </div>
            <div id="tabs-4">
            </div>       
            <div id="tabs-5">
            </div> 
            <div id="tabs-6">
            </div> 
        </div>           
    </div>
<!--End Tabs Content Area-->

JAVASCRIPT - нижняя часть страницы должна быть после кода вкладок

 $('#tabs-1').load('tabeedata/EmployeeGenInfo.htm');

Вот код дочерних страниц - страниц с формой.

ЯВАСКРИПТ -

$(function() {
    $('#submit1').click(function() {
        var name= $("#firstname").val();
        var genderx= $("#gender").val();
        $.ajax({
            async : "false",
            type: "POST",
            url: "http://localhost/test/ActionServlet",
            data: { step : 1, firstname: name, gender: genderx },
            success: function(data) {       
                var selected = $emptabs.tabs('option', 'selected');
                $emptabs.tabs("option", "disabled", []);
                $('#tabs-2').load('tabeedata/EmployeeEmergInfo.htm');
                $emptabs.tabs('select', selected+1);
                $emptabs.tabs("option", "disabled", [0,2,3,4,5]);   
                $("h2").html(data);
            }     
        });
    });
});

Как было предложено Аддамсом, чтобы поставить

$('#tabs-1').load('page.htm');

в обработчике успеха это не сработает, пока мы не избавимся от индивидуального

$emptabs = $('#tabs').tabs();

вызовы и сделал глобальный вызов на родительской странице, который выглядит следующим образом:

var $emptabs;
$(function() {
    $("#tabs").tabs({disabled: [0,1,2,3,4,5]});
    $emptabs = $('#tabs').tabs();
});

затем мы смогли вызвать каждую страницу по кнопке отправки.

person alien.ninja    schedule 30.10.2012