I have a specific unified alert package that displays alerts/notifications upon submission in a cohesive way across web browsers. I am finding that after submit in the Autoform.hook(), the default browser alert format also fires. Any help to prevent the default browser alter from firing would be appreciated.
I have tried using an event handler:event.preventDefault();
AutoForm.hooks({
'edit-form': {
onSuccess: function (operation, result, template) {
IonPopup.alert({
title: 'Saved Succesfully!',
subTitle: 'Please Click OK to go back',
onOk: function()
{
Session.set("editingReqEvent", null);
Router.go('calendar');
}
});
},
onError: function(operation, error, template) {
IonPopup.alert({title: 'Save Unsucessful!', subTitle: 'Please go back and check entries'});
console.log(error);
}
}
});
You can disable the default alert event, or overwrite it just with plain js:
window.alert = function() {};
Related
I have some questions about integration testing (OPA5, sapui5): I have created simple project which has 2 views (View1.view.xml and View2.view.xml), and I have sap.m.Button on the first view. After I press this button I'll navigate to the second view. So I have implemented OPA5 tests to check this functionality. So now I'm simulating user's click at button and Navigation is working properly. But If I want to check visibility View1.view.xml after triggering navigation I will get "test passed" result! I guess that tests are executed asynchronously that is why I have had this results. And how can I catch moment when test will finish to execute next?
UnexpectedbehaviorJourney.js
QUnit.module("Unexpected behavior");
opaTest("Why do I see View1.view after Navigation was pressed?",
function (Given, When, Then) {
// Arrangements
Given.iStartMyApp();
//Actions
When.onTheAppView.iLookAtTheScreen().
and.iPressNavigateButton();
// Assertions
Then.onTheAppView.iShouldSeeView1AfterTriggeringNavigation();
// and.iTeardownMyAppFrame();
});
UnexpectedBehavior.js
actions : {
iPressNavigateButton : function () {
return this.waitFor({
id : "idButton",
viewName : "View1",
actions: new Press(),
errorMessage : "Button control wasn't pressed"
});
}
},
assertions : {
iShouldSeeView1AfterTriggeringNavigation : function () {
return this.waitFor({
id : "idView1",
viewName : "View1",
success : function () {
ok( true, "Why I can see View1.view?");
},
errorMessage : "Navigation has worked as expected!"
});
}
}
View1.controller.js
return Controller.extend("InvestigateOPA.controller.View1", {
onPress: function() {
this.getOwnerComponent().getRouter().navTo("appView2");
}
});
Do you have any idea how can I prevent this behavior?
Shouldn't the assertion be a check for View2 visibility?
else try something like below
nb. you can use Qunit and Sinon functions like a delay/timer or a native promise etc.
iShouldNotSeeView1AfterTriggeringNavigation : function () {
return this.waitFor({
id: "app",
viewName: "App",
check: function(oApp) {
return oApp.getCurrentPage().getId() !== "__component0---View1"
},
success: function() {
ok( true, "View1 not current page");
},
errorMessage: "Navigation has not worked as expected!"
});
I have found that the one way to solve my problem is set "transition" property to "show":
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"transition": "show",
"viewPath": "InvestigateOPA.view",
"controlAggregation": "pages",
"controlId": "app"
},
In this case there is no visual delay when one view change another, so my OPA tests will work correctly.
p.s. thx a lot for your ideas!
When a modal window is started, there will be no form validation if you use the default way:
$('#someModalWindow')
.modal({
inline: true,
onDeny: function () {
// someting
},
onApprove: function () {
// some action
}
})
.modal('show');
How can a form validation be triggered manually or automatically in the modal window.
I am using meteor below SemanticUI
thanks
I figured out how to do it:
$('#someModalWindow')
.modal({
onDeny: function () {
// someting
},
onApprove: function () {
var validated = $('#myFormId').form('validate form');
if(!validated){
return false;
}
// some action
}
})
.modal('show');
hopefully this can help you.
I want to alter how an asyncCommand is being hit (currently from a button), so I would need to access the asyncCommand from code. I don't want to have to alter what this asyncCommand is doing, it is dealing with payment details.
I have tried Googling but I cant find anything, I am also new to KO.
This is what I'm trying to achieve:
Click on a button (a separate button with its own asyncCommand method
which checks a flag) The 'execute' will do the following:
If (flag) - show modal
modal has two options - Continue / Cancel
If continue - hit asyncCommand command for original button (card payment one).
If cancel - go back to form
If (!flag)
Hit asyncCommand command for original button (card payment one).
Can this be done?
Thanks in advance for any help.
Clare
This is what I have tried:
FIRST BUTTON
model.checkAddress = ko.asyncCommand({
execute: function (complete)
{
makePayment.execute();
if (data.shippingOutOfArea === true || (data.shippingOutOfArea === null && data.billingOutOfArea === true)) {
model.OutOfArea.show(true);
}
complete();
},
canExecute: function (isExecuting) {
return !isExecuting;
}
});
ORIGINAL BUTTON
model.makePayment = ko.asyncCommand({
execute: function (complete) {
}})
MODAL
model.OutOfArea = {
header: ko.observable("Out of area"),
template: "modalOutOfArea",
closeLabel: "Close",
primaryLabel: "Continue",
cancelLabel: "Change Address",
show: ko.observable(false), /* Set to true to show initially */
sending: ko.observable(false),
onClose: function ()
{
model.EditEmailModel.show(false);
},
onAction: function () {
makePayment.execute();
},
onCancel: function ()
{
model.EditEmailModel.show(false);
}
};
You will have two async commands actually for this scenario. One to open up the modal and another one for the modal.
Eg:
showPaymentPromptCmd = ko.asyncCommand({
execute: function(complete) {
if (modalRequired) {
showModal();
} else {
makePayement();
}
complete();
},
canExecute: function(isExecuting) {
return !isExecuting;
}
});
//Called by Continue button on your modal.
makePaymentCmd = ko.asyncCommand({
execute: function(complete) {
makePayement();
complete();
},
canExecute: function(isExecuting) {
return !isExecuting;
}
});
var
function makePayement() {
//some logic
}
I'm working on an example CRUD application with Meteor.js and am not sure how best to empty out the fields of a form. I need it in two places: when the Submit button is clicked, and when the Cancel button is clicked.
I implemented it this way by creating a utility function called clearFormFields() that just uses jQuery to empty their contents, but it doesn't feel as "Meteoric" as it should; I feel it should be scoped better so it doesn't have a global visibility. What am I doing wrong?
function clearFormFields() {
$("#description").val("");
$("#priority").val("");
}
Template.todoNew.events({
'click #cancel': function(event) {
event.preventDefault();
Session.set('editing', false);
clearFormFields();
},
'submit form': function(event) {
event.preventDefault();
var theDocument = {
description: event.target.description.value,
priority: event.target.priority.value
};
if (Session.get("editing")) {
Meteor.call("updateTodo", theDocument, Session.get('theDocumentId'))
}
else {
Meteor.call("insertTodo", theDocument);
}
Session.set('editing', false);
clearFormFields();
/* Could do this twice but hate the code duplication.
description: event.target.description.value = "";
priority: event.target.priority.value = "";
*/
}
});
You could use the native reset method of the DOM form node ?
"submit form":function(event,template){
event.preventDefault();
// ...
template.find("form").reset();
}
http://www.w3schools.com/jsref/met_form_reset.asp
The DOM object that originated the event can be accessed and reset from through event.target.reset();
"submit form":function(event){
event.preventDefault();
//...
event.target.reset();
}
http://docs.meteor.com/#/full/eventmaps
i've got a page (asp.net) where I trap the click event of a link.
i then do some dirty checking and present a dialog to the user,
$(function() {
var clickedLink;
$('.checkdirty').click(function(event) {
if(isDirty == false){
return true;
}
clickedLink = $(this);
$('#dirtysave-dialog').dialog('open');
return false;
});
});
do you want to loose your changes Yes/No etc.
$('#dirtysave-dialog').dialog({ bgiframe: true, autoOpen: false,
height: 125, width: 425, modal: true,
title: "You have unsaved changes, do you want to continue and loose changes?!!",
buttons: {
"Yes": function() {
isDirty = false;
$(this).dialog("close");
$(clickedLink).click();
},
"No": function() {
$(this).dialog("close");
}
},
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
if they click yes i then clear the isDirty flag and call click on the link. this goes back in to the click event handler, does the check
if(isDirty == false){
return true;
}
returns true but the event never happens....
i need to click the link again manually for it to fire.
any ideas??
.click() only fires the event handlers for onclick, it doesn't actually make the default action of following the link happen. Probably the quickest method is just to do that manually:
window.location= clickedLink.href;
PS. “lose”
you can use the trigger function, Change:
$(clickedLink).click();
to
$(clickedLink).trigger("click");
A better way would be to separate your click functionality out into a separate function and call this, however the above will work.