Is it possible to navigate from a jquery UI widget's instance back to the widget? In this case, retrieving the value stored in $table from resultTable?
var $div = $("<div/>");
var $table = $div.resultTable(resultTableSettings);
var resultTable = $table.resultTable("instance");
It's simply resultTable.element
Related
In a Firefox AddOn, is there a way to get a window object from a tab object? Or vice versa? For instance, if I get a TabClose event, is there a way to get the associated window object?
Yes in TabClose the event argument holds a lot of useful stuff:
function tabclosee(e) {
console.error('TabClose, e:', e);
}
gBrowser.tabContainer.addEventListener("TabAttrModified", tabclosee, false);
So in this image we see that e.view is the DOMWindow (xul window/chrome window). The target is the tab element, in the close situation the HTMLWindow was destoryed so e.target.linkedBrowser will be null, but in TabSelect it won't be null and you can access the html window like e.target.linkedBrowser.contentWindow
If you want window from tab object you can do this too: e.target.ownerDocument.defaultView, this is the same as doing e.view above.
From window you can access all tabs like this:
if (aDOMWindow.gBrowser && aDOMWindow.gBrowser.tabContainer) {
var tabs = aDOMWindow.gBrowser.tabContainer.childNodes;
for (var t=0; t<tabs.length; t++) {
var tab = tabs[t];
var tab_linkedBrowser = tab.linkedBrowser;
var tab_htmlWin = tab.linkedBrowser.contentWindow;
}
}
How can I load ajax content clicking in a link in an accordion and add that content to jquery ui tabs?
I want something like this PARAM QUERY
I'm just starting with javascript and jquery so I don't know how to achieve this
Thanks
You can add a new tab to the jQuery UI tabs header and then trigger the refresh function and select that new tab. Here is a code snippet that should help:
var $mytabs = $('#mytabs'),
$accordion = $('#accordion'),
addTab = function() {
var time = new Date().getTime();
$mytabs.find('ui-tabs-nav').filter(':first').append('<li>New Tab!</li>').tabs('refresh');
$mytabs.tabs('refresh').tabs('select', 'data.php?t=' + time
};
$accordion.accordion({
activate: addTab
});
I want to be able to get a reference to the menu object that autocomplete builds, (so I can get the .attr("id") for example), but I'm not very familiar with jQuery/javascript. In the source, I found this:
https://github.com/jquery/jquery-ui/blob/1-9-stable/ui/jquery.ui.autocomplete.js#L182
so there is an object flying around, I just can't seem to find how to get hold of it.
So, for example, if I've got an input with an autocomplete bound to it like this:
// input = reference to the input text box on the form
input.autocomplete({
select: function(event, ui) {
// how to get the reference here?
// some things I've tried
// return input.menu
// return input.data("menu")
// and a few others but they didn't work either
}
});
I tried looking at the data object itself, but there were so many options I could spend all day looking at it and still not find what I'm looking for.
You can get the widget's reference by looking into dataset assigned to its root element (input). Then fetching menu property (and its underlying element) is kinda trivial. )
select: function(event, ui) {
// that's how get the menu reference:
var widget = $(this).data('ui-autocomplete'),
menu = widget.menu,
$ul = menu.element,
id = $ul.attr('id'); // or $ul[0].id
}
... as this within select function refers to the <input> when this function called as an event handler.
A simpler way to do this:
$(this).autocomplete('widget');
It does the same as:
select: function(event, ui) {
// that's how get the menu reference:
var widget = $(this).data('ui-autocomplete'),
menu = widget.menu,
$ul = menu.element,
id = $ul.attr('id'); // or $ul[0].id
}
It gives the ul list
$(this).autocomplete('widget').attr('id');
I'm stuck on one particular part of my project which consists of the components mentioned in the title.
I currently have a proof of concept that works the way I want it to work:
Sammy is integrated into the knockout viewmodels (as per the tutorial
on the knockout site)
the views are loaded on demand by a controller
(so I don't have to define every single view on the application page)
In my current situation I instance the viewmodels when the application starts (if I don't instance them, Sammy will not handle the routing). The problem is where the view is loaded and swapped by Sammy. I have to make a call to ko.applyBindings for KO to bind to the view. But its bad practice to repeatedly call applybingings.
My question, how do I bind to my views that are loaded on demand? I can't call ko.applybindings since that would create a memoryleak when the view is loaded more than once.
Here is an example VM with the offending ko.applyBindings:
function serviceInfoVm() {
var self = this;
self.ObjectKey = ko.observable();
self.Service = ko.observable();
self.LoadService = function () {
$.get('ServiceData/Detail', { serviceId: self.ObjectKey() }, function (data) {
self.Service(data);
});
};
$.sammy('#content', function () {
this.get('#/service/:id', function (context) {
var ctx = context;
self.ObjectKey(this.params['id']);
self.LoadService();
$.get('Content/ServiceInfo', function (view) {
ctx.app.swap(view);
ko.applyBindings(self);
});
});
}).run();
};
Anyone with some pointers and/or solutions to this problem?
You have the Sammy code in the viewmodel, which can work great if that viewmodel will be present and you want sub viewmodels and views to be loaded. So I assume that is what you are trying to do. Food for thought ... separate the sammy code into its own module (I call mine router in router.js) and let it manage the navigation separate from any viewmodel.
But back to your code ... you could set up your subviews and subviewmodels and use applybindings on them prior to the sammy.get being called. Basically, you are registering your routes in advance. Then the sammy.get just navigates to the new view, which is already data bound.
Not a solution but another approach:
Ended up abandoning the idea of loading the views dynamically.
Now my views are always present in the page and the visibility is triggered by this code:
var app = function () {
var self = this;
self.State = ko.observable('home');
self.Home = ko.observable(new homepageVm());
self.User = ko.observable(new userInfoVm());
$.sammy(function () {
this.get('#/', function (context) {
self.State('home');
});
this.get('#/info/:username', function (context) {
self.State('user');
self.User().UserName(context.params['username']);
self.User().LoadInfo();
});
}).run();
};
And the div visibility is triggered this way:
<div id="homeView" data-bind="with: Home, visible: State() === 'home'">
This way the ko.applyBindings only needs to be called once when the app starts.
The viewmodel above is bound to our shell page.
More on this here
Calling applyBindings on the specific element in the returned template is an option:
ko.applyBindings(viewModel, htmlNode)
Also see this question with regard to lazy loading templates: knockout.js - lazy loading of templates
And docs here for applyBindings: http://knockoutjs.com/documentation/observables.html
I have a jQuery UI widget which attaches to a div and then listens to specific controls inside it (set via options). The problem is that in my event listener, this refers to the control that changed, not the element the widget is attached to. So how can I access the widget element?
_addressChanged: function () {
$(this).data("address").requiresValidation = true;
},
_bindEventHandlers: function () {
$(this.options.address1).bind("change", this._addressChanged);
$(this.options.address2).bind("change", this._addressChanged);
$(this.options.city).bind("change", this._addressChanged);
$(this.options.zip).bind("change", this._addressChanged);
},
Use the this._on() method to bind the handler. This method is provided by the jQuery UI widget factory and will make sure that within the handler function, this always refers to the widget instance.
_bindEventHandlers: function () {
this._on(this.options.address1, {
change: "_addressChanged" // Note: pass the function name as a string!
});
...
},
_addressChanged: function (event) {
// 'this' is now the widget instance.
// 'this.element', as suggested by sjsharktank, is the DOM element the widget was created on
},
Have you tried this.element?
From http://wiki.jqueryui.com/w/page/12138135/Widget%20factory:
this.element
The element that was used to instantiate the plugin. For example, if you were to do $( "#foo" ).myWidget(), then inside your widget instance this.element would be a jQuery object containing the element with id foo. If you select multiple elements and call .myWidget() on the collection, a separate plugin instance will be instantiated for each element. In other words, this.element will always contain exactly one element.