Solved

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

Posted on 2015-01-20
5
169 Views
Last Modified: 2015-02-03
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
Comment
Question by:niceoneishere
  • 3
  • 2
5 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40561431
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
 
LVL 1

Author Comment

by:niceoneishere
ID: 40561959
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
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40561996
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
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40562019
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
 
LVL 1

Author Closing Comment

by:niceoneishere
ID: 40587081
Thanks
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question