Gewusst wie: laden von dynamischen Inhalten in bootstrap modal

habe ich erstellen eine bootstrap-modal-aber ich brauche den Inhalt dynamisch zu sein. Jedes mal, wenn ich eine andere Tabelle auswählen Zeile, wird der Inhalt dieser Zeile sollte popup. Der Inhalt innerhalb der bootstrap-modal ist eine dynamische Tabelle. Möglich ist ein einfaches Beispiel dafür, wie durch auswählen der Zeile einer Tabelle, bekomme ich eine dynamische Tabelle in der popup modal. Bitte helfen Sie. Dank

  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>

InformationsquelleAutor tan | 2016-07-21

Sind Sie versuchen zu geben, Ihre Tabelle Spalte einen link mit href ? denn es würde nicht so funktionieren.

Deiner Frage, es gibt mehrere Möglichkeiten, dies zu tun. Ich würde die Tabelle Zeile eine id und behandeln Sie die Zeile oder Spalte, klicken Sie auf click-Ereignis in der js-code. danach würde ich bekommen, dass die Zeilen-Inhalte entweder mit einer ajax-Anfrage oder direkt aus den Spalten der Tabelle.

Also würde der code so Aussehen:

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

Ihren javascript-code:

$(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()
}

InformationsquelleAutor Mightee

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

Hi Pandeyz, vielen Dank für Ihre Antwort. ich bin mir nicht ganz sicher, was Sie meinte. Können Sie uns erklären, an weiteren details? oder können Sie mir zeigen, ein Beispiel-code? Dank

InformationsquelleAutor Mayank Pandeyz

Können Sie tun, dass in OctoberCMS backend. Ich gebe Ihnen ein kurzes Beispiel.
Ich das in einem controller _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>

Und in der onAssignTechnical() in der controller-ich mache eine bootstrap-modal.

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;

        }


     }

Entschuldigung für den langen code, aber ich bin sicher, Es wird dir helfen.

InformationsquelleAutor Ahmed Essam

Ich weiß nicht, ob ich gut verstehen, aber ich denke, man braucht so etwas wie mich :

$("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');

    });

$("table").auf('click', 'tr', function()

Öffnen Sie das modale auf Klick auf die Zeile in der Tabelle,

"contentofRow": $(this).text()

Nehmen Sie den Inhalt der aktuellen Zeile, das ist, was Sie zeigt 🙂

Und dann haben Sie den controller :

class NameOfController implements AjaxControler {

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

                return json_encode($res);
        }
    }

}

InformationsquelleAutor sleakerz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.