Bigcommerce Edit PayPal Button & Extend Link Area - html

We are using PayPal Express to quick checkout on the cart level. We would like to add "another" button that says PayPal Credit but has the same target with the original PayPal Express button. Extending clickable area of the first button would resolve the issue. Or could it be possible to make the 2nd button have the same target?
<script type="text/javascript">
lang.InvalidQuantity = "%%LNG_InvalidQuantity%%";
lang.Calculating = "%%LNG_Calculating%%"
lang.CalculateShipping = "%%LNG_CalculateShipping%%"
lang.ChooseShippingMethod = "%%LNG_ChooseShippingMethod%%"
lang.CartRemoveConfirm = '%%LNG_CartRemoveConfirm%%';
lang.ConfirmRemoveGiftWrapping = '%%LNG_ConfirmRemoveGiftWrapping%%';
lang.SelectCountry = '%%LNG_ChooseShippingCountry%%';
lang.SelectState = '%%LNG_ChooseShippingState%%';
lang.EnterZip = '%%LNG_EnterShippingZip%%';
</script>
<script src="%%GLOBAL_CdnAppPath%%/javascript/jquery/plugins/imodal/imodal.js?%%GLOBAL_JSCacheToken%%" type="text/javascript"></script>
<div class="Block Moveable Panel" id="CartContent_modified">
<div class="BlockContent">
<div style="display: %%GLOBAL_HideShoppingCartGrid%%" id="CartFormContainer">
<form enctype="multipart/form-data" onsubmit="return Cart.ValidateQuantityForm(this);" action="/cart.php" name="cartForm" id="cartForm" method="post">
<input type="hidden" name="action" value="update" />
<table class="CartContents Stylize General" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="HL-CartItems" colspan="2">%%LNG_CartItems%%</th>
<th class="HL-Qty">%%LNG_Qty%%</th>
<th class="HL-Remove"> </th>
<th class="HL-ItemPrice">%%LNG_ItemPrice%%</th>
<th class="HL-Total">%%LNG_HC_total%%</th>
</tr>
</thead>
<tfoot>
<tr class="SubTotal">
<td colspan="6"><div>%%LNG_Subtotal%% <em class="ProductPrice">%%GLOBAL_CartItemTotal%%</em></div></td>
</tr>
<tr class="SubTotal" style="%%GLOBAL_HideGiftWrappingTotal%%">
<td colspan="6"><div>%%LNG_GiftWrapping%% <em class="ProductPrice">%%GLOBAL_GiftWrappingTotal%%</em></div></td>
</tr>
%%SNIPPET_NormalCoupons%%
<tr class="SubTotal" style="%%GLOBAL_HideDiscountAmount%%">
<td colspan="6"><div>%%LNG_Discount%% <em class="ProductPrice">%%GLOBAL_DiscountAmount%%</em></div></td>
</tr>
<tr class="SubTotal" style="display:none;">
<td colspan="6" class="HL-ShoppingCartShippingEstimator">
<div>
<em>%%LNG_CalculateShippingHandling%%</em>
<div class="EstimateShipping" style="display: none;">
<div class="EstimatedShippingMethods" style="display: none;">
<div class="ShippingMethodList">
</div>
</div>
<dl class="hideThis">
<dt><span class="Required">*</span> %%LNG_Country%%:</dt>
<dd>
<select name="shippingZoneCountry" id="shippingZoneCountry" onchange="Cart.ToggleShippingEstimateCountry();">
%%GLOBAL_ShippingCountryList%%
</select>
</dd>
<dt><span class="Required" id="shippingZoneStateRequired">*</span> %%LNG_StateProvince%%:</dt>
<dd>
<select style="display: %%GLOBAL_ShippingHideStateList%%" name="shippingZoneState" id="shippingZoneState">
%%GLOBAL_ShippingStateList%%
</select>
<input style="display: %%GLOBAL_ShippingHideStateBox%%" type="text" class="Textbox" name="shippingZoneStateName" id="shippingZoneStateName" value="%%GLOBAL_AddressState%%" />
</dd>
<dt><span class="Required">*</span> %%LNG_ZipPostcode%%:</dt>
<dd><input type="text" class="Textbox" name="shippingZoneZip" id="shippingZoneZip" value="%%GLOBAL_ShippingZip%%" /></dd>
<!--dd class="Submit EstimateShippingButtons">
<input type="button" onclick="Cart.EstimateShipping();" value="%%LNG_CalculateShipping%%" class="btn alt" />
<div>%%LNG_Cancel%%</div>
</dd-->
</dl>
<p class="Submit EstimateShippingButtons">
<span>%%LNG_Cancel%% %%LNG_or%% </span><input type="button" onclick="Cart.EstimateShipping();" value="%%LNG_CalculateShipping%%" />
</p>
</div>
</div>
</td>
</tr>
<tr style="display:%%GLOBAL_HideShoppingCartShippingCost%%" class="SubTotal ShippingRow">
<td colspan="6"><div>%%LNG_Shipping%% (%%GLOBAL_ShippingProvider%%) <em class="ProductPrice">%%GLOBAL_ShippingCost%%</em></div></td>
</tr>
%%SNIPPET_FreeShippingCoupons%%
<tr style="display: %%GLOBAL_HideShoppingCartHandlingCost%%" class="SubTotal">
<td colspan="6"><div>%%LNG_Handling%% <em class="ProductPrice">%%GLOBAL_HandlingCost%%</em></div></td>
</tr>
%%GLOBAL_Taxes%%
%%SNIPPET_GiftCertificates%%
<tr class="SubTotal gtotal">
<td colspan="6"><div>%%LNG_GrandTotal%% <em class="ProductPrice">%%GLOBAL_CartTotal%%</em></div></td>
</tr>
%%GLOBAL_InclusiveTaxes%%
</tfoot>
<tbody>
%%SNIPPET_CartItems%%
</tbody>
</table>
<div class="KeepShopping">
Continue shopping
</div>
<div class="updateCart">
<input class="btn" type="submit" value="Update Cart" title="%%LNG_Update%%" />
</div>
</form>
<div class="ProceedToCheckout">
<!--div class="CheckoutButton" style="%%GLOBAL_HideCheckoutButton%%">
<a class="btn" href="%%GLOBAL_CheckoutLink%%" onclick="" title="%%LNG_CheckoutButtonTitle%%">%%LNG_HC_proceedcheckout%%</a>
</div-->
<div class="CheckoutButton" style="%%GLOBAL_HideCheckoutButton%%">
<a href="%%GLOBAL_CheckoutLink%%" onclick="%%GLOBAL_OptimizerLinkFunction%%" title="%%LNG_CheckoutButtonTitle%%">
%%GLOBAL_CartCheckoutButtonOptimizerScriptTag%%
<img src="https://cdn2.bigcommerce.com/server5400/vpslo31z/templates/__custom/images/blue/checkout.gif" alt="" />
%%GLOBAL_CartCheckoutButtonOptimizerNoScriptTag%%
</a>
</div>
<div class="AlternativeCheckout" style="%%GLOBAL_HideMultipleAddressShipping%%">
<p class="PTB20"><span style="%%GLOBAL_HideMultipleAddressShippingOr%%">-- %%LNG_or%% --</span><strong>%%LNG_CheckoutWithMultipleAddresses%%</strong></p>
</div>
%%GLOBAL_AdditionalCheckoutButtons%%
<div class="AlternativeCheckout">
<img src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/ppcredit_MD_BNPOT_1x.png" alt="PayPal Credit" /> </div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div style="display: %%GLOBAL_HideShoppingCartEmptyMessage%%">
<p class="InfoMessage">
%%LNG_NoItemsInCart%%
</p>
%%LNG_EmptyCartInfo%%
<br>
%%LNG_ContinueShopping%% %%LNG_OnThe%% %%GLOBAL_StoreName%% %%LNG_EmptyHomePage%%
</div>
</div>
</div>
<script type="text/javascript">
if (location.pathname !== '/checkout.php'){
$('.EstimateShippingLink').click();
$('#shippingZoneCountry').val(226);
$('#shippingZoneState').val(51);
$('#shippingZoneZip').val(19132);
/*
$('#shippingZoneCountry').change(function() {
$('#shippingZoneState').val(51);
$('#shippingZoneState').change(function(){
$('#shippingZoneZip').val(19132);
});
});*/
$('.Submit.EstimateShippingButtons > input').click();
$('.hideThis').hide();
$('.Submit.EstimateShippingButtons').hide();
}
$(document).ready(function(){
//var labelForFixedShipping= $("div.shippingquote label").filter(function() { return ($(this).text().trim() === "Fixed Shipping") });
//$("#shippingLabel").text($("#shippingLabel").text().replace("Fixed Shipping", "Your Shipping Cost"));
//alert($('#shippingLabel').html());
//alert(labelForFixedShipping);
//alert("Text");
//alert(labelForFixedShipping.text());
//labelForFixedShipping.text("Your Shipping Cost");
var ht = $("label[for = shippingLabel]").text();
//alert(ht);
});
</script>
<script type="text/javascript">
$(function() {
var cartSubtotal = parseFloat("%%GLOBAL_CartItemTotal%%".replace(/[$,]/g, ''));
if (cartSubtotal > 50) {
$("<a href='http:/yourdomain.com/cart.php?action=add&product_id=8122'></a>").click();
}
});
</script>
<script>
if (location.pathname !== '/checkout.php'){
$(document).ajaxComplete(function(){
sessionStorage.setItem('totals', $('table.CartContents>tfoot').html());
});
}
</script>

