使jQuery的功能在div中加载页面时运行 [英] Getting jQuery's functions to run when page is loaded in a div
问题描述
我有一个网站，用户可以登录并检查他们向我们提出的未解决的支持问题，该网站上的页面用于管理每个公司的联系方式.在更新站点的同时，我已经开始使用jQuery加载子页面，以便用户不会每次都刷新页面.当该子页面加载到div中时，我开始遇到加载JavaScript的问题.
I have a site where users can log in and check on outstanding support issues they have raised with us, on this site is a page to manage per company contacts. Whilst updating the site i have started using jQuery to load sub pages so that the user doesn't get a page refresh everytime. I've started to run into problems loading my JavaScript when that subpage is loaded into a div.
过程如下:
用户单击设置链接，该链接会加载settings.php(整个页面刷新)
用户单击管理联系人"选项，该选项会将managecontacts.php加载到div#settingsph
用户从选择框中选择要更新的联系人，这会将用户数据加载到div#contact_info中(在选择框下方)，使用该选项的值作为联系人ID传递给editcontact.php，该查询将查询db并将其呈现为用于更改的形式.
The process is as follows:
User clicks the settings link, which loads settings.php (whole page refresh)
User clicks the 'Manage Contacts' option, which loads managecontacts.php into div#settingsph
From a select box, the user chooses the contact they wish to update, this loads that users data into div#contact_info (underneath the select box), using the option's value as a contact id to pass through to editcontact.php, which queries the db and renders it into a form for making changes to.
一旦加载了此页面，我打算使用jQuery验证和ajax函数来提交表单，而无需再次刷新页面.但是，我现在似乎无法加载Javascript.我尝试将Javascript引用为主页面<head>标记中的文件，<head>标记中的脚本，editcontact.php中的文件和editcontact.php中的脚本，但是这些似乎都没有加载隐藏我的错误标签或提交更新的脚本.
Once this page is loaded, i intended on using jQuery validation and an ajax function to submit the form without page refresh again. However, i can't seem to get the Javascript to load at this point. I've tried referencing the Javascript as a file in the main page <head> tag, as script in the <head> tag, as a file in editcontact.php and as script in editcontact.php, but none of these seem to load the script to hide my error labels, or submit the update.
代码:editcontact.php
Code: 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
Code: 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>标签，用于将页面加载到divs
Code: <head> tag for loading pages into divs
<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>
无论是否可行，或者我是否需要回到制图板上，都将给予极大的帮助.
Any help that can be given with regards to whether this is possible or not, or whether i need to go back to the drawing board will be greatly appreciated.
推荐答案
Laimoncijus对使用回调运行脚本提供了答案.但是您也可以使用jQuery的 live 事件功能来实现此功能，该功能会自动将事件功能添加到在文件准备就绪.而且很容易实现.
Laimoncijus has your answer about using the callback to run your scripting. But you can also accomplish this using jQuery's live event functionality which automatically adds event functions to elements added after the document is ready. And it's easy to implement.
更改
$(".button").click(function() {
到
$(".button").live('click', function() {
这也应该适用于您的focus和blur事件.
this should also work for your focus and blur events.
这篇关于使jQuery的功能在div中加载页面时运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
