在 JQuery 对话框中引导药丸答案

【问题标题】：Bootstrap Pills In JQuery Dialog在 JQuery 对话框中引导药丸
【发布时间】：2016-04-20 08:16:37
【问题描述】：

早上，

不太擅长网络，因此感谢任何帮助我解决以下问题的人。

在这里，我使用 Bootstrap 丸代替选项卡来显示可切换视图。这在网页中工作，并在点击每个药丸时显示页面。

请检查一下。

<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>

但是，当我尝试使用 JQuery Dialog 加载上述内容时，挑战就开始了。即，我可以看到我的模型对话框弹出，渲染药丸和第一页。但是当我单击药丸切换视图时，什么也没有发生。

请检查一下。

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>

有人可以给我建议吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap jquery-ui twitter-bootstrap-3

【解决方案1】：

当我点击药丸切换视图时没有任何反应。

因为标签页的内容相同。

<div class="tab-content">
        <div class="tab-pane active" id="contactUs">
            <h2>
                contact us</h2> // Here..
        </div>
        <div class="tab-pane" id="applyOnline">
            <h2>
                contact us</h2> // And Here..
        </div>
</div>

没关系，任何人都可能发生这种情况，谢谢..

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>

【讨论】：

对不起。这是我的错误。但是，它仍然无法在我的网页中使用。但它适用于我的原始帖子和您的帖子。
@Nair 它也适用于JsFiddle，您是否在页面中运行了其他脚本可能会与它冲突，谢谢？
是的。我确实有其他脚本。但是，为了证明这一点，我删除了所有其他脚本以证明这一点。但没有变化，仍然没有切换页面。
没有。谢谢。但是，我猜这个问题可能是由于多个 FORM 标签。所以我删除了除一个以外的所有 Form 标签，它开始按预期运行。但是，我仍然不确定导致此问题的原因，因为单个页面中允许使用多个表单。

【解决方案2】：

不确定从脚本中删除以下行（在块中突出显示）时对 JQuery 对话框有何影响。但是，删除该行解决了该问题。如果有人对此了解更多，请随时发表评论。

    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"

                    }
                          );

                });

            };

【讨论】：

那行代码所做的是将您的对话框附加到您网页上的任何 formelement，您没有针对特定元素，这就是为什么当您有多个 formelements 时中断，因为它在所有这些上都复制了 HTML 标记。
那么在触发tab动作时，有相同ID的重复元素，所以对其他暂时不可见的元素执行tab动作
这可以很容易地解决，方法是通过分配和 ID 将附加操作定位到特定表单，并将其定位为 $(this).parent().appendTo('#your-form-id')。这样您就可以拥有多个表单元素并将其附加到您真正想要的表单中，因此不会复制 HTML 标记并且选项卡将正常工作

【解决方案3】：

正如 OP 在他的 cmets 上所说，他的 HTML 标记中有多个 <form> 元素，所以当 jQuery Dialog 被执行时，它有这个指令：

create: function () { $(this).parent().appendTo('form') },

然后，这会从对话框中获取所有 HTML，并将它们附加到 DOM 上存在的所有表单元素。因此，这会创建具有相同 ID 值的重复对话框。 DOM 上不应有重复的 ID 值。

然后选项卡将不起作用，因为 Bootstrap 选项卡插件是这样工作的，当锚点 <a> 元素具有 data-toggle="tab" 属性时，它将获取 href="#contactUs" 的值以获取 <div> 的 ID有要显示的选项卡内容，因为它们在前一个脚本中重复，所以行为与预期不符，因为它打算只有一个具有该 ID 的选项卡内容 div 来触发选项卡显示操作。

要解决此问题，请为您希望在 HTML 中包含对话框（示例）<form id="my-desired-form"> 的 <form> 元素分配一个 ID。

然后把Javascript改成

create: function () { $(this).parent().appendTo('#my-desired-form') },

【讨论】：