Kendo Window Popup - popup

Issue : When hit enter key from the Window Popup2 it would open another window popup.
From my main page (1) I have button that will open a window popup (2) and when click on a image then a new window popup opens and when this closes out it should go back to popuup(2) ie. it's parent window. It does close it and goes to it's parent window, when when clicked enter it again open that window. Confirmed that no other calls are calling this openWindow..s till it opens it, somehow looks like that window gets open an enter event.
ListOf Survey page 1 -- Create Button --> which will open another kendo window popup and on this popup an add icon is there and an event when this image is clicked it should open a new popup kendowindow
ListOf Suvery Page : SurveyList.cshtml
<div id="windowSurveyList"></div>
<input type="button" id="idCreate" value="Create" class="ui-submit k-button saveGroup" />
$('#idCreate').click(function () {
openSurveyWindow(-1); // -1 is for add mode
});
function openSurveyWindow(idOfSurvey) {
var window = $("#windowSurveyList").kendoWindow({
content: {
url: "/OrderSurvey/Survey",
data: { surveyId: idOfSurvey }
},
width: "900px",
height: "768px",
title: "Create Survey",
modal: true,
actions: [
]
});
var kendoWindow = $("#windowSurveyList").data("kendoWindow");
kendoWindow.open();
kendoWindow.center();
}
On the popup page -- SurveyCreate.cstml ( this will be opened by the above window popup)
Sign Type
</tr>
</table>
<input type="image" id="idAddItem" src="Images/add-icon.png" name="image" width="28" height="28" title="Add an Item"/>
$('#idAddItem').click(function () {
openItemSelectWindow(); // Adding Mode
});
function openItemSelectWindow() {
$("#windowSurveyPopup").html('');
var window = $("#windowSurveyPopup").kendoWindow({
content: {
url: "/OrderSurvey/Survey/AddItemSelect",
data: {}
},
width: "300px",
height: "170px",
title: "Add Item Select",
modal: true,
actions: [
],
close: function () {
}
});
var kendoWindow = $("#windowSurveyPopup").data("kendoWindow");
kendoWindow.open();
kendoWindow.center();
}
In the windowSurveyPopup window -- AdItemSelect.cstml
<table>
<tr>
<td>
<div id="UPCLabel"><span class="Dierbergs-label">UPC:</span></div>
</td>
<td>
<input type="text" name="UPCFind" id="UPCFind" class="Dierbergs-label" size="15" maxlength="15" onclick="clearTextOC(this)" onKeyUp="numericFilter(this);" />
</td>
</tr>
</table>
<table style="width:82%">
<tr class="spaceUnder">
<td style="width:82%">
<input type="button" id="idFind" style="float:right" value="Find" class="ui-submit k-button saveGroup" />
</td>
</tr>
</table>
So if you close the AdItemSelect popup, it comes back to SurveyCreate page but when I hit enter anywhere on the SurveyCreate page it brings up the AdItemSelect popup and we are using amplifier to publish and subscribe so that we can pass the objects from different pages..

Related

Ionic 2 - Input ‘Go’ field on Keyboard is doing two things

