小贝子编程

验证 DOM 加载后的引导模态形式和模态加载



在主要问题之前，我想描述一下我网站的文件结构，以便更好地概述。我的网站中有很多页面通过我的索引动态添加.php这是索引代码.php

<?php
include ('pages/tillBody.php');
include ('pages/navbar.php');
// Set the default name 
$ac = 'default.php'; 
// Specify some disallowed paths 
$disallowed_paths = array('tillBody', 'navbar', 'footer');
if(empty($_GET['ac'])){
$_SESSION["loggedin"] = false;
unset ($_SESSION['userstatus']);
unset ($_SESSION['loggedin']);
unset ($_SESSION["userfn"]);
unset ($_SESSION["userln"]);
unset ($_SESSION["useremail"]);
unset ($_SESSION["id"]);
session_unset();
session_destroy();
}
if (!empty($_GET['ac'])) {
$q = basename($_GET['ac']); 
// If it's not a disallowed path, and if the file exists, update $action
if (!in_array($q, $disallowed_paths) && file_exists("pages/{$q}.php"))
{
$ac = $q.".php";
}
}
// Include $action 
include("pages/$ac"); 
include("pages/footer.php");
?>

在我的页面文件夹中，我有超过 150 个页面，有些页面有触发 Bootstrap 3.3.7 模式的按钮，在同一页面中，我有一半的模态代码剩余代码来自 PHP 页面，稍后我将向您展示这是我的一个页面的代码，其中包含按钮和模态的一半代码。

<!--button for modal-->
<button id="<?php if($row['id'] != NULL || trim($row['id']) !=''){echo $row['id'];}?>" type="button" class="btn-verified complaintId" style="color:#000; background: none; border: none;" data-toggle="complaintmodal"> Report</button>
<!--compalaint modal start-->
<div class="modal fade" id="complaintModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="cbgoverlay">
</div>
</div>
</div>
</div>
<!--compalaint modal ends-->

当用户单击按钮时，它会触发模态，同时我运行我的 jquery 函数通过 ajax 加载模态的剩余内容。在我的自定义文件中.js我有此代码。

$('.complaintId').on('click',function(){
complaintid=(this.id);
$.ajax({
method: 'POST',
url: 'complaintmodalshow.php',
data: {id:complaintid},
success: function(data){
$(".cbgoverlay").html(data);
$('#complaintModal').modal({
show:true
});
}
});
});

从这里我正在加载模态的剩余模态代码，因为我需要从数据库中填充它，这里是抱怨模态显示的代码.php

<?php
if(!empty($_POST['id'])){
$id = $_POST['id'];
// connection to the Ddatabase
$servername = "*******";
$username = "*************";
try {
$db = new PDO("mysql:host=$servername;dbname=*********", $username, "***********");
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$id = trim($id);
$id = stripslashes($id);
$id = htmlspecialchars($id);
$id = (int)$id;
$query = "SELECT dou.businessName, dou.businessAddress, wp.discount, wp.dealitem, wp.expirydate, 
wp.description, m.* FROM dineOwnerUser AS dou INNER JOIN webpromo AS wp ON dou.id = wp.ownerid 
INNER JOIN menu AS m ON dou.id = m.ownerid
WHERE dou.id = ?";
$statement = $db->prepare($query);
$statement->execute(array($id));
$result = $statement->fetch(PDO::FETCH_ASSOC);
echo"<div class='modal-header'>";
echo"<button type='button' class='close' data-dismiss='modal'>&times;</button>";
echo"<h2 class='modal-title text-center' style='color:#8f0000d6'>Report to ".$result['businessAddress']."</h2>";
echo"</div>";
echo"<div class='modal-body'>";
echo"<form id='complaintForm'>";
echo"<div class='form-group'>";
echo"<label class='control-label' for='complaintAbout'>Report / Complaint about* :</label>";
echo"<input type='text' class='form-control' id='complaintAbout' placeholder='Report / Complaint about' name='complaintAbout'>";
echo"<div class='alert alert-danger hidden' id='complaintAbouterrbox'></div>";
echo"</div>";
echo"<div class='form-group'>";
echo"<label class='control-label' for='complaintDetail'>Report / Complaint detail* :</label>";
echo"<textarea type='text' rows='5' class='form-control' id='complaintDetail' placeholder='Report / Complaint detail' name='complaintDetail'></textarea>";
echo"<div class='alert alert-danger hidden' id='complaintDetailerrbox'></div>";
echo"</div>";
echo"<div class='form-group'>";
echo"<label class='control-label' for='complainerEmail'>Your email id* :</label>";
echo"<input type='email' class='form-control' id='complainerEmail' placeholder='Your email id' name='complainerEmail'>";
echo"<div class='alert alert-danger hidden' id='complainerEmailerrbox'></div>";
echo"</div>";
echo"<div class='form-group'>";
echo"<div class='g-recaptcha' data-sitekey='**************'></div>";
echo"</div>";
echo"<button type='button' id='complaintsubmit' class='btn btn-primary btn-block'>Submit</button>";
echo"</form>";
echo"</div>";
echo"<div class='modal-footer'>";
echo"<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>";
echo"</div>";
}
catch(PDOException $e)
{
echo "Connection failed: " . $e->getMessage();
}
$db = null;
exit;
}
?>

