Bootstrap模式未运行“showHint”函数

Question

请耐心等待我，因为我不认为我在标题中提出了正确的问题，但是我有很多代码可以分享，希望你们都可以帮助我走上正轨。我希望我只是调用错误的变量，而我只是对我的代码视而不见。

我有一个“仪表板”页面，其中包含一系列10个引导按钮。我已经创建了一个模式，允许用户查找“帐单代码”，并根据返回的结果，模式将展开以显示完整的表单，并允许添加新代码或更新现有代码。然后，我复制了“帐单代码”文件，以创建“客户联系”信息的模式。当我单击“客户端联系”模式的按钮时，对话框会正常启动，但是当我输入电子邮件地址时，没有任何反应 - 无论联系人是否存在。

我已经包含了仪表板的代码，工作帐单代码模式和不工作的客户联系模式。我希望它足够而不是太多。非常感谢任何和所有帮助。

dashboard.php

<?php
session_start();
require_once('includes/config.php');

require_once('handlers/billing-code.handler.php');
require_once('handlers/clientContacts.handler.php');

if (!isset($_SESSION['loggedin'])) {
header("location: index.php?error=1");
}

$page->titleSet('Project Task List Dashboard');

// Load Classes
$admin = new Admin();
$projects = new Projects();
$helpers = new Helpers();

// run query to welcome user
$user = $_SESSION['user'];

$getUser = $helpers->genQuery("SELECT * FROM users WHERE userID = $user");

switch ($getUser[0]['userTypeID']) {
case 1:
    $dashboard = 'includes/dashboards/super-admin-dashboard.php';
    break;
case 2:
    $dashboard = 'includes/dashboards/user-dashboard.php';
    break;
case 3:
    $dashboard = 'includes/dashboards/admin-dashboard.php';
    break;
case 4:
    $dashboard = 'includes/dashboards/mgr-dashboard.php';
    break;
case 5:
    $dashboard = 'includes/dashboards/pm-dashboard.php';
    break;
}

// include the admin dashboard options based on user type
require_once($dashboard);


// run query to get short list of open upcoming due projects
$openProjects = $helpers->genQuery("SELECT * FROM projects WHERE completed = 0 LIMIT 0,10");

$page->contentSet('



<table width="90%" align="center" cellspacing="5" cellspacing="10" style="margin-bottom:20px;">
    <tr>
        <th>Project ID</th>
        <th>Project Name</th>
        <th align="left">Project Type</th>
        <th align="left">Assigned To</th>
        <th align="center">Due Date</th>
        <th align="center">% Complete</th>
        <th align="center">Status</th>
    </tr>
');

foreach ($openProjects AS $projects) {

// alternating rows
$x++;

$rowColor = (($x%2 == 0) ? 'white-row-bg' : 'gray-row-bg');

// run query to get staff information   
$staff = $helpers->genQuery("SELECT staffName FROM staff WHERE staffID = \"".$projects['staffID']."\"");

// run query to get project type information
$projectType = $helpers->genQuery("SELECT projectTypeName FROM projectType WHERE projectTypeID = \"".$projects['typeID']."\"");

// Calculate whether or not the project is on time

$ontime = $helpers->daysLeft($projects['dueDate']);

$icon = ($ontime > 0 ? "green" : "red");

$page->contentSet('
    <tr class="'.$rowColor.'">
        <td align="left">'.$projects['projectID'].'</td>
        <td align="left"><a href="detail.php?pid='.$projects['projectID'].'" title="Click the project name to update status">'. substr($projects['projectName'],0,30).(strlen($projects['projectName']) > 30 ? '...' : '').'</a></td>
        <td align="left"><a href="#" title="View all open '.$projectType[0]['projectTypeName'].' projects">'.$projectType[0]['projectTypeName'].'</a></td>
        <td align="left"><a href="#" title="View all open projects assigned to '.$staff[0]['staffName'].'">'.$staff[0]['staffName'].'</a></td>          
        <td align="center"><a href="#" title="View all projects that are due on '.date("n/j/Y",strtotime($projects['dueDate'])).'">'.date("n/j/Y",strtotime($projects['dueDate'])).'</td>
        <td align="center">'.$projects['percentComplete'].'%</td>
        <td align="center"><img src="images/'.$icon.'-light-icon.png" /></td>

        </td>
    </tr>
');
}

$page->contentSet('
</table>



');

include('modals/billing-codes-options-modal.php');

include('modals/client-contacts-options-modal.php');
display_page();
?>

工作帐单代码文件

计费码选项-modal.php

<?php
session_start();
require_once('includes/config.php');

echo '

<script src="js/showHint.js" type="text/javascript" languag="javascript"></script>
';

$page->contentSet('

  <!-- Modal -->
  <div class="modal fade" id="addUpdateBillingCodes" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add/Update Billing Codes</h4>
          <p>To add a new billing code, simply type the 6-digit code into the field below. If the code already exists, you will then have the opportunity to update the code\'s existing information; otherwise, you will be able to add the new code and its details. <a href="billing-codes.php">Click here for the complete list of billing codes.</a></p>
        </div>
        <div class="modal-body">
          <form action="" method="post" name="billingCodes">
          <p>
          <label>Billing Code: </label>
          <input type="text" name="billingCode" size="30" onchange="showHint(this.value)" /> <span style="cursor:hand;" class="glyphicon glyphicon-search"></span> 
          </p>
          <span id="lookup">
        </span>
          </form>
        </div>


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

    </div>
  </div>

</div>
');

echo '

<script>
/* must apply only after HTML has loaded */
$(document).ready(function () {
    $("#addUpdateBillingCodes").on("submit", function(e) {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function(data, textStatus, jqXHR) {
                $(\'#addUpdateBillingCodes .modal-header .modal-title\').html("Result");
                $(\'#addUpdateBillingCodes .modal-body\').html(data);
                $("#addUpdateBillingCodes").remove();
            },
            error: function(jqXHR, status, error) {
                console.log(status + ": " + error);
            }
        });
        e.preventDefault();
    });

    $("#submitForm").on(\'click\', function() {
        $("#addUpdateBillingCodes").submit();
    });
});
</script>
';



?>

showHint.js

// JavaScript Document

function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("lookup").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("lookup").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "modals/lookups/billingCodelookup.php?q=" + str, true);
        xmlhttp.send();
    }
}

