2. Algorithm
  3. javascript - bootstrap accordion not working properly - Stack Overflow

javascript - bootstrap accordion not working properly - Stack Overflow

admin2025-04-08  2

i am trying to develop bootstrap accordion and it works fine in jsfiddle But when i tried in my web app its not working.I have attached the screenshot how it looks.As you can see in the screenshot there are no errors in the console.i am including following in my jsp page

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href=".3.2/assets/css/bootstrap.css" rel="stylesheet"> 
<link href=".3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> 
<script type="text/javascript" src=".min.js"></script> 
<script type="text/javascript" src=".3.2/assets/js/bootstrap.js"></script> 
    <link href=".2.2/css/bootstrap-bined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
     href=".min.css">

Even I had replaced <script src=".9.1.min.js"></script> in place of <script type="text/javascript" src=".min.js"></script> but no luck.Please tell me what else do i need?

Following is the full code

<%@ page import="java.sql.*" %>
<%@ page import="DB.*" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>send sms</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href=".3.2/assets/css/bootstrap.css" rel="stylesheet"> 
<link href=".3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> 
<script type="text/javascript" src=".min.js"></script> 
<script type="text/javascript" src=".3.2/assets/js/bootstrap.js"></script> 
    <link href=".2.2/css/bootstrap-bined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
     href=".min.css">
</head> 
<body> 
<div class="tabbable" id="myTabs"> 
<ul class="nav nav-tabs"> 

<li class="active"><a href="#tab1" data-toggle="tab">Send Message</a></li> 
<li><a href="#tab2" data-toggle="tab">Users</a></li> 
<li><a href="#tab3" data-toggle="tab">Group Message</a></li> 
<li><a href="#tab4" data-toggle="tab" id="signout">Sign Out</a></li> 
</ul> 
<div class="tab-content"> 
<div class="tab-pane active" id="tab1"> 
<div class="btn-group-vertical pull-right" data-toggle="buttons-radio">

<%
DataBaseConnection db=new DataBaseConnection();
Connection con=db.connet();
PreparedStatement pt=con.prepareStatement("select * from registerSmsUsers");
ResultSet rs=pt.executeQuery();int i=1;
while(rs.next())
{%>
  <button type="button" class="btn btn-primary btn-block" id="<%=rs.getString("mobile")%>"><%=rs.getString("name")%></button>


<%i++;}

%></div>
<div class="container">
        <div class="row">
            <div class="span12">
                <h3>Send SMS to Individual number</h3>
                <form class="form-signin" action="#" method="post" onsubmit="return false;">
                    <div class="row">
                        <div class="span3">
                            Enter Number to send:
                        </div>
                        <div class="span3">
<!-- <input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+22" rel="popover"/> -->
<!--<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" data-delay='{"show":"10", "hide":"3000"}'/>-->
<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" />

                        </div>
                        <!--<div class="span6">
                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                Please enter 10 digit mobile number prefixed by country code eg +911234567890<hr />

                            </div>
                        </div>-->
                    </div>
                    <div class="row">
                        <div class="span3">
                            Enter Message to send:
                        </div>
                        <div class="span3"> <div id="datetimepicker" class="input-append date"> 
<input style="display:none" type="text" name="body" maxlength="160" placeholder="Enter message to send" class=".dtext" id="body" data-trigger="hover"/> 
<input type="text" id="txt" style="display:none"/> 
<textarea rows="9" cols="50" class="darea1" id="darea"></textarea><span class="add-on"> 
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
</span> 
</div> 
</div> 
                        <!--<div class="span6">
                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                The text of the message you want to send, limited to 160 characters.
                            </div>
                        </div>-->
                    </div>
                    <div class="row">
                        <div class="span3">
                        </div>
                        <div class="span9">
                            <button class="btn" type="submit" id="openAlert" >Send</button>

                        </div>
                    </div>
                </form>
            </div>
        </div>


 <div id="le-alert" class="alert alert-warn alert-block fade">
      <button href="#" type="button" class="close">&times;</button>
      <h4>Successful</h4>
      <p>Message sent successfully</p>
    </div>
    </div>
</div> 
<!-- 2nd tab strats -->
<div class="tab-pane" id="tab2"> 



 <form class="well span9" action="insertNew" method="post"> 
