I am using Appcelerator Studio to design a slider menu. Now i need to add EventListener to those slider menu rows. Please tell me how to use EventListener on clicking 'Help' so that i can give some condition within it? My code is below:
var menuTitles = [{title : 'Home'
}, {
title : 'Help'
},{
title: 'Privacy Policy'
}, {
title : 'About Us'
}, {
title : 'Rate This App'
}, {
title : 'Logout'
}];
//Tableview
var tableView = Titanium.UI.createTableView({
data : menuTitles,
allowsSelection:true
});
menuWindow.add(tableView);
console.log(menuTitles[0]);
//console.log(tableView.data);
menuTitles[0].addEventListener('click', function(){ // It seems wrong.
alert("");
some more operation i need to perform inside this actually
});
Add the event listener onto the parent element, in this case the tableView and then select the item you want that using event bubbling, the example code below selects it on the row index e.index but you could easily change this to e.row.title and do a string comparison / add any custom property to the row object and check it with e.row
tableView.addEventListener('click', function (e) {
if (e.index === 1) {
} else if (e.index === 2){
}
etc....
});
Related
I am working with Odoo10. If I go to Sales > Lead > Meeting Button and I click on the meeting button the calendar view is opened. You can open the view by creating a meeting in the calendar as well. The model used by the popup window is calendar.event.
These buttons appear in the wizard: "Save", "Delete", "Cancel". The wizard does not contain the code of "Delete" button in the standard view.
So how can I remove the "Delete" button in that popup?
I have checked that the button is created by JavaScript. You just need to override the method. Follow the Odoo documentation guidelines. Use extend or include to override it
var CalendarView = View.extend({
// [...]
open_event: function(id, title) {
var self = this;
if (! this.open_popup_action) {
var index = this.dataset.get_id_index(id);
this.dataset.index = index;
if (this.write_right) {
this.do_switch_view('form', { mode: "edit" });
} else {
this.do_switch_view('form', { mode: "view" });
}
}
else {
new form_common.FormViewDialog(this, {
res_model: this.model,
res_id: parseInt(id).toString() === id ? parseInt(id) : id,
context: this.dataset.get_context(),
title: title,
view_id: +this.open_popup_action,
readonly: true,
buttons: [
{text: _t("Edit"), classes: 'btn-primary', close: true, click: function() {
self.dataset.index = self.dataset.get_id_index(id);
self.do_switch_view('form', { mode: "edit" });
}},
{text: _t("Delete"), close: true, click: function() {
self.remove_event(id);
}},
{text: _t("Close"), close: true}
]
}).open();
}
return false;
},
So I think if you remove these lines would be enough:
{text: _t("Delete"), close: true, click: function() {
self.remove_event(id);
}},
By the way, as you can see in the last link, the file to modify (by inheritance) is addons/web_calendar/static/src/js/web_calendar.js
I am trying to create an interface for traversing tables in a relation database. Each select represents a column. If the column is a foreign key, a new select is added to the right. This keeps happening for every foreign key that the user accesses. The number of selects is dynamic.
I made a buggy implementation that has code that manually adds and removes select views. I think it probably can be replaced with better Ember code (some kind of array object maybe?), I'm just not sure how to best use the framework for this problem.
Here's my JSBin http://jsbin.com/olefUMAr/3/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember template" />
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.1.2/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="my_template">
{{view fieldSelects}}
</script>
<div id="main"></div>
</body>
</html>
JavaScript:
App = Ember.Application.create();
var TemplatedViewController = Ember.Object.extend({
templateFunction: null,
viewArgs: null,
viewBaseClass: Ember.View,
view: function () {
var controller = this;
var viewArgs = this.get('viewArgs') || {};
var args = {
template: controller.get('templateFunction'),
controller: controller
};
args = $.extend(viewArgs, args);
return this.get('viewBaseClass').extend(args);
}.property('templateFunction', 'viewArgs'),
appendView: function (selector) {
this.get('view').create().appendTo(selector);
},
appendViewToBody: function () {
this.get('view').create().append();
}
});
var DATA = {};
DATA.model_data = {
"Book": {
"fields": [
"id",
"title",
"publication_year",
"authors"
],
"meta": {
"id": {},
"title": {},
"publication_year": {},
"authors": {
"model": "Author"
}
}
},
"Author": {
"fields": [
"id",
"first_name",
"last_name",
"books"
],
"meta": {
"id": {},
"first_name": {},
"last_name": {},
"books": {
"model": "Book"
}
}
}
};
var Controller = TemplatedViewController.extend({
view: function () {
var controller = this;
return this.get('viewBaseClass').extend({
controller: controller,
templateName: 'my_template'
});
}.property(),
selectedFields: null,
fieldSelects: function () {
var filter = this;
return Ember.ContainerView.extend({
controller: this,
childViews: function () {
var that = this;
var selectedFields = filter.get('selectedFields');
var ret = [];
var model = 'Book';
selectedFields.forEach(function (item, index, enumerable) {
var selection = item;
if (model) {
var select = that.makeSelect(model, that.getPositionIndex(), selection, true).create();
ret.pushObject(select);
model = DATA.model_data[model].meta[selection].model;
}
});
return ret;
}.property(),
nextPositionIndex: 0,
incrementPositionIndex: function () {
this.set('nextPositionIndex', this.get('nextPositionIndex') + 1);
},
getPositionIndex: function () {
var index = this.get('nextPositionIndex');
this.incrementPositionIndex();
return index;
},
setNextPositionIndex: function (newValue) {
this.set('nextPositionIndex', newValue+1);
},
makeSelect: function (modelName, positionIndex, selection, isInitializing) {
var view = this;
return Ember.Select.extend({
positionIndex: positionIndex,
controller: filter,
content: DATA.model_data[modelName].fields,
prompt: '---------',
selection: selection || null,
selectionChanged: function () {
var field = this.get('selection');
// Remove child views after this one
var lastIndex = view.get('length') - 1;
if (lastIndex > this.get('positionIndex')) {
view.removeAt(this.get('positionIndex')+1, lastIndex-this.get('positionIndex'));
view.setNextPositionIndex(this.get('positionIndex'));
}
if (! isInitializing && DATA.model_data[modelName].meta[field].model) {
var relatedModel = DATA.model_data[modelName].meta[field].model;
view.pushObject(view.makeSelect(relatedModel, view.getPositionIndex()).create());
}
// Reset ``isInitializing`` after the first run
if (isInitializing) {
isInitializing = false;
}
var selectedFields = [];
view.get('childViews').forEach(function (item, index, enumerable) {
var childView = item;
var selection = childView.get('selection');
selectedFields.pushObject(selection);
});
filter.set('selectedFields', selectedFields);
}.observes('selection')
});
}
});
}.property()
});
var controller = Controller.create({
selectedFields: ['authors', 'first_name']
});
$(function () {
controller.appendView('#main');
});
Approach:
I would tackle this problem using an Ember Component.
I have used a component because it will be:
Easily reusable
The code is self contained, and has no external requirements on any of your other code.
We can use plain javascript to create the view. Plain javascript should make the code flow easier to understand (because you don't have to know what Ember is doing with extended objects behind the scenes), and it will have less overhead.
Demo:
I have created this JSBin here, of the code below.
Usage
Add to your handlebars template:
{{select-filter-box data=model selected=selected}}
Create a select-filter-box tag and then bind your model to the data attribute, and your selected value array to the selected attribute.
The application:
App = Ember.Application.create();
App.ApplicationController = Ember.ObjectController.extend({
model: DATA.model_data,
selected: ['Author','']
});
App.SelectFilterBoxComponent = Ember.Component.extend({
template: Ember.Handlebars.compile(''), // Blank template
data: null,
lastCount: 0,
selected: [],
selectedChanged: function(){
// Properties required to build view
var p = this.getProperties("elementId", "data", "lastCount", "selected");
// Used to gain context of controller in on selected changed event
var controller = this;
// Check there is at least one property. I.e. the base model.
var length = p.selected.length;
if(length > 1){
var currentModelName = p.selected[0];
var type = {};
// This function will return an existing select box or create new
var getOrCreate = function(idx){
// Determine the id of the select box
var id = p.elementId + "_" + idx;
// Try get the select box if it exists
var select = $("#" + id);
if(select.length === 0){
// Create select box
select = $("<select id='" + id +"'></select>");
// Action to take if select is changed. State is made available through evt.data
select.on("change", { controller: controller, index: idx }, function(evt){
// Restore the state
var controller = evt.data.controller;
var index = evt.data.index;
var selected = controller.get("selected");
// The selected field
var fieldName = $(this).val();
// Update the selected
selected = selected.slice(0, index);
selected.push(fieldName);
controller.set("selected", selected);
});
// Add it to the component container
$("#" + p.elementId).append(select);
}
return select;
};
// Add the options to the select box
var populate = function(select){
// Only populate the select box if it doesn't have the correct model
if(select.data("type")==currentModelName)
return;
// Clear any existing options
select.html("");
// Get the field from the model
var fields = p.data[currentModelName].fields;
// Add default empty option
select.append($("<option value=''>------</option>"));
// Add the fields to the select box
for(var f = 0; f < fields.length; f++)
select.append($("<option>" + fields[f] + "</option>"));
// Set the model type on the select
select.data("type", currentModelName);
};
var setModelNameFromFieldName = function(fieldName){
// Get the field type from current model meta
type = p.data[currentModelName].meta[fieldName];
// Set the current model
currentModelName = (type !== undefined && type.model !== undefined) ? type.model : null;
};
// Remove any unneeded select boxes. I.e. where the number of selects exceed the selected length
if(p.lastCount > length)
for(var i=length; i < p.lastCount; i++)
$("#" + p.elementId + "_" + i).remove();
this.set("lastCount", length);
// Loop through all of the selected, to build view
for(var s = 1; s < length; s++)
{
// Get or Create select box at index s
var select = getOrCreate(s);
// Populate the model fields to the selectbox, if required
populate(select);
// Current selected
var field = p.selected[s];
// Ensure correct value is selected
select.val(field);
// Set the model for next iteration
setModelNameFromFieldName(field);
if(s === length - 1 && type !== undefined && type.model !== undefined)
{
p.selected.push('');
this.notifyPropertyChange("selected");
}
}
}
}.observes("selected"),
didInsertElement: function(){
this.selectedChanged();
}
});
How it works
The component takes the two parameters model and selected then binds an observer onto the selected property. Any time the selection is changed either through user interaction with the select boxes, or by the property bound to selected the view will be redetermined.
The code uses the following approach:
Determine if the selection array (selected) is greater than 1. (Because the first value needs to be the base model).
Loop round all the selected fields i, starting at index 1.
Determine if select box i exists. If not create a select box.
Determine if select box i has the right model fields based on the current populated model. If yes, do nothing, if not populate the fields.
Set the current value of the select box.
If we are the last select box and the field selected links to a model, then push a blank value onto the selection, to trigger next drop down.
When a select box is created, an onchange handler is hooked up to update the selected value by slicing the selected array right of the current index and adding its own value. This will cause the view to change as required.
A property count keeps track of the previous selected's length, so if a change is made to a selection that decreases the current selected values length, then the unneeded select boxes can be removed.
The source code is commented, and I hope it is clear, if you have any questions of queries with how it works, feel free to ask, and I will try to explain it better.
Your Model:
Having looked at your model, have you considered simplifying it to below? I appreciate that you may not be able to, for other reasons beyond the scope of the question. Just a thought.
DATA.model_data = {
"Book": {
"id": {},
"title": {},
"publication_year": {},
"authors": { "model": "Author" }
},
"Author": {
"id": {},
"first_name": {},
"last_name": {},
"books": { "model": "Book" }
}
};
So field names would be read off the object keys, and the value would be the meta data.
I hope you find this useful. Let me know if you have any questions, or issues.
The Controller:
You can use any controller you want with this component. In my demo of the component I used Ember's built in ApplicationController for simplicity.
Explaination of notifyPropertyChange():
This is called because when we are inserting an new string into the selected array, using the push functionality of arrays.
I have used the push method because this is the most efficient way to add a new entry into an existing array.
While Ember does have a pushObject method that is supposed to take care of the notification as well, I couldn't get it to honour this. So this.notifyPropertyChange("selected"); tells Ember that we updated the array. However I'm hoping that's not a dealbreaker.
Alternative to Ember Component - Implemented as a View
If you don't wish to use it in Component format, you could implement it as a view. It ultimately achieves the same goal, but this may be a more familiar design pattern to you.
See this JSBin for implementation as a View. I won't include the full code here, because some of it is the same as above, you can see it in the JSBin
Usage:
Create an instance of App.SelectFilterBoxView, with a controller that has a data and selected property:
var myView = App.SelectFilterBoxView.create({
controller: Ember.Object.create({
data: DATA.model_data,
selected: ['Author','']
})
});
Then append the view as required, such as to #main.
myView.appendTo("#main");
Unfortunately your code doesn't run, even after adding Ember as a library in your JSFiddle, but ContainerView is probably what you're looking for: http://emberjs.com/api/classes/Ember.ContainerView.html as those views can be dynamically added/removed.
this.$().remove() or this.$().append() are probably what you're looking for:
Ember docs.
I have the following drop-downs:
{{view SettingsApp.Select2SelectView
id="country-id"
contentBinding=currentCountries
optionValuePath="content.code"
optionLabelPath="content.withFlag"
selectionBinding=selectedCountry
prompt="Select a country ..."}}
...
{{view SettingsApp.Select2SelectView
id="city-id"
contentBinding=currentCities
selectionBinding=selectedCity
prompt="Select a city ..."}}
The bound properties are defined in a controller:
SettingsApp.ServicesEditController = SettingsApp.BaseEditController.extend(SettingsApp.ServicesMixin, {
needs : ['servicesIndex'],
selectedCountry : null,
selectedCity : null,
currentCountries : null,
currentCities : null,
init : function () {
this._super();
},
setupController : function (entry) {
this._super(entry);
var locator = SettingsApp.locators.getLocator(this.get('content.properties.locator'));
var countryCode = locator.get('country'), city = locator.get('city');
this.set('currentCountries', SettingsApp.countries.getCountries());
this.set('currentCities', SettingsApp.locators.getCities(countryCode));
this.set('selectedCountry', SettingsApp.countries.getCountry(countryCode));
this.set('selectedCity', city);
// Add observers now, once everything is setup
this.addObserver('selectedCountry', this.selectedCountryChanged);
},
selectedCountryChanged: function () {
var countryCode = this.get('selectedCountry.code');
var currentCities = SettingsApp.locators.getCities(countryCode);
var selectedCity = currentCities[0];
this.set('currentCities', currentCities);
this.set('selectedCity', selectedCity);
},
...
});
Initial setup is working fine, but changing the country selection does not update the city selection in the drop-down, even though the observer (selectedCountryChanged) is called and the this.set('selectedCity', selectedCity); is working as expected (as seen in console logging). The currentCities are properly set after the observer runs, but the active (selected) value is not correct (remains unchanged).
Are there any known issues with the programmatic update of bound properties, in this case selectionBinding?
My Select2SelectView is:
SettingsApp.Select2SelectView = Ember.Select.extend({
prompt: 'Please select...',
classNames: ['input-xlarge'],
didInsertElement: function() {
Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
},
processChildElements: function() {
this.$().select2({
// do here any configuration of the
// select2 component
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
},
willDestroyElement: function () {
this.$().select2('destroy');
}
});
Check whether selected city is getting displayed by removing select2(replacing with normal select). If that's the case, selectionbinding has to be propagated to select2.
I have root view Extends Ext.navigation.View . I'm pushing a view called Add Item.
this.push({
title:'Add Item',
xtype:'additempanel'
});
From that view I'm again pushing a view called Select Category
button.up('itempanel').push({
xtype: 'selectcategorypanel',
title: 'Select Category'
});
I have a list in this view .But tapping an item on this list is calling root view's itemtap.
My app controller
config: {
refs: {
items :"itempanel",
SelectCategoryPanel : "selectcategorypanel"
}
'selectCategoryPanel list' : {
itemtap: 'selectCategoryItemTap'
}
'itempanel list' : {
itemtap: 'showPost'
},
The show post method is always getting called. The item tap of selectCategoryPanel is never called please help me.
Your selector for the selectCategoryItemTap listener appears to be incorrect. You can fix it by either using the xtype of the view, or by setting another ref that points to the list.
By xtype:
control: {
'selectcategorypanel list': {
itemtap: 'selectCategoryItemTap'
}
}
By ref:
refs: {
selectCategoryPanelList: 'selectcategorypanel list'
},
control: {
selectCategoryPanelList: {
itemtap: 'selectCategoryItemTap'
}
}
Right now the 'selectCategoryPanel list' selector isn't actually pointing to anything that Sencha can find, so it won't be able to attach the listener to it.
I'm trying to fit typeahead results into a particular div on my page. I get the JSON callback data but I don't know how to use it in order to populate a particular div. The process function has the only effect of listing the results, whatever the length it takes, just under the search field.
Here is my code, do you know how to exploit the callback data in order to populate a particular div ?
$('#search').typeahead({
source: function(query, process) {
$.ajax({
url: '/action/search.php?action=autocomplete',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function(data) {
//process(data);
},
minLength: 1
});
}
});
There is actually a really simple way to get the results into a specific page element, however, I'm not sure it's actually documented.
Searching through the source code shows that the option menu can be passed in, which seems to be intended to allow you to define what the wrapping menu element will look like, however, you can pass in a selector, and it will use this as the target.
Given the html fragment:
<input id='#typeahead' type='text'>
<h2>Results</h2>
<ul id="typeahead-target"></ul>
You could use the following to get the results to appear within the ul element:
$('#typeahead').typeahead({menu: '#typeahead-target'});
I had exact issue. I have written detailed article about the same.
go through the article : http://www.wrapcode.com/bootstrap/typeahead-json-objects/
When you click on particular result from search query results. You can use updater function to populate data with selected JSON object values..
$("#typeahead").typeahead({
updater: function(item){
//logic on selected item here.. e.g. append it to div in html
return item;
}
});
Use this function :
$("#typeahead").typeahead({
source: function (query, process) {
var jsonObj = //PARSED JSON DATA
states = [];
map = {};
$.each(jsonObj, function (i, state) {
map[state.KeyName] = state;
states.push(state.KeyName); //from JSON Key value pair e.g. Name: "Rahul", 'Name' is key in this case
});
process(states);
},
updater:function (item) {
$('#divID').html(" " + map[item].KeyName); //from JSON Key value pair
return item;
// set more fields
}
});
first create css class named .hide {display:none;}
$(typeahead class or id name).typeahead(
{
hint: false,
highlight: true,
minLength: 1,
classNames: {
menu: 'hide' // add class name to menu so default dropdown does not show
}
},{
name: 'names',
display: 'name',
source: names,
templates: {
suggestion: function (hints) {
return hints.name;
}
}
}
);
$(typeahead class or id name).on('typeahead:render', function (e, datum)
{
//empty suggestion div that you going to display all your result
$(suggestion div id or class name').empty();
var suggestions = Array.prototype.slice.call(arguments, 1);
if(suggestions.length){
for(var i = 0; i < suggestions.length; i++){
$('#result').append(liveSearch.template(
suggestions[i].name,
suggestions[i].id));
}
}else{
$('#result').append('<div><h1>Nothing found</h1></div>');
}
});