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.
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.
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.
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();
}
?>
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;
});
});
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 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.
Change
to
this should also work for your
focusandblurevents.