I have the following:
$(document).on("pageinit", function (event) {
alert("pageinit called");
$('#logout').bind('click', function() {alert("clicked!");});
});
The first time the page runs you get a single alert 'pageinit called'. Clicking the element with id #logout fires the alert 'clicked!'. If I click any other links in this page I still get the 'pageinit called' alert (and I get it multiple times, apparently for each page I have previously navigated as well) but subsequently the handler for #logout is gone and never never re-established.
Can anyone tell me how I can get the handler for #logout to remain? I've tried:
$('#logout').die('click').live('click', function() {alert("clicked!");});
to no avail.
After looking more closely (and as commented by Omar), this problem is caused by a combination of the jquery mobile paging system AND trying to attach to a 'single' element by id.
In my case each time I clicked a link within the page it would load into the jqm paging system a separate page, each one containing its own #logout element. My solution was to query for all the buttons and attach handlers to each one:
var buttons = $("*[id='logout']");
buttons.each(function() {
// handle click or whatever here
});
Instead of:
var button = $('#logout'); // Only hooks into the first #logout element
Related
In response to
jQuery UI menu inside a jqGrid cell
My specific implementation of a grid has to call setRowData in numerous places. When setRowData is called, the formatter for the column will get called, and will return the <button>s when the row rebuilds in response to the setRowData.
But in the Menu example, the formatting of the buttons (the calls to .button() and .buttonset()) occur on the loadComplete. Since loadComplete obviously does not run after the setRowData, the buttons in the column display unformatted. So, say we add a button to the body:
<button id="setRowData">Set Row Data</button>
and a click event in the $(function() {})
$("#setRowData").click(function() {
var $grid = $("#list");
var data = $grid.jqGrid('getRowData', 1);
data.name = "Changed!";
$grid.jqGrid('setRowData', 1, data);
});
If you click on the button, the "My Action" and "Bla Bla" buttons show up unformatted.
So, I am looking for an event which I can hang off the setRowData for when after the <button>s have been added to the dom, so I can call .button() and .buttonset() on them again. I want to use an event, since I have a generalized routine which is doing the setRowData (in another library altogether).
Okay, I dug through the JQGrid code, and noticed there was a jqGridAfterGridComplete getting called after the setRowData finishes. So I added a:
$("#list").on("jqGridAfterGridComplete", function() {
... call the .button code again
});
to the ready function, and the styles are applied again. There may be a better way, and please feel free to offer one. But this seems to work.
Adding my bindings to the pageinit event like so:
$('#mypage').on("pageinit", function () {
$('#login-sumbit').on('click', function () {
console.log('button clicked');
});
});
I would expect pageinit to bind the click event once only. But what happens in my single page app is that the button is binding every time the page is loaded even when clicking back.
This results in undesirable multiple duplicate binds. Any ideas on what event to use to bind only once in my single page app, so that loading the page again (back button, loading inline page) in the same session doesn't re-bind?
Looks like I found the answer myself, turns out quite rightly pageinit fires every time the page is loaded even though it's not reloading from the server, otherwise what would fire when a new page is shown.
pageinit is the right event but I need to use .one not .on, .one will bind one time only.
$('#mypage').on("pageinit", function () {
$('#login-sumbit').one('click', function () {
console.log('button clicked');
});
});
Now everything works as expected. Better still I've found you can use .one with the pageinit event for even more control over your bindings and data loads perfect for my requirements.
http://api.jquery.com/one/
You could use:
$('#login-sumbit').off('click').on('click', function(e) {
console.log('button clicked');
});
I'm replacing the standard "Reset your password" text link with a help' icon, but I discovered that when a jQuery Tooltip is on a link within an iframe, it remains open once the link is clicked until the parent page is refreshed.
I'm using inline frames, but I also experienced the same problem when linking to another page. I tried moving the title inside a <span> tag, as well as closing the iframe and opening a new one with the functions below, but the tooltip just remains open on the page.
UPDATE - I created a fiddle to demonstrate the problem http://jsfiddle.net/chayacooper/7k77j/2/ (Click on 'Reset Link'). I experience the problem in both Firefox & IE (it's fine in Chrome & Safari).
HTML
<img src="help.jpg">
Functions to close iframe and open new iframe
function close_iframe() {
parent.jQuery.fancybox.close();
}
function open_iframe() {
$.fancybox.open([{href:'reset_password.html'}], { type:'iframe'
});
}
I am using jquery-1.8.2, jquery-ui-1.9.1 and fancyapps2
Could be an incompatibility or bug between the fancybox and the jQueryUI tooltip.
Essentially, the fancybox is showing the second form but the browser is not seeing the mouseout event. You can check this by adding a callback function to the .close() event of the jQueryUI tooltip.
$('a[href="#inline_form1"]').tooltip({
close: function( event, ui ) {
console.log('closing')
}
})
You should be able to see closing in the console in IE, Firefox and Chrome when the mouse moves out of the "Reset Link" anchor. However, when clicking "Reset Link" in Chrome you see the closing log line again but in IE9 it does not appear again. So the browser is missing the event.
We can work around this by manually calling .tooltip('close') when "Reset Link" is clicked, like this:
$('a[href="#inline_form1"]').on('click', function() {
$(this).tooltip('close')
})
There is a small problem with the way in which the tooltips are created which means that with just the above click handler it will error with
Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'
This seems to be caused by using the $(document).tooltip() method which uses event delegation for all elements with a title attribute. This is the simplest way of creating tooltips for all elements so I understand why this is used but it can add unnecessary events and handling to the whole page rather than targeting specific elements. So looking at the error it is telling us that we need to explicitly create a tooltip on the element we want to call 'close' on. So need to add the following initialisation
$('a[href="#inline_form1"]').tooltip();
Sp here is the completed JavaScript
$(function () {
$(".fancybox").fancybox({
title: ''
})
$(".fancybox").eq(0).trigger('click')
$(document).tooltip();
$('a[href="#inline_form1"]').tooltip()
$('a[href="#inline_form1"]').on('click', function() {
$(this).tooltip('close')
})
})
Note: You only need one jQuery document.ready wrapping function - the $(function (){ ... }) part :-)
In my jquery-mobile (1.0RC2) application, I have two pages: test1.html, test2.html
The first page, test1.html, includes an collabsible-set, where I expand one collabsible item via script in the pageinit event listener (tried both pageshow and pageinit):
$('#page1').live( 'pageinit', initPage);
function initPage() {
alert('initPage!'); // this line seems to be always getting executed
$('#my_expandable').trigger('expand'); // ... but this line doesn't when coming back via a back link!
}
This works fine on the first call of the page.
Then I have a link that leads me to the second page test2.html, as follows:
<script>
function goPage2(criteria) {
$('#page1').die( 'pageinit', initPage);
$.mobile.changePage( "test2.html", {reverse: false, reloadPage: true} );
}
</script>
page 2
When I then go back to the first page via
<script>
function goPage1() {
$.mobile.changePage( "test1.html", { reverse: true, reloadPage: true} );
}
</script>
test
only the alert message in the pageinit event listener of test1.html is executed, but the collapsible is not being expanded through the
You can see the sample in action here: http://bit.ly/rr0dq3
How to reproduce the problem:
load test1.html at http://bit.ly/rr0dq3
you will get an alert message, and the collapsible will be expanded
click on the button 'GoTo page2' and you will come to the second page test2.html
on this second page, click on the gray button 'test', and you will come back to the first page test1.html
the problem now: as you can see, the alert command of the pageinit event of test1.html is being executed, but expanding the collapsible isn't - why not? Obviously the pageinit event listener method is being entered properly, but only the collapsible seems to have a problem here.
I think it might be a bug (filed a report here https://github.com/jquery/jquery-mobile/issues/2791), but maybe somebody else has an idea for that.
Workaround:
Both the alert and the collapsible expanding is being executed when I use a different way to to open the second page test2.html, using
window.location.href = "test2.html";
instead of
changePage(...);
But it's not very satisfying. Why does it not work properly if I use the the page injection way? I already call the die() method when I open the different pages in order not to have multiple pageinit event listeners keeping hanging around.
Have you tried using the data-attribute for collapsible content areas that makes them load expanded:
data-collapsed="false"
Here is a link to the docs for this behavior: http://jquerymobile.com/demos/1.0rc2/docs/content/content-collapsible.html
I have a JQuery Mobile Multi-Page layout and I want to trigger a function when a select menu on my site is changed.
Currently when the menu is changed three events fire.
I have put together an example that should show you what i'm facing.
From the main menu click Web Settings
Change the Theme option on the page
Notice the three alerts
Here is my code to register the event
$(document).bind("pagecreate", function() {
$("#settings-theme").bind("change", function(event) {
alert(event.target);
});
});
Things I have tried:
Changing the data-native-menu="false" to true removed one of the event firings.
Removed all other pages except web settings and that also reduced the number of events firing to two.
In JSFiddle, Framework Options > Head (nowrap) changed to DomReady also removed a event fire.
Update
It appears that pagecreate is fired every time a page is 'first-viewed' as well as twice when the homepage is loaded.
So by the time the settings page is loaded the event has been binded three times.. still no solution.
$(document).bind("ready", function() {
$("#settings-theme").live("change", function() {
alert("changed");
});
});
or
$(document).bind("ready", function() {
$("#pg-settings").delegate("#settings-theme", "change", function() {
alert("changed");
});
});