[Solved] Help with dialog pop up (JavaScript)

Get help on web editors (Frontpage, Dreamweaver) and web languages (HTML, ASP, PHP).
Post Reply
DarkRanger
Registered User
Posts: 8346
Joined: 10 May 2006, 02:00
Processor: Intel i5-3750
Motherboard: Gigabyte
Graphics card: nVidia GTX 550Ti
Memory: 8GB Jetram
Contact:

[Solved] Help with dialog pop up (JavaScript)

Post by DarkRanger »

So I've been redesigning our intraweb a bit. Mostly because of an overload of code. But now, I'm having a bit of a problem. I have been using Sitepoint's JQuery Novice to Ninja book as reference. I've been looking at the code for creating an overlay popup for quite a while now, but somehow, my replication doesn't work. And I have no idea why... If someone could help, I'd really appreciate it.

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>
Here is the code for script.js:

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();
	});
}
Then here is the code extract from qms.php that contains the div tags for the popup box (I've placed it in qms.php so that I can use the same block over and over again.

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>
Does anybody have ANY idea why this doesn't want to work?
Last edited by DarkRanger on 19 Jan 2011, 08:55, edited 1 time in total.
Image
DarkRanger
Registered User
Posts: 8346
Joined: 10 May 2006, 02:00
Processor: Intel i5-3750
Motherboard: Gigabyte
Graphics card: nVidia GTX 550Ti
Memory: 8GB Jetram
Contact:

Re: Help with dialog pop up (JavaScript)

Post by DarkRanger »

fixed the problem.

Seams that because the function loaded with the initial page, it didn't reload itself when an ajax page got loaded, SO, it didn't pick up the accept button and didn't call the function. Fixed it with a simple onClick event handler on the accept button (onClick="openDialog('#dialogContent'))
Image
Post Reply