I have a jquery mobile popup. I want after it opened to perform some things. The problem is not coming to the event:
$(document).ready(function () {
$("#alertsPopup1").bind({
popupafteropen: function (event, ui) { alert('popup'); }
});
});
Here the pop up in the html:
<div data-role="popup" data-corners="false" class="alertsPopup"
id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
<p>
aaaa</p>
</div>
I can not understand what the problem is, it passes the bind without problems (I tested in Chrome's console).
I'd appreciate some help.
First don't use document ready with jQuery Mobile, sometimes it will trigger before jQuery Mobile can process page correctly inside the DOM. Read here why.
Instead of document ready you should use proper jQuery Mobile page events. Read more about them in a previous link.
Also if possible use delegated event binding. Basically use on function to bind an event and bind it to a document level. Delegated event binding should solve the problem of document ready usage, mainly because it doesn't care if popup exist / don't exist inside the DOM.
Javascript :
$(document).on('pagebeforeshow', '#index', function(){
$(document).on("popupafteropen", "#alertsPopup1",function( event, ui ) {
alert('popup');
});
});
HTML :
<div data-role="page" id="index">
<div data-role="content">
Open Popup
<div data-role="popup" data-corners="false" class="alertsPopup"
id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
<p>
aaaa</p>
</div>
</div>
</div>
Working example: http://jsfiddle.net/Gajotres/Jgajv/
Related
I would like an image to change once clicked and change back once the dialog it links to is closed.
I actually found a solution to what I was trying to do on this site, right here However, upon modifying it to suit my needs it does not work, Can anybody pinpoint what I am missing?
HTML:
<div data-role="footer" data-position="fixed" data-id="myFooter">
<div class="navBar" id="bah" data-role="navbar">
<a href="#menu" id="burgerMenu" data-rel="popup">
<img id="burger" src="resources/burger.png" alt=""/>
</a>
</div>
</div>
jQuery:
$(document).ready(function()
{
$("#bah").on("dialogclose", function(event)
{
$("#burger").attr("src","resources/burger.png");
});
});
Use jQM pagecreate event instead of the regular jQuery ready
For popup clode, the correct event is popupafterclose
The popup id in your example is menu not bah.
$(document).on("pagecreate","#page1", function(){
$("#menu").on("popupafterclose", function(event) {
$("#burger").prop("src","http://lorempixel.com/24/24/technics/1/");
});
});
DEMO
I have this div in a file called clockIn.html
<div data-role="page" data-theme="a" id="hrsWorked">
<div data-role="header" data-theme="a">
<h1>Hours Worked</h1>
Back
</div>
<div data-role="content">
<div id="hrsWorkedDiv">
</div>
</div>
</div>
And I have this eventListener in clockIn.js which is included at the top of clockIn.html
$(document).on("#hrsWorked", "pageshow", function()
{
alert('here 1');
displayHrsWorked(localStorage.getItem('carerID'));
});
And I am not getting the alert. What am I doing wrong? I'm very new to this and am picking up someone else's code. Jquery mobile version: 'js/jquery.mobile-1.2.0.min.js' and cordova version: 'js/cordova-2.6.0.js'
The onpageshow event is similar to the onload event, except that it occurs after the onload event when the page first loads. Also, the onpageshow event occurs every time the page is loaded, whereas the onload event does not occur when the page is loaded from the cache.
Reference to w3schools
I have an HTML document with multiple pages using jQuery Mobile's data-role="page". I am trying to call a panel on the second page but am receiving the error
cannot read property 'nodeType' of undefined
The error occurs when I try to transition to the second page. My basic page structure is as follows:
<body>
<div data-role="page" id="page1">
Enter Page 2
</div>
<div data-role="page" id="page2">
<h3> tthis is page 2 </h3>
<input type="button" id="myButton"> My Button </input>
<div data-role="panel" id="myPanel">
<p> Panel content </p>
</div>
</div>
</body>
The panel is being called through a function, but I still receive the same error when I comment out the function.
$(document).ready(function() {
$('#myButton').on('click', function() {
$('#myPanel').panel('open')
})
})
The panel works if it is on the first page and if I define it on the first page and open it on the second, it still opens on the first. It is there when I hit the back button. I am using jQuery Mobile too is that has an effect on anything.
Why am I receiving this error? Is there a simple solution or do I need hack my way around this by creating the panel dynamically? Thanks.
First off, never use .ready() in jQuery Mobile.
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
Source: http://jquerymobile.com/demos/1.2.0/docs/api/events.html
Secondly, each page should have its' own panel with a different id, and the div containing the panel should be a direct child of data-role=page.
Panel markup/structure:
<div data-role="panel" id="id" data-position="left" data-display="push" data-theme="b">
<!-- Contents -->
</div>
Opening a panel:
Statically by using anchor/button:
Open
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('open');
// Or
$('#panel_id').panel('open');
Closing a panel:
(in case data-dismissible is set to false)
Statically by using anchor/button (Note: It should be placed inside Panel div):
Close
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('close');
// Or
$('#panel_id').panel('close');
Demo
I have:
<div data-role="page" class="type-interior">
<div data-role="content" class="ui-body">
<a href="#transitionExample" data-role="button" data-rel="popup">
Pop Up
</a>
<div data-role="popup" id="transitionExample">This is a POP UP.</div>
<a href=# onClick="$('transitionExample').popup('open')"
data-rel="popup">OpenPopUp</a>
</div>
</div>
If I click on Button It Works, but if I use Javascript method .popup('open'), nothing happens. Popup is not showed.
What is happening?
I use, JqueryMobile 1.2.0 and JQuery 1.8.2.
$('transitionExample').popup('open')
should be
$('#transitionExample').popup('open')
for more info see: http://api.jquery.com/id-selector/
then you better bind your link in the .ready(), you should try to avoid Javascript code in the DOM for better maintainability.
OpenPopUp
and between your <script></script> tags
$(function () {
$("#myButton").click(function () {
$('#transitionExample').popup('open');
});
});
I ran into this thread whilst trying to find the reason for precisely the same behavior - clicking on a data-rel='popup' link was working but the popup() method was not showing anything. After much frustration I eventually discovered that the issue was down to the fact that I had coded
$('#popupid').popup(open)
NO QUOTES! No one complained - Chrome did not throw up an error but the popup call did nothing.
Hopefully, this will help someone else one day.
I am attemtping to solve an issue I am having and decided to try the event handler for the .load() jQuery function. I am unsure what I did wrong. The example on the jQuery page is:
$('#book').load(function() {
// Handler for .load() called.
});
my script was:
var $j = jQuery.noConflict();
$j('#gallery-nav-instruct').load(function() {
if(!$j.cookie('gallerycookie')){
$j.colorbox({ inline:true, href:"#gallery-nav-instruct"});
$j.cookie("gallerycookie", 1, {expires: 30, path: '/'});
}
});
Why did my script not work?
Here is the HTML related to that script:
<div style="display:none">
<div id="gallery-nav-instruct">
<h2>Gallery Navigation Instructions - Step 1</h2>
<h2 style="text-align:right">
<a style="text-align:right;" class="inline cw" href="#gallery-enlarge-instruct">Step 2</a>
</h2>
<p> </p>
<p class="white">
<img src="/Images/Pages/gallery-navigation.jpg" width="890" height="450" alt="Gallery Navigation Instructions" />
</p>
</div>
</div>
Do you have a way of confirming that the div isn't already loaded by the time the event is bound? In other words, it could be a timing issue. The load completes, the event is bound, but the event is never fired because the load is already complete.
I would be interested in knowing the problem you're trying to solve; rather than trouble-shooting the .load() itself (although that might end up being the tool after all!) it's best to allow room for lateral thinking. For example, I don't see why you couldn't do your cookie check and colorbox initialization on document ready. It may be that the image isn't loaded yet, but I don't think that would break user experience.
Try putting your script at the end of the page. That might work. It will execute only when all the content is loaded as .load() event is called when all the stuff inside the parent is loaded completely.
This should help you