• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 206
  • Last Modified:

jQuery UI dialog box autoopen does not work when the page loads

I am trying to show a auto pop up on the homepage as soon as the page loads. I am using jQuery UI but its not showing. The website is built in WordPress. here is the website link dev.startingpointnh.org

here is the code I am using in header.php

	    <?php if(is_home() || is_front_page()) { ?>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
		<script type="text/javascript">
  $(document).ready(function(){
   $('#dialog').dialog({
		autoOpen: true,
		modal: true,
		width: 620,
		buttons: {
		"Close This Message": function() {
		 $( this ).dialog( "close" );
		}
	}
	});
  });
</script>
<?php } ?>

Open in new window


and in the footer.php I have

		<?php if(is_home() || is_front_page()) { ?>
	<div id="dialog" title="Starting Point Safety Warning">
	<h1 style="text-align: center; ">
	Do not use this website if you suspect your computer is being monitored.</h1>
<div style="text-align: center; ">
	<strong>Website and email history may be viewable even if you delete your browser history and delete files.<br />
	Access a safe computer to use the internet.</strong></div>
<div style="text-align: center; ">
	&nbsp;</div>
<div style="text-align: center; ">
	<strong>Please note the &quot;Leave this site quickly&quot; item on the top of every page should you need to close this website quickly.</strong></div>
<div style="text-align: center; ">
	&nbsp;</div>
<h2 style="text-align: center; ">
	Warning!</h2>
<div style="text-align: center; ">
	<strong>If you are in immediate danger, please dial 911.</strong></div>
<div style="text-align: center; ">
	<strong>24-Hour Hotline 800.336.3795</strong></div>
<div style="text-align: center; ">
	&nbsp;</div>
<div style="text-align: center; ">
	<em>Close window by pressing ESC key or button below.</em></div>
	</div> 
		<?php }?>

Open in new window


What am I missing?

Thanks and appreciate it
0
niceoneishere
Asked:
niceoneishere
  • 3
  • 2
1 Solution
 
Robert SchuttSoftware EngineerCommented:
You load a lot of javascript files on your page. For some reason $ is undefined but you can use the full variable name jQuery instead of the shorthand:
  jQuery(document).ready(function(){
   jQuery('#dialog').dialog({
		autoOpen: true,
		modal: true,
		width: 620,
		buttons: {
		"Close This Message": function() {
		 jQuery( this ).dialog( "close" );
		}
	}
	});
  });

Open in new window

0
 
niceoneishereAuthor Commented:
Thanks that worked perfectly thanks. I do have one more question, How can I make the dialog box appear only one time. Now every time the home page is loaded the popup shows. I just want to show only once.

Thanks again
0
 
Robert SchuttSoftware EngineerCommented:
If you want to show it once per "browser" you could do it client side with a cookie but maybe that's a bit old school...

If you want to show it once per session you could add server side code to store a session variable in php and add a check for that variable to your current check: if(is_home() || is_front_page())
0
 
Robert SchuttSoftware EngineerCommented:
a little example taken from http://php.net/manual/en/session.examples.basic.php:
<?
error_reporting(-1);
session_start();
if (!isset($_SESSION['count'])) {
  $_SESSION['count'] = 0;
} else {
  $_SESSION['count']++;
}
?>

Open in new window

Then your check could become:
<?php if((is_home() || is_front_page()) && $_SESSION['count'] == 0) { ?>

Open in new window

To test you can show the counter on your page:
counter: <?= $_SESSION['count'] ?>

Open in new window

You may also need some client side code because somebody could click a link and then click the back button...
0
 
niceoneishereAuthor Commented:
Thanks
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now