Related

Create a show all button to show hidden row

My code is like this: when you check the 'hide' column, the whole row is hidden. I also have a 'Show All' checkbox. When I check it, all rows (including the hidden ones) are shown. But when I uncheck it, all rows disappear. How can I make it so only the hidden rows disappear when I uncheck 'Show All', and the other rows still remain visible?
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall" ng-hide="hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function ($scope, $window) {
$scope.fruitnameDetail = [
{
"fruitname": "Banana"
},
{
"fruitname": "Mango"
},
{
"fruitname": "Orange"
}
];
$scope.addnew = function () {
var fruitnameDetail = {
fruitname: $scope.mdfruitname
};
$scope.fruitnameDetail.push(fruitnameDetail);
$scope.mdfruitname = '';
};
$scope.removefruitname = function (index) {
var name = $scope.fruitnameDetail[index].fruitname;
if ($window.confirm("Do you want to delete " + name + " ?")) {
$scope.fruitnameDetail.splice(index, 1);
}
};
});
</script>
Do not use ng-show and ng-hide at the same time. Just change a little bit your condition for ng-repeat. Here the example that should work:
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall || !hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>

Additional text boxes return old value, how do I make my textboxes blank?

I have made text boxes for my website using Angular, users have an option to add more information by clicking a button that gives them another group of text boxes to fill in. However, when this happens the new text boxes appear with the previous information I filled in. I want the additional text boxes to be blank as they were with the first set, but I am not sure how to achieve this.
<button type="button" class="close" ng-click="$ctrl.closeInfoModel()">×</button>
<h5 class="title">Add Details</h5>
</div>
<div class="modal-body">
<ng-form name="detailsForm">
<div class="row">
<div class="col-sm-12">
<h5 class="modal-title">Client Details:
<a data-ng-show="!$ctrl.isEditingDetails && !$ctrl.addingAnotherSetOfDetails"
data-ng-click="$ctrl.addingAnotherSetOfDetails = true"><i class="tools-plus fa fa-plus" aria-hidden="true"></i></a>
<span data-ng-show="$ctrl.isEditingDetails || $ctrl.addingAnotherSetOfDetails">
<a title="Save" data-ng-click="$ctrl.saveDetails(detailsForm.$valid)" ><i class="tools-plus fa fa-floppy-o" aria-hidden="true"></i></a>
<a title="Saving" ng-if="$ctrl.isSavingDetails"><i class="tools-plus fa fa-spinner fa-spin" aria-hidden="true"></i></a>
<a title="Cancel" data-ng-click="$ctrl.stopEditingOrAdding()"><i class="tools-plus fa fa-times" aria-hidden="true"></i></a>
</span></h5>
<br>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table" ng-if="$ctrl.clientDetails.length == 0">
<thead>
<tr>
<td><b>Desired Amount</b></td>
<td><b>Credit Limit</b></td>
</tr>
</thead>
<tbody>
<tr>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="desiredAmount" ng-model="$ctrl.inputDesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
<table class="table" ng-if="$ctrl.clientDetails.length > 0">
<thead>
<tr>
<td><b>Desired Amount</b></td>
<td><b>Credit Limit</b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="criteria in $ctrl.clientDetails">
<td ng-if="!$ctrl.isEditingDetails">{{criteria.desiredAmount}}</td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="desiredAmount" ng-model="$ctrl.inputdesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td ng-if="!$ctrl.isEditingDetails">{{criteria.CreditLimitLimit}}</td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
<table class="table" ng-if="$ctrl.addingAnotherSetOfDetails">
<thead>
</thead>
<tbody>
<tr>
<td>
<input name="desiredAmount" ng-model="$ctrl.inputdesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td>
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
</div>
</div>
Component file
All references to the function that adds text boxes are below, I set addingAnotherSetOfDetails to false in the component controller
public stopEditingOrAdding(): void {
this.isEditingDetails = false;
this.addingAnotherSetOfDetails = false;
}
public saveDetailsForClients(isFormValid: boolean): void {
if (!isFormValid) {
return;
}
let clientDetails = new app.domain.detailsCriteriaModel(this.inputDesiredAmount, this.inputCreditLimit);
this.detailsCriteria.push(clientDetails);
this.isEditingDetails = false;
this.addingAnotherSetOfDetails = false;
}

Mandatory attribute not working in html webapp

I am using HTML webapp form and the fields are selected as a mandatory (required) but I am able to submit the data without updating required fields.
Below are my detailed HTML and gs script, help me to fix the concern
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["Project Name"] = $("#ProjectName").val();
jsonObj["updateBtn"] = $(btnClicked).text();
google.script.run.withSuccessHandler(afterSaving).saveDate(jsonObj);
}
function afterSaving() {
alert("Thanks, Your response has been recorded");
$("button").attr("disabled", false);
}
</script>
<form action="" method="get">
<div class="container">
<table class="table table-bordered" width="" style="width:54%">
<thead>
<tr class="one">
<th width="33%">
Project Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="form-group txt">
<input name="" type="text" placeholder="" class="form-control input-md" id="ProjectName" required="required">
</div></td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="col-md-2 col-md-offset-5">
<div class="form-group">
<button style="display:block;width:100%" id="updateBtn" name="singlebutton" class="btn btn-success" type="submit" onclick="submitForm()" >Save</button>
</div>
</div>
</div>
You need to remove onclick="submitForm()" and instead add onsubmit="submitForm()" in the form tag.
<form onsubmit="return submitForm()">
Also, add return false; to submitForm function.

expanding and collapsing table rows using angularjs ng-repeat -start and ng-repeat-end

