I needed to create a button that will trigger an input-file and invoke the handler & AJAX when file was chosen:
<template>
<button id="ImportExcelBtn" type="button" class="ladda-button" data-color="mint" data-style="zoom-out" data-size="sm">
<span class="ladda-label">Import Excel</span>
<div class="hidden">
<input type="file" id="fileUpload" #change="handleFileUpload">
</div>
</button>
<script>
export default {
props: {
tablename: String,
modelname: String
},
data: function() {
return {
recursive: true,
file: {}
}
},
methods: {
handleFileUpload: function(e) {
var self = this;
self.file = e.target.files[0];
self.importExcel();
},
importExcel: function() {
var self = this;
self.recursive = true;
var bodyFormData = new FormData();
bodyFormData.set('tablename', self.tablename);
bodyFormData.append('file', self.file);
Services.importExcel(bodyFormData).then(function(response) {
if(response.data.status == 'failed'){
Global.ErrorMessages(response.data.messages);
} else {
console.log('all right');
}
}).catch(function(error) {
var error = Object.assign({}, error);
console.log(error);
Global.ErrorMessages(error.response);
});
}
},
mounted: function() {
var self = this;
$(document).ready(function () {
$('#ImportExcelBtn').click(function() {
if(self.recursive){
self.recursive = false;
$('#fileUpload').click();
}
});
})
}
}
At first go, this works perfectly, but if I chose another file to upload, than the handler isn't invoked when the file is chosen unless I click the button for the third time.
Please note that the input most be inside the button for system purposes, so taking it outside of the button and putting them both in a div is not an option...
Check all the assignments of the recursive, please. If you click on the button and then cancel choosing a file that leads to the recursive would be false and afterwards the "click" handler does nothing.
Related
I made this JS to add a functionality on a form (backend) that computes a field when the event click is triggered. So far the code recomputes when I use ".include" but the whole JS in all views fail since I'm using ".include". When I try to use extend my code does nothing. Looks like Odoo doesn't add the extended code to the JS engine so my question is, what am I doing wrong here? Is there something else I need to add so my code works as extended?
odoo.define('med_care.TestRenderer', function (require) {
"use strict";
var viewRegistry = require('web.view_registry');
var FormRenderer = require('web.FormRenderer');
var FormView = require('web.FormView');
var TestFormRenderer = FormRenderer.extend({
events: _.extend({}, FormRenderer.prototype.events, {
'click .sign_selector': '_onSignSelectorClicked',
}),
init: function (parent, state, params) {
this._super.apply(this, arguments);
this.fields = state.fields;
this._onSignSelectorClicked = _.debounce(this._onSignSelectorClicked, 300, true);
},
confirmChange: function (state, id, fields, e) {
var self = this;
if (state.model == 'med.test') {
return this._super.apply(this, arguments).then(function () {
self.canBeSaved(self.state.id);
});
}
},
_onSignSelectorClicked: function (event) {
this.state.data.telephone = '333';
if (this.state.model == 'med.test') {
var info_test = {
dataPointID: this.state.id,
changes: {telephone: '333'},
viewType: "form",
notifyChange: true
};
var odoo_event = this.trigger_up('field_changed', info_test);
this.confirmChange(this.state, this.state.id, "telephone",
odoo_event)
}
},
});
var TestFormView = FormView.extend({
config: _.extend({}, FormView.prototype.config, {
Renderer: TestFormRenderer,
}),
});
viewRegistry.add('test_form', TestFormView);
return TestFormView;
});
I want to show a popUp in ionic, which does not allow the user to exit when he hasn't entered some input. Right now I'm using this here:
public showOwnIdentifierPrompt() {
// Prompt popup code
var promptPopup = this.$ionicPopup.prompt({
title: this.floor_name,
template: `<input ng-model="$ctrl.customFloorName"></input>`,
scope: this.$scope,
buttons: [
{
text: this.cancel,
type: 'button-clear button-balanced',
onTap: function(e) {
// Cancel creation
return false;
}
},
{
text: this.save,
type: 'button-clear button-balanced',
onTap: () => {
// Create new floor
return true;
}
}
]
});
promptPopup.then((res) => {
if (res) {
this.addNewFloor(this.customFloorName);
}
})
}
In the save onTap() event handler, I would like to access this.customFloorName from my class, to decide whether the user entered input. But it is always undefined. What can I do?
You can get value on Save with below code :
var value = this.scope.$ctrl.customFloorName;
I created an application and it worked fine, most of the functionality is just the application reacting to different events. I would like to implement a router so that users would be able to show their search results with other users etc. The problem is the router appears to be set up correctly, as when i use it to append things directly to the body everything works as expected. When I try to use the router to trigger events though nothing happens, any help would be greatly appreciated. It is worth mentioning I suppose that this is not the complete code but just the parts that seemed relevant to the issue I am experiencing.
IEG = new Backbone.Marionette.Application();
IEG.addRegions({
searchBox: '#searchBox',
resultBox: '#resultBox',
modalBox: '#modalBox',
recipientBox: '#recipientBox',
confirmBox: '#confirmToggleActive'
});
IEG.vent = _.extend({}, Backbone.Events);
IEG.Router = Backbone.Marionette.AppRouter.extend({
routes: {
'': 'index'
},
index: function () {
IEG.vent.trigger("default"); ////TRIGGER EVENT DOES NOT WORK
//$(document.body).append("Index route has been called..");
}
});
SearchBoxView = Backbone.Marionette.ItemView.extend({
template: Handlebars.templates['search'],
events: {
'click #addGroup': 'addGroup',
'keyup #searchStr': 'evaluateSearch'
},
addGroup: function () {
IEG.vent.trigger("addGroup");
},
clearValidationMsg: function () {
$('#searchErrors').html("");
},
evaluateSearch: function (e) {
console.log("keyup DO SOMETHING> ", e.keyCode);
if (e.keyCode === 13) {///press enter execute search
var searchStr = $('#searchStr').val().trim();
if (searchStr) {
IEG.vent.trigger("searchGroups", searchStr);
}
}
else if (e.keyCode === 8 || e.keyCode === 46) {//backspace and delete keys
var searchStr = $('#searchStr').val().trim();
if (!searchStr) {//when searchbar is cleared show all groups
IEG.vent.trigger("searchGroups", null)
}
}
},
validateEmail: function (searchStr) {
return /^.+#.+\..+$/.test(address);
}
});
$(document).ready(function () {
IEG.start();
new IEG.Router;
Backbone.history.start();
IEG.vent.on("default", function () {
var SBV = new SearchBoxView();
IEG.searchBox.show(SBV);
IEG.searchColl = new GroupEntries();
IEG.searchColl.fetch({
data: {
cmd: 0, //search groups
searchStr: null //if null show all groups
},
success: function (data) {
searchResults = new SearchResultsView({ collection: IEG.searchColl });
IEG.resultBox.show(searchResults);
}
});
});
});
Make sure your event listeners are defined before the event is triggered. Most likely, the event trigger is working fine, but your event listener is registered after the router has triggered the event and nothing happens...
Now Solved - See bottom....
I've got a Backbone list view with a button on it that should show the edit elements.
Neither the jQuery hide() call in the 'showAddEntry' function or the view rendering for 'versionEditView' are doing anything at all. I've stepped right through and I'm not getting any errors. I've even tried manually running methods in the console to see what's going on with hide, but I'm not getting anywhere.
Here's the main view...
define(['ministry', 'jquery', 'models/m-version-info', 'views/about/v-edit-version-info-entry', 'text!templates/version-info/version-info.html'],
function(Ministry, $, VersionInfo, VersionInfoEditView, TemplateSource) {
var versionInfoEntriesView = Ministry.View.extend({
el: '#mainAppArea',
template: Handlebars.compile(TemplateSource),
versionInfoEditView: null,
initialize: function () {
this.$addEntryArea = $('#addVersionInfoEntryArea');
this.$addEntryButton = $('#addVersionInfoEntryButton');
},
events: {
'click #addVersionInfoEntryButton': 'showAddEntry'
},
render: function () {
var that = this;
var entries = new VersionInfo.Collection();
entries.fetch({
success: function (data) {
that.$el.html(that.template({ items: data.toJSON() }));
}
});
return this;
},
showAddEntry: function() {
if (this.versionInfoEditView != null) {
this.versionInfoEditView.trash();
}
this.versionInfoEditView = new VersionInfoEditView({ el: this.$addEntryArea });
this.$addEntryButton.hide();
this.versionInfoEditView.render();
return false;
}
});
return versionInfoEntriesView;
});
And here's the child view...
define(['ministry', 'models/m-version-info', 'text!templates/version-info/edit-version-info- entry.html', 'jquery.custom'],
function (Ministry, VersionInfo, TemplateSource) {
var editVersionInfoView = Ministry.View.extend({
template: Handlebars.compile(TemplateSource),
initialize: function () {
this.$dbVersionInput = this.$('#dbVersion');
this.$tagInput = this.$('#tag');
},
render: function () {
this.$el.html(this.template());
return this;
},
events: {
'submit .edit-version-info-form': 'saveEntry'
},
saveEntry: function() {
var entry = new VersionInfo.Model({ dbVersion: this.$dbVersionInput.val(), tag: this.$tagInput.val() });
entry.save({
success: function() {
alert('Your item has been saved');
}
});
return false;
}
});
return editVersionInfoView;
});
And the main template...
<h2>Version Info</h2>
<div id="info">
<a id="addVersionInfoEntryButton" href="#/versioninfo">Add manual entry</a>
<div id="addVersionInfoEntryArea">
</div>
<ul id="items">
{{#each items}}
<li>{{dbVersion}} | {{tag}}</li>
{{/each}}
</ul>
</div>
And the edit template...
<form class="edit-version-info-form">
<h3>Create a new entry</h3>
<label for="dbVersion">DB Version</label>
<input type="text" id="dbVersion" maxlength="10" />
<label for="tag">Tag</label>
<input type="text" id="tag" />
<button type="submit" id="newEntryButton">Create</button>
</form>
I'm fairly new to backbone so I may well be doing something totally wrong, but I can't see anything wrong with the approach so far and it's not throwing any errors.
OK - Fix as follows after some facepalming...
define(['ministry', 'jquery', 'models/m-version-info', 'views/about/v-edit-version-info-entry', 'text!templates/version-info/version-info.html'],
function(Ministry, $, VersionInfo, VersionInfoEditView, TemplateSource) {
var versionInfoEntriesView = Ministry.View.extend({
el: '#mainAppArea',
template: Handlebars.compile(TemplateSource),
versionInfoEditView: null,
$addEntryArea: undefined,
$addEntryButton: undefined,
initialize: function () {
},
events: {
'click #addVersionInfoEntryButton': 'showAddEntry'
},
render: function () {
var that = this;
var entries = new VersionInfo.Collection();
entries.fetch({
success: function (data) {
that.$el.html(that.template({ items: data.toJSON() }));
that.$addEntryArea = that.$('#addVersionInfoEntryArea');
that.$addEntryButton = that.$('#addVersionInfoEntryButton');
}
});
return this;
},
showAddEntry: function (e) {
e.preventDefault();
if (this.versionInfoEditView != null) {
this.versionInfoEditView.trash();
}
this.versionInfoEditView = new VersionInfoEditView({ el: this.$addEntryArea });
this.$addEntryButton.hide();
this.$addEntryArea.append('Do I want to put it here?');
this.versionInfoEditView.render();
}
});
return versionInfoEntriesView;
});
The issue was due to the fact that I was setting the internal element variables within the view before the completion of the render, so the elements were linked up to nothing. I resolved this by extracting the element initiation to the end of the render success callback.
Here's the fix again...
define(['ministry', 'jquery', 'models/m-version-info', 'views/about/v-edit-version-info-entry', 'text!templates/version-info/version-info.html'],
function(Ministry, $, VersionInfo, VersionInfoEditView, TemplateSource) {
var versionInfoEntriesView = Ministry.View.extend({
el: '#mainAppArea',
template: Handlebars.compile(TemplateSource),
versionInfoEditView: null,
$addEntryArea: undefined,
$addEntryButton: undefined,
initialize: function () {
},
events: {
'click #addVersionInfoEntryButton': 'showAddEntry'
},
render: function () {
var that = this;
var entries = new VersionInfo.Collection();
entries.fetch({
success: function (data) {
that.$el.html(that.template({ items: data.toJSON() }));
that.$addEntryArea = that.$('#addVersionInfoEntryArea');
that.$addEntryButton = that.$('#addVersionInfoEntryButton');
}
});
return this;
},
showAddEntry: function (e) {
e.preventDefault();
if (this.versionInfoEditView != null) {
this.versionInfoEditView.trash();
}
this.versionInfoEditView = new VersionInfoEditView({ el: this.$addEntryArea });
this.$addEntryButton.hide();
this.$addEntryArea.append('Do I want to put it here?');
this.versionInfoEditView.render();
}
});
return versionInfoEntriesView;
});
The issue was due to the fact that I was setting the internal element variables within the view before the completion of the render, so the elements were linked up to nothing. I resolved this by extracting the element initiation to the end of the render success callback.
I have been trying to work with the durandal framework and must say I'm very pleased. I'm using the Movie tutorial by http://stephenwalther.com/ and have made some changes. With help of the Ryan Keeters Youtube video's. I have accomplished editing movies with modals.
But I can't get it to work to add new movies via a modal.
I have created a add.html and add.js but when the link for creating a new movie is clicked and the modal shows it shows the page i'm at in the middle (like a loop when I click further).
THis is my binding on show.html:
<a data-bind="click: viewAddMovieModal">Add Movie</a>
And this is the javascript:
define(function (require) {
var self = this;
var vm = {
activate: activate,
title: 'movies page',
movies: ko.observableArray([])
};
//return vm;
// self.moviesRepository = require("repositories/moviesRepository");
self.router = require('durandal/plugins/router');
self.system = require('durandal/system');
self.app = require('durandal/app');
self.movie = require('viewmodels/movie');
self.addmovie = require('viewmodels/add');
//self.Movies = ko.observableArray([]);
self.viewMovieModal = function (movie, element) {
self.app.showModal(movie).then(function (result) {
if (result) {
//self.app.showMessage(result.toString(), result.toString());
vm.movies.remove(movie);
}
}).fail(function (result) {
self.app.showMessage(result.toString(), "Something went wrong!");
});
};
self.viewAddMovieModal = function (addmovie,element) {
// self.app.showModal(addmovie).then(function (result) {
// self.app.showMessage(result.toString(), result.toString());
// });
self.app.showModal(null, element, addmovie);
};
init();
function init() {
vm.movies.push(new movie("Star wars", "Piet"));
vm.movies.push(new movie("Harry Potter", "Jan"));
vm.movies.push(new movie("Hangover", "Klaas"));
}
function activate() {
self.system.log("I get in the activate function!");
}
return {
activate: activate,
movie: movie,
addmovie:addmovie,
vm:vm,
viewMovieModal: viewMovieModal
};
});