我确实从这个网站上阅读了很多答案，但我找不到答案。在我的自定义中.js这是外部文件，我有自己的验证插件，并且可以与其他页面一起使用，但不能验证此引导模式，我认为原因是这种模式在 DOM 加载后加载，或者可能来自 php 页面这就是它发生的原因。有人可以帮我如何从自定义文件中验证它.js因为我没有收到任何错误，似乎这个模态根本不存在，但是这个模态完美地呈现，只有验证不起作用。当我将验证代码放在同一页面上(complaintmodalshow.php(时，它工作正常。我不想这样做，我想把我所有的js编码都放在一个地方。有人可以建议我更好的解决方案吗？这是我的验证代码，只是为了更好地概述。

"use strict";
$(document).ready(function(){
function showerror(errbox, errcontent){
if($(errbox).hasClass("hidden")){
$(errbox).removeClass("hidden");
$(errbox).html(errcontent);
}
}
function hideerror(errbox, errcontent){
if(!$(errbox).hasClass("hidden")){
$(errbox).html(errcontent);
$(errbox).addClass("hidden");
}
}
(function ($){
$.fn.alphanumericspace = function(element, errbox){
var alphanumericspace = /^[a-zA-Z 0-9.,]*$/; /*test, true if matches otherwise false*/
if(!alphanumericspace.test(element)){
errcontent = "Only alphabets, numbers, dot, comma are allowed.";
showerror(errbox, errcontent);
}
if(alphanumericspace.test(element)){
if(element != " " && element.length>0){
errcontent = "";
hideerror(errbox, errcontent);
return "no error";
}
}
}
function keepcheckingemail(element, errbox){
var emailfilter = /^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$/; /*test, true if matches otherwise false*/
$("#email").keyup(function(){
if(!emailfilter.test(element)){
errcontent = "invalid email";
showerror(errbox, errcontent);
}
if(emailfilter.test(element)){
if(element != " " && element.length>0){
errcontent = "";
hideerror(errbox, errcontent);
return "no error";
}
}
});
}
$.fn.emailfil = function(element, errbox){
var emailfilter = /^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$/; /*test, true if matches otherwise false*/
if(!emailfilter.test(element)){
errcontent = "invalid email";
showerror(errbox, errcontent);
$("#email").focus();
keepcheckingemail(element);
}
if(emailfilter.test(element)){
if(element != " " && element.length>0){
errcontent = "";
hideerror(errbox, errcontent);
return "no error";
}
}
}
}(jQuery));
$("#complaintAbout").keyup(function(){
alert("complaintAbout");
complaintAbout = $("#complaintAbout").val();
errbox = $("#complaintAbouterrbox");
complaintAbouterr = $(this).alphanumericspace(complaintAbout, errbox);
if(complaintAbouterr === "no error"){
complaintAbouterr = "no";
}
});
$("#complaintDetail").keyup(function(){
complaintDetail = $("#complaintDetail").val();
errbox = $("#complaintDetailerrbox");
complaintDetailerr = $(this).alphanumericspace(complaintDetail, errbox);
if(complaintDetailerr === "no error"){
complaintDetailerr = "no";
}
});
$("#complainerEmail").focusout(function(){
complainerEmail = $("#complainerEmail").val();
errbox = $("#complainerEmailerrbox");
complainerEmailerr = $(this).emailfil(complainerEmail, errbox);
if(complainerEmailerr === "no error"){
complainerEmailerr = "no";
}
});
});

好的，所以我已经弄清楚了问题所在，我将回答我自己的问题，以防万一其他人正在寻找此解决方案：

问题：问题是我的引导模式在 DOM 加载后加载，因为我在某些情况下使用 php 和这种模式加载，正如您在我的问题中看到的那样，这意味着我的验证插件在此模式之前加载，因此插件无法验证这一点。为了实现所需的解决方案，我必须将选择器提供给jquery，当js文件加载时，它应该已经存在，所以我稍微改变了我的函数并添加了下面提到的一行

$(".cbgoverlay").on("click", function (){
//old plugin puts inside
});

现在这是主要技巧，当我的页面加载时，这个类"cbgoverlay">已经存在，并且模态的其余编码将在稍后出现，因此当用户单击模态时，此功能将首先运行，然后内部功能将选择稍后通过 PHP 页面呈现或加载的元素。 要理解这个逻辑，你必须正确阅读我的整个问题。 最终的解决方案就在这里。

"use strict";
$(document).ready(function(){
/*complaint modal starts*/
var complaintid, complaintAbout, errbox, complaintAbouterr, errcontent, complaintDetail, robotError, complaintDetailerr;
var complainerEmail, complainerEmailerr, recaptcha;
$('.complaintId').on('click',function(){
complaintid=(this.id);
$.ajax({
method: 'POST',
url: 'complaintmodalshow.php',
data: {id:complaintid},
success: function(data){
$(".cbgoverlay").html(data);
$('#complaintModal').modal({
show:true
});
}
});
});
function showerror(errbox, errcontent){
if($(errbox).hasClass("hidden")){
$(errbox).removeClass("hidden");
$(errbox).html(errcontent);
}
}
function hideerror(errbox, errcontent){
if(!$(errbox).hasClass("hidden")){
$(errbox).html(errcontent);
$(errbox).addClass("hidden");
}
}
(function ($){
$.fn.alphanumericspace = function(element, errbox){
var alphanumericspace = /^[a-zA-Z 0-9.,]*$/; /*test, true if matches otherwise false*/
if(!alphanumericspace.test(element)){
errcontent = "Only alphabets, numbers, dot, comma are allowed.";
showerror(errbox, errcontent);
}
if(alphanumericspace.test(element)){
if(element != " " && element.length>0){
errcontent = "";
hideerror(errbox, errcontent);
return "no error";
}
}
}
function keepcheckingemail(element, errbox){
var emailfilter = /^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$/; /*test, true if matches otherwise false*/
$("#email").keyup(function(){
if(!emailfilter.test(element)){
errcontent = "invalid email";
showerror(errbox, errcontent);
}
if(emailfilter.test(element)){
if(element != " " && element.length>0){
errcontent = "";
hideerror(errbox, errcontent);
return "no error";
}
}
});
}
$.fn.emailfil = function(element, errbox){
var emailfilter = /^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$/; /*test, true if matches otherwise false*/
if(!emailfilter.test(element)){
errcontent = "invalid email";
showerror(errbox, errcontent);
$("#email").focus();
keepcheckingemail(element);
}
if(emailfilter.test(element)){
if(element != " " && element.length>0){
errcontent = "";
hideerror(errbox, errcontent);
return "no error";
}
}
}
}(jQuery));
$(".cbgoverlay").on("click", function (){
$("#complaintAbout").keyup(function(){
complaintAbout = $("#complaintAbout").val();
errbox = $("#complaintAbouterrbox");
complaintAbouterr = $(this).alphanumericspace(complaintAbout, errbox);
if(complaintAbouterr === "no error"){
complaintAbouterr = "no";
}
});
$("#complaintDetail").keyup(function(){
complaintDetail = $("#complaintDetail").val();
errbox = $("#complaintDetailerrbox");
complaintDetailerr = $(this).alphanumericspace(complaintDetail, errbox);
if(complaintDetailerr === "no error"){
complaintDetailerr = "no";
}
});
$("#complainerEmail").focusout(function(){
complainerEmail = $("#complainerEmail").val();
errbox = $("#complainerEmailerrbox");
complainerEmailerr = $(this).emailfil(complainerEmail, errbox);
if(complainerEmailerr === "no error"){
complainerEmailerr = "no";
}
});
});
/*complaint modal ends*/
});

通过使用此代码，您将能够从问题中提到的 php 页面加载模态，并且您还可以验证表单。 祝你好运。不断学习。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium