Cannot get a popup to work in jQuery Mobile - javascript

I am sure I am just missing something basic, but can anyone see anything wrong with the following code? When I click the first button, it does not open a popup. The second button opens the popup as a dialog.
<!DOCTYPE html>
<html>
<head>
<!-- JQUERY MOBILE CSS -->
<link rel="stylesheet" href="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<!-- JQUERY -->
<script src="//codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<!-- JQUERY MOBILE -->
<script src="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<p>Open Popup</p>
<p>Open Popup(dialog)</p>
</div>
</div>
<div id="menu-items" data-role="popup">
<ul data-role="listview">
<li>google.com</li>
<li>google.com</li>
</ul>
</div>
</body>
</html>

Indeed it's a small thing you're missing! =)
jQuery 1.3 Mobile Pop-up Docs:
...then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped. This is a similar markup pattern to the dialog widget. A popup div has to be nested inside the same page as the link.
Move the <div id="menu-items"></div> to within the <div id="home" data-role="page"><div> node, then that should be it!
Working jsFiddle included. Dialogs are deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.

i think there are two things:
I). for opening a popup you have to place popup content inside the data-role='page'
II). for opening a dialog you have to place dialog content outside the data-role='page'
working fiddle : http://jsfiddle.net/REthD/10/

Related

Open modal from outside of HTML

I am following a tutorial to create a simple modal, but the instructions explain how to open it from a button within the HTML that calls it.
<html>
<head>
</style>
<!-- Don't forget to include jQuery ;) -->
<script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- Modal HTML embedded directly into document -->
<div id="ex1" style="display:none;">
<p>Thanks for clicking. That felt good. Close or press ESC</p>
</div>
<!-- I WANT TO ACTIVATE THIS ACTION FROM A JAVASCRIPT FILE -->
<p>Open Modal</p>
</body>
</html>
If I wanted to open it from a linked js file, how could I do it?
Universal solution
For simplicity, assign an ID to that event:
<a id="testID" href="#ex1" rel="modal:open">Open Modal</a>
Then just trigger a click on that element.
JQuery:
$("#testID").click();
JQuery-Modal specific solution
Just call this to open a modal:
$("#testID").modal();
And to close programmatically, assign the ID "testClose" to some element within the modal, and run this to close the modal:
$("#testClose").modal({closeExisting: true});
Possible improvement for more nuanced control
I noticed that jquery-modal uses custom events such as "modal:open", so theoretically you could also call this:
$("#testID").trigger("modal:before-block");
$("#testID").trigger("modal:block");
$("#testID").trigger("modal:before-open");
$("#testID").trigger("modal:open");
However, this one did not work for me. Just use .click().

jQuery call function after content get changed by .load() method

I have a very basic question concerning jQuery but I really don't know how to put it in a short sentence/ headwords to google for it. So first of all, I'm sorry if this might be a double post.
For my problem, I guess only those three files a relevant:
index.html
content.html
script.js
My index.html basically is just a file which keeps a navigation bar (build with Bootstrap v3.3.0).
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles CSS -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
...
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Content</li>
...
</ul>
</div><!-- end navbar-collapse -->
</div><!--end container -->
</nav> <!-- end navbar -->
<div class="container" id="mainContainer">
<!-- Load by default from the Navigation with jQuery -->
</div><!-- end container -->
<footer>
....
</footer>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>
My content.html basically only displays a "button" now (Actually it displays much more, but for this example it only displays a "button")
<div class="col-xs-12 col-md-6">
<a id="testButton" class="btn btn-success" href="#">This is a Test-Button</a>
</div>
My script.js basically only "changes" the content of the div-Element (<div class="container" id="mainContainer">…</div>).
$(document).ready(function () {
$('.nav li a').click(function(e) {
$('.nav li').removeClass('active');
var $parent = $(this).parent();
var $content = $(this).attr('href');
if (!$parent.hasClass('active')) {
$parent.addClass('active');
$('#mainContainer').hide().load($content + '.html').fadeIn('500');
$('#mainFooter').hide().fadeIn('500');
}
e.preventDefault();
});
$('#testButton').click(function(event){
alert("Test, this Button works!");
event.preventDefault();
});
});
Everything displayed here works pretty fine (I'm not sure if this is the way how you should use the navigation, but it works). When I change the content by clicking on the "Content-Item" from the navigation, the content.html file gets displayed in the div-element. But when I click on the Button from the content.html (which was loaded before), no alert gets fired. I guess because the "javascript file", can't find a reverence when the Webpage loads the first time. When I enter the javscript code directly into the content.html file the button actually fires an alert (same happens when I only link the file <script src="js/script.js"></script>).
I really do not want to enter this single line of code (<script src="js/script.js"></script>) to every "content-file". So is there an easier way how to do that? Maybe I also need to change the way how I use the navigation.
Thanks for your help
You want event delegate.
It means you delegate #testButton's click event to it's parent, even if the button is not yet exist in the dom, but when it is there, it's parent, in your situation, #mainContainer will be able to handle the button's event listener.
Like:
$('#mainContainer').on('click', '#testButton', function(event){
alert("Test, this Button works!");
event.preventDefault();
});

jQuery Mobile create a panel

I'm trying to start with jQuery Mobile but I'm stuck when I'm trying to create a left panel with an overlay slide. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>- test-</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="panel" id="testPanel" data-theme="e" data-position="left" data-display="overlay">
<h3>Default panel options</h3>
<p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
</div>
<div data-role="header">
<h1>test</h1>
Contact
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<h4>Copyright 2013 - All Rights Reserved -</h4>
</div>
</div>
</body>
</html>
It doesn't work, when I'm clicking on my link button I have this message "Error loading page" and the content of my panel is already shown in the page. Thanks for your help!
Seems like you're using outdated versions of both jQuery and jQuery Mobile frameworks. I would suggest updating to the latest release versions.
Here's a working demo with your same markup using jQuery 1.9.1 and jQuery Mobile 1.3.1
Sliding panels were introduced in JQM 1.3 version. So it won't work for other versions. USe jQuery 1.7.2- 1.9.1 for JQM 1.3
See the blog post for more details : http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/
If this is not your index page then you are most probably navigate to it through an <a href="yourpage.html>Page</a> in this case jquery uses Ajax request to navigate from one page to another the ajax request does not load the whole content of your page , it only loads the content of the <body> tag i.e any scripts that you are writing inside the <head> tag will not be loaded thus the page will not work properly and you will face error
to solve this you need to use data-ajax="false" inside the <a> attribute to prevent jquery mobile to use Ajax call to load your page.
if it is your index page then please past the js code so we can check it
in all cases check these link
for loading jqm pages and this link problem of ajax call in jqm

Open lightbox when page loads

I'm using this plugin to show lightbox on a website
http://www.zurb.com/playground/reveal-modal-plugin
I want to load some modal automatically when the page load.
I try using this but didn't work:
ON HEAD
<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->
ON BODY
<div id="flyer" class="reveal-modal large">
<h1>Ahora tenemos flyer y todo</h1>
<div id="flyer-img"></div>
<a class="close-reveal-modal">×</a>
</div>
What I'm doing wrong?
This is the page that I'm working
www.cosaslindas.com/beta
Many thanks.
Try adding this after the $('#flier').reveal();
$('#flier').trigger('click');
This issue on Github explains how to do it. It's not a feature of Reveal, but it looks like it can be used to work. You need to have an element (in your case, #flyer have the attribute "data-reveal-onready").
Ive been looking to the modal plugin and i think the reveal function will only bind to a tags with the data-reveal-id attribute.
Not sure if this will work but i'd say give it a try!
add to you html:
<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>
And change the call to this:
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#triggerflyermodal').click();
});
</script>
EDIT:
Your loading jQuery library twice!
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
And
<script src="js/jquery.min.js" type="text/javascript"></script>
Trying removing the last one.
Edit2:
I just tested this in jsfiddle. If you remove the 2nd jquery library from your header your script should run fine!

Calling a Script when button clicked

In a jquery mobile webpage, I would like to call a script defined within script tags in the HEAD section of the jsp.
<head>
<link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" src="jquerymobile/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.0a1.min.js"></script>
<script>
$("#button").click( function()
{
alert('button clicked');
}
);
</script>
</head>
<body>
<html:errors/>
<div data-role="page" data-theme='a'>
<div data-role="header">
<h1>jquerymobile</h1>
</div>
<div data-role="content">
<div id="button" data-role="button">Click on button</div>
</div>
</div>
</body>
When the Button is clicked, I want the alert to be shown. But nothing happens when the button is clicked.
Could someone tell me where I am going wrong?
EDIT1:
The following code brings up the alert in Firefox & Opera Desktop Browsers.
$(document).ready(function() {
$("#vbutton").click(function() {
alert("clicked");
});
});
<a id="vbutton" data-role="button">Click Button</a>
Any reason why the same does not work with Opera Mobile & Fennec browsers - where it shows the Error Loading Page dialog??
Your problem is that you are searching for $('#button') before it exists...
Try wrapping your jQuery code in a $(document).ready(function(){ ... }) or its shorthand alias jQuery(function(){})
The other option is to include your initialization of the click event on the button until AFTER the #button exists in the DOM. In other words, you can move your <script> tag to the bottom of the page and it should work.
The problem was due to debug statements like
debugger;
debug.info(....)
which were understood by Firefox/Firebug, but were causing problems in Fennec & Opera Mobile browsers.

Categories

Resources