0

I'm trying for several hours to get my Contact-Form work correctly. The form itself has some tabs in it. The code for the tabs I'm using is from this site http://jqueryfordesigners.com/jquery-tabs/

This is the script-code I'm using:

<script type="text/javascript" charset="utf-8">
    $(function () {
        var tabContainers = $('div.tabs > div');
        tabContainers.hide().filter(':first').show();

        $('div.tabs ul.tabNavigation a').click(function () {
            tabContainers.hide();
            tabContainers.filter(this.hash).show();
            $('div.tabs ul.tabNavigation a').removeClass('selected');
            $(this).addClass('selected');
            return false;
        }).filter(':first').click();
    });
</script>

This works well so far. The tabs are being showed correctly as desired. The form I made with the FormIt-Package from Modx Revo works too!

Now the problem...when I click on submit and the validation fails (e.g. the user forgets to fill a mandatory field), the site will be refreshed and the last selected tab is not shown, the page always shows the first tab.

I want to view the last visited tab on validation error->page reload.

With this edit I can achieve that the desired tab gets opened via a hash-tag (ID of the tab) in the URL (e.g. www.xyz.com/contact.html?tab=#two):

    <script type="text/javascript" charset="utf-8">
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();

$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
     return false;
});

If I enter the site with the above URL, I can view the second tab as desired.

When I finally submit the form and a mandatory field is missing, the page reloads and puts out the errors. But the last viewed tab is not opened, instead none of the tabs is opened, because the URL "looses" it's hash-tag.

How can I achieve that the last visited/selected tab gets shown on page reload/refresh?

I tried to add the ID of a tab to the URL with this code inbetween line 10 and 12 in the first script-code:

location.hash = this.pathname.substring(3) + this.hash;

This has the effect that the ID gets added to the URL as a hash-tag by clicking on a tab. But on submitting the form, the URL "looses" the hast-tag and refreshes the page. On page load the URL is changed to www.xyz.com/contact.html#one. Whatever I try to type in like www.xyz.com/contact.html#two or www.xyz.com/contact.html#three the URL always changes back to www.xyz.com/contact.html#one

Any hints are appreciated! Thanks in advance!

4

1 回答 1

0

所以现在我已经实现了一个 cookie 功能：

    <script type="text/javascript" charset="utf-8">
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
$.cookie("tab", (this.hash)); 
alert($.cookie("tab"));
//location.hash = this.pathname.substring(3) + this.hash;
                return false;
            }).filter(':first').click();
$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
     return false;
});

        });
    </script>

当我单击一个选项卡时，会设置一个新的 cookie，并且该值会显示在警报中。

如何在页面加载时读取 cookie 并将 cookie 的值添加到 URL？

于 2012-07-15T14:32:57.007 回答