jquery - ページのリロード後に data-toggle="pill" が機能しない

Question

以下のコードでは、ユーザーがアンカー タグをクリックすると Java アクション クラスに移動し、同じページに戻りますが、以前にクリックしたリンクはアクティブなタブとして表示されません。アクティブなタブの値を post パラメータとしてアクション クラスに渡します。返されたページでそれをキャプチャして、アクション クラスに移動する前と同じようにリンクをアクティブにするにはどうすればよいでしょうか。

サンプルコードは次のとおりです。

<script type="text/javascript">
    function submitTab(type) {
        if(document.myOrderForm.pagetype.value != type) {
            document.myOrderForm.pagetype.value=type;
            // The type is passed from the submitTab method on the anchor onclick event.
            document.myOrderForm.submit();
        }
    }
</script>

フォーム要素は次のとおりです。

<form name="myOrderForm" method=post action="<c:url value="/LoadMyOrder.go" />" >
    <input type="hidden" name="pagetype" value='${requestScope.pagetype}'>
    // this hidden name pagetype gets set by the value from action class and
    // and is equal to one of the list items in the hyperlinks ('OO','CO' or 'CS')
    // if value of the page type equals to one of those above values i want to mark
    // the respective "LI" to class="active"

    // I think we need to do it on the -- $(document).ready(function() { 
    // but not quite sure. If some one donot understand  let me know.

    <div class="row-fluid">
        <div class="span12">
            <div class="pull-left">
            <ul class="nav nav-pills">
                    <li>
                        <a onclick="javascript:submitTab('OO')"; href="#" data-toggle="pill" >
                &nbsp;<b><fmt:message key="myorder.openorder" /></b>
                        </a>
                    </li>
                    <li>
                        <a onclick="javascript:submitTab('CO')"; href="#" *data-toggle="pill"*>
                &nbsp;<b><fmt:message key="myorder.completedorder" /></b>
                        </a>
                    </li>
                    <li>
                        <a onclick="javascript:submitTab('CS')"; href="#" *data-toggle="pill"*>
                            &nbsp;<b><fmt:message key="myorder.current.service" /></b>
                        </a>
                </li>
            </ul>
            </div>
        </div>
     </div>
</form>

このようなことを考えています。私はブートストラップとjQueryが初めてです

<script type="text/javascript">
    var pageToGo = "${requestScope.pagetype}";
    alert("pageToGo is" +pageToGo);
    $(document).ready( function() {
        $(".nav li a:contains('OO')").parent().addClass('active');
    })
</script>