i have one issue can anyone help me please...
i have a table in that table i have four users. and i have two icons(one is for expanding and another is for collapsing table rows data at time(all)) above table when i clicked on expand icon the data in table expanded and collapsed. so until this fine to me . now am going to expand particular row of table by clicking arrow(actually present in tr) it expanded particular row and collapsed that particular row. then this time if a clicked expand and collapse icons(expand all and collapse all). then expanding and collapsing are not working.
Here am using ng-repeat-start and ng-repeat-end.
<div class="comprehensiveINDiv" ng-show="visibleCarConferenceList">
<div class="top-bg-expand" >
<div class="col-md-5 color-blue">
<h1 class="main-heading1 ">Care Conference
<span class="expand-btns">
<a><i class="fa fa-compress color-blue" aria-hidden="true" ng-click="expanded = true"></i></a>
|
<a><i class="fa fa-expand" aria-hidden="true" ng-click="loadAllcareplans(); expanded = !expanded"></i></a>
</span>
</h1>
</div>
<div class="col-md-3 select-pan1 select-inner-pan1 careconfhed">
<label>Status: </label>
<select ng-model="filterOpt.opt"
ng-options="item.name for item in filterOpts.options"
ng-change="getCareConferenceList();resetPage();">
</select>
</div>
<div class="col-md-4 ">
<sm-range-picker-input class="margn0" fname="Range" label="Range"
form="test" ng-model="vm.rangeSelected" flex="100"
format="DD-MMM-YYYY" divider="To" week-start-day="Monday"
on-range-select="rangeSelected(range)"
ng-change="getCareConferenceList();">
</sm-range-picker-input>
</div>
</div>
<div ng-show="noConfData" class="margnL15">NO RECORDS FOUND</div>
<div>
<button type="button" class="btn btn-info btn-sm margnL15"
id="addnew_btn" ng-click="addNewconference();">ADD NEW</button>
</div>
<div ng-show="confGrid">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-data3 tablestyle" id="tbl1">
<thead>
<tr>
<th></th>
<th> Date / Time </th>
<th>Reason</th>
<th>Status </th>
<th>Action</th>
<!--<th>time</th>-->
</tr>
</thead>
<tbody>
<tr ng-show="noConfData"><td colspan="4" >NO RECORDS FOUND</td></tr>
<tr ng-repeat-start="careconf in residentCareConferenceList" class="md-table-content-row class_{{careconf.CareConferenceID}}">
<td><a ng-click="expanded = !expanded"><i class="fa fa-angle-right" aria-hidden="true"></i></a></td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.CareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.ReasonDescription}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.careconferencestatus.CareConferenceStatusDescription}}</td>
<td><span class="fa fa-pencil" ng-click="EditCareConference(careconf.CareConferenceID);$event.stopPropagation();"></span></td>
<!--<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.TotalTime}}</td>-->
</tr>
<tr ng-repeat-end ng-class="{'hide' : expanded}">
<td colspan="5" style="width: 100%; border:none !important; padding-left:20px;">
<div class="col-md-12 scrolldata">
<div class="col-md-12 ">
<div class="col-md-12 residance-data-text">
<p>Facility :{{careconf.facilitybase.FacilityName }}</p>
<p> Resident : {{currentResident.personbase.FullName}}</p>
<p> Admitted :{{currentResidentDetails.AdmitReAdmiDischDate | date:'dd/MM/yyyy hh:mm a'}}</p>
<p> Physician : {{residentprovider}}</p>
</div>
</div>
<div class="col-md-12" id="table">
<div class="col-md-12">
<!-- Table one -->
<p> Interdisciplinary team members involved in this Resident's Care Planning since last Care Conference ({{careconf.LastCareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}) :</p>
<div class="tablestyledit">
<table class="table">
<tr>
<th width="50%" class="bdr-table">Name </th>
<th width="50%" class="bdr-table">Credentials </th>
</tr>
<tr ng-repeat="teamMember in careconf.teamMembers">
<td class="bdr-table">{{teamMember.ParticipantName}}</td>
<td class="bdr-table">{{teamMember.ParticipantRole}}</td>
</tr>
</table>
</div>
<div class="col-md-12" style="padding-top:0px;">
<div class="row">
<div class="md-form">
<p style="margin:0px;">Care Conference Summary</p>
<div class="empty-text">{{careconf.CareConferenceSummary}}</div>
</div>
</div>
</div>
<!--- /Table one -->
<!-- Table two -->
<div class="col-md-12" style="padding:0px;">
<p style="margin:0px; padding-top:10px;">Care Conference Participants :</p>
<div class="tablestyledit">
<table class="table ">
<tr>
<th width="50%" class="bdr-table">IDT Participant Name</th>
<th width="25%" class="bdr-table">Credentials</th>
<th width="25%" class="bdr-table">In Person</th>
</tr>
<tr ng-repeat="participant in careconf.participants">
<td class="bdr-table">{{participant.ParticipantName}}</td>
<td class="bdr-table">{{participant.ParticipantRole}}</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="participant.IsInPerson" disabled>
</fieldset>
</td>
</tr>
</table>
</div>
</div>
<!--/ Table two -->
<!-- Table three -->
<div class="col-md-12" style="padding:0px;">
<p style="margin:0px; padding-top:10px;">Family/Resident Attendance : </p>
<div class="tablestyledit">
<table class="table table-data-sub ">
<tr>
<th class="bdr-table">Name of person Invited</th>
<th class="bdr-table">Relationship</th>
<th class="bdr-table">Attended</th>
<th class="bdr-table">In Person</th>
</tr>
<tr ng-repeat="familyMember in careconf.familyMembers">
<td class="bdr-table">{{familyMember.ParticipantName}}</td>
<td class="bdr-table">{{familyMember.Relationship}}</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="familyMember.HasAttended" disabled>
</fieldset>
</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="familyMember.IsInPerson" disabled>
</fieldset>
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-12" style="margin-left:-15px;margin-bottom:8px;">
<p> Care Conference Date : {{careconf.CareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}</p>
<p>Signed by:</p>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div flex layout="column" class="pagi-nation">
<div ng-show="confTotal > 1" flex layout="column">
<section layout="row" layout-padding="">
<div class="col-md-5 col-xs-12">Showing Page <strong>{{confPage}}</strong></div>
<div class="col-md-7 col-xs-12">
<cl-paging id="confPage" flex cl-pages="confTotal" , cl-steps="3" , cl-page-changed="loadConfPages.onPageChanged()" , cl-align="center center"
, cl-current-page="Paging.currentPage"></cl-paging>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-show="visibleCarConferenceAdd">
<div ng-include="'views/doctor/addCareConference.html'"></div>
</div>
</div>
and my controller code
$scope.loadAllcareplans = function () {
$scope.expanded = true;
}
and finally am so sorry for my stupid english. and check my functinality (expanded, $scope.loadAllcareplans() and icons at careconference foe expanding and collapsing all table data )
Check this fiddle
The content is not what you provided.
But the logic will be this
https://jsfiddle.net/athulnair/wkz5oq9z/
$scope.collapseAll = function() {
$scope.data.forEach(function(item) {
item.isCollapsed = false;
})
}
Rather than using the above ng-click function in the tag you could go with javascript and adding/removing classes dynamically.I have used ui-bootstrap and glyphicon. Follow the below code.
HTML:
<a data-toggle="collapse" data-target="#test"><i class="test_icon glyphicon glyphicon-collapse-down"></i><h4 class="header"> Test Class </h4></a>
JavaScript
$('#test').on('hidden.bs.collapse', function () {
$(".test_icon").removeClass("glyphicon-collapse-down").addClass("glyphicon-collapse-up");
});
$('#test').on('shown.bs.collapse', function () {
$(".test_icon").removeClass("glyphicon-collapse-up").addClass("glyphicon-collapse-down");
});

Selenium modal xpath

I need to select this input ...
(name="BtnNext" value="İLERİ" class="NavigationButtonNextLightBox ")
... with xpath after this modal popup. I cant use .FindByClass because there are same classes in the main page, but I need open which in (id="__LIGHTBOX__") modal;
<div style="overflow: visible; padding: 0px; width: auto; min-height: 143px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content" id="__LIGHTBOX__">
<div class="__BOX__">
<input name="BtnClose" class="BoxButtonClose" type="button">
<div>
<img src="/Content/themes/base/images/popup-bg-top.png">
</div>
<div class="popupCapsule clearFix">
<form action="/BillPayment/TransferInfo" method="post">
<div class="banner clearFix">
<h1 class="pageTitle">Fatura Ödeme</h1>
</div>
<div class="relatedPeopleContainer clearFix">
<div class="topDiv">
</div>
<div class="relatedPeople clearFix">
<table>
<tbody>
<tr>
<td class="t1">
<img src="Content/banks/bank205.png">
</td>
<td class="t2 SenderReceiverSubmit" rowspan="2" style="cursor: pointer;">
<div class="arrow">
</div>
</td>
<td class="t3">
<img src="Content/company/Turkcell.png">
</td>
</tr>
<tr>
<td class="t4">
<div class="info right">
<h2 class="NavigationButtonIndex" style="cursor: pointer;" title="Hesabınızı değiştirmek için tıklayınız.">HESABIM
<img src="/Content/themes/base/images/change-account.png" alt="" style="height: 20px; vertical-align: text-bottom;">
</h2>
<p class="first">
Beşyüzevler Şube
</p>
<p>
Cari Hesap
</p>
<p>
10136046-1
</p>
<p>
1.256,51 TL
</p>
</div>
</td>
<td class="t6">
<div class="info left">
<h2>TURKCELL
</h2>
<p class="first">
1774862559
</p>
<p>
5303003816
</p>
<p>
23,40 TL
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="bottomDiv">
</div>
</div>
<div class="amountEntry clearFix">
<table class="moneyEditorTable ">
<tbody>
<tr>
<td>
<input class="integerinput " data-val="true" data-val-regex="The field Integer must match the regular expression '[0-9.,]{1,11}'." data-val-regex-pattern="[0-9.,]{1,11}" datavalrequired="" disabled="disabled" id="IntegerInput" name="Amount.Integer" onkeyup=";" value="23" type="text"></td>
<td class="spanTd">
<span class="currency ">,</span>
</td>
<td>
<input maxlength="2" class="decimalinput " data-val="true" data-val-range="The field Decimal must be between 0 and 99." data-val-range-max="99" data-val-range-min="0" datavalrequired="" disabled="disabled" id="DecimalInput" name="Amount.Decimal" onkeypress="return BOA.Web.Validation.NumericControl(event);" onkeyup=";BOA.Web.Validation.DecimalPoint(event, $(this));" onpaste="BOA.Web.Validation.NumericEditorPaste(event, $(this));" value="40" type="text"></td>
<td class="spanTd">
<span class="currency ">TL</span>
</td>
</tr>
</tbody>
</table>
<input id="Amount_FECCode" name="Amount.FECCode" value="TL" type="hidden">
<div class="Error clearFix">
<span class="field-validation-valid" data-valmsg-for="Amount" data-valmsg-replace="true"></span>
</div>
</div>
<table class="popupButtonArea">
<tbody>
<tr>
<td class="left">
<input name="BtnPrev" value="GERİ" class="NavigationButtonPrev " type="button">
</td>
<td class="right">
<input name="BtnNext" value="İLERİ" class="NavigationButtonNextLightBox " type="button">
<input name="FromStep" value="TransferInfo" type="hidden">
</td>
</tr>
</tbody>
</table>
<input name="__RequestVerificationToken" value="jzI4c0v-PPC60xzaY8B2FDiCLYmHwCCtQsYv7UbBIMgnBWFeEpJoLLMDgf4LGl24WxhfizGlsqEJdjhywzgNHT785XHRzmwcU2qDyaQfSh6SajD8WKCAEq2L8CejPMJ65QL45A2" type="hidden">
</form>
</div>
<div>
<img src="/Content/themes/base/images/popup-bg-sub.png">
</div>
</div>
</div>
You can try to find the element by the following xpath :
//div[contains(#id, 'LIGHTBOX')]//input[#name='BtnNext' and contains(#class, 'NavigationButtonNextLightBox')]
Above xpath attempt to find a <div> having id contains LIGHTBOX, then from within that <div> get <input> element having name attribute equals BtnNext and class attribute contains NavigationButtonNextLightBox
Not sure am i missing somehting here, but whats stopping you from selecting by name?
WebElement btnNext = driver().findElement(By.name("BtnNext"));