I have too many ck editors(wysiwyg) in single page which are embedded in iframes. How do I switch to frame and send text to it. All frames have same classnames. I am using C#. If you are not able to view the image, let me know. I will send the code
Below is my code:
IWebElement actioninputissue = driver.FindElement(By.XPath(".//iframe[#class='cke_wysiwyg_frame'][1]"));
driver.SwitchTo().Frame(actioninputissue);
actioninputissue.SendKeys("Helllo");
I am attaching the code.
Edit 1
Thanks you so much for your reply!.
code for two ckeditors and I have also attached screenshot
Code<tr id="actionIssueRow" class="Controls">
<th valign="top">
<div id="issueLabel">
</th>
<td colspan="3">
<textarea id="actrpnlIssueInputissue" class="wide_input richtext" name="issue" rows="3" cols="84" style="line-height: 14px; visibility: hidden; display: none;"></textarea>
<div id="cke_actrpnlIssueInputissue" class="cke_1 cke cke_reset cke_chrome cke_editor_actrpnlIssueInputissue cke_ltr cke_browser_gecko" lang="en" aria-labelledby="cke_actrpnlIssueInputissue_arialbl" role="application" dir="ltr" style="width: 500px;">
<span id="cke_actrpnlIssueInputissue_arialbl" class="cke_voice_label">Rich Text Editor, actrpnlIssueInputissue</span>
<div class="cke_inner cke_reset" role="presentation">
<span id="cke_1_top" class="cke_top cke_reset_all" style="height: auto; -moz-user-select: none;" role="presentation">
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 170px;">
<span id="cke_52" class="cke_voice_label">Press ALT 0 for help</span>
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" src="" style="width: 100%; height: 100%;" title="Rich Text Editor, actrpnlIssueInputissue" aria-describedby="cke_52" tabindex="0" allowtransparency="true">
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="true">
<br _moz_editor_bogus_node="TRUE">
</body>
</html>
</iframe>
</div>
<span id="cke_1_bottom" class="cke_bottom cke_reset_all" role="presentation" style="-moz-user-select: none;">
<span id="cke_1_resizer" class="cke_resizer cke_resizer_ltr" onmousedown="CKEDITOR.tools.callFunction(0, event)" title="Resize">◢</span>
</span>
</div>
</div>
<input id="actrpnlIssueInputissue_txt" type="hidden" value="" name="issue_txt">
</td>
</tr>
<tr class="Controls">
<th valign="top"> </th>
<td colspan="4"> </td>
</tr>
<tr class="Controls">
<th valign="top">
<td colspan="4">
<textarea id="actrpnlActionDescriptionInputactn" class="wide_input richtext" name="actn" rows="3" cols="84" style="line-height: 14px; visibility: hidden; display: none;"></textarea>
<div id="cke_actrpnlActionDescriptionInputactn" class="cke_2 cke cke_reset cke_chrome cke_editor_actrpnlActionDescriptionInputactn cke_ltr cke_browser_gecko" lang="en" aria-labelledby="cke_actrpnlActionDescriptionInputactn_arialbl" role="application" dir="ltr" style="width: 500px;">
<span id="cke_actrpnlActionDescriptionInputactn_arialbl" class="cke_voice_label">Rich Text Editor, actrpnlActionDescriptionInputactn</span>
<div class="cke_inner cke_reset" role="presentation">
<span id="cke_2_top" class="cke_top cke_reset_all" style="height: auto; -moz-user-select: none;" role="presentation">
<div id="cke_2_contents" class="cke_contents cke_reset" role="presentation" style="height: 170px;">
<span id="cke_92" class="cke_voice_label">Press ALT 0 for help</span>
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" src="" style="width: 100%; height: 100%;" title="Rich Text Editor, actrpnlActionDescriptionInputactn" aria-describedby="cke_92" tabindex="0" allowtransparency="true">
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="true">
<p>
</body>
</html>
</iframe>
</div>
<span id="cke_2_bottom" class="cke_bottom cke_reset_all" role="presentation" style="-moz-user-select: none;">
</div>
</div>
<input id="actrpnlActionDescriptionInputactn_txt" type="hidden" value="" name="actn_txt">
</td>
Related
I'm not too familiar with Angular; I'm trying to use a controller and keep getting this error:
Error: [$controller:ctrlreg] The controller with the name 'MyControllerTest' is not registered.
This is what I put in the html file:
<script type="text/javascript">
var app = angular.module('myAppTest', []);
app.controller('MyControllerTest', function($scope) {
$scope.message = 'Test Message';
});
</script>
<div ng-app="myAppTest">
<div ng-controller="MyControllerTest">
{{message}}
</div>
</div>
I don't have full access to the entire system, I can either edit the html file or add code to the header tag. I tried moving the script section to the header tag with the same result. The site is using AngularJS v1.8.2 Any help would be appreciated!
The entire HTML snippet I'm trying to add this to is:
<style>
.product-details-page {
overflow: auto;
margin-left: 0 !important;
}
.product-details-page .modalContent {
height:auto;
}
#media only screen and (max-width : 986px) {
.product-details-page-image img, product-details-page-content {
width: 100%;
}
.product-details-page {
width:auto;
}
}
</style>
<div class="{{modalClass}} product-details-page" ng-cts-product-page-view="PageView_ProductDetails IncludeOnPage_ProductDetails">
<div class="modal-header product-details-page-header">
<div class="close" ng-show="EnableCloseOrBack()">
<a ng-click='CloseDialog()' href="javascript:" ><span aria-hidden="true" class="icon-cross"></span></a>
</div>
<div class="back" ng-show="(data.IsScreenSizeLimited && data.ConfirmationButtonAction == 2)" ng-show="EnableCloseOrBack()">
<a ng-click="loadKitPage()" href="javascript:" ><span aria-hidden="true" class="icon-arrow-left2"></span></a>
</div>
<div>
<span ng-show="(product!=null && product!=undefined)">{{product._Name}}</span>
<span ng-hide="(product!=null && product!=undefined)">{{getLocalizedString("ProductDetails.ProductUnavailable")}}</span>
</div>
</div>
<div class="modalContent" ng-show="(product!=null && product!=undefined)" ng-style="setProductDetailsHeight(windowHeight)">
<div class="product-details-page-image">
<img ng-src="{{product._DetailImageKey}}" alt="" ng-show="product._DetailImageKey" />
<img src='Images/no-image.png' alt="" ng-hide="product._DetailImageKey" />
</div>
<div class="product-details-page-content">
<div ng-show="product._ShowInventory" class="product-details-inventory">
<span>{{getStringWithVariableData(getLocalizedString("Product.DetailedInventoryCount"),[product._InventoryRemainingDisplay])}}</span>
</div>
<div ng-show="product._ShowPreviewLink" class="product-preview-link">
<span class="label" ng-localize="Shared.Preview"></span>
</div>
<div class="product-details-page-sku">
<span>{{getLocalizedString('Webpart.ProductDisplayItemNo')}}</span><span> {{product._SKU}} </span>
</div>
<div class="product-details-page-description">
<span ng-bind-html-unsafe="product._Description"></span>
</div>
<!-- add product pricing -->
<div ng-show="product._SKU == 'PRO-XXX'">
<!-- gives controller registration error -->
<script type="text/javascript">
var app = angular.module('myAppTest', []);
app.controller('MyControllerTest', function($scope) {
$scope.message = 'Test Message';
});
</script>
<div ng-app = "myAppTest">
<div ng-controller="MyControllerTest">
{{message}}
</div>
</div>
<!-- gives controller registration error -->
<table width="100%" cellpadding="10" cellspacing="0" border="0" ng-show="ShowPricing" class="product-price-matrix">
<thead>
<th><span>Test Quantity</span></th>
<th><span>Test Quantity Pricing</span></th>
</thead>
<tbody>
<tr ng-repeat="price in product.PricingDetails_asArray[0].PricingDetail_asArray">
<td><span> {{price.QtyRange}} </span></td>
<td><span> {{price.FormattedPrice}} </span></td>
</tr>
</tbody>
</table>
</div>
<!-- add product pricing -->
<div class="product-details-page-description">
<span ng-bind-html-unsafe="product._LongDescription"></span>
</div>
<!-- Added for customer 9 for preview links -->
<div ng-show="product._ShowExternalBuyerPreviewLink" class="product-preview-link">
<span class="label" ng-localize="Customer9.ExternalBuyerPreviewMessage"></span>
</div>
<!-- Added for customer 9 for new product alerts -->
<div ng-show="product._ShowIsNew" class="product-details-page-description">
<span ng-localize="Customer9.IsNewBuyerAlert"></span>
</div>
<div class="product-details-page-uom" ng-show="(product._IsSoundToBegin)">
<span ng-show="EnablePricingByUnitOfMeasure && product._UnitsOfMeasure !=undefined && product._UnitsOfMeasure.length>0">{{getLocalizedString("Pricing.OrderUnit")}}:</span>
<span title="{{product._UnitsOfMeasure}}" ng-bind-html-unsafe="product._UnitsOfMeasure"></span>
</div>
<div class="product-details-page-price" ng-show="(EnableRRDCustomization && ShowPricingToBuyer && ShowUnitPrice)">
<span>{{product._UnitPrice}}</span>
</div>
<div class="product-details-page-turn-around" ng-show="product._ShowTurnaround">
<span>{{getLocalizedString('AdHocBottomProductDetail.ProductDetails.TurnAroundTime') + product._Turnaround}}</span>
</div>
<table width="100%" cellpadding="10" cellspacing="0" border="0" ng-show="ShowMatrix" class="product-price-matrix">
<tbody>
<tr>
<td></td>
<td class="product-preview-link"><a ng-click='ResetFiltersAndProductMatrix()' href="javascript:"><span class="label" ng-localize="ManageApprovalSetings.ResetFilters"></span></a></td>
</tr>
<tr ng-repeat="Attribute in Currentproductmatrix">
<td><span> {{Attribute._DisplayName}}:</span></td>
<td><select ng-options="AttributeValue._DisplayName for AttributeValue in Attribute.AttributeValue_asArray | filter : FilterProductMatrix(Attribute.AttributeValue_asArray)" ng-change='DispLayProductMatrix(Attribute.AttributeValue,Attribute)' ng-model="Attribute.AttributeValue"></select></td>
</tr>
<tr ng-show="ShowMatrix && SubAttributes.ShowSubAttribute && ShowSubAttribute(product)">
<td><span>{{SubAttributes.SubAttributeName}}</span></td>
<td>
<input required="required" title="{{SubAttributes.SubAttributeName}}" type="text" ng-validate="{{SubAttributes.Validation}}" id="subAttributeNameValue" maxlength="200" ng-model="SubAttributes.SubAttributeValue">
<span class='validator-hint' id='hintValidatorsubAttributeNameValue' style="display: none;"></span>
</td>
</tr>
</tbody>
</table>
<div ng-show="ShowMatrix" class="product-details-page-description" style="margin-top: 10px;">
<span>{{getLocalizedString('Mobile.OrderLineItem.ProductName')}}:</span><span> {{product.DisplayName}} </span>
</div>
<table style="border:none !important">
<tr ng-show="data.ShowDeliverablesControl(product)">
<td style="border:none !important">
<label ng-localize="Deliverables" style="padding-right: 5px">##Deliverables</label>
</td>
<td style="border:none !important">
<label ng-show="(data.ConfirmationButtonAction==2 && isProductDetailsOpenFromKitToSelect)" style="padding-right: 5px"> : {{SelectedBuyerDelivarable.label}}</label>
<select ng-hide="(data.ConfirmationButtonAction==2 && isProductDetailsOpenFromKitToSelect)" ng-model="SelectedBuyerDelivarable" ng-change="deliverableChange()" ng-options="SelectedBuyerDelivarable.label for SelectedBuyerDelivarable in BuyerDelivarable"></select>
</td>
</tr>
<tr ng-show="ShowQuantityControl(product)">
<td>
<label for="" ng-localize="CatalogItemDetailsControl.Qty">##Qty</label>
</td>
<td>
<ng-quantity-control quantity="product.Quantity" selectedquantity="product.selectedquantity" isdownloadonly="IsDownloadOnly" registervalidationcallback="RegisterChildValidationControlCallbackFunction(CallbackFuncPointer,UniqueRef)"
registerclearquantitycallback="RegisterClearQuantityCallbackFunction(CallbackFuncPointer,UniqueRef)" uniquereference="data.currentProduct._CatalogItemID" onselectedvaluechange="OnProductSelectedQuantityChanged(UniqueIdentifier, Quantity)" includezeroquantity="false"
inventoryremaining="{{product._InventoryRemaining}}" displayerrorsonhover="false" allowbuyertoeditmultiplequantity="product._AllowBuyerToEditQuantity" group="product"></ng-quantity-control>
</td>
</tr>
</table>
<div ng-show="product.ShowReferenceCodes">
<span class="section-header" style="display: block;" ng-localize="Shared.CheckOutRefCode">reference</span></span>
<select ng-model="product.RefrenceCode" style="width: 95%;" id="{{product._CatalogItemID}}ProductDetails" ng-validate="{{product.Validations}}" ng-change="setrefernce(product)"
ng-options="RefrenceCode._Description group by RefrenceCode.group for RefrenceCode in product.ReferenceCodes"></select>
</div>
<div class="product-error-message" ng-hide="product._IsSoundToBegin">
<span title="{{product._CantBeginReason}}">{{getCantBeginReasonMessage(product)}}</span>
</div>
<div class="product-error-message" ng-show="data.isEditingByApprover && product._ApproverEditAllowed != 'true'">
<span>{{product._CantEditReason}}</span>
</div>
<div id="productErrorContainer" class="validation-container" style="display: none;width:100%;margin-top: 10px;margin-bottom: 10px">
<div class="validation-header">
<span class="icon-warning-sign"></span><span class="validaiton-info" ng-localize="inputerror"></span>
</div>
</div>
<table width="100%" cellpadding="10" cellspacing="0" border="0" ng-show="ShowPricing" class="product-price-matrix">
<thead>
<th><span ng-localize="Shared.Quantity"></span></th>
<th><span ng-localize="Webpart.ProductDisplayQuantityPricing"></span></th>
</thead>
<tbody>
<tr ng-repeat="price in product.PricingDetails_asArray[0].PricingDetail_asArray">
<td><span> {{price.QtyRange}} </span></td>
<td><span> {{price.FormattedPrice}} </span></td>
</tr>
</tbody>
</table>
<div ng-show="product._TaxAuthorityUsed">
<small>{{product._TaxAuthorityUsed}}</small>
</div>
</div>
</div>
<div class="modal-footer">
<div class="product-details-page-actions" ng-show="ShowFooter">
<button ng-class="{true:'btn',false:'btn disabled'}[product._IsSoundToBegin=='true']" type='submit' ng-click="openProductDialog('/ProductCustomization',product,0)" ng-hide="IsInCartUpdateMode || IsReadOnlyPunchOutSession">
<span id="" class="ng-binding" ng-hide="product._ProductType=='10'">{{product._BuyNowButtonText}} </span>
<span id="" class="ng-binding" ng-show="product._ProductType=='10'">{{getLocalizedString('Saepio.Design')}} </span>
</button>
<button class="btn btn-secondary" type='submit' ng-click="returnToPrevious()" ng-hide="IsInCartUpdateMode || IsLevelTwoPunchOut" ng-localize="ShoppingCart.ContinueShopping">
##Continue Shopping
</button>
<button ng-class="{true:'btn',false:'btn disabled'}[(data.isEditingByApprover ? (product._ApproverEditAllowed == 'true') : 'true')]" type='submit' ng-click="openProductDialog('/ProductCustomization',product,0)" ng-localize="Shared.Update" ng-show="IsInCartUpdateMode && !IsLevelTwoPunchOut">
<span id="" class="ng-binding" ng-localize="Shared.Update"></span>
</button>
</div>
<div class="product-details-page-actions" ng-hide="ShowFooter">
<button class="btn btn-secondary" type='submit' ng-click="CloseDialog()" ng-localize="Shared.Close" ng-hide="IsLevelTwoPunchOut" >
<span id="" class="ng-binding" ng-localize="Shared.Cancel"></span>
</button>
</div>
</div>
</div>
I want to check if all for loop objects from below model and template have either signed or rejected the record. i.e. can you tell me how to check approve or reject field value for moc.verifiers.all list members?
For instance I have a three verifiers in the record. I want to based on their approve or reject change record status. Could you please give me a hint how I can do it.
Verifier
class Verifier(models.Model):
moc = models.ForeignKey(Moc, related_name='verifiers', on_delete=models.CASCADE, default='1')
verifier_group = models.CharField(max_length=36, blank=True, null=True)
verifier_name = models.ForeignKey(User, blank=True, null=True, on_delete=models.CASCADE,)
verify_due = models.DateField(blank=True, null=True)
approve = models.BooleanField(default=False)
reject = models.BooleanField(default=False)
signoff_date = models.DateField(auto_now_add=True)
note = models.TextField(max_length=256, blank=True)
def __str__(self):
return str(self.id)
Template
{% for obj in moc.verifiers.all %}
<tr style="text-align: center; FONT-SIZE: 7pt; BORDER-TOP: lightgrey 1px solid; HEIGHT: 25px; FONT-FAMILY: Verdana; BORDER-RIGHT: lightgrey 1px solid; BORDER-BOTTOM: lightgrey 1px solid; COLOR: #333333; BORDER-LEFT: lightgrey 1px solid"
valign="middle">
<td>
<form method="post" action="{% url 'delete_verifier' obj.pk %}">
{% csrf_token %}
<a href="{% url 'add_verify_signoff' obj.pk %}" target="_blank" type="button"
class="col-4 btn btn-primary p-1">
<i class="bi bi-pencil-square"></i>
</a>
<button type="button" class="col-4 btn btn-danger p-1" style="color: whitesmoke;" data-bs-toggle="modal"
data-bs-target="#delete-verifier"><i class="bi bi-trash"></i></button>
<!-- Modal -->
<div class="modal fade" id="delete-verifier" data-bs-backdrop="static" data-bs-keyboard="false"
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color: #e6990a; height: 30px;">
<h5 class="modal-title" id="staticBackdropLabel" style="color: whitesmoke;">Notification
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p style="font-size: medium;">Are you sure that you want to delete this verifier?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
</form>
{% endif %}
</td>
<td style="WIDTH: 12%">{{ forloop.counter }}{{ obj.verifier_group }}</td>
<td style="WIDTH: 110px">{{ obj.verifier_name }}</td>
<td style="WIDTH: 110px">{{ obj.verify_due|date:'d M Y' }}</td>
{% if obj.approve %}
<td style="WIDTH: 20px"><input class="form-check-input-bg" type="checkbox" value="{{ obj.approve }}" checked
onclick="return false"></td>
<td style="WIDTH: 20px"><input class="form-check-input-bg" type="checkbox" value="{{ obj.reject }}"
onclick="return false">
{% elif obj.reject %}
<td style="WIDTH: 20px"><input class="form-check-input-bg" type="checkbox" value="{{ obj.approve }}"
onclick="return false"></td>
<td style="WIDTH: 20px"><input class="form-check-input-bg" type="checkbox" value="{{ obj.reject }}" checked
onclick="return false">
</td>
{% else %}
<td style="WIDTH: 20px">
<input class="form-check-input-bg" type="checkbox" value="" disabled>
</td>
<td style="WIDTH: 20px">
<input class="form-check-input-bg" type="checkbox" disabled onclick="return false">
</td>
{% endif %}
<td style="WIDTH: 90px">{{ obj.signoff_date|date:'d M Y'}}</td>
<td style="WIDTH: 200px">{{ obj.verifier_name }}</td>
<td style="WIDTH: 200px; text-align: justify;">{{ obj.note }}</td>
{% empty %}
<td colspan="8" style="WIDTH: 130px">No verifiers assigned yet...
</td>
</tr>
{% endfor %}
I have one table in that am trying to do following functions:
Initially one empty row and add button will be there.
When I click add button after entering details in first row, new row should be added and the first row value also should be displayed.
My code below:
var app = angular
.module("myApp", [])
.controller("myCtrl", function ($scope, $http, $timeout) {
$scope.addContactDetail = function () {
$scope.contactDetails = {
email: $scope.contactDetail.email,
bolId: $scope.contactDetail.billId
};
}
});
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.addbtn{
text-align: center;
background-color: #ededed;
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<table class="table table-striped table-bordered dataTable ">
<thead>
<tr>
<th>Email</th>
<th>B#</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contactDetail in contactDetails">
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="bill"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="bill">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
<tr>
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="bill"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="bill">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
</tbody>
</table>
<div class="addbtn" ng-click="addDetail()">
<span>ADD</span>
</div>
</div>
</body>
When I click add button after entering data in first row, 3 new rows are being added before the first row. What's wrong?
You have 3 new rows added, since you are adding 3 properties to the $scope.contactDetails object and ngRepeat iterates over them. You simply can have an array of contactDetails and add new item to this array in your addContactDetail method, like this:
var app = angular
.module("myApp", [])
.controller("myCtrl", function ($scope) {
//first row initially empty
$scope.contactDetails = [{}];
$scope.addContactDetail = function () {
//add more empty rows
$scope.contactDetails.push({});
}
});
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.addbtn{
text-align: center;
background-color: #ededed;
padding-top: 10px;
padding-bottom: 10px;
border-style: solid;
border-color: #b3b3b3;
border-width: 0px 1px 1px 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<table class="table table-striped table-bordered dataTable ">
<thead>
<tr>
<th>Email</th>
<th>B#</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contactDetail in contactDetails">
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="{{contactDetail.bolId + 'Bol'}}"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="{{contactDetail.bolId + 'Bol'}}">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
</tbody>
</table>
<div class="addbtn" ng-click="addContactDetail()">
<span>ADD</span>
</div>
</div>
</body>
How do I show different modal data on each subjects displayed?
My Problem: Showing same modal data on each subjects displayed.
My blade view
#section('content')
<!-- Main content -->
<section class="content" style="background-color:#fff; padding-bottom:50px;" id="subjects">
<div class="subjects-content">
<h3>List of Subjects</h3>
<div class="box-body box-self-evaluation" v-show="subjects.length > 0">
<table id="example2" class="table table-hover table-striped sortable">
<thead>
<tr>
<th>Subject Area</th>
<th>Course Title</th>
<th>Failed</th>
<th>View more</th>
</tr>
</thead>
#foreach ($all_subjects as $subject)
<tbody>
<tr>
<td>
<span> {{ $subject->subject_code }}</span>
</td>
<td>
<span> {{ $subject->description }} </span>
</td>
<td>
<span> {{ $subject->grade()->where('grade','F')->count() }} </span>
</td>
<td><span> <div class="btn btn-crimson btn-inline-block" data-toggle="modal" data-target="#myModal">View more info</div> </span></td>
</tr>
</tbody>
#endforeach
</table>
</div>
<div class="confirmation-buttons-self-evaluation">
<div class="btn btn-blueviolet btn-inline-block btn-create">Go to Self-Evaluation Page</div>
</div>
#foreach ($all_subjects as $subject)
<!--MODAL -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- MODAL content -->
<div class="modal-content" style="width:70%; margin:0 auto; margin-top:100px; max-height: calc(100vh - 210px); overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Subject: {{ $subject->subject_code }}</h4>
</div>
<div class="modal-body" style="padding-top:0">
<center>
<table class="table">
<thead>
<th colspan="3" style="text-align:center">List of Disgraceful Students</th>
</thead>
<thead class="failed-header">
<th>Section: <span style="color:#000"> CS <!-- SECTION --> </span></th>
<th>Professor: <span style="color:#000"> John Doe <!-- PROF --> </span></th>
<th>Failed: <span style="color:#000"> 2 <!-- NUMBER OF FAILED SA SECTION --> </span></th>
</thead>
<tbody>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Jashuel </td>
</tr>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Caezar </td>
</tr>
</tbody>
</center>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- /. modal content-->
#endforeach
</section>
#endsection
what is wrong with my code?
how do I solve this?
help me please...
any suggestion or comments are well appreciated thank you!
try to change
data-target="#myModal"
to
data-target="#{{$subject->id}}"
and id in <--modal-->
From
id="myModal"
to
id="{{$subject->id}}"
I am trying to create filters whose layout should match something like below screenshot.
So far I am able to achieve something like the given below screenshot.
Problem is I am unable to evenly distribute items in terms of space as shown in 1st screenshot. Also is it good way to create this kind of layout using table?
Please help me in understanding and creating this layout.
Below is my code
<div class="panel panel-default">
<div class="panel-heading" style="padding: 20px;">
<div class="panel-title pull-left text-label-emphasize" style="margin-top: -8px;"><b>Filter</b></div>
<div class="panel-title pull-right text-label" style="margin-top: -8px;">Reset</div>
</div>
<div class="panel-body">
<table width="100%">
<tr>
<td colspan="1">
<div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
<button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</td>
<td align="left" colspan="1">
<div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
<button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</td>
<td align="left" colspan="1">
<div ng-show="!loadinga">
<input id="autoComplete" type="text" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select='' placeholder="Search Tasks here" typeahead-focus-first="true" ng-disabled="loading" />
</div>
</td>
<td colspan="1" style="padding-right: 200px"></td>
</tr>
<tr ng-show="isAdvancedFilterAvailable" style="padding:2px">
<td colspan="4">
<hr/>
</td>
</tr>
<tr ng-show="isAdvancedFilterAvailable" class="fadein fadeout">
<td align="left" colspan="1">
<div style="margin-right: 5px;margin-left: 5px; margin-top:2px" ng-show="!loadinga">
<input type="checkbox" ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" />
<label for="excludeMinutesStep">Exclude tasks running < </label>
<input id="excludeMinutesStep" type="number" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" /> <b>minutes</b>
</div>
</td>
<td align="left" colspan="1">
<div style="margin-right: 5px; margin-top:2px" ng-show="!loadinga">
<input id="datalabels" type="checkbox" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" />
<label for="datalabels">Show Labels</label>
</div>
</td>
<td colspan="1" style="padding-right: 200px"></td>
<td colspan="1" style="padding-right: 200px"></td>
</tr>
<tr style="padding:2px">
<td colspan="4">
<hr/>
</td>
</tr>
<tr>
<td colspan="4">
<a ng-show="!isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=true">Show Advanced Filters</a>
<a ng-show="isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=false">Hide Advanced Filters</a>
</td>
</tr>
</table>
</div>
</div>
css
.text-label {
color: #aab2bd;
font: 8pt;
}
.text-label-emphasize {
color: #575F64;
}
Bootstrap have tons of weeks dedicated to making all the "style elements" into classes, use them. As blunt as that is, read the documentation when stuck it truly can help you.
Apart from that lets get stuck into your issue.
If you really need to use table in your panel then, the best practice is to place it below or before .panel-body but since we want to maintain responsive mobile first technology for all our future projects, try to avoid it unless you actually want a table for data. Nested columns are the best practice to maintain this.
An example of how to nest any column is to use .row followed by the column size you wish to nest, example below.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
</div>
This would create good breakpoints and allow you to maintain a good UI/UX for your application.
Its important to understand bootstrap doesn't provide all the answers but it's a good style framework to expand from, so we make overriding css changes.
I added a few css overrides to make the borders square, and tried to
maintain your angular.js (you may need to review that)
Completed code with preview hosted on bootply
For the style checkboxes, take a look at Awesome Bootstrap Checkboxes, full documentation by them is available on their github.
Edit (Full width dropdown menu) --
To have the dropdown menu match the width of the button add the following css code to your overriding stylesheet.
.open>.dropdown-menu {
min-width: 100%;
}
Hope I helped ;)