<div class="row"> 
<div class="span3"> 
<label>Name</label> 
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required> 

</div> 
<div class="span3"> 

<label>Email Address</label> 
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required> 
</div> 
<div class="span3"> 
<label>Mobile</label> 
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required > 
</div> 
</div> 
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form> 
    <input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">

<!-- accordion strats-->

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                records
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
groups here         </div>
        </div>
    </div>
</div>

<!-- accordion ends-->
<!--<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>-->
</div> 
<!-- 2nd tab ends -->
<div class="tab-pane" id="tab3"> 
<p>para in section 3</p> 
</div> 
</div> 
</div> 
<script> 
$(function() { 
$("#datetimepicker").datetimepicker({ 
format: "'dd/MM/yyyy hh:mm:ss'", 
linkField: "#txt", 
linkFormat: "yyyy-mm-dd hh:ii", 
autoclose: true, 
}); 

jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){ 
$(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val()); 
}); 

}); 

</script> 
<script> 
$('#tabAll').click(function(){ 
$('#tabAll').addClass('active'); 
$('.tab-pane').each(function(i,t){ 
$('#myTabs li').removeClass('active'); 
$(this).addClass('active'); 
}); 
}); 
$('body').on('click', '.btn', function(){ 
if(this.id=='openAlert')
    {$('#number').val('');}else{$('#number').val(this.id);}
});
</script> 
<script >



        $(document).ready(function(){
$("#signout").click(function() { 
    window.location.replace("logout.jsp"); 
});
//next line
var val=0;
$(document).ready(function(){


  $('#btn1').click(function(){
      if($(".span4").val()!="")
      {
  $("#mytable").append('<tr id="mytr'+val+'"></tr>');
  $("#mytr"+val).append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr'+val+'" checked ></td>');

             $(".span4").each(function () {

             $("#mytr"+val).append("<td >"+$(this).val()+"</td>");

              });
              val++;
      }
      else
      {
          alert("please fill the form pletely");
      }
              });
    $('#btn2').click(function(){
        var creat_group=confirm("Do you want to creat a group??");
        if(val>1){
           alert(creat_group);


              }
    });




});

//
        $('#openAlert').click(function(){

            var number = $('#number').val(); // If its a text input could use .text()
            var msg = $('#darea').val(); //If its a text input could use .text()
alert(msg);
            $.ajax(
                {
                    type: "POST",
                    url: "messageSending.jsp", //Your full URL goes here
                    data: { toNumber: number, body: msg},
                    success: function(data, textStatus, jqXHR){
                        alert(data);                  
                    },
                    error: function(jqXHR){
                        alert(jqXHR.responseStatus);
                    }
                });
        });
    });
        </script>
