【问题标题】:Pass data to a bootstrap modal that contain bootstrap-select upon click单击时将数据传递给包含 bootstrap-select 的引导模式
【发布时间】:2017-08-19 15:29:41
【问题描述】:

我是 jQuery 新手,目前正在尝试测试将数据传递给包含 bootstrap-select 的引导模式(由 Silvio Moreto 撰写)。我已阅读文档并尝试按照我从文档中理解的内容进行操作,但似乎我所做的一切都未能按照我的理解进行。

这是场景,我已经加载了通过 PHP Laravel 从数据库检索到的数据的页面。在该页面中,有一个用于编辑的编辑按钮。编辑按钮将加载一个包含输入文本的模式,并在单击时选择选项。

这是页面代码sn-p:-

@foreach ($cklist as $key=>$cklst)
@if (strtoupper($sort->sectionFK)==strtoupper($cklst->schSectionFK))

<?php $index++; ?>
    <tr>
        <!-- Task Name -->
        <td class="table-text"  width="10px">
            <div>{{$index }}</div>
        </td>
        <td class="table-text">
            <div>{{strtoupper($cklst->clQuestion)}}</div>
        </td>
        <td>
           <!----- Edit Question Item Button ----->
            <button type="button" data-toggle="modal" data-target=".qs-item-modal-lg" data-question="{{$cklst->clQuestion}}" data-question-id="{{$cklst->cklistPK}}" data-question-severity-id="{{$cklst->severityFK}}" @foreach ($svrity as $key=>$slct2)
                @if ($slct2->severityPK == $cklst->severityFK)
                data-question-severity-txt="{{$slct2->severityName}}"
                @endif
            @endforeach 
            class="btn btn-warning">Edit</button>
        </td>
        <td align="center" width="10px">
            <form action="{{ url('addref/'.$cklst->cklistPK) }}" method="POST">
                {{ csrf_field() }}
                <input type="hidden" name="schemeID" value="{{$id}}">
                <input type="hidden" name="cklistID" value="{{$cklst->cklistPK}}">
                <button class="btn btn-info" type="submit">Get Reference</button>
            </form>
        </td>
        <td align="center"  width="10px">
            <form action="{{ url('delcheck/'.$cklst->cklistPK) }}" method="POST" class="delete">
                {{ csrf_field() }}
                {{ method_field('DELETE') }} 
                <button class="btn btn-danger" type="submit">Delete</button>
            </form>
        </td>
    </tr>
@endif
@endforeach

编辑按钮将打开一个引导模式(位于同一页面中)以编辑该特定记录。模态代码sn-p:-

<!----- Edit Question Item Modal ----->
<div class="modal fade qs-item-modal-lg" id="editqstn" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myLargeModalLabel">Edit Question Item</h4>
            </div>
            <form action="{{url('editquestion')}}" method="POST">
                {{ csrf_field() }}
                {{ method_field('PUT') }} 
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="text-left">
                                <div class="col-sm-8">
                                    <h4>
                                        <label>Question Name</label>
                                        <input type="text" class="form-control" name="selectedquestion" value="">
                                        <input type="hidden" name="selectedquestionID" value="">
                                    </h4>
                                </div>
                                <div class="col-sm-4">
                                    <h4>
                                        <label>Severity</label>
                                        <select class="selectpicker form-control" id="svrty" name="selectedquestionSvrty">
                                            <option selected value=""></option>
                                            @foreach ($svrity as $key=>$slct2)
                                            <option value="{{$slct2->severityPK}}">{{strtoupper($slct2->severityName)}}</option>
                                            @endforeach
                                        </select>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

以及用于向模态传递数据的 jQuery:-

$("#editqstn").on("show.bs.modal", function (e) {

        //get data-question attributes of the clicked element
        var slctqstn = $(e.relatedTarget).data('question');
        var slctqstnid = $(e.relatedTarget).data('question-id');
        var slctqstnsvrty = $(e.relatedTarget).data('question-severity');
        var slctqstnsvrtytxt = $(e.relatedTarget).data('question-severity-txt');

        //populate the input
        $(e.currentTarget).find('input[name="selectedquestion"]').val(slctqstn);
        $(e.currentTarget).find('input[name="selectedquestionID"]').val(slctqstnid);

        $('.selectpicker').on('change', function(e){
            //populate the bootstrap-select selected value
            $(e.currentTarget).find('#svrty').selectpicker('val', slctqstnsvrty);
            //populate the bootstrap-select selected string text
            $(e.currentTarget).find('#svrty').text(slctqstnsvrtytxt).selectpicker('render');
        });
    });

我已经测试了代码,输入字段的数据成功传递,但选择字段的数据没有。因此,如果用户不打算编辑它们,我无法提供他们当前选择的数据。所以我想知道我的代码有什么问题,并希望这里有人能够监督它。

【问题讨论】:

    标签: jquery twitter-bootstrap bootstrap-select


    【解决方案1】:

    如果您想在模态渲染中动态填充 selectpicker 值,则可以使用另一种方法。您可以在基本选择字段上使用.val() 函数,然后刷新选择器实例。

    $("#editqstn").on("show.bs.modal", function (e) {
    
        //get data-question attributes of the clicked element
        var slctqstn = $(e.relatedTarget).data('question');
        var slctqstnid = $(e.relatedTarget).data('question-id');
        var slctqstnsvrty = $(e.relatedTarget).data('question-severity');
        var slctqstnsvrtytxt = $(e.relatedTarget).data('question-severity-txt');
    
        //populate the input
        $(e.currentTarget).find('input[name="selectedquestion"]').val(slctqstn);
        $(e.currentTarget).find('input[name="selectedquestionID"]').val(slctqstnid);
    
        // Yu don't need this part
        /*
        $('.selectpicker').on('change', function(e){
            //populate the bootstrap-select selected value
            $(e.currentTarget).find('#svrty').selectpicker('val', slctqstnsvrty);
            //populate the bootstrap-select selected string text
            $(e.currentTarget).find('#svrty').text(slctqstnsvrtytxt).selectpicker('render');
        });
        */
        // Instead you can use the following-
        $(e.currentTarget).find('#svrty').val(slctqstnsvrty).selectpicker('refresh');
    });
    

    注意:我发现在IDsclassesvariables 等中使用描述性名称在我尝试调试和进一步开发时非常有帮助,因为它易于阅读和理解队友。即使有时我独自工作,描述性名称也能帮助我轻松解析代码。

    更新

    你犯了一个非常愚蠢的错误。在您的编辑按钮中,您有一个data-question-severity-id 属性,但在show.bs.modal 事件回调中,您正试图通过$(e.relatedTarget).data('question-severity') 访问它。按钮中没有data-question-severity,而是data-question-severity-id。更新它使其工作。

    整个代码sn-p如下-

    jQuery(document).ready(function($) {
    
      $('.selectpicker').selectpicker({
        style: 'btn-info',
        size: 4
      });
      
      $("#editqstn").on("show.bs.modal", function(e) {
    
        //get data-question attributes of the clicked element
        var slctqstn = $(e.relatedTarget).data('question');
        var slctqstnid = $(e.relatedTarget).data('question-id');
        var slctqstnsvrty = $(e.relatedTarget).data('question-severity-id');
        var slctqstnsvrtytxt = $(e.relatedTarget).data('question-severity-txt');
    
        //populate the input
        $(e.currentTarget).find('input[name="selectedquestion"]').val(slctqstn);
        $(e.currentTarget).find('input[name="selectedquestionID"]').val(slctqstnid);
        $(e.currentTarget).find('#svrty').val(slctqstnsvrty).selectpicker("refresh");
    
      });
    
    });
    <link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <button type="button" data-toggle="modal" data-target=".qs-item-modal-lg" data-question="Question 1" data-question-id="123" data-question-severity-id="2" data-question-severity-txt="Severe 2" class="btn btn-warning">Edit</button>
    
    <div class="modal fade qs-item-modal-lg" id="editqstn" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="myLargeModalLabel">Edit Question Item</h4>
          </div>
          <form action="{{url('editquestion')}}" method="POST">
            <div class="modal-body">
              <div class="row">
                <div class="col-sm-12">
                  <div class="text-left">
                    <div class="col-sm-8">
                      <label>Question Name</label>
                      <input type="text" class="form-control" name="selectedquestion" value="">
                      <input type="hidden" name="selectedquestionID" value="">
    
                    </div>
                    <div class="col-sm-4">
                      <label>Severity</label>
                      <select class="selectpicker form-control" id="svrty" name="selectedquestionSvrty">
                        <option selected value=""></option>
                        <option value="1">Severe 1</option>
                        <option value="2">Severe 2</option>
                        <option value="3">Severe 4</option>
                      </select>
    
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    在这里检查小提琴。 https://jsfiddle.net/fm503fh9/9/

    【讨论】:

    • 如果我删除您评论的代码,按钮不会打开模式。我不知道为什么,但我认为你的方法无论如何都应该有效,但它没有。所以我在网上查了一下,它需要一个事件监听器。
    • 你可以只用 html 做一个 jsfiddle 吗?
    • 这里是fiddle,但这里的两个数据都没有通过...在我的页面中,输入文本确实有数据...
    • 我刚刚检查了 Chrome 的开发者控制台,出现错误:Uncaught TypeError: $(...).find(...).selectpicker is not a function。所以我知道需要先解决一个问题......
    • 那么你需要将你的 js 代码包装在 jquery 的 dom 就绪回调函数中:jQuery(document).ready(function(){ // your code should be here.. })
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-07-21
    • 2016-01-22
    • 1970-01-01
    • 2017-12-31
    • 2017-08-23
    • 2014-11-13
    相关资源
    最近更新 更多