Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2015-01-20
5
Medium Priority
?
192 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 2000 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

715 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