<script>  
$(function ()  
{ $("#number").popover({title: 'Enter Mobile Number',content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"});  
});  
$(function ()  
{ $("#body").popover({title: 'Message Body',content: "Maximum 160 characters allowed"});  
});
</script>  
  <script type="text/javascript"
     src=".8.3/jquery.min.js">
    </script> 
    <script type="text/javascript"
     src=".2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src=".min.js">
    </script>
    <script type="text/javascript"
     src=".pt-BR.js">
    </script>

</body>
</html>

i am trying to develop bootstrap accordion and it works fine in jsfiddle But when i tried in my web app its not working.I have attached the screenshot how it looks.As you can see in the screenshot there are no errors in the console.i am including following in my jsp page

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="http://getbootstrap./2.3.2/assets/css/bootstrap.css" rel="stylesheet"> 
<link href="http://getbootstrap./2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> 
<script type="text/javascript" src="https://code.jquery./jquery.min.js"></script> 
<script type="text/javascript" src="http://getbootstrap./2.3.2/assets/js/bootstrap.js"></script> 
    <link href="http://netdna.bootstrapcdn./twitter-bootstrap/2.2.2/css/bootstrap-bined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
     href="http://tarruda.github./bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">

Even I had replaced <script src="http://code.jquery./jquery-1.9.1.min.js"></script> in place of <script type="text/javascript" src="https://code.jquery./jquery.min.js"></script> but no luck.Please tell me what else do i need?

Following is the full code

<%@ page import="java.sql.*" %>
<%@ page import="DB.*" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>send sms</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="http://getbootstrap./2.3.2/assets/css/bootstrap.css" rel="stylesheet"> 
<link href="http://getbootstrap./2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> 
<script type="text/javascript" src="https://code.jquery./jquery.min.js"></script> 
<script type="text/javascript" src="http://getbootstrap./2.3.2/assets/js/bootstrap.js"></script> 
    <link href="http://netdna.bootstrapcdn./twitter-bootstrap/2.2.2/css/bootstrap-bined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
     href="http://tarruda.github./bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head> 
<body> 
<div class="tabbable" id="myTabs"> 
<ul class="nav nav-tabs"> 

<li class="active"><a href="#tab1" data-toggle="tab">Send Message</a></li> 
<li><a href="#tab2" data-toggle="tab">Users</a></li> 
<li><a href="#tab3" data-toggle="tab">Group Message</a></li> 
<li><a href="#tab4" data-toggle="tab" id="signout">Sign Out</a></li> 
</ul> 
<div class="tab-content"> 
<div class="tab-pane active" id="tab1"> 
<div class="btn-group-vertical pull-right" data-toggle="buttons-radio">

<%
DataBaseConnection db=new DataBaseConnection();
Connection con=db.connet();
PreparedStatement pt=con.prepareStatement("select * from registerSmsUsers");
ResultSet rs=pt.executeQuery();int i=1;
while(rs.next())
{%>
  <button type="button" class="btn btn-primary btn-block" id="<%=rs.getString("mobile")%>"><%=rs.getString("name")%></button>


<%i++;}

%></div>
<div class="container">
        <div class="row">
            <div class="span12">
                <h3>Send SMS to Individual number</h3>
                <form class="form-signin" action="#" method="post" onsubmit="return false;">
                    <div class="row">
                        <div class="span3">
                            Enter Number to send:
                        </div>
                        <div class="span3">
<!-- <input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+22" rel="popover"/> -->
<!--<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" data-delay='{"show":"10", "hide":"3000"}'/>-->
<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" />

                        </div>
                        <!--<div class="span6">
                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                Please enter 10 digit mobile number prefixed by country code eg +911234567890<hr />

                            </div>
                        </div>-->
                    </div>
                    <div class="row">
                        <div class="span3">
                            Enter Message to send:
                        </div>
                        <div class="span3"> <div id="datetimepicker" class="input-append date"> 
<input style="display:none" type="text" name="body" maxlength="160" placeholder="Enter message to send" class=".dtext" id="body" data-trigger="hover"/> 
<input type="text" id="txt" style="display:none"/> 
<textarea rows="9" cols="50" class="darea1" id="darea"></textarea><span class="add-on"> 
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
</span> 
</div> 
</div> 
                        <!--<div class="span6">
                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                The text of the message you want to send, limited to 160 characters.
                            </div>
                        </div>-->
                    </div>
                    <div class="row">
                        <div class="span3">
                        </div>
                        <div class="span9">
                            <button class="btn" type="submit" id="openAlert" >Send</button>

                        </div>
                    </div>
                </form>
            </div>
        </div>


 <div id="le-alert" class="alert alert-warn alert-block fade">
      <button href="#" type="button" class="close">&times;</button>
      <h4>Successful</h4>
      <p>Message sent successfully</p>
    </div>
    </div>
</div> 
<!-- 2nd tab strats -->
<div class="tab-pane" id="tab2"> 



 <form class="well span9" action="insertNew" method="post"> 
<div class="row"> 
<div class="span3"> 
<label>Name</label> 
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required> 

</div> 
<div class="span3"> 

<label>Email Address</label> 
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required> 
</div> 
<div class="span3"> 
<label>Mobile</label> 
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required > 
</div> 
</div> 
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form> 
    <input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">

<!-- accordion strats-->

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                records
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
groups here         </div>
        </div>
    </div>
</div>

<!-- accordion ends-->
<!--<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>-->
</div> 
<!-- 2nd tab ends -->
<div class="tab-pane" id="tab3"> 
<p>para in section 3</p> 
</div> 
</div> 
</div> 
<script> 
$(function() { 
$("#datetimepicker").datetimepicker({ 
format: "'dd/MM/yyyy hh:mm:ss'", 
linkField: "#txt", 
linkFormat: "yyyy-mm-dd hh:ii", 
autoclose: true, 
}); 

jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){ 
$(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val()); 
}); 

}); 

