So I have a dynamic table, where you can add as many services as you want, you can select how many of them and if you want to have a discount for each service
<tr v-if="proceduresList.length" v-for="(procedure,index) in proceduresList" :key="procedure.id">
<td>{{ procedure.name }}</td>
<td>
<input v-model="procedure.amount" type="number" step="any" class="form-control">
</td>
<td>
<input v-model="procedure.discount" type="number" step="any" class="form-control">
</td>
<td class="text-center">
<button class="btn btn-danger btn-sm" #click="removeProcedure(procedure)"><i class="fa fa-trash"></i></button>
</td>
</tr>
I have a validation for the procedures array in my laravel backend whick, In case of errors, returns something like this
errors:Object
description:"The description field is required."
procedures.0.amount:"The procedures.0.amount field is required."
procedures.1.discount:"The procedures.1.discount field is required."
procedures.2.amount:"The procedures.2.amount field is required."
procedures.2.discount:"The procedures.2.discount field is required."
start_date:"The start date field is required."
What I want to do is to display the individual errors for each row, I haven't figured out how.
I tried like this
<input v-model="procedure.amount" type="number" step="any" class="form-control">
<span v-if="attentionForm.errors.procedures[index].amount">{{ attentionForm.errors.procedures[index].amount }}</span>
But when I add a service / procedure to the table, the page goes blank and in the debugger it says:
TypeError
Cannot read properties of undefined (reading '0')
You can use square brackets to access the error property:
<span v-if="attentionForm.errors[`procedures.${index}.amount`]">
{{ attentionForm.errors[`procedures.${index}.amount`] }}
</span>
Example here: https://youtu.be/LILSriakRZA?t=547
Related
I am trying to get all the payments that is been selected through the checkboxes and then update the value in the database by '1' which means its paid. But when I try to get the values of checkbox array I only get 1 data in the array and not all selected. Any help?
View
#foreach($sellerID as $p)
<form action="/paid/{{$p->id}}" method="post" enctype="multipart/form-data">
#csrf
<td><input type="checkbox" name="checked[]" value="{{ $p->id }}"></td>
<td> {{$p->order_number}} </td>
<td>
<input id="commission" type="text" class="form-control" name="commission"
value="{{ $p->commission_value }}" readonly autocomplete="notes" style="width: 15%;" autofocus>
</td>
<td> {{$p->product_name}} </td>
<td>
#if($p->sellet_commission_paid == '0')
<button type="submit" class="btn btn-default" style="background-color:red">
<b><em>UNPAID</b></em>
</button>
#else
<b><em>PAID</b></em>
#endif
<td>
</form>
#endforeach
Controller
$checked = $request->input('checked');
// $checkboxes = $request->checked;
dd($checked);
die();
// dd(checkboxes);
you can put almost anything you like inside a form, but not inside a table. table has a more restricted structure which you must follow.
instead of wrapping table rows with forms, you can wrap the whole table with 1 form and submit all of it and just extract the details you need,
You need to put all input element inside form :
<form action="/route">
<input ...../>
<div>
<input ...../>
</div>
</form>
A form-associated element is, by default, associated with its ancestor form element, but may have a form attribute specified to override this.
If a form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.
Try using a foreach loop.
foreach($request->input('checked') as $check){
[sample variable] = $check;
}
The array will now be stored as $check and you should be able to get each value from the input
I have a HTML table that has a form field that can be updated for each row. In each row, I have created a form and when you change the editable field, a button will appear and you can save the change. This happens remotely using the GRAILS g:submitToRemote tag.
I have some hidden fields that also need to be passed.
When I do the following, none of the fields (the 3 hidden ones, nor the single visible ones) are passed the controller:
<g:form action="updatebaseprice" id="${obj.id}" name="form_${obj.id}">
<tr>
<td>${prod.product.name}</td>
<td class="text-center">${prod.product.type}</td>
<td class="text-center"><g:formatNumber number="${prod.product.unitCost}" type="currency" currencyCode="USD" /></td>
<td class="text-center">
<div class="row collapse">
<div class="small-3 columns">
<span class="prefix radius">$</span>
</div>
<div class="small-9 columns">
<g:field type="text" class="bemt_small_input_field" value="${prod.basePrice}" id="basePrice_${prod.id}" name="basePrice" onchange="Project.updateBasePrice(${prod.id});" maxlength="6"/>
</div>
</div>
</td>
<td class="text-center"><span id="display_recoveryPercent_${prod.id}"><g:formatNumber number="${prod.recoveryPercent}" type="number" minFractionDigits="2" maxFractionDigits="2"/></span>%</td>
<td class="text-center">
<g:hiddenField name="projectProduct" value="${prod.id}"></g:hiddenField>
<g:hiddenField name="unitCost" id="unitCost_${prod.id}" value="${prod.product.unitCost}"></g:hiddenField>
<g:hiddenField name="recoveryPercent" id="recoveryPercent_${prod.id}" value="${prod.recoveryPercent}"></g:hiddenField>
<g:submitToRemote id="save_button_${prod.id}" class="hidden button alert save_unitprice radius" id="save_button_${prod.id}" url="[action: 'updatebaseprice']" onSuccess="Project.saveBasePrice();" value="Save"/>
</td>
</tr></g:form>
Using a println params in the controller, nothing in printed.
When I do the following:
<tr>
<td>${prod.product.name}</td>
<td class="text-center">${prod.product.type}</td>
<td class="text-center"><g:formatNumber number="${prod.product.unitCost}" type="currency" currencyCode="USD" /></td>
<td class="text-center">
<div class="row collapse">
<div class="small-3 columns">
<span class="prefix radius">$</span>
</div>
<div class="small-9 columns">
<g:field type="text" class="bemt_small_input_field" value="${prod.basePrice}" id="basePrice_${prod.id}" name="basePrice" onchange="Project.updateBasePrice(${prod.id});" maxlength="6"/>
</div>
</div>
</td>
<td class="text-center"><span id="display_recoveryPercent_${prod.id}"><g:formatNumber number="${prod.recoveryPercent}" type="number" minFractionDigits="2" maxFractionDigits="2"/></span>%</td>
<td class="text-center">
<g:form action="updatebaseprice" id="${obj.id}" name="form_${obj.id}">
<g:hiddenField name="projectProduct" value="${prod.id}"></g:hiddenField>
<g:hiddenField name="unitCost" id="unitCost_${prod.id}" value="${prod.product.unitCost}"></g:hiddenField>
<g:hiddenField name="recoveryPercent" id="recoveryPercent_${prod.id}" value="${prod.recoveryPercent}"></g:hiddenField>
<g:submitToRemote id="save_button_${prod.id}" class="hidden button alert save_unitprice radius" id="save_button_${prod.id}" url="[action: 'updatebaseprice']" onSuccess="Project.saveBasePrice();" value="Save"/>
</g:form>
</td>
I get the three hidden params (as excepted), but not the input that is above the form (I don't expect that, given it is outside the form). The question I have is, why is the first way not returning anything, when I expect it to return the three hidden and one visible field values as params?
Thanks
The problem is that you're trying to nest a form inside the html table structure.
As you figured out, you can have a form inside a single table cell but trying to put a table row inside a form won't work.
See this question for some more info: Form inside a table
Context
I'm building a list a results where each result can be edited by users.
Approach
Currently I'm repeating the visible <span> tag that displays a result as well as the hidden <input> tag used to edit this same result. See the last <td> :
<tr ng-repeat="entry in paginateDict | orderBy:predicate:reverse" class="form-inline" role="form">
<!-- Edit buttons -->
<td>
<div class="radio">
<label ng-hide="editMode" title="edit">
<input class="sr-only" type="radio" name="edit"
data-ng-click="editMode=true">
<span tooltip="edit" class="fa fa-pencil fa-lg"></span>
</label>
<label ng-show="editMode" title="save">
<input class="sr-only" type="radio" name="edit"
ng-model="editMode" ng-click="submitEntry(true)">
<span tooltip="save" class="fa fa-save fa-lg text-primary"></span>
</label>
<label ng-show="editMode" title="cancel">
<input class="sr-only" type="radio" name="edit"
ng-model="editMode" ng-click="submitEntry(false)">
<span tooltip="undo" class="fa fa-times fa-lg text-danger"></span>
</label>
</div>
</td>
<!-- Content -->
<td ng-show="pyn" lang="cmn-py" data-id="{{entry.cid}}">
<span ng-hide="editMode">{{entry.pyn | pinyin }}</span>
<input type="text" placeholder="{{entry.pyn}}" ng-model="entry.pyn" ng-show="editMode" class="form-control">
</td>
</tr>
Each line as 5 editable columns and each column as two binding (on <span> and <input>).
Question
In order to improve page performance, by reducing the number of binding, is there an Angular way to dynamically create and attach the <input> to a row when the edit radio button is click ?
You can do that using ngIf directive instead of ng-show
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}.
<td ng-show="pyn" lang="cmn-py" data-id="{{entry.cid}}">
<span ng-hide="editMode">{{entry.pyn | pinyin }}</span>
<input type="text" placeholder="{{entry.pyn}}" ng-model="entry.pyn" ng-if="editMode" class="form-control">
</td>
Please be gentle. I'm very new to Ruby and Watir. In general also new to UI automation testing. I'm trying to parse through a table then click a toggle that start/stops an application. The applications that can be turned on and off are not set. They can range from 1 to 'infinite' number applications. I need something that will parse through each row and click the toggle. if the application is started, I need to turn it off and vice-versa. No matter how many rows exist. The row also contains an element in the first column that allows the application to be clicked and brought to another page that gives details about said application. The toggle exists in the last column of the table. Here is the HTML I'm looking at with two applications deployed. It may be something simple that I'm missing. I'm also normally an IT admin that just got thrown into this. Thanks for all the help
<table id="apps_data" class="table table-striped table-bordered table-hover ng-scope">
<thead>
<tr>
</thead>
<tbody>
<tr class="link ng-scope" ng-repeat="app in services.data | orderBy:services.sort">
<td class="ng-binding" ng-click="click_app(app.Id)">Zenoss</td>
<td class="ng-binding deploy-success" ng-class="app.deploymentClass">
<span class="glyphicon glyphicon-ok" ng-class="app.deploymentIcon"></span>
successful
</td>
<td class="ng-binding">default</td>
<td>
<div class="toggle btn-group" data-toggle="buttons">
<label class="ng-binding btn btn-success active" ng-click="clickRunning(app, 'start', servicesService)" ng-class="app.runningClass">
<input class="ng-pristine ng-valid" type="radio" value="1" ng-model="app.Running" name="running0">
started
</label>
<label class="ng-binding btn btn-default off" ng-click="clickRunning(app, 'stop', servicesService)" ng-class="app.notRunningClass">
<input class="ng-pristine ng-valid" type="radio" value="stopped" ng-model="app.Running" name="running0">
</label>
</div>
</td>
</tr>
<tr class="link ng-scope" ng-repeat="app in services.data | orderBy:services.sort">
<td class="ng-binding" ng-click="click_app(app.Id)">Zenoss</td>
<td class="ng-binding deploy-success" ng-class="app.deploymentClass">
<span class="glyphicon glyphicon-ok" ng-class="app.deploymentIcon"></span>
successful
</td>
<td class="ng-binding">default</td>
<td>
<div class="toggle btn-group" data-toggle="buttons">
<label class="ng-binding btn btn-success active" ng-click="clickRunning(app, 'start', servicesService)" ng-class="app.runningClass">
<input class="ng-pristine ng-valid" type="radio" value="1" ng-model="app.Running" name="running1">
started
</label>
<label class="ng-binding btn btn-default off" ng-click="clickRunning(app, 'stop', servicesService)" ng-class="app.notRunningClass">
<input class="ng-pristine ng-valid" type="radio" value="stopped" ng-model="app.Running" name="running1">
</label>
</div>
</td>
</tr>
</tbody>
</table>
I have this so far, but it's just going to the first line.
if ff.div(:class, 'toggle btn-group').label(:class, 'ng-binding btn btn-success active').exist?
ff.div(:class, 'toggle btn-group').label(:class, 'ng-binding btn btn-default off').click; sleep 1
ff.div(:class, 'toggle btn-group').label(:class, 'ng-binding btn btn-default off').exist?
ff.div(:class, 'toggle btn-group').label(:class, 'ng-binding btn btn-default off').click; sleep 1
end
This might do what you want:
apps = browser.table(:id => 'apps_data').tbody.trs
apps.each do |app|
set_radios = app.radios.find_all{ |radio| !radio.set? }
if set_radios.length == 2
# Neither radio button is set, so do nothing?
else
set_radios.first.set
end
end
What this does is:
Gets a collection of all tr elements in the table body. Each tr element is assumed to represent an "app".
Iterates through each row (app):
Counts the number of radio buttons that are not set.
If neither of the 2 radio buttons is set, it does nothing.
If only one unset radio button is found, it is set.
Note that since the 2 radio buttons of the app have the same name attribute value, setting the one radio button will automatically unset the other.
I have a table where I need to find if the checkbox corresponding to a cell is checked or not, see for example, I need to find out if the checkbox id=830 which is a sibling of DeviceHelp is checked or not.
Similarly for element Contact, I will have to check whether checkbox id="72" is checked / unchecked
And I can only rely on the text elements (contact, DeviceHelp, etc) to get the checkboxes state and not the checkbox ids which could change.
<tr class="row active" style="display: table-row;">
<td>
<input id="72" class="rowcheck" type="checkbox" value="true" name="ModesForUi[0].Allow" categoryid="58" disabled="">
<input type="hidden" value="false" name="ModesForUi[0].Allow">
</td>
<td> Administration - Read </td>
<td>
Contact
<input id="ModesForUi_0__ResourceID" type="hidden" value="72" name="ModesForUi[0].ResourceID">
<input id="ModesForUi_0__ModeID" type="hidden" value="12185" name="ModesForUi[0].ModeID">
</td>
<td> Controls access to Search Contacts link and to view contact details page. Navigate to Menu\Advanced\More </td>
</tr>
<tr class="row active" style="display: table-row;">
<td>
<input id="830" class="rowcheck" type="checkbox" value="true" name="ModesForUi[1].Allow" categoryid="58" disabled="">
<input type="hidden" value="false" name="ModesForUi[1].Allow">
</td>
<td> Administration - Read </td>
<td>
DeviceHelp
<input id="ModesForUi_1__ResourceID" type="hidden" value="830" name="ModesForUi[1].ResourceID">
<input id="ModesForUi_1__ModeID" type="hidden" value="12186" name="ModesForUi[1].ModeID">
</td>
<td> Controls access to Help icon displayed next to logout icon and next to the menu. </td>
</tr>
Have tried the following, but I am not getting the checkbox value
"ancestor::td[1]/input[1]/preceding-sibling::td[normalize-space(text())='DeviceHelp']")
And
//tr[position()>1]/td[normalize-space(text())='DeviceHelp*']/parent::td/preceding-sibling::td/input#value
Please xpath experts could you shine some light on what is wrong with the paths above and how to get to the checkbox ?
Thanks!
I think I know what you're trying to get here...
Try this for Device Help:
/root/tr/td[normalize-space(text())='DeviceHelp']/../td[1]/input[1]/#value
And this for Contact:
/root/tr/td[normalize-space(text())='Contact']/../td[1]/input[1]/#value
"root" is just whatever node you're starting from, I added that to test locally, as the XML snippet isn't complete.
EDIT
Try this:
//tr/td[normalize-space(text())='DeviceHelp']/../td[1]/input[1]/#value
//tr/td[normalize-space(text())='Contact']/../td[1]/input[1]/#value