Javascript 如何在引导模式中加载动态内容
我已经创建了一个引导模式，但我需要的内容是动态的。每次我选择不同的表行时，该行的内容都会弹出。引导模式中的内容是一个动态表。可以显示一个简单的示例，通过从表的行中选择，我可以在弹出模式中获得一个动态表。请帮忙。谢谢Javascript 如何在引导模式中加载动态内容,javascript,jquery,html,twitter-bootstrap,octobercms,Javascript,Jquery,Html,Twitter Bootstrap,Octobercms,我已经创建了一个引导模式，但我需要的内容是动态的。每次我选择不同的表行时，该行的内容都会弹出。引导模式中的内容是一个动态表。可以显示一个简单的示例，通过从表的行中选择，我可以在弹出模式中获得一个动态表。请帮忙。谢谢 while($row = $results->fetch_assoc()): ?> <tr> <td class="list-answer" data-toggle="modal"
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">×</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>
您是否正在尝试使用href为表列提供链接？因为它不会那样工作 对于你的问题，有多种方法可以做到这一点。我将给表的行一个id，并在js代码中处理行单击或列单击事件。之后，我将通过ajax请求或直接从表的列中获取该行内容 因此，您的代码如下所示：
while($row = $results->fetch_assoc()): ?>
<tr data-id="<?= $row["id"]; ?>">
<td class="list-answer">
<?= $row["name"]; ?>
</td>
</tr>
你可以在十月完成。我给你举个简单的例子。 我把它放在一个控制器_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>
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">✖</button>
</div>
</div>
</div>
</div>
';
endif;
}
}
请原谅我写了这么长的代码，但我相信它会对您有所帮助。我不知道我是否理解清楚，但我想您需要像我这样的人：
$("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');
});
嗨，潘代兹，谢谢你的回复。我不太清楚你的意思。你能详细解释一下吗？或者你能给我看一个示例代码吗？谢谢
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">✖</button>
</div>
</div>
</div>
</div>
';
endif;
}
}
$("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');
});
class NameOfController implements AjaxControler {
public function execute($data)
{
switch($data['action']){
default :
$contentRow= $data['yourcontent'];
$res = array();
$res[] = $contentRow
return json_encode($res);
}
}
}