计费code.handler.php

<?php

// load classes
$helpers = new Helpers();
$modals = new Modals();

// declare connection variable
$mysqli = new MySQLi(DB_HOST,DB_USER,DB_PASS,DB_BASE);

// declare errors array variable
$errors = array();

// scrub the data input
$billingCode = $helpers->escapePostValues($_POST['billingCode']);
$billingCodeDepartment = $helpers->escapePostValues($_POST['billingCodeDepartment']);
$billingCodeNickname = $helpers->escapePostValues($_POST['billingCodeNickname']);

// determine if this is a new billing code

if (isset($_POST['addBillingCode']) && $_POST['billingCodeAdd'] == 1) { 
    // add new billing code to table
    $addBillingCodeQuery = "INSERT INTO billingCodes (billingCodeDepartment,billingCodeNickname,billingCode) VALUES ('".$billingCodeDepartment."','".$billingCodeNickname."','".$billingCode."')";      

    // if billing code has been added, display success message
    if (mysqli_query($mysqli,$addBillingCodeQuery)) {
        $errors['newrecord'] = '<p class="success center">Billing Code '.$billingCode.' has been successfully added.</p>';  
    }
}

if (isset($_POST['updateBillingCode']) && $_POST['billingCodeUpdate'] == 1) {
    // update existing billing code information
    $updateBillingCodeQuery = "UPDATE billingCodes SET billingCodeDepartment='$billingCodeDepartment', billingCodeNickname='$billingCodeNickname',billingCode='$billingCode' WHERE billingCode='$billingCode'";     

    // if the billing code information has been updated, display confirmation message
    if (mysqli_query($mysqli,$updateBillingCodeQuery)) {
        $errors['recordupdated'] = '<p class="success center">Billing Code '.$billingCode.' has been successfully updated.</p>';    
    }

}

?>

billingCodeLookup.php

<?php
session_start();
require_once('../../includes/config.php');

$helpers = new Helpers();

    $billingCode = $_GET['q'];

    $lookup = $helpers->genQuery("SELECT * FROM billingCodes WHERE billingCode=\"".$billingCode."\"");

    echo '<p><label for="billingCodeDepartment">Department: </label><input type="text" name="billingCodeDepartment" value="'.$lookup[0]['billingCodeDepartment'].'" size="30" /></p>';
    echo '<p><label for="billingCodeNickname">Nickname: </label><input type="text" name="billingCodeNickname" value="'.$lookup[0]['billingCodeNickname'].'" size="30" /></p>';

    if ($lookup) {
        echo '
        <p>
            <input type="hidden" name="billingCodeUpdate" value="1" />
            <input type="submit" name="updateBillingCode" value="Update Billing Code" class="label-indent" />
        </p>';
    }

    else {
        echo '
        <p>
            <input type="hidden" name="billingCodeAdd" value="1" />
            <input type="submit" name="addBillingCode" value="Add New Billing Code" class="label-indent" />
        </p>';
    }

?>

不工作的客户端联系人查找文件

客户端接触选项-modal.php

<?php
session_start();
require_once('includes/config.php');
// modal form for adding comments to a project

echo '

<script src="js/clientLookup.js" type="text/javascript" languag="javascript"></script>
';

