As quick guide to how my code works: I have a main page called qms.php. This page has loads a global css file (whole site styling), a local css file (current page styling), the jquery library (jquery.js), a menuscript file (menu.js), a general script file (goto.js) (all 3 are global files) and a local script file (script.js). qms.php loads the menu's content into a table using AJAX with a function called ajaxLoad in goto.js. The content of this file then has it's own javascript calls here and there, but all of them are contained within the local script.js file.
So what I want to do, is basically just create a pop up that notifies the user that the document's content has been read and accepted by them once they click a button to do so. Here is the code for the file that is loaded via Ajax into qms.php:
Code: Select all
<table width="100%" height="100%">
<tr>
<td height="20px">
<h3>QMS - Quality Manual</h3>
<hr noshade color="#466738"/>
</td>
</tr>
<tr>
<td valign="top">
<iframe class="fileLoader" id="fileLoader" name="fileLoader" width="100%" height="95%" frameborder="0" src="quality_manual/Quality Manual.pdf"></iframe>
<?php
include "../dynam_code/dbconnect.php";
$result = mysql_query("SELECT username FROM allRead WHERE username = '$user' AND form = 'Quality Manual'");
if(mysql_num_rows($result) != 0)
{
echo "<div style=\"text-align:center; display:block; border:1px solid #446738; background-color:#78b563; color:#FFF; height:20px; position:relative; top:4px; vertical-align:middle;\">";
echo "You have already read and accepted this document.";
echo "</div>";
}
else
{
echo "<div style=\"text-align:center\">";
echo "<input type=\"submit\" value=\"I have read, understood and accept the information in the above document.\" id=\"accept\"/>";
echo "</div>";
}?>
</td>
</tr>
</table>
Code: Select all
$(document).ready(function(){
$('#accept').click(function() {
openDialog("#dialogContent");
});
$('#dialogContent')
.find('.ok')
.live('click',function() {
closeDialog(this);
});
});
function openDialog(selector){
$(selector)
.clone()
.show()
.appendTo('#overlay')
.parent()
.fadeIn('fast');
}
function closeDialog(selector){
$(selector)
.parents("#overlay").fadeOut('fast', function(){
$(this)
.find(".dialog")
.remove();
});
}
Code: Select all
<div id="overlay">
<div id="blanket"></div>
</div>
<div id="dialogContent" class="dialog">
BlaBla content here...
<div class="button">
<a href="#" class="ok">OK</a>
</div>
</div>