JavaScript在Bootstrap navtab上传递数据

Question

I am working on an application that loads a form inside of a bootstrap navtab. I have a datepicker that allows the user to enter a date click submit and update the data in the navtab. What I want to do is allow the user to select a date, and then when a tab is clicked it will use that date to display the data. As it is now, it will only work if the submit button is clicked. I know I need to change the code in my navtabs to match what I do when the button is clicked, but I'm not sure how to do it. Here is my navtabs:

<ul class="nav nav-tabs spiff_tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#home" aria-controls="home" role="tab" data-id="delayedspiff" data-toggle="tab" onclick="FormGet('dashboard/delayedspiff', 'delayedspiff')">Potential Spiff</a>

                    </li>
                    <li role="presentation">
                        <a href="#profile" aria-controls="profile" role="tab" data-id="instantspiff" data-toggle="tab" onclick="FormGet('dashboard/instantspiff', 'delayedspiff')">Instant Spiff</a>                        
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content" id="details">
                    <div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
                    <div role="tabpanel" class="tab-pane" id="instantspiff"></div>
                </div>
            </div>
        </div>
    </div>

Here is the button click JavaScript:

<script>    
   $(".spiffdate-btn").click(function(){
       var correctId = $("ul.spiff_tabs li.active a").attr('data-id');


       var endDate = $("#startDate").val();
       if (endDate == "") {

       } else {
           if (correctId == "delayedspiff")
           {
               FormGet('dashboard/delayedspiff?endDate=' + endDate, 'delayedspiff')


           } else if (correctId = "instantspiff") {
               FormGet('dashboard/instantspiff?endDate=' + endDate, 'delayedspiff')

           }           
       }     
   });   
</script>

How do I change the navtab Formget function to match that of the button clicks formget function?

Answer 1

Apply the spiffdate-btn class to your tab links so that they will also trigger the same function as your submit button without the onclick attribute. You could use a random css class that is more generically named and doesn't apply css to your elements.