$page->contentSet('

  <!-- Modal -->
  <div class="modal fade" id="addUpdateClientContacts" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add/Update Client Contacts</h4>
          <p>To add a new contact, simply type in the email address of the contact into the field below. If the client contact already exists, you will then have the opportunity to update the contact\'s existing information; otherwise, you will be able to add the new contact and its details.</p>
        </div>
        <div class="modal-body">
          <form action="" method="post" name="clientContacts">
          <p>
          <label for"clientContactEmail">Email Address: </label>
          <input type="text" name="clientContactEmail" size="20" onchange="showHint(this.value)" /> <span style="cursor:hand;" class="glyphicon glyphicon-search"></span> 
          </p>
          <span id="lookup">
        </span>
          </form>
        </div>


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

    </div>
  </div>

</div>
');

echo '

<script>
/* must apply only after HTML has loaded */
$(document).ready(function () {
    $("#addUpdateClientContacts").on("submit", function(e) {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function(data, textStatus, jqXHR) {
                $(\'#addUpdateClientContacts .modal-header .modal-title\').html("Result");
                $(\'#addUpdateClientContacts .modal-body\').html(data);
                $("#addUpdateClientContacts").remove();
            },
            error: function(jqXHR, status, error) {
                console.log(status + ": " + error);
            }
        });
        e.preventDefault();
    });

    $("#submitForm").on(\'click\', function() {
        $("#addUpdateClientContacts").submit();
    });
});
</script>
';
?>

clientContactLookup.php

<?php
session_start();
require_once('../../includes/config.php');

$helpers = new Helpers();

    $email = $_GET['q'];

    $lookup = $helpers->genQuery("SELECT * FROM clientContacts WHERE clientContactEmail=\"".$email."\"");

    echo '
        <p><label for="clientContactFirst">First name: </label><input type="text" name="clientContactFirst" value="'.$lookup[0]['clientContactFirst'].'" size="30" /></p>
        <p><label for="clientContactLast">Last name: </label><input type="text" name="clientContactLast" value="'.$lookup[0]['clientContactLast'].'" size="30" /></p>
        <p><label for="clientContactPhone">Phone: </label><input type="text" name="clientContactPhone" value="'.$lookup[0]['clientContactPhone'].'" size="30" /></p>
        <p><label for="clientContactExt">Extension: </label><input type="text" name="clientContactExt" value="'.$lookup[0]['clientContactExt'].'" size="30" /></p>'
    ;

    if ($lookup) {
        echo '
        <p>
            <input type="hidden" name="clientContactUpdate" value="1" />
            <input type="submit" name="updateClientContact" value="Update Client Contact" class="label-indent" />
        </p>';
    }

    else {
        echo '
        <p>
            <input type="hidden" name="clientContactAdd" value="1" />
            <input type="submit" name="addClientContact" value="Add New Client Contact" class="label-indent" />
        </p>';
    }

?>

clientLookup.js

// JavaScript Document

function clientLookup(str) {
    if (str.length == 0) { 
        document.getElementById("lookup").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("lookup").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "modals/lookups/clientContactLookup.php?q=" + str, true);
        xmlhttp.send();
    }
}

clientContacts.handler.php

<?php

// load classes
$helpers = new Helpers();
$modals = new Modals();

// declare connection variable
$mysqli = new MySQLi(DB_HOST,DB_USER,DB_PASS,DB_BASE);

// declare errors array variable
$errors = array();

// scrub the data input
$clientContactEmail = $helpers->escapePostValues($_POST['clientContactEmail']);
$clientContactFirst = $helpers->escapePostValues($_POST['clientContactFirst']);
$clientContactLast = $helpers->escapePostValues($_POST['clientContactLast']);
$clientContactPhone = $helpers->escapePostValues($_POST['clientContactPhone']);
$clientContactExt = $helpers->escapePostValues($_POST['clientContactExt']);

// determine if this is a new client contact

if (isset($_POST['addClientContact']) && $_POST['clientContactAdd'] == 1) { 
    // add new billing code to table
    $addClientContactQuery = "INSERT INTO clientContacts (clientContactFirst,clientContactLast,clientContactPhone,clientContactExt,clientContactEmail) VALUES('".$clientContactFirst."','".$clientContactLast."','".$clientContactPhone."','".$clientContactExt."','".$clientContactEmail."')";     

    // if contact has been added, display success message
    if (mysqli_query($mysqli,$addBillingCodeQuery)) {
        $errors['newrecord'] = '<p class="success center">Contact information for '.$clientContactFirst.' '.$clientContactLast.' has been successfully added.</p>'; 
    }
}

if (isset($_POST['updateClientContact']) && $_POST['clientContactUpdate'] == 1) {
    // update existing client contact information
    $updateClientContactQuery = "UPDATE clientContacts SET clientContactFirst='$clientContactFirst',clientContactLast='$clientContactLast',clientContactPhone='$clientContactPhone',clientContactExt='$clientContactExt',clientContactEmail='$clientContactEmail' WHERE clientContactEmail='$clientContactEmail'";      

    // if the contact information has been updated, display confirmation message
    if (mysqli_query($mysqli,$updateClientContactQuery)) {
        $errors['recordupdated'] = '<p class="success center">Contact information for '.$clientContactFirst.' '.$clientContactLast.' has been successfully updated.</p>';   
    }

}

?>

Answer 1

这实际上是一个非常简单的修复：我没有意识到我在两个模态文件中使用相同的span id（）。 onchange事件现在将id作为变量传递给showHint函数，文件结构已经简化为只需要一个javascript文件。