I am building an Ionic App for iOS & Android and so far I have a form where users can upload or take a photo and then fill in some other information and submit the form.
My issue:
Currently when the user goes to an Input to enter some extra text there is a go button at the bottom of the keyboard. If the user clicks this 'Go' button it tries to submit the form along with opening the choosePicture() function I have.
What happen when I click the
Go button - it opens the Library
The HTML
<ion-item class="file-upload">
<button class="btn btn-block" ion-button (click)="choosePhoto()">Choose a Photo</button>
<span class="sep"></span>
<button class="btn btn-block" ion-button (click)="takePicture()">Take a Picture</button>
<div class="uploaded-img">
<input type="file" value="" formControlName="hazardImage" hidden />
<span class="img-desc">Please Take or Upload an Image.</span>
<div class="img-picked" *ngIf="base64Img">
<img [src]="base64Img" alt="Hazard Picture" />
<!-- <img src="http://placehold.it/300x300" alt="Test Image" /> -->
</div>
</div>
</ion-item>
<small class="small-title">Where is the Hazard Location? (required)</small>
<ion-item class="input-box">
<ion-input type="text" formControlName="hazardLocation" [class.invalid]="!hazardForm.controls.hazardLocation.valid && (hazardForm.controls.hazardLocation.dirty || submitAttempt)"></ion-input>
</ion-item>
The TypeScript:
choosePhoto()
{
this.Camera.getPicture({
quality: 50,
destinationType: this.Camera.DestinationType.DATA_URL,
encodingType: this.Camera.EncodingType.JPEG,
sourceType: this.Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true
}).then((ImageData) => {
// console.log(ImageData);
this.base64Img = ImageData;
this.hazardForm.patchValue({
hazardImage: this.base64Img
});
}, (err) => {
console.log(err);
})
}
I don't understand why the Go Button is opening the function for choosing a photo :/
You can modify the behaviour of the 'Go' keyboard button with:
#ViewChild('input-box') inputElm: ElementRef;
#HostListener('keyup', ['$event'])
keyEvent(e) {
if(!e.srcElement) return; //browser fix
var code = e.keyCode || e.which;
if (code === 13) {
if (e.srcElement.tagName === "INPUT") {
e.preventDefault();
//handle other behaviours
}
}
};
You have defined the <input> for "Hazard Location" as a Form since there is a formControlName="hazardLocation" attribute. This makes the Go or form submit button appear in the mobile keyboard.
Instead, you should have it as a normal input field like this
<input [(ngModel)]="hazardLocation">

Button can't be clicked during automation

I am trying to click a button which is displayed/visible/present.
When doing it manually, user was able to click the button.
If the test was executed, you will notice that it is trying to click the button, but nothing is happening.
I also tried to put a very long wait and tried to click it manually during automation.
But, when clicking it, nothing also happens.
I cannot share the site since it is in a proxy.
This is the HTML of the button and it looks normal:
<a class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-small" style="min-width: 75px; right: auto; left: 328px; top: 0px; margin: 0px;" hidefocus="on" unselectable="on" role="button" aria-hidden="false" aria-disabled="false" id="button-1011" tabindex="-1" data-componentid="button-1011">
<span id="button-1011-btnWrap" data-ref="btnWrap" role="presentation" unselectable="on" style="" class="x-btn-wrap x-btn-wrap-default-small ">
<span id="button-1011-btnEl" data-ref="btnEl" role="presentation" unselectable="on" style="" class="x-btn-button x-btn-button-default-small x-btn-text x-btn-button-center ">
<span id="button-1011-btnIconEl" data-ref="btnIconEl" role="presentation" unselectable="on" class="x-btn-icon-el x-btn-icon-el-default-small " style=""></span>
<span id="button-1011-btnInnerEl" data-ref="btnInnerEl" unselectable="on" class="x-btn-inner x-btn-inner-default-small">Save</span>
</span>
</span>
</a>
Code:
global.elmCBSave = element.all(by.cssContainingText('span', 'Save')).last();
it('should click the Save button.', function() {
global.elmCBSave.click();
});
I also tried using browser.executeSrcipt, this is working when executed thru console:
browser.executeScript('$(".x-btn-inner.x-btn-inner-default-small:eq(3)").click()')
There are a few things you can try.
Be sure to pass done into your callback and handle the returned promise from the click event
it('should click the Save button.', function(done) {
global.elmCBSave.click().then(function(){
done();
});
});
Also, I tend to put an expected condition to wait for element to be clickable: http://www.protractortest.org/#/api?view=ProtractorExpectedConditions.prototype.elementToBeClickable
var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to be clickable.
it('should click the Save button.', function(done) {
browser.wait(EC.elementToBeClickable($('#abc')), 5000).then(function(){
global.elmCBSave.click().then(function(){
done();
});
});
});

Check only one checkbox and uncheck previous checked checkbox

I wanted that when I change my selection in my checkbox the only selected checkbox will be selected and the previous selected checkbox will be uncheck.
My code is working but i really wanted to select only one checkbox.
In my view.
<center><table></center>
<tr>
<th><center>
List of Names</center></th>
<th colspan="3">
Actions
</th></tr>
<tr ng-repeat="role in roles">
<td>
<label>
<ion-checkbox ng-model="isChecked" ng-
change="format(isChecked,role,$index)"
ng-init="isChecked=false"><div class="wew">
{{role}}
</div></ion-checkbox>
</label>
</td>
<td>
<button ng-hide="!isChecked" ng-click="present()">P </button> </td>
<td>
<button ng-hide="!isChecked" ng-click="late()">L</button></td>
<td><button ng-hide="!isChecked" ng-click="absentss()">A</button></td>
<td><button ng-hide="!isChecked" ng-click="delete()">D</button></td>
</tr> </table>
And I think in my controller is the part where i need to change my codes to achieved the correct result.
$scope.isChecked = false;
$scope.selected = [];
$scope.format = function (isChecked, role, index) {
if (isChecked==true) {
$scope.selected.push(role);
}
else {
var _index = $scope.selected.indexOf(role);
$scope.selected.splice(_index, 1);
}
var students = $scope.selected;
console.log(students);
for( var s=0; s<students.length; s++) {
$scope.stud = [
students[s]
]
};
Thank you in advanced! I hope that someone can help in this matter.
Checkboxes are for multiple selections within a group.
Use radio buttons instead.
Example With AngularJs
This is way you can also implement.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('app', []).controller('appc', ['$scope',
function($scope) {
$scope.selected = 'other'; //default selection
}
]);
</script>
</head>
<body ng-app="app" ng-controller="appc">
<label>SELECTED: {{selected}}</label>
<div>
<input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
<br>
<input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
<br>
<input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
</div>
</body>
</html>

How to render content in Magento 2 modal popup on frontend checkout page

I have already implemented a popup modal on Shipping page of M2 checkout, which is triggered when a checkbox is clicked. This is my code for the html template file which is view/frontend/web/template/checkout/shipping/gift-wrapper.html
<td class="col col-method">
<input type="checkbox" class="action action-update" data-bind="click: showFormPopUp" />
</td>
Here is my js code for it.
return Component.extend({
defaults: {
template: 'Magenest_Wrapper/checkout/shipping/gift-wrapper'
},
initialize: function () {
var self = this;
this._super();
},
showFormPopUp : function() {
options.buttons = [
{
text: $t('Cancel'),
class: 'action secondary action-hide-popup',
click: function () {
this.closeModal();
}
}
];
var popup = modal(options, $('#popup-modal'));
$('#popup-modal').modal('openModal');
}
});
Now the modal window is obviously empty.
I have a collection of products. What is the solution to show them on
the modal window?

Prototype focusFirstElement() causes form to 'disappear' in IE

Strange bug I'm getting. I have a login form that is hidden by default, once a user clicks on an observed element, the element containing the form slides down (using Effect.BlidnDown in Scriptaculous)
Here is the function, which is part of the 'Interface' object:
revealLoginForm: function() {
$('a_login').blur();
if (!$('hform').visible()) {
Effect.BlindDown('hform', {
duration: 0.4,
afterFinish: function() {
$('f_login').focusFirstElement();
}
});
} else {
$('f_login').focusFirstElement();
}
},
The event observation:
Event.observe('a_login', 'click', Interface.revealLoginForm);
And the HTML:
<a id='a_login' href='javascript:void(0);'>Login to My Account</a>
....
<div id='hform' style='display:none;'>
<form id='f_login' action='...' method='post' name='sidelogin'>
<table cellspacing='0' class='login'>
<tr>
<th>Login ID:</th><td><input style='padding:2px;' type='text' size='18' name='enc_loginname' /></td>
</tr>
<tr>
<th>Password:</th><td><input style='padding:2px;' type='password' size='18' name='enc_password' /></td>
</tr>
<tr>
<th></th><td><input type='submit' class='submit' value='Login »' /></td>
</tr>
</table>
</form>
</div>
If I disable the $('f_login').focusFirstElement(); command in revealLoginForm(), the form does not disappear. What's strange is, the other call to this function does not adversely affect the element, it only seems to happen when called within the afterFinish callback to the Effect.BlindDown function.
Any ideas? It would be nice to have the first element of this form selected once the form has appeared. This works fine in Firefox.. it's just IE (Im using IE7) that's causing problems (go figure...)