I want to change ok cancel option of bootbox to yes & no. I have tried my solutions but still show the default one. Here is my button.
<button class="btn btn-primary but-style-left" ng-click="saveForLaterClick(this)">{{ResourceData.Cancel}}</button>
This is my .js file code
$scope.saveForLaterClick = function (e) {
confirmClaimMessage($scope.ResourceData.RenewalProductAreYouSureWantToContinueText, function (e) {
if (e) {
window.open("#/Renewal", "_self");
}
});
}
function confirmClaimMessage(text, callback) {
bootbox.confirm(text, function (e) {
callback(e);
});
I am expecting this
bootbox.confirm({
message: $scope.ResourceData.RenewalProductAreYouSureWantToContinueText,
buttons: {
confirm: {
label: $scope.ResourceData.PoppupYesText
},
cancel: {
label: $scope.ResourceData.PoppupNoText
}
},
callback: function (e) {
if (e) {
window.open("#/Renewal", "_self");
}
}
});
Please help me!
Related
This is my code and i basically want to add CHANGEBUTTONS to the on click event that looks like #click.
<button #click="enviarform2" value="Delete from favorites" style="font-weight: 700;color:#428bca;margin-left:30px;height:30px;border-radius:4px" name="delete" v-else>Delete from favorites</button>
<script>
new Vue({
el:'#app',
data:{
show: true,
paletteid : <?=$palette_id;?>,
action: "add",
action2: "delete",
number: ""
},
methods: {
enviarform: function() {
axios.post('/validarfavorite.php', {
paletteid: this.paletteid,
action: this.action
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
this.number = "Yours plus ";
},
enviarform2: function() {
axios.post('/validarfavorite.php', {
paletteid: this.paletteid,
action2: this.action2
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
this.number = "Minus yours plus ";
},
changebuttons: function() {
this.show = !this.show;
}
}
});
</script>
I have tried with method 1 and method 2 and handler but it didnt work. Hope you know!
You can separate the calls using a ; (or the comma operator):
<button #click="#click="m1(); m2()">my button</button>
<button #click="#click="m1(), m2()">my button</button>
But if your code is used in more than one place, though, the best practice (the "cleanest approach") is to create a third method and use it instead:
<button #click="mOneAndTwo">my button</button>
Demo:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
m1: function() { this.message += "m1"; },
m2: function() { this.message += "m2"; },
mOneAndTwo: function() {
/* call two methods. */
this.m1();
this.m2();
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<button #click="m1(); m2()">call two methods using ;</button><br>
<button #click="m1(), m2()">call two methods using ,</button><br>
<button #click="mOneAndTwo">call two methods using a third method</button><br>
</div>
The easiest way to do it is:
<button v-on:click="method1(); method2();">Continue</button>
Cant you simply call the methods inside the functions?
I created a common modal service in my application.
But it's not working somehow. Some small thing am missing on this plunker but am not able to figure out.
Based on passed parameter either it will open error-dialog or cancel-dialog.
Find PLUNKER here
Here is
JS
// create angular app
var validationApp = angular.module('validationApp', ['ui.bootstrap']);
// create angular controller
validationApp.controller('mainController', function($scope, ModalService) {
var vm = this;
// function to submit the form after all validation has occurred
vm.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
}
};
function openDialog() {
alert('why am not showing');
ModalService.openModal('Analysis Error', 'Complete Application Group configuration prior to running analysis.', 'Error');
}
});
//controller fot dialog
validationApp.controller('ErrorDialogCtrl',
function($uibModalInstance, message, title, callback) {
alert('sfdsfds');
var vm = this;
vm.message = message;
vm.onOk = onOk;
vm.onContinue = onContinue;
vm.onDiscard = onDiscard;
vm.callback = callback;
vm.title = title;
function onOk() {
$uibModalInstance.close();
}
function onContinue() {
$uibModalInstance.close();
}
function onDiscard() {
vm.callback();
$uibModalInstance.close();
}
});
// common modal service
validationApp.service('ModalService',
function($uibModal) {
return {
openModal: openModal
};
function openErrorModal(title, message, callback) {
$uibModal.open({
templateUrl: 'ErrorDialog.html',
controller: 'ErrorDialogCtrl',
controllerAs: 'vm',
backdrop: 'static',
size: 'md',
resolve: {
message: function() {
return message;
},
title: function() {
return title;
},
callback: function() {
return callback;
}
}
});
}
function openCancelModal(title, message, callback) {
$uibModal.open({
templateUrl: 'CancelDialog.html',
controller: 'ErrorDialogCtrl',
controllerAs: 'vm',
backdrop: 'static',
size: 'md',
resolve: {
message: function() {
return message;
},
title: function() {
return title;
},
callback: function() {
return callback;
}
}
});
}
function openModal(title, message, modalType, callback) {
if (modalType === "Error") {
openErrorModal(title, message, callback);
} else {
openCancelModal(title, message, callback);
}
}
}
);
Opening Dialog in HTML
<div class="col-sm-6">
<button type="submit" class="btn btn-primary" ng-click="openCancelDialog()">Open Cancel Dialog</button>
<button type="submit" class="btn btn-primary" ng-click="openErrorDialog()">Open Error Dialog</button>
</div>
Cancel Dialog HTML
<div>
<div class="modal-header">
<h3 class="modal-title">{{vm.title}}</h3>
</div>
<div class="modal-body">
<p ng-bind-html="vm.message"></p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="vm.onContinue()" id="continue">Continue</button>
<button class="btn btn-primary" ng-click="vm.onDiscard()" id="discard">Discard</button>
</div>
</div>
ErrorDiaog HTML
<div>
<div class="modal-header">
<h3 class="modal-title">{{vm.title}}</h3>
</div>
<div class="modal-body">
<p ng-bind-html="vm.message"></p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="vm.onOk()">ok</button>
</div>
</div>
wrong in your js file, you need to declare function like below. you just copy these code and put it in your file then it will work fine.
NOTE: not ModalService.showModal, it should be ModalService.openModal
check your code here
$scope.openCancelDialog = function() {
alert('why am not showing CAncel');
ModalService.openModal('Analysis Error', 'I am Error Type', 'Error');
}
$scope.openErrorDialog = function() {
console.log('why am not showing Error');
ModalService.openModal('Analysis Error', 'I am cancel Type', 'Cancel');
}
i've created a new PLNKR here:
https://plnkr.co/edit/3RBJneSt7RCClrJ5Hba2?p=preview
$scope.submitForm = function() {
//check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
}
};
$scope.openCancelDialog = function(){
//alert('why am not showing CAncel');
ModalService.openModal('Analysis Error', 'I am Error Type', 'Error');
}
$scope.openErrorDialog = function(){
//alert('why am not showing Error');
ModalService.openModal('Analysis Error', 'I am cancel Type', 'Cancel');
}
I have a TextFiled component, where add clear trigger. like this one:
this.config.triggers = {
clear: {
cls : (Ext.baseCSSPrefix + 'form-clear-trigger'),
handler : function() {
this.setValue();
}
}
}
...
So, and I handle an event focus
this.text= Ext.create('TwinText', {
width: 400,
emptyText: 'dddd',
listeners: {
scope: this,
focus: this.show,
},
editable : false
});
Now, when I click on trigger clean, the focus event was fired. How can I suspend this?
You can add the click event to your Textfield component instead of using focus.
Ex. in the TwinText definition add:
initEvents: function () {
this.callParent(arguments);
this.mon(this.inputEl, 'click', this.onClick, this);
},
onClick: function (e) {
this.fireEvent('click', this, e);
}
then listen for the "click" event instead of "focus".
I want to make a textbox withg time picker only
How to make that from this http://jsfiddle.net/RR4hw/11/
jQuery("#startDate").on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change",function (e) {
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
$(".timeField").datetimepicker({
pickDate: false
});
I am working with a backbone, jquery mobile, express app. Everything looks fine when the app starts and works correctly, however, when I click a link or change the url the html renders correctly but no jquery mobile magic appears. It only renders in the login part with a header and footer and format, but when the url changes and I come back, the page loses its css or jquery mobile magic.
define(['views/index', 'views/register', 'views/login', 'views/forgotpassword', 'views/profile',
'views/vinbookDoc', 'models/Account', 'models/Vinbook', 'models/vinBooksCollection'],
function(IndexView, RegisterView, LoginView, ForgotPasswordView, ProfileView,
vinbookDocView, Account, Vinbook, vinBooksCollection) {
var AppRouter = Backbone.Router.extend({
currentView: null,
routes: {
"index": "index",
"login": "login",
"desk/:id": "desk",
"profile/:id": "profile",
"register": "register",
"forgotpassword": "forgotpassword",
"vinbook/:id": "showVinbook"
},
initialize: function(){
$('.back').live('click', function(event) {
window.history.back();
return false;
});
this.firstPage = true;
},
showVinbook: function(id) {
var getCollection = new vinBooksCollection();
getCollection.url = '/accounts/me/vinbook';
this.changeView( new vinbookDocView({
collection: getCollection,
id: id
}));
getCollection.fetch();
},
changeView: function(page) {
this.currentView = page;
$(this.currentView.el).attr('data-role', 'page');
this.currentView.render();
$('body').append($(this.currentView.el));
var transition = $.mobile.defaultPageTransition;
// We don't want to slide the first page
if (this.firstPage) {
transition = 'none';
this.firstPage = false;
}
$.mobile.changePage($(this.currentView.el), {changeHash:false, transition: transition});
},
index: function() {
this.changeView(new IndexView() );
},
desk: function (id){
var model = new Account({id:id});
this.changeView(new ProfileView({model:model}));
model.fetch({ error: function(response){ console.log ('error'+JSON.stringify(response)); } });
console.log('works');
},
profile: function (id){
this.changeView(new IndexView() );
},
login: function() {
this.changeView(new LoginView());
},
forgotpassword: function() {
this.changeView(new ForgotPasswordView());
},
register: function() {
this.changeView(new RegisterView());
}
});
return new AppRouter();
});
require
require.config({
paths: {
jQuery: '/js/libs/jquery',
jQueryUIL: '/js/libs/jqueryUI',
jQueryMobile: '/js/libs/jqueryMobile',
Underscore: '/js/libs/underscore',
Backbone: '/js/libs/backbone',
models: 'models',
text: '/js/libs/text',
templates: '../templates',
jqm: '/js/jqm-config',
AppView: '/js/AppView'
},
shim: {
'jQueryMobile': ['jQuery', 'jqm' ],
'jQueryUIL': ['jQuery'],
'Backbone': ['Underscore', 'jQuery', 'jQueryMobile', 'jQueryUIL'],
'AppView': ['Backbone']
}
});
require(['AppView' ], function(AppView) {
AppView.initialize();
});
login
define(['AppView','text!templates/login.html'], function(AppView, loginTemplate) {
window.loginView = AppView.extend({
requireLogin: false,
el: $('#content'),
events: {
"submit form": "login"
},
initialize: function (){
$.get('/login', {}, function(data){});
},
login: function() {
$.post('/login', {
email: $('input[name=email]').val(),
password: $('input[name=password]').val()
},
function(data) {
console.log(data);
if (!data.error){window.location.replace('#desk/me');}
}).error(function(){
$("#error").text('Unable to login.');
$("#error").slideDown();
});
return false;
},
render: function() {
this.$el.html(loginTemplate);
$("#error").hide();
return this;
}
});
return loginView;
});
Just some more details:
When I change from page or the url to another page, a flash of the rendered website appears and then the css or design disappears.
I think this can solve your problem:
$(document).bind('pagechange', function() {
$('.ui-page-active .ui-listview').listview('refresh');
$('.ui-page-active :jqmData(role=content)').trigger('create');
});