I am using jquery mobile and using the $().trigger('create') function to initiate it. I need a callback after this function is done modifying the html with the new styling. Is this possible?
I need this because i need the new dimensions of the screen after an ajax load of new content.
I would use TriggerHandler(). You can bind to your custom event...
See the DEMO at the bottom of the link:
http://api.jquery.com/triggerHandler/
I found that the "updatelayout" event gets fired when I do a x$.trigger("create"). This from some js using Backbone...
var content$ = this.$el.find("#somediv");
content$.on('updatelayout', function () { alert("woo hoo"); });
content$.trigger("create"); // add some JQM magic, wait for the 'woo hoo'
From the jQuery api:
"This event is triggered by components within the framework that dynamically show/hide content, and is meant as a generic mechanism to notify other components that they may need to update their size or position."
It turns out that there is a devil in the detail. Not all triggered JQM content leads to a JQ "updatelayout" event. I had to add a wrapper div with 'data-role="controlgroup" in another case to get it to fire. More digging required...
Related
I'm trying to attach a DTM Event Based Rule to a Social Share button from Add This, and it's not working.
I have other rules on the same page which are working fine, so I'm confident all the setup basics are correct.
In fact it almost works... In the log below... why does DTM Switch report event13 but then it doesn't show up in the Adobe Analytics Server Call?
Still not fully clear why it partially works (as opposed to not working at all), but the problem seems to be caused by attempting to bind Event Based Rules to elements that were injected into the DOM via Javascript (such as the AddThis API).
Solved by using a custom event handler to dispatch a Direct Call Rule:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
onElementInserted("body", '.at-share-btn', function(element) {
$(element).one('click', function() {
var network = $($(this).find('title')[0]).text();
window.digitalData.event.socialNetwork = network;
_satellite.track('social-network');
return true;
});
});
});
</script>
where onElementInserted() is borrowed from jquery detecting div of certain class has been added to DOM
Is it an s.tl() beacon? Is event13 set in custom code? I'd doublecheck that s.linkTrackEvents is set to allow event13- see Omniture events is not firing/sending data via DTM when using s.tl tracking methods for more info on that.
I'm writing my own ESC handler because I need to do other actions when ESC is pressed, specifically I need to manage where focus goes for keyboard-only users. I have it working for all menus and some dialogs (both of which are using jQueryUI) but I'm having problems with dialogs that open on top of other dialogs (confirmation dialogs).
I'm using a Backbone View and adding my keydown handler on dialogcreate. this.$el.on('dialogcreate', this.bindKeydownEvent);
My handler:
bindKeydownEvent: function(ev, ui) {
var self = this;
this.$el.dialog().on('keydown', function(evt) {
if(evt.keyCode === $.ui.keyCode.ESCAPE) {
self.$el.dialog("close");
if(self.options.closeFocusEl) {
$(self.options.closeFocusEl).focus();
}
evt.stopPropagation();
}
});
}
I've checked and this.$el.dialog() is the correct dialog when the second dialog calls this.bindKeydownEvent but for some reason the keydown handler is not being triggered no matter what I press in the dialog (Tab, Space, Enter, random letters, etc).
Any idea what I'm doing wrong or have a better way I could bind the keydown event?
EDIT:
I just noticed that this is also happening in some first-level dialogs. It looks like the only difference is the way we get the template and therefore create the interior of the dialog. In our Alert and Confirmation dialog classes, we define the template as an attribute on the object like this: template: _.template("<div><%= o.content %></div>"). In other views (in which the keydown binding works) we build the child elements and add them to the DOM of the dialog, set the template in the initialize function
this.options.template = 'navigation/CreateNewDialog.template';
or set it when we call the dialog
var closeConv = new views.CloseConversationDialogView({
confirm: this.closeConversationConfirmed,
content: i18n.t("closeConversationInput"),
template: "conversation/CloseConversationDialog.template"
});
closeConv.render();
Is there a reason that creating the template inline as an attribute on the view would not bind keydown correctly?
To understand why your event handler isn't being triggered you need first understand how event delegation works.
The key to event delegation in that events bubble up the DOM. So when you bind your event using this.$el.dialog().on('keydown',..., what you basically doing is listening to any keydown event that is triggered on your $el or it's descendants. In this case being that your second dialog isn't a descendant of your $el it's events won't bubble up to it and therefore don't trigger your handler.
To work around this you can either bind directly to your second dialog, or instead bind to a exisitng higher level element like the document. For example
$(document).on('keydown', '.myDialog', function() {...
The only thing my original attempt was missing was "widget". The widget method, according to api.jqueryui.com,
Returns a jQuery object containing the generated wrapper.
I don't see any documentation on what exactly $('.selector').dialog() returns but apparently it is not the same as $('.selector').dialog("widget"). I also changed on('keydown'... to just use the jQuery keydown instead.
bindKeydownEvent: function(ev, ui) {
var self = this;
this.$el.dialog("widget").keydown(function(evt) {
if(evt.keyCode === $.ui.keyCode.ESCAPE) {
self.$el.dialog("close");
if(self.options.closeFocusEl) {
$(self.options.closeFocusEl).focus();
}
evt.stopPropagation();
}
});
}
I'm trying to dynamically populate a select tag at load time (latest jQM version) using a custom template filling function.
If the fn is called in the "pagebeforechange" event, the select tag is properly initialized. Since this event is called on every page transition, I thought of moving the fn to the 'pageinit' event. This does not work, presumably because the DOM is not yet fully available. How can I coerce jQM to inject content in a page only once? Currently, I am using a kludge. There surely must be a smarter way. Thanks for any suggestions.
$(document).bind('pageinit', function () {
InitSelTagTest("#selActTag", "tplTag"); // Does not work.
});
$(document).bind("pagebeforechange", function (e, data) {
if ($("#selActTag").children().size() === 0) {
InitSelTagTest("#selActTag", "tplTag"); // Kludge, but it works
}
});
function InitSelTagTest(el,tpl) { // Append all tags to element el
var lstAllTags = JSON.parse($("#hidTag").val()); // Create tag array
// Retrieve html content from template.
var cbeg = "//<![" + "CDATA[", cend = "//]" + "]>";
var rslt = tmpl(tpl, { ddd: lstAllTags }).replace(cbeg, ").replace(cend,");
$(el).html(rslt).trigger("create"); // Add to DOM.
}
EDIT
In response to Shenaniganz' comment, it seems that the "pagebeforecreate" event could do the trick ie.
$("#pgAct").live("pagebeforecreate", function () {
// Populate tag select. Works. Traversed only once.
InitSelTag("#selActTag", "tplTag");
});
I'm not sure I fully understand your question but I'll throw a few things out there and you let me know if I can extend further.
To make something trigger only once on page load you can try to implement a regular JQuery $(document).ready(function(){}) aka $(function(){}) for the exact reason why JQuery Mobile users are told not to use it. It triggers only once on DOM load. Further pages don't trigger it because they're being switched via Ajax.
Other than that, on regular dynamic content loading you take a look at the following example I put together for someone else earlier:
http://jsbin.com/ozejif/1/edit
I have a multi-page document and I'm binding to the pageshow event of page "myId":
$('#myId').live('pageshow', renderMyIdTempalates);
I'm applying my JSON templates with PURE like this
function renderMyIdTempalates(event) {
$.mobile.showPageLoadingMsg();
var $page = $("#myId");
// do ajax call
$page.children( ":jqmData(role=header)" ).directives(...).render(data);
$page.children( ":jqmData(role=content)" ).directives(...).render(data);
$.mobile.hidePageLoadingMsg();
}
Initially I was using
$('#myId').directives(...).render(data);
to apply my templates. This caused problems since the selector didn't include the jqm attributes. So I used the jqmData method to grab the header and content to apply my templates. This works fine, but how do I select the entire document that I'm working with? I would prefer to apply my templates to the entire document once.
I tried:
$(":jqmData(role=page)") // selects all pages
$(":jqmData(id=myId)") // no luck
Any ideas?
the selector
div:jqmData(id="myID")
should work. just remember that myID should not be the id of that div.That page div should have a parameter data-id="myID"
I am attempting to refresh a listview after I change the list items in it but it keeps failing with the message:
"Uncaught cannot call methods on listview prior to initialization;
attempted to call method 'refresh'".
The list is an unordered list in a div with a data-role="dialog" attribute. The list has data-role="listview". After updating, if I call $('#theULInQuestion').listview('refresh'), I get the error message. What gives?
Thanks,
Rob
There are a lot of page-events in the jQuery Mobile framework which makes it hard to determine which is the proper one to bind to. I bind to the pageshow event because by the time that event fires, the DOM is prepared (jQuery Mobile has initialized everything).
However whenever I am having issues with timing the refresh of a jQuery Mobile widget I check to see if it has been initialized and run the necessary code to either initialize or refresh the widget.
$(document).delegate('#my-dialog-id', '<page-event>', function () {
var $the_ul = $('#theULInQuestion');
//add your rows to the listview here
$the_ul.append('<li>a row</li><li>another row</li>');
if ($the_ul.hasClass('ui-listview')) {
$the_ul.listview('refresh');
} else {
$the_ul.trigger('create');
}
});
Each of the jQuery Mobile widgets have specific classes that are added to that type of widget. So you can check (after appending your rows) if the widget has the jQuery Mobile classes; if it does then refresh it, if it doesn't then initialize it.
Here is a jsfiddle: http://jsfiddle.net/jasper/urTeW/1/
Note that you can place the conditional statement to refresh/initialize anywhere in your code, it doesn't have to happen when a page-event fires.