Question

我有一个网站，用户可以登录并检查他们与我们一起提出的未解决的支持问题，在这个网站上是一个管理每个公司联系人的页面。在更新站点的同时，我已经开始使用jQuery加载子页面，以便用户不会每次都刷新页面。当子页面加载到div中时，我开始遇到加载JavaScript的问题。

流程如下：
用户单击设置链接，该链接加载settings.php（整页刷新）
用户单击“管理联系人”选项，将managecontacts.php加载到div＃settingsph
中在选择框中，用户选择他们希望更新的联系人，这会将用户数据加载到div＃contact_info（在选择框下面），使用选项的值作为联系人ID传递给editcontact.php，查询db并将其呈现为用于更改的形式。

加载此页面后，我打算使用jQuery验证和ajax函数来提交表单而不再刷新页面。但是，我似乎无法在此时加载Javascript。我已经尝试将Javascript作为主页<head>标记中的文件引用，作为<head>标记中的脚本，作为editcontact.php中的文件和editcontact.php中的脚本引用，但没有这些似乎加载脚本以隐藏我的错误标签，或提交更新。

代码：editcontact.php

<?php
session_start();

require  '../dbsettings.php';

header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");
header("content-type: application/x-javascript; charset=tis-620");
?>
<?php
$id = $_GET['id'];
if($id!=''){
    if($id!='NewContact'){ //if valid id has been supplied for db retrieval
        try
        {
            $db = new PDO('mssql:host=' . DBHOST . ';dbname=' . DBDATA, DBUSER, DBPASS);
        }
        catch(PDOException $error)
        {
            echo "<h2>Error!  " . $error->getmessage()."</h2>";
            die();
        }

        $query = "  SELECT ContactID, Surname, Forename, Phone, Email, JobTitle, MobileNumber, LeaveDate 
                    FROM Contact 
                    WHERE CompanyID ='" . $_SESSION['companyid'] . "' AND ContactID='" . $id . "'
                    ORDER BY Forename ASC";

        foreach($db->query($query) as $contact)
        {
?>
            <!--Have tried putting the script between <script> tags here-->
            <div id="contact_update">
                <form>
                    <h3>Personal Information</h3>
                    <label for="forename">Forename(s):</label>
                    <input name="forename" id="forename" value="<?php echo $contact['Forename']; ?>" class="text-input" />
                    <label class="error" for="forename" id="forename_error">Forename is required.</label>
                    <br />
                    <label for="surname">Surname:</label>
                    <input name="surname" id="surname" value="<?php echo $contact['Surname']; ?>" class="text-input" />
                    <label class="error" for="surname" id="surname_error">Surname is required.</label>
                    <br />
                    <label for="jobtitle">Job Title:</label>
                    <input name="jobtitle" id="jobtitle" value="<?php echo $contact['JobTitle']; ?>" class="text-input" />

                    <br />
                    <h3>Contact Information</h3>
                    <label for="phone">Telephone: </label>
                    <input name="phone" id="phone" value="<?php echo $contact['Phone']; ?>" class="text-input" />
                    <label class="error" for="phone" id="phone_error">Telephone is required.</label>
                    <br />
                    <label for="mob">Mobile: </label>
                    <input name="mob" id="mob" value="<?php echo $contact['MobileNumber']; ?>" class="text-input" />

                    <br />
                    <label for="email">Email:</label>
                    <input name="email" id="email" value="<?php echo $contact['Email']; ?>" class="text-input" />
                    <label class="error" for="email" id="email_error">Email is required.</label>
                    <br />
                    <h3>Misc Information</h3>
                    <label for="ldate">Leave Date:</label>
                    <input name="ldate" id="ldate" value="<?php echo $contact['LeaveDate']; ?>" class="text-input" />
                    <label for="ldate" class="hint">* Leave blank if still an active user</label>

                    <br />
                    <input type="submit" name="submit" value="Update" class="button" id="update_button" />
                </form>
            </div>
<?php
        } //end of foreach

    }else{ //else a new contact is being added
?>      
            <div id="contact_add">
                <form>
                    <h3>Personal Information</h3>
                    <label for="forename">Forename(s):</label><input name="forename" id="forename" /><br />
                    <label for="surname">Surname:</label><input name="surname" id="surname" /><br />
                    <label for="jobtitle">Job Title:</label><input name="jobtitle" id="jobtitle" /><br />
                    <h3>Contact Information</h3>
                    <label for="phone">Telephone: </label><input name="phone" id="phone" /><br />
                    <label for="mob">Mobile: </label><input name="mob" id="mob" /><br />
                    <label for="email">Email:</label><input name="email" id="email" /><br />
                    <input type="submit" value="Update" />
                </form>
            </div>
<?php
    }
}else{ //else page was not generated with id, possibly not using javascript - die, without allowing access
    echo 'ERROR 403 - FORBIDDEN';
    die();
}
?>

代码：jquery.settings.js

// JavaScript Document

$(function managecontacts() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#ffffe0"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#ffffe0"});
  });

  $(".button").click(function() {
        // validate and process form
        // first hide any error messages
    $('.error').hide();

        var forename = $("input#forename").val();
        if (forename == "") {
      $("label#forename_error").show();
      $("input#forename").focus();
      return false;
    }

        var surname = $("input#surname").val();
        if (surname == "") {
      $("label#surname_error").show();
      $("input#surname").focus();
      return false;
    }
        var email = $("input#email").val();
        if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
        var phone = $("input#phone").val();
        if (phone == "") {
      $("label#phone_error").show();
      $("input#phone").focus();
      return false;
    }

        var jobtitle = $("input#jobtitle").val();
        var mobile = $("input#mob").val();
        var ldate = $("input#ldate").val();

        var dataString = 'forename=' + forename + '&surname=' + surname + '&jobtitle=' + jobtitle '&email=' + email + '&phone=' + phone + '&mobile=' + mobile + '&ldate=' + ldate;
        //alert (dataString);return false;

        $.ajax({
      type: "POST",
      url: "Includes/stg/contactprocess.php",
      data: dataString,
      success: function() {
        $('#contact_update').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Successfully Updated</h2>")
        .append("<p>Thank you.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/tick.png' />");
        });
      }
     });
    return false;
    });
});

代码：<head>标记，用于将网页加载到div中

<script type="text/javascript">
    function open_page(name) {
        $("#settingsph").load("Includes/stg/"+name+".php");
    }
    function open_contact(id) {
        $("#contact_info").load("includes/stg/editcontact.php?id="+id);
    }
</script>

对于是否可能提供任何帮助，或者我是否需要回到绘图板，我们将不胜感激。

Answer 1

您可以在jQuery的load（）方法中指定回调函数，该方法在将内容加载到DIV后调用。您可以使用它将JS代码附加到新加载的表单和/或内容。

Answer 2

Laimoncijus有关于使用回调来运行脚本的答案。但您也可以使用jQuery的live事件功能来完成此操作，该功能会自动将事件功能添加到文档准备好后添加的元素。它很容易实现。

更改

$(".button").click(function() {

到

$(".button").live('click', function() {

这也适用于您的focus和blur事件。

在页面加载div时运行jQuery的函数

2 个答案: