Nair Nair - 7 months ago 21
Javascript Question

Bootstrap Pills In JQuery Dialog

Morning,

Not very good at web and hence appreciate any helping hands on my following issue.

Here I am using Bootstrap pills instead of tab to show switch-able view. This work in a web page and does show pages upon click on each pill.

Please check this.



<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" />

<div id="Div1">
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto; height: auto;">
<ul class="nav nav-pills">
<li class="active"><a href="#contactUs" data-toggle="tab">Contact Us</a>
</li>
<li><a href="#applyOnline" data-toggle="tab">Apply Online</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="contactUs">
<h2>
contact us</h2>
</div>
<div class="tab-pane" id="applyOnline">
<h2>
apply online</h2>
</div>
</div>
</div>





However, the challenge start when I tried to load above content using JQuery Dialog.
I.e, I able to see my model dialog pops up, render pills and first page. But nothing happens when I click on the pills to switch view.

Please check this.



function ShowContactUs() {
$(function () {
$("#contactUsContainer").dialog({
create: function () { $(this).parent().appendTo('form') },
modal: true, width: 500,

position: { my: 'top', at: 'top+400' },
title: "Contact Us/Complete Online"

}
);

});

};

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" />
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />



<button class="btn btn-primary" onclick="ShowContactUs()" >Show</button>

<div id="contactUsContainer" class="ui-helper-hidden">
<div id="Div1">
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto; height: auto;">
<ul class="nav nav-pills">
<li class="active"><a href="#contactUs" data-toggle="tab">Contact Us</a></li>
<li><a href="#applyOnline" data-toggle="tab">Apply Online</a></li></ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="contactUs">
<h2>
contact us</h2>
</div>
<div class="tab-pane" id="applyOnline">
<h2>
apply online</h2>
</div>
</div>
</div>
</div>








Can someone advise me on this ?

Answer

Not sure what impact it made to the JQuery Dialog when removing following line (highlighted in block) from the script. However, removing that line solved the issue. If someone knows more about it then please feel free to comment.

    function ShowContactUs() {
                $(function () {
                    $("#contactUsContainer").dialog({
                        create: function () 
{

$(this).parent().appendTo('form')

},
                        modal: true, width: 500,

                        position: { my: 'top', at: 'top+400' },
                        title: "Contact Us/Complete Online"

                    }
                          );

                });

            };