Question

我有一个网络应用程序，并使用bootstrap 3进行下拉列表。但是，它只会工作一次，直到页面刷新。

方案我的页面顶部有一个下拉列表，其中包含各种链接。所有链接都按预期工作。我有链接到我的应用程序内外的其他页面。单击一个链接，将在表行中显示服务器时间，该行由我的控制器类中的方法动态加载。单击此链接时，页面向下滚动到显示服务器时间的表行的位置。这第一次工作得很好。单击此链接后，下拉列表将无法工作，直到页面刷新为止。有问题的锚标签如下所示：

<li><a href="#dave" id="aButton2">Time & Date</a></li>

我的javascript正在使用id（aButton2），它正在添加将在表格行中动态添加时间的click事件。这是通过将上下文路径设置为包含我的控制器请求的字符串来完成的我的javascript函数

$("#aButton2").on('click', function() 
{ 
    $('#dave').load(contextpath+"/test1");  
});

href是我页面上的div，用于保存服务器时间。

这是我的控制器：

@RequestMapping(value="/test1", method = RequestMethod.GET)
public String test1(Locale locale, Model model) throws ParseException 
{
    Date date = new Date();
    //shows in the format "Mon Dec 09 13:23:47 GMT 2013"

    SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    String formattedDate = formatter.format(date);

    //String shows date format 2013-12-09 08:17

    model.addAttribute("serverTime", date);

    return "FillingDivHtml";
}

这是我的navbar.jsp：

<nav class="navbar navbar-default" role="navigation">   
<div class="container"> 
    <div class="navbar-header"> 
        <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="brand" href="http://www.rdfgroup.com/"><img src="${contextpath}/resources/img/rdf-logo.png" alt="RDF Group logo"></a>  
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right" id="navigation">
            <li class="active"><a href="#">Link</a></li>
            <li class="dropdown">
                <a href="#" id="aButton6" class="dropdown-toggle" data-toggle="dropdown">Try Me<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="<c:url value="/j_spring_security_logout" />" >Logout</a></li>
                    <li><a href="#dave" id="aButton2">Time & Date</a></li>
                    <li><a href="secondPage">Search for Objects</a></li>
                    <li class="divider"></li>
                    <li><a id="aButton5" href="Admin">Admin</a></li>
                </ul>
            </li>
        </ul>
    </div>
 </div>

这是我的Javascript：

$(document).ready(function() {

 $("#aButton").on('click', function() 
 {  

     if($('#objectType').val()==="" || $('#objectSize').val()==="")
     {
         $.ajax({                                           
             url: contextpath+"/secondPage2",              
             type: "GET",
             success: function(data) {
                 $("#objectResults").html(data);         
             },           
             error: function(xhr) {
                 alert("An error occured: " + xhr.status + " " + xhr.statusText);
             }

         });
     }
     else
     {
         $.ajax({                                           
             url: contextpath+"/secondPage3",              
             type: "GET",
             data: {objectType:$('#objectType').val(), objectSize:$('#objectSize').val()},
             success: function(data) {
                 $("#objectResults").html(data);         
             },           
             error: function(xhr) {
                 alert("An error occured: " + xhr.status + " " + xhr.statusText);
             }

         });
     }

     $('#objectType').val("");
     $('#objectSize').val("");
 });


$("#aButton2").on('click', function() 
{ 
    $('#dave').load(contextpath+"/test1");  
}); 

$("#aButton5").on('click', function() { 
     $.ajax({                                           
         url: contextpath+"/Admin",              
         type: "GET",
         data:{},
         success: function(data) {
             //$("#objectResults").html(data);    
            alert("this bit worked");
         },           
         error: function(xhr) {
             alert("An error occured: " + xhr.status + " " + xhr.statusText);
         }
     });
 });

$("#aButton3").on('click', function() { 
     if($('#objectType1').val()==="" || $('#objectSize1').val()==="" || $('#objectName1').val()==="")
     {
         alert("error");
     }
     else
     {
         $.ajax({                                           
             url: contextpath+"/secondPage4",              
             type: "GET",
             data: {objName:$('#objectName1').val(), objType:$('#objectType1').val(), objSize:$('#objectSize1').val()},
             success: function(data) {
                 //$("#objectResults").html(data);         
             },           
             error: function(xhr) {
                 alert("An error occured: " + xhr.status + " " + xhr.statusText);
             }

         });
     }
 }); 
});

如果我没有显示时间并且只是让页面转到应该出现时间的div，那么它也可能值得知道它工作正常。我是通过删除链接中的id="aButton2"来完成此操作的。

Bootstrap下拉列表仅适用一次

0 个答案: