- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
仅供引用:我没有使用引导模态框来弹出窗口。
我的表格每行都有按钮,用于在弹出的模式框中显示详细信息。
我附上了 dashboard.html
、modal.js
、modal.css
和 modal.php 所需的部分代码
.
我缺乏jquery的概念来将元素添加到表单并通过PHP分配返回的JSON文件的值,然后将表单添加到div标签类modal-content
。弹出模式框的 CSS 在按钮单击时也不起作用。
此外,我想删除 class modal-content
中以前的 html 表单标签,因为每次新行单击都会弹出新表单,用户可以在其中编辑和更改行的值。
您可以通过查看下面的屏幕截图获得更清晰的图片。
文件dashboard.html
,该文件有调用modal.js
的按钮
<div class="row">
<div class="col span-4-of-4">
<div style="overflow-x:auto;">
<table class="display_table" id='main_lead_table' style="display: none;">
<thead>
<th>#</th>
<th>Lead Id</th>
<th>Name</th>
<th>Website</th>
<th>Linkedin</th>
<th>Lead Description</th>
<th>Owner Notes</th>
<?php
if($_SESSION['Admin'] == '1'){
?>
<th>Admin Notes</th>
<th>Added By</th>
<?php
}
?>
<th>Last Contact Date</th>
<th>Next Contact Date</th>
<th>Lead Status</th>
<th>Details</th>
</thead>
<tbody id='leadTable'>
<?php
function getLeadAddedByName($id){
include('./server/connection.php');
$selectSQL = "SELECT UserName FROM `tbl_user_signup_info` WHERE User_Id = '$id' ";
$result = $conn -> query ($selectSQL);
$name = "";
while($row = mysqli_fetch_array($result)){
$name = $row['UserName'];
}
return $name;
}
include('./server/connection.php');
$selectSQL = "SELECT * FROM `tbl_main_lead_info` ORDER BY Lead_Id";
$result = $conn -> query ($selectSQL);
$i = 1;
while ($row = mysqli_fetch_array($result)) {
printf( "<tr class='content'>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td><button id='%d' name='leadidclick' value='%d' > View </button></td>
</tr>",
$i,
$row['Lead_Id'],
$row['FirstName']." ".$row['LastName'],
$row['Website'],
$row['Linkedin'],
$row['LeadDescription'],
$row['OwnerNotes'],
$row['AdminNotes'],
getLeadAddedByName($row['LeadAddedBy'])."<br>Date/Time: ".$row['LeadAddedOn'],
date('d-m-Y', strtotime($row['LastContactDate'])),
date('d-m-Y', strtotime($row['NextContactDate'])),
$row['LeadStatus'],
$row['Lead_Id'],
$row['Lead_Id'],
);
$i = $i+1;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>This is Modal Box</p>
</div>
</div>
此 modal.js
文件将在每次单击新按钮时获取行 ID,并构建 HTML 表单,以便使用该 HTML 表单弹出模式框。
$(document).ready(function() {
$('[name="leadidclick"]').click(function(e){
e.preventDefault();
// var leadid = $('[name="leadidclick"]').val();
var leadid = $(this).val();
alert("You clicked Leadid: " + leadid);
$.ajax({
type: "POST",
url: './server/modal.php',
data: {
'leadid': leadid
},
success: function(data){
var result = $.parseJSON(data);
console.log(result);
console.log(result.length)
//Modal Box to POP UP HERE
$.each(result, function(key, value) {
$form = $("<form action='' method='POST'></form>").attr("id", value['Lead_Id']);
//This value assigning based on JSON Key value pair is also not working
$form.append('<label>Lead Id: </label><input type="text" name="leadid" ').attr("id", value['Lead_Id']);
$form.append('<label>Lead Name: </label><input type="text" name="leadname">').attr("value", value['FirstName']+" "+value['LastName']);
$form.append('<label>Company: </label><input type="text" name="company" ').attr("value", value['Company']);
$form.append('<input type="button" value="button">');
i = i + 1;
});
$( ".modal-content" ).append( $form );
//This change in CSS is not working
$('#myModal').css("display", "show");
}
});
});
});
用于显示模态的文件modal.css
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
@特鲁普蒂·巴拉德我收到模式框弹出显示的控制台错误,并且我无法弹出模式框(我正在使用不带 Bootstrap 的模式框)。
modal.js:61 Uncaught TypeError: $(...).modal is not a function
at Object.success (modal.js:61)
at c (jquery-3.4.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.4.1.min.js:2)
at l (jquery-3.4.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.4.1.min.js:2)
最佳答案
在文件中dashboard.html
您必须在模型代码 ex 中给出 div。 <div id="formapp">
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>This is Modal Box</p>
<div id="formapp">
</div>
</div>
</div>
在ajax中
$.ajax({
type: "POST",
url: './server/modal.php',
data: {
'leadid': leadid
},
success: function(data){
var result = $.parseJSON(data);
console.log(result);
console.log(result.length)
//Modal Box to POP UP HERE
$('#formapp').empty(); // first empty division content
var form=''; //declare var
$.each(result, function(key, value) {
form = $("<form action='' method='POST'></form>").attr("id", value['Lead_Id']);
//This value assigning based on JSON Key value pair is also not working
form.append('<label>Lead Id: </label><input type="text" name="leadid" value="'+value['Lead_Id']+'">');
form.append('<label>Lead Name: </label><input type="text" name="leadname" value="'+value['FirstName']+" "+value['LastName']+'">');
form.append('<label>Company: </label><input type="text" name="company" value="'+value['Company']+'">');
form.append('<input type="button" value="button">');
i = i + 1;
});
$( "#formapp" ).html( form );
//This change in CSS is not working
$('#myModal').show();
}
});
或者不需要$.each()
对于单个记录只需使用 result[0]['Lead_Id']
还有$form
被视为引用。在jquery中使用var
声明变量
关于javascript - 如何使用 jquery 将从服务器文件获取的 JSON 值填充到创建的 HTML 表单中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59769166/
padding:initial 比 padding:0 有什么优势吗?示例: textarea { padding: 0; } Hello, world! 最佳答案 它们的意思是一
我尝试通过按钮填充 JList,然后在先前填充的 Jlist 上使用 DoubleClick 填充 JTextField。 代码: private void extractUsedVariables
我正在尝试做 var width = ($(this).width() + $(this).css('padding-left') + $(this).css('padding-right' ));
我在导航中添加了悬停效果,遗憾的是悬停也影响了上面的文字。如何在不影响文本位置的情况下向导航添加悬停? 可悲的是,我找不到解决这个问题的方法。 HTML 模板:http://projects.help
我是 F# 初学者,下面代码中的 %-5s 和 %5s 有什么作用?我认为它提供了空间填充,但我不确定它是如何填充的? printfn "%-5s %5s" "a" "b" 当我尝试 prin
我需要选择带狗的用户(带 type 等于“狗”的宠物) var User = Waterline.Collection.extend({ identity: 'user', attribute
我一直在尝试让 Excel 在一组列上应用公式,然后将模式扩展到整个行集。 这导致了以下代码: For i = 0 To avgsheetNames.Count - 1 If Contains(CSt
随着 Flutter 2.0 的发布,FlatButton已被替换为 TextButton . 因此,填充属性不再直接可用,而是作为 ButtonStyle属性(property)。 我的问题是,我该
这似乎是一个简单的问题,但我已经尝试了一个小时,似乎无法弄清楚。 我要做的就是用 Canvas 填充 MainWindow。我找不到任何允许这样做的属性,我能想到的唯一方法是设置 Canvas.Wid
这是a website具有移动 View 。 网站宽度为 640 像素,但 iPhone 以 678 像素渲染文档。在 Android 中看起来很棒。 我添加了视口(viewport)元: 主体 C
我正在使用 GridBagLayout到(当前)显示两行。我知道这种布局对于这项任务来说太过分了,但我正在努力学习如何使用它。问题是我已将两个面板添加到两个单独的行中,并且内容周围存在巨大差距(请参见
我有以下代码已传递给我并创建多边形: var map; function initialize() { var myLatlng = new google.maps.LatLng(-36.4
我在 Jpanel 中有一些项目,然后将其推到顶部并用作基本搜索引擎的工具栏。我遇到一个问题,因为没有足够的空间,所以我的最后一个组合框没有显示。但是,左侧有很多空白空间,我需要移动所有内容来填充 J
我创建了带有阈值的二进制图像。如下图所示如何改变白色形状的颜色以使其可索引? 到目前为止,这是我的代码: void threshold() { cv::Mat src_8uc3_img = c
我有一个 JTable,我想知道是否有更好的方法来填充它,这是我的代码: //Metodo para llenar un jtable con datos de la base public stat
我想要做的是裁剪一个卷以删除所有不相关的数据。例如,假设我有一个 100x100x100 的体积,其中填充了 0,但其中的 50x50x50 体积则填充了 1。如何从原始体积中获得裁剪后的 50x50
因此,我正在创建一种对一组数字进行洗牌的方法,其想法是创建这些数字的总体。因此,我创建了一个循环,对数字进行洗牌,然后将其添加到数组列表中,但是经过一些调试语句后,我发现它确实对数字进行洗牌,但只将最
假设我有这两个类: public class A where T : IEntityWithID, new() { private static EntityInfo entityInfo =
我正在尝试添加用户输入的两个大整数作为字符串。当两个输入字符串的长度不同时,我尝试用零填充较短的数字,但它不起作用。因此,如果我输入 456 和 7,它会给出 3,前面有一些随机字符。感谢您的任何建议
这是我将内容打印到表格 View 的代码 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: Index
我是一名优秀的程序员,十分优秀!