Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 10    Views: 1086

sxywebgirl
Aspiring developer
Profile
Posts: 158
Reg: Apr 12, 2013
Altadena, CA
7,530
05/02/13 10:57 AM (12 years ago)

jQuery popup not closing

I'm trying to do a jQuery button with a popup window that will show business hours. The code I'm using works except the popup is supposed to close when the screen is touched outside of the popup (says jquerymobile.com). The popup will only close if I do a refresh of the app. <div data-role="page" id="popup-hours"> <div data-role="content"> <div><img src="images/contactUs-popup.png" width="301" height="298" alt="Contact Info"></div> <div data-role="controlgroup" data-type="horizontal"> <a href="tel://7148218080" data-role="button" ><img src="images/phone.png" width="35" height="30" alt="Call Us"><br> Call Us</a> <a href="#popup-hours" data-role="button" data-rel="popup" ><img src="images/www.png" width="35" height="30" alt="Hours"><br> Hours</a><div data-role="popup" id="popup-hours"> <p><strong><u>Lunch Hours:</u> </strong><br> <strong>Monday thru Friday</strong><br> 11:00am to 2:30pm <br> <br> <strong><u>Dinner Hours:</u></strong><br> <strong>Monday thru Thursday</strong><br> 4:30pm to 9:00pm <br> <strong>Friday</strong> - 4:30pm to 10:00pm <br> <strong>Saturday</strong> - 4:00pm to 10:00pm <br> <strong>Sunday</strong> - 4:00pm to 9:00pm <p> </div> <a href="mailto:[email protected]" data-role="button"><img src="images/email.png" width="35" height="30" alt="Email"><br> Email</a></div> </div> </div> Can someone tell me what I'm missing in my code for this to work properly?? Thanks! T.
 
AlanMac
Aspiring developer
Profile
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
37,120
like
05/02/13 11:31 AM (12 years ago)
Hi @sxywebgirl I thought I'd have a peek. There is no jquery in the code you posted, its all html. Also, I started to think that apps and mobile web don't do popups in the way desktop browsers do anyway. So I though I'd loaded the code into a browser to visualise what you want to do, but I'm still not sure. Would creating this as an html page and calling it as a link from another page work, with a back button included on here to navigte you back do what you want? Alan
 
sxywebgirl
Aspiring developer
Profile
Posts: 158
Reg: Apr 12, 2013
Altadena, CA
7,530
like
05/02/13 11:45 AM (12 years ago)
I thought I'd read on the forum that it wasnt possible to link to another screen with a button link. I've seen an app that has a working popup tip window. (Koca Chiropractic's app) So I know it can be done, they have a "close" button at the bottom though. Below is the whole html page if you want to get a visual. I created it in dreamweaver then pasted it into a custom html plugin screen in my app. Thanks for your help! <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Contact Us</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"> <link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"> <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="popup-hours"> <div data-role="content"> <div><img src="images/contactUs-popup.png" width="301" height="298" alt="Contact Info"></div> <div data-role="controlgroup" data-type="horizontal"> <a href="tel://7148218080" data-role="button" ><img src="images/phone.png" width="35" height="30" alt="Call Us"><br> Call Us</a> <a href="#popup-hours" data-role="button" data-rel="popup" ><img src="images/www.png" width="35" height="30" alt="Hours"><br> Hours</a><div data-role="popup" id="popup-hours"> <p><strong><u>Lunch Hours:</u> </strong><br> <strong>Monday thru Friday</strong><br> 11:00am to 2:30pm <br> <br> <strong><u>Dinner Hours:</u></strong><br> <strong>Monday thru Thursday</strong><br> 4:30pm to 9:00pm <br> <strong>Friday</strong> - 4:30pm to 10:00pm <br> <strong>Saturday</strong> - 4:00pm to 10:00pm <br> <strong>Sunday</strong> - 4:00pm to 9:00pm <p> </div> <a href="mailto:[email protected]" data-role="button"><img src="images/email.png" width="35" height="30" alt="Email"><br> Email</a></div> </div> </div> </body> </html>
 
sxywebgirl
Aspiring developer
Profile
Posts: 158
Reg: Apr 12, 2013
Altadena, CA
7,530
like
05/02/13 11:49 AM (12 years ago)
This is my first time using jQuery and so I'm struggling. This is where I found an example of some code, it also tells how to add a "close" button but when I try it, it doesn't work for me. http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html
 
LA
Aspiring developer
Profile
Posts: 3280
Reg: Aug 16, 2012
Jerseyville, IL
42,900
like
05/02/13 11:53 AM (12 years ago)
Hi @sxywebgirl, Try adding this: $( "#myPopupDiv" ).popup( "close" ) LA
 
sxywebgirl
Aspiring developer
Profile
Posts: 158
Reg: Apr 12, 2013
Altadena, CA
7,530
like
05/02/13 11:57 AM (12 years ago)
@LA, Please dont laugh, this is all new to me, but I'm not sure where I'd put the script..
 
LA
Aspiring developer
Profile
Posts: 3280
Reg: Aug 16, 2012
Jerseyville, IL
42,900
like
05/02/13 12:01 PM (12 years ago)
@sxywebgirl, It closes the popup so just try it in your code above. LA
 
AlanMac
Aspiring developer
Profile
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
37,120
like
05/02/13 12:40 PM (12 years ago)
Hi again I should have clarifed that I meant you can call one html page from another html page, which is possible. But I also think your code is good. Your code runs OK in firefox on my pc - when I click outside the pop up box, it closes. So I uploaded the html file to my BT server (files> docs). Then I created a custom url plugin, put in the url for the html file and tested it and it worked and closed, no problem. Give that a try Cheers, Alan
 
sxywebgirl
Aspiring developer
Profile
Posts: 158
Reg: Apr 12, 2013
Altadena, CA
7,530
like
05/02/13 12:54 PM (12 years ago)
@LA I tried to put it in the div that is the popup <div data-role="popup" id="popupHours"> but when I save it in buzztouch and then go back and look at the code it is no longer there. That is why I'm wondering where to put it. thanks
 
LA
Aspiring developer
Profile
Posts: 3280
Reg: Aug 16, 2012
Jerseyville, IL
42,900
like
05/02/13 12:56 PM (12 years ago)
@AlanMac to the rescue! Awesome! You don't need it then @sxywebgirl LA
 
sxywebgirl
Aspiring developer
Profile
Posts: 158
Reg: Apr 12, 2013
Altadena, CA
7,530
like
05/02/13 01:04 PM (12 years ago)
@AlanMac My code works in dreamweaver but not on the simulator or on my device...but it's working for you! Hmmmm This is my home screen so creating a custom url plugin screen to this html wont work...I'll try it your way to test it on my end though. T.
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.