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
Related
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 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/
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.
This is the first page where I try to open the detail.html;
<a href="detail.html" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
I have problems to load the scripts on detail.html (after href link is clicked on first page)
Here is my script in header of details.html(the page I go after href is clicked on first page), Problem is I can NOT get the console test print, that function is NOT called when details.html page is loaded. It only hits after I manually refresh the page
<script>
$(document).bind("pageinit", function(){//or $(document).ready(function ()
console.log('test');
});
</script>
To understand your problem I think you need to first understand how jQuery Mobile "loads" external pages. By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.
If you want to run code for a second page, you either need to include that script on your first page and use event delegation (since the second page is not part of the DOM yet) or include the script withing the second page's date-role="page" wrapper.
Case in point in your case if you want to run code for your details page you either need to include the script on your first page for example assuming you have a div on your detail.html page like the following
<div id="details" data-role="page"> ..rest of your content
</div>
Then on your first page you could do the following
$(document).on('pageinit', '#details', function() {
console.log('test');
});
Or alternatively you can include a script tag withing your "details" page wrapper.
EDIT:
As I mentioned this is the default behavior, however if you wish you can tell jQuery Mobile to do a full post when loading a second page by adding in data-ajax="false" or rel="external" to your link for example
<a href="detail.html" data-ajax="false" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
The difference between data-rel="external" and data-ajax="false" is if the second page is basically semantic in that data-rel="external" should be used if the second page is on a different domain.
I made you an working example: http://jsfiddle.net/Gajotres/Eqzd2/
$("#second").live('pagebeforeshow', function () {
console.log('This will only execute on second page!');
});
You can use on instead of live if you are using last version of jQuery.
Also take a look at my article about event flow in jQM page transition: https://stackoverflow.com/a/14010308/1848600
I have a wrapper box which has an onclick event to make the whole box cickable to go to a different page, something like this:
<div onclick="window.location='http://dom.com/page1/'">
<p>Title</p>
<img alt='img' />
<p>Some text</p>
My link
<p>Some more text</p>
</div>
The problem is that the child link will never go to page2 because the parent onclick takes priority and wherever you click on the box you will always end up in page1.
Is there any way to solve this, I need to be able to go to page1 when clicking anywhere on the box but going to page2 when clicking on the link.
The "onclick" handler is old-school. I'd recommend downloading and including jQuery in your HTML, then using it like so:
<script src="main.js"></script>
main.js:
jQuery( document ).ready(function(){
jQuery( "div" ).click( function( e ){
window.location='http://dom.com/page1/';
e.preventDefault();
};
} );
You probably don't need the e.preventDefault(); line, as you're changing the location of the browser before it executes.
Also, it's good practice to avoid applying click handlers to tags. Perhaps you should use two tags and CSS to properly position and layer to the two over-top each other.
You should look into event capturing and event bubbling. Here is a nice article to get you started.
One hack around it is to have anchor tag instead of div and make it block level element:
<a href="http://dom.com/page1/" style="display: block; text-decoration: none;">
<p>Title</p>
<img alt='img' />
...
</a>
This will also work when JS is disabled and the only downside is that it's not really elegant.