TechQA.

jqueryMobile dialog closes as soon as it is opened on page load in Safari only

850 views Asked by At

So my jqueryMobile dialog is closes as soon as it is opened on page load in Safari only. I have a click event attached to a link that opens it. Works just fine on all other browsers, just not Safari. Also not I have a cookie set so it only opens once. Here is a link to check it out. jqueryMobile dialog issue Any help will be greatly appreciated.

    <a id='dialog' href="dialog.html" data-rel="dialog" >Dialog</a>

    <script>
    function openDialog() {
       setTimeout(function () {
       $.mobile.changePage('dialog.html');
      }, 100); // delay above zero
     }


    $(function() {
        if ($.cookie('dialog_shown') == null) {
           $.cookie('dialog_shown', 'yes', { expires: 7, path: '/' });
        openDialog();   
       } 
        });

jquery jquery-mobile webkit setinterval jquery-mobile-dialog
Original Q&A
1

There are 1 answers

2
Gajotres On BEST ANSWER

First, I have downloaded your page source and tested this on Safari and Chrome. This is purely a web-kit browsers problem.

Don't take this as a critique but there are some many problems in your code that I don't know where to start.

First problem

First jQuery Mobile is strict with its design, all your pages must be wrapped inside a:

<div data-role="page" id="index">

Choose any page id you want. If you want jQuery Mobile to behave this MUST be done.

Second problem

jQuery Mobile don't like document ready, while a lot of things will work with it they will not work properly. jQuery Mobile developers have create page events to remedy this. If you want to find more read my other article: jQuery Mobile: document ready vs page events. I am mentioning this because openDialog function must be executed during the pageshow event (everything will be clear when you see final code).

Third problem

jQuery Mobile dialogs don't work well if separated in an another HTML file. That is why I have placed it inside a original HTML file. Without this problem we don't need to fix prolem 1. and problem 2. Because we now have a dialog at the same page as rest of the HTML, original content MUST be wrapped inside a jQM page and we need pageshow event to trigger this new dialog.

Fourth problem

This is just a good practice but always kill interval or timer unless you want it to do everything over and over again.

function openDialog() {
    var interval = setInterval(function(){
       $.mobile.changePage('#dialog');
       clearInterval(interval);
    },1);
}

Final code

I have removed only cookie handling because it prevented me from testing this out. You can download this code and test it locally. 

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="We help over 3000 homeless animals every year find permanent homes. We offer Pet Adoption, Grooming, Dog Training, Spay &amp; Neuter, Vaccinations, Micro-chipping and Educational Programs for children.">
<meta name="keywords" content="">
<title>Adopt, Donate, Volunteer - Humane Society Silicon Valley</title>
<link href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/css/default.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/css/hpStyles.css">
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/_fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/js/respond.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
    $(function() {
        $( "#navIcon" ).click(function() {
        $( "footer" ).toggleClass( "newClass", 1500, "easeInOutBack" );
    return false;
    });
});
</script>
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/_fancybox/jquery.fancybox.pack.js"></script>
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/js/jquery.cookie.js"></script>
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/js/search.js"></script>
<script>
function openDialog() {
    var interval = setInterval(function(){
           $.mobile.changePage('#dialog');
           //clearInterval(interval);
    },1);  
 }


$(document).on('pageshow', '#index', function(){   
    openDialog();   
});     
</script>
<script>
        $(document).ready(function() {
        $(".fancybox").fancybox();
        console.log($.cookie("test", 1));
            });
</script>
<script type="text/javascript">
function openFancybox() {
    setTimeout( function() {$('.fancybox').trigger('click'); },0);
}
$(document).ready(function() {
    var visited = $.cookie('test');
    if (visited == 'yes') {
        return false;
    } else {
       // openFancybox();
    }
    $.cookie('test', 'yes', { expires: 7 });
    $('.fancybox').fancybox();
});
</script>
</head>
<body>