</script> 
<script> 
$('#tabAll').click(function(){ 
$('#tabAll').addClass('active'); 
$('.tab-pane').each(function(i,t){ 
$('#myTabs li').removeClass('active'); 
$(this).addClass('active'); 
}); 
}); 
$('body').on('click', '.btn', function(){ 
if(this.id=='openAlert')
    {$('#number').val('');}else{$('#number').val(this.id);}
});
</script> 
<script >



        $(document).ready(function(){
$("#signout").click(function() { 
    window.location.replace("logout.jsp"); 
});
//next line
var val=0;
$(document).ready(function(){


  $('#btn1').click(function(){
      if($(".span4").val()!="")
      {
  $("#mytable").append('<tr id="mytr'+val+'"></tr>');
  $("#mytr"+val).append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr'+val+'" checked ></td>');

             $(".span4").each(function () {

             $("#mytr"+val).append("<td >"+$(this).val()+"</td>");

              });
              val++;
      }
      else
      {
          alert("please fill the form pletely");
      }
              });
    $('#btn2').click(function(){
        var creat_group=confirm("Do you want to creat a group??");
        if(val>1){
           alert(creat_group);


              }
    });




});

//
        $('#openAlert').click(function(){

            var number = $('#number').val(); // If its a text input could use .text()
            var msg = $('#darea').val(); //If its a text input could use .text()
alert(msg);
            $.ajax(
                {
                    type: "POST",
                    url: "messageSending.jsp", //Your full URL goes here
                    data: { toNumber: number, body: msg},
                    success: function(data, textStatus, jqXHR){
                        alert(data);                  
                    },
                    error: function(jqXHR){
                        alert(jqXHR.responseStatus);
                    }
                });
        });
    });
        </script>
<script>  
$(function ()  
{ $("#number").popover({title: 'Enter Mobile Number',content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"});  
});  
$(function ()  
{ $("#body").popover({title: 'Message Body',content: "Maximum 160 characters allowed"});  
});
</script>  
  <script type="text/javascript"
     src="http://cdnjs.cloudflare./ajax/libs/jquery/1.8.3/jquery.min.js">
    </script> 
    <script type="text/javascript"
     src="http://netdna.bootstrapcdn./twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github./bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github./bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
    </script>

</body>
</html>
  • javascript
  • jquery
  • html
  • css
  • twitter-bootstrap
Share Improve this question edited Oct 29, 2013 at 10:08 SpringLearner asked Oct 29, 2013 at 9:47 SpringLearnerSpringLearner 13.9k20 gold badges81 silver badges117 bronze badges 6
  • why you include these <link href="getbootstrap./2.3.2/assets/css/bootstrap.css" rel="stylesheet"> <link href="getbootstrap./2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> in last you added bined so not need – Sridhar R Commented Oct 29, 2013 at 9:50
  • @Ranadheer please see now – SpringLearner Commented Oct 29, 2013 at 9:50
  • @SridharR sorry didnt understand – SpringLearner Commented Oct 29, 2013 at 9:51
  • check in fiddle you dont need to put those css 's seperately,bined have all this – Sridhar R Commented Oct 29, 2013 at 9:58
  • Also remove excess CSS/JS etc and build back up. Clearly given the answer below and yours still not working build it back up, or provide all the code. It will be difficult for ppl to help otherwise. – Ted Johnson Commented Oct 29, 2013 at 10:05
 |  Show 1 more ment

1 Answer 1

Reset to default 3

Head

   <script src="http://code.jquery./jquery-1.8.3.js" type="text/javascript">
        <script src="http://getbootstrap./2.3.2/assets/js/bootstrap.js" type="text/javascript">
        <link href="http://netdna.bootstrapcdn./twitter-bootstrap/2.2.2/css/bootstrap-bined.min.css" type="text/css" rel="stylesheet">

HTML

   <div class="accordion" id="accordion2">
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
            Collapsible Group Item #1
          </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
            Collapsible Group Item #2
          </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
    </div>

Fiddle: http://jsfiddle/fzN4K/15/

Jquery 1.9.1 : http://jsfiddle/fzN4K/16/

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744127392a232525.html

javascriptbootstrap accordion not working properlyStack Overflow

最新回复(0)