如何在bootstrap模式中加载动态内容

时间:2016-07-21 11:05:54

标签: javascript jquery html twitter-bootstrap octobercms

我已经创建了一个bootstrap模式,但我需要内容是动态的。每次我选择不同的表行时,应该弹出该行的内容。 bootstrap模式中的内容是动态表。可以通过从表的行中选择来显示一个简单的示例,我可以在弹出模式中获得动态表。请帮忙。感谢

  while($row = $results->fetch_assoc()): ?>
       <tr>
         <td class="list-answer"
               data-toggle="modal"
               href="#content-confirmation">
                <?= $row["name"]; ?>
           </td>
        </tr>
  <?php endwhile ?>

 <div class="control-popup modal fade" id="content-confirmation"
 tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close"
            data-dismiss="modal"
            aria-hidden="true">&times;</button>

            <h4 class="modal-title">Are you sure you wanna do
            that?</h4>
        </div>
        <div class="modal-body">
          load dynamic table content.......

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default"
            data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary"
            data-dismiss="modal">Save</button>
        </div>
    </div>
</div>

4 个答案:

答案 0 :(得分:1)

您是否尝试将表格列与href相关联?因为它不会像那样工作。

对于您的问题,有多种方法可以做到这一点。我会给表的行一个id并处理js代码中的行单击或列单击事件。之后,我会通过ajax请求或直接从表格的列中获取行内容。

所以你的代码看起来像是:

 while($row = $results->fetch_assoc()): ?>
   <tr data-id="<?= $row["id"]; ?>">
     <td class="list-answer">
            <?= $row["name"]; ?>
       </td>
    </tr>
  

你的javascript代码:

$(function(){
$(".list-answer").click(function() {
    var row_id = $(this).parents('tr').attr('data-id');

    get_data(row_id);

    $('#my-modal').modal();     
});
});

function get_data(row_id) {

    //either get data with ajax request or row
    //fill modals content with $('#input-field-id').val('vlaue') or .html()
}

答案 1 :(得分:0)

$.ajax({
    url : 'url',
    method : 'post',
    data: {

    },
    success : function(response)
    {
        $('#my-modal').html(response);
        // put your html response in the popup div

        $('#my-modal').modal();
    }
});

<div id="my-modal"></div>

答案 2 :(得分:0)

您可以在OctoberCMS后端执行此操作。我给你一个简单的例子。 我把它放在控制器_list_toolbar.htm

<button
        href="javascript:;"
        data-control="popup"
        data-size="large"
        disabled="disabled"
        data-trigger-action="enable"
        data-trigger=".control-list input[type=checkbox]"
        data-trigger-condition="checked"
        onClick="$(this).popup({ handler: 'onAssignTechnical', extraData: { checked: $('.control-list').listWidget('getChecked') } })"
        href="javascript:;"
        class="btn btn-default oc-icon-plus">
        <?= e(trans('lilessam.maintenancesystem::lang.work_orders.assigntechnical_button')) ?>
    </button>

在控制器中的onAssignTechnical()中,我将制作一个引导模态。

public function onAssignTechnical() {
        /** Check if this is even set **/
        if (($checkedIds = post('checked')) && is_array($checkedIds) && count($checkedIds)) {

            foreach($checkedIds as $workorder_checked_id) {
                $check_work_order = \Lilessam\Maintenancesystem\Models\WorkOrder::where(['id' => $workorder_checked_id, 'assigned_to_id' => null])->count();
            }

            /** Check if there's more than one record checked */
            if(count($checkedIds) == 1 && $check_work_order != 0):
                /**Labels **/
                $modal_title = Lang::get('lilessam.maintenancesystem::lang.assign_technical_title');
                $assign_label = Lang::get('lilessam.maintenancesystem::lang.assign_label');
                $name_label = Lang::get('lilessam.maintenancesystem::lang.assign_modal_name_label');
                $action_label = Lang::get('lilessam.maintenancesystem::lang.assign_modal_action_label');

                /** Getting all workers IDS by their group id 2 **/
                $allWorkers_ids = DB::table('backend_users_groups')->where('user_group_id', 2)->get();
                /** Workers Array **/
                $workers_array = [];

                // Looping to get all workers
                foreach($allWorkers_ids as $worker_id) {

                    //Fetching the user
                    $worker = User::find($worker_id->user_id);

                    //Pushing the worker to workers' array
                    array_push($workers_array, [
                                                'login'         => $worker->login,
                                                'first_name'    => $worker->first_name,
                                                'last_name'     => $worker->last_name,
                                                'id'            => $worker->id,
                                                ]);
                }

                #setting the table header
                $workers_code = '<div class="control-list list-unresponsive">
                                <table class="table data" data-control="rowlink">
                                    <thead>
                                        <tr>
                                            <th><a href="javascript:;">'.$name_label.'</a></th>
                                            <th style="width: 150px"><span>'.$action_label.'</span></th>
                                        </tr>
                                    </thead>
                                    <tbody>';

                #Adding workers to the table                  
                foreach($workers_array as $worker_row) {
                    foreach($checkedIds as $workorder_id):
                        $workers_code .= '<tr>
                                            <td>
                                                <a href="javascript:;">
                                                    '.$worker_row['first_name']." ".$worker_row['last_name'].'
                                                </a>
                                            </td>
                                            <td>
                                            <form method="post" data-request="onAssignNow">
                                                <input type="hidden" name="workorder_id" value="'.$workorder_id.'">
                                                <input type="hidden" name="id" value="'.$worker_row['id'].'">
                                                <button type="submit" class="btn btn-info">'.$assign_label.'</button>
                                            </form>
                                            </td>

                                        </tr>';
                    endforeach;

                }

                #Adding Table Fotter
                $workers_code .= "</tbody>
                                    </table>
                                        </div>";

                #Returning all modal
              return '
                    <div class="control-popup modal fade in" id="content-confirmation" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h4 class="modal-title">'.$modal_title.'</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group  textarea-field span-full" data-field-name="idea" id="Form-field-Idea-idea-groupc" style="height: 395px;
                                        overflow-x: hidden;
                                        margin-bottom: 20px;
                                        overflow-y: scroll;">
                                        <div class="qa-message-list" id="wallmessages">
                                        '.$workers_code.'

                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">X</button>
                                </div>
                            </div>
                        </div>
                    </div>
                ';
            else:
                /** Labels **/
                $warning_title = Lang::get('lilessam.maintenancesystem::lang.assign_technical_warning_title');
                $warning_body = Lang::get('lilessam.maintenancesystem::lang.assign_technical_warning');

                #Returning all modal
                return '
                        <div class="control-popup modal fade in" id="content-confirmation" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title">'.$warning_title.'</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="form-group  textarea-field span-full" data-field-name="idea" id="Form-field-Idea-idea-groupc" style="height: 395px;
                                            overflow-x: hidden;
                                            margin-bottom: 20px;
                                            overflow-y: scroll;">
                                            <div class="qa-message-list" id="wallmessages">
                                            '.$warning_body.'
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">&#10006</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ';    
            endif;

        }


     }

请原谅我的长码,但我相信它会对你有帮助。

答案 3 :(得分:0)

我不知道我是否理解得很好,但我认为你需要像我这样的东西:

$("table").on('click', 'tr', function() {
        var json_data = {
            "controller": "NameOfController",
            "action": "action",
            "contentofRow": $(this).text()
        };
        $.post('ajax_handler.php', json_data, function (res) {
            if (res.indexOf('ERREUR') != -1) {
                alert(res);
                return false;
            }
            else {

                $('#mymodalID').modal();
                $("#myModalLabel").html("Content of the row : " + res[0]);
                $.each(res[1], function (index, valeur) {
                    $("#bodySupp").append($('<tr>')
                            .css("text-align", "center")
                            .css("fontSize", "12px")

                            .append($('<th>')
                                .html(valeur['indexOfValue'])
                        )
                            .append($('<th>')
                                .html(index)
                        )
                            .append($('<th>')
                                .html(valeur['indexOfValue2'])
                        )
                            .append($('<th>')
                                .html(valeur['indexOfValue3'])
                        )
                    )
                });

            }
        }, 'json');

    });

$(&#34; table&#34;)。on(&#39;点击&#39;,&#39; tr&#39;,功能()

您在点击表格行

时打开模态

&#34; contentofRow&#34;:$(this).text()

您获取当前行的内容,这将是您要显示的内容:)

然后你有控制器:

class NameOfController implements AjaxControler {

    public function execute($data)
    {
        switch($data['action']){
            default :
                $contentRow= $data['yourcontent'];
                $res = array();
                $res[] = $contentRow

                return json_encode($res);
        }
    }

}