<div data-role="dialog">

        <div data-role="header" data-theme="d">
            <h1>Custom Dialog</h1>
        </div>

        <div data-role="content">
            <h1>Customize the HTML. Have any content you want in here.</h1>
            <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
            <a href="#index" data-role="button" data-theme="b">Button Style</a>       
            <a href="#index" data-role="button" data-theme="c">Cancel</a>    
        </div>
    </div>

    <div data-role="page" id="index">

    <a id="various1" class="fancybox" href="_images/topNavSprite.png">Click</a>
    <a id='dialog' href="#dialog" data-rel="dialog" >Dialog</a>


    <div class="gridContainer clearfix">
  <div id="LayoutDiv1">
    <nav> <a href="#"><img class="logo" src="_images/hssv-logo.jpg" height="87" width="88" alt="Humane Society Silicon Valley" /></a>
      <ul>
        <li><a class="adopt" href="#">Adopt</a></li>
        <li><a class="involved" href="#">Get Involved</a></li>
        <li><a class="services" href="#">Pet Services</a></li>
        <li><a class="contact" href="#">Contact us</a></li>
        <li><a class="about" href="#">About</a></li>
        <li><a class="donate" href="#">Donate</a></li>
      </ul>
    </nav>
  </div>
  <div id="LayoutDiv2">
    <div id="hpNav">
      <ul>
        <li><a class="adoptHp" href="#">Adopt</a></li>
        <li><a class="donateHp" href="#">Donate</a></li>
        <li><a class="involvedHp" href="#">Get Involved</a></li>
        <li><a class="medicalHp" href="#">Medical Center</a></li>
        <li><a class="kidsHp" href="#">Kids Programs</a></li>
        <li><a class="newsHp" href="#">News</a>
        <!-- start feedwind code -->
        <script type="text/javascript">
        <!--
        rssmikle_url="http://hssvacc.blogspot.com/feeds/posts/default?alt=rss";
        rssmikle_frame_width="249";
        rssmikle_frame_height="250";
        rssmikle_target="_blank";
        rssmikle_font="";
        rssmikle_font_size="12";
        rssmikle_border="on";
        rssmikle_css_url="";
        rssmikle_title="off";
        rssmikle_title_bgcolor="#0066FF";
        rssmikle_title_color="#FFFFFF";
        rssmikle_title_bgimage="http://";
        rssmikle_item_bgcolor="#FFFFFF";
        rssmikle_item_bgimage="http://";
        rssmikle_item_title_length="100";
        rssmikle_item_title_color="#666666";
        rssmikle_item_border_bottom="on";
        rssmikle_item_description="on";
        rssmikle_item_description_length="100";
        rssmikle_item_description_color="#666666";
        rssmikle_item_date="on";
        rssmikle_item_description_tag="off";
        rssmikle_item_podcast="icon";
        //-->
        </script>
        <script type="text/javascript" src="http://feed.mikle.com/js/rssmikle.js"></script>
        <div style="font-size:10px; text-align:right; display:none;">
        <a href="http://feed.mikle.com/en/" target="_blank" style="color:transparent;">FeedWind</a>
        <!--Please display the above link in your web page according to Terms of Service.-->
        </div>
        <!-- end feedwind code -->
        </li>
      </ul>
    </div>
    </div>
  </div>
  <div id="LayoutDiv3"> </div>
</div>
<footer class="newClass">
  <div id="navIcon"></div>
  <div id="search"> 
    <!-- Place this tag where you want the search box to render -->
    <gcse:searchbox-only></gcse:searchbox-only>
  </div>
  <div id="subNav">
    <ul>
      <li><a href="#">Adoption</a></li>
      <li><a href="#">Available animals</a></li>
      <li><a href="#">How to adopt</a></li>
      <li><a href="#">Contact adoptions</a></li>
      <li><a href="#">Community Adoption Centers</a></li>
    </ul>
    <ul>
      <li><a href="#">Volunteer</a></li>
      <li><a href="#">Become a volunteer</a></li>
      <li><a href="#">Become a foster parent</a></li>
      <li><a href="#">Learn about corporate volunteering</a></li>
    </ul>
    <ul>
      <li><a href="#">Donate</a></li>
      <li><a href="#">Donate Now</a></li>
      <li><a href="#">Become a monthly donor</a></li>
      <li><a href="#">President’s Circle</a></li>
      <li><a href="#">Honor and memorial giving</a></li>
      <li><a href="#">Animals sponsorship</a></li>
      <li><a href="#">Wills and bequests</a></li>
      <li><a href="#">Corporate giving</a></li>
      <li><a href="#">Workplace giving</a></li>
      <li><a href="#">Pet Pantry</a></li>
      <li><a href="#">Wishlist</a></li>
    </ul>
    <ul>
      <li><a href="#">Medical Services</a></li>
      <li><a href="#">Spay and Neuter</a></li>
      <li><a href="#">Vaccinations, microchips, tests</a> </li>
      <li><a href="#">Euthanasia services</a></li>
      <li><a href="#">Preventing Unwanted Pregnancies  (P.U.P.)</a></li>
      <li><a href="#">Medical information for pet owners</a></li>
    </ul>
    <ul>
      <li><a href="#">Pet Care</a></li>
      <li><a href="#">Behavior and training help</a></li>
      <li><a href="#">Pet grooming</a></li>
      <li><a href="#">Pet store</a></li>
      <li><a href="#">Dog park</a></li>
    </ul>
    <br>
    <br>
    <br>
    <ul>
      <li><a href="#">Humane Education</a></li>
      <li><a href="#">Summer Camp</a></li>
      <li><a href="#">Kindergarten to 3rd grade</a></li>
      <li><a href="#">4th grade to 8th grade</a></li>
      <li><a href="#">9th grade to 12th grade</a></li>
      <li><a href="#">Parents and teachers</a></li>
    </ul>
    <ul>
      <li><a href="#">Other Services</a></li>
      <li><a href="#">Grief counseling</a></li>
      <li><a href="#">Homeless cat program</a></li>
      <li><a href="#">Lost and found pets</a></li>
      <li><a href="#">Pet guardianship</a></li>
      <li><a href="#">Pet surrender</a></li>
      <li><a href="#">Animal cruelty</a></li>
      <li><a href="#">Animal Licensing</a></li>
      <li><a href="#">Disaster preparedness for your pet</a></li>
      <li><a href="#">Rescue organizations</a></li>
      <li><a href="#">Other animal shelters</a></li>
      <li><a href="#">Wildlife services</a></li>
    </ul>
  </div>
</footer>
</div>
</body>
</html>

Related Questions in JQUERY

Related Questions in JQUERY-MOBILE

Related Questions in WEBKIT

Related Questions in SETINTERVAL

Related Questions in JQUERY-MOBILE-DIALOG

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions