When I have used the array directly (without making it part of the object) then it's working fine as expected,
below is the code,
<span class="tagSpan" v-else-if="row.label == 'Tags'">
<span v-if="aTags.length" v-for="(tag, tagIndex) in aTags" class="input-tag tagSpan">{{tag}}
<span class="close-x" #click="aTags.splice(tagIndex, 1)">❌</span>
</span>
<input v-on:keyup.186="onTagAdd(rowIndex)" type="text" class="form-control form-control-sm col-3" :disabled="!row.editable" v-model="row.value" >
</span>
Now I optimized the code and made aTags is an item of oDyData object and changed the code as below
<span class="tagSpan" v-else-if="row.label == 'Tags'">
<span v-if="oDyData.aTags && oDyData.aTags.length" v-for="(tag, tagIndex) in oDyData.aTags" class="input-tag tagSpan">{{tag}}
<span class="close-x" #click="oDyData.aTags.splice(tagIndex, 1)">❌</span>
</span>
<input v-on:keyup.186="onTagAdd(rowIndex)" type="text" class="form-control form-control-sm col-3" :disabled="!row.editable" v-model="row.value" >
</span>
My function for removing tag '#click="aTags.splice(tagIndex, 1)' is not working as before, It removes the item from the array of the object but UI is not getting updating, I have also cross-checked in vue development components and the array is getting updated but UI is not getting rerendered (updating) until any other change in UI (It got changes if I enter something in input or click somewhere). Below is the screenshot for the same.
How to solve this?
<span class="close-x" #click="aTags.splice(tagIndex, 1)">❌</span>
use #click="oDyData.atags.splice(tagIndex,1)
Because you are trying to reach aTags object which is undefined because you are getting this object from oDyData. O this might be the problem in your code. Also you have to use :key while using v-for property.
Related
I have a custom component in Vue that is a multiple selection. Due to the way this was created, I am having difficulties validating that at least one option has been selected. As currently, the component uses a button, that when toggled opens a popup/dropdown for the user to select some options. But I cannot figure out how to validate this. I have tried replacing this button with other components such as <input> and <select> but nothing seems to work.
This is where I am currently at:
<div
:id="'multiple-selection' + customFieldId"
class="dropdown multiple-selection"
>
<input
type="button"
class="form-control dropdown-toggle"
data-type="Multiple Selection"
:id="customFieldId"
:value="localValues"
:required="required"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
/>
<div
:id="'multiple-selection-options' + customFieldId"
:name="'multiple-selection-options' + customFieldId"
class="dropdown-menu multiple-selection-options-wrapper"
style="/*width: calc(100% - 40px)*/"
>
<a
v-for="fOption in options.split(',').map(option => option.trim())"
class="dropdown-item cursor-pointer three-dots-text"
#click="selectOption(fOption)"
#click.stop
>
<input
class="cursor-pointer"
type="checkbox"
:id="'checkbox-' + fOption + customFieldId"
value="fOption"
:checked="localValues.includes(fOption)"
/>
<span :for="'checkbox-' + fOption + customFieldId">
{{ fOption }}
</span>
</a>
</div>
</div>
My current issues with this implementation are that I am unsure how to display the options in the input when selected, or a None selected placeholder when none are, and then of course, when they click save, the browser popup should tell them that it is a required field.
Is there a way to add price if the client add the custom text (the one inside the Options section when you add the product) in a product? or have I to add it by product combinations (adding a lot of combinations)?
With the input radio I can't control what the user will do and I can't set it as "required" because it must be a free choice.
{block name='product_customization_form'}
<form method="post" action="{$product.url}" enctype="multipart/form-data">
<ul class="clearfix">
{foreach from=$customizations.fields item="field"}
<li class="product-customization-item">
<label> {$field.label}</label>
{if $field.type == 'text'}
<textarea placeholder="{l s='Your message here' d='Shop.Forms.Help'}" class="product-message" maxlength="250" {if $field.required} required {/if} name="{$field.input_name}"></textarea>
<small class="float-xs-right">{l s='250 char. max' d='Shop.Forms.Help'}</small>
{if $field.text !== ''}
<h6 class="customization-message">{l s='Your customization:' d='Shop.Theme.Catalog'}
<label>{$field.text}</label>
</h6>
{/if}
</li>
{/foreach}
</ul>
<div class="clearfix">
<button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">{l s='Save Customization' d='Shop.Theme.Actions'}</button>
</div>
</form>
{/block}
The best way to achieve this would be to have two product combinations:
With custom text (+$0)
Without custom text (+$1.00)
Next, add some custom Javascript code to your product page (the proper way would be via a module) that would do the following:
Check if the customization textarea element is present on the page
Check if it is empty or not
If not, force the combination ID to the right ID (the "with customization" version)
That's it.
That way, the buyer won't have to select any option, they just have to fill a custom text if they would like to and the price will adjust automatically in their shopping cart.
I hope this helps!
I have problem that I don't know how to solve. I need to set to TRUE checkbox declared as:
<li class="consents">
<form class="consents__form">
<div class="checkbox-group">
<input name="5b51a49046e0fb0001bd7b5e" class="checkbox-group__input" id="5b51a49046e0fb0001bd7b5e-SJ7k5D714Q" type="checkbox" value="false">
<label class="checkbox-group__label" for="5b51a49046e0fb0001bd7b5e-SJ7k5D714Q">
<span>...</span>
<span class="checkbox-group__required">*</span>
</label>
</div>
<button class="consents__submit" type="submit">Dalej</button>
</form>
</li>
Because those element are in list I created in python loop that iterates over elements:
consents = self.driver.find_elements_by_css_selector('input.checkbox-group__input')
for consent in consents:
checkbox = consent.find_element_by_css_selector('label.checkbox-group__label::before')
checkbox.click()
But every time I got error:
selenium.common.exceptions.NoSuchElementException
I tried also use xpath, but the effect was the same :(
Sorry! My bad! #Andersson had right and also there was a bug in my code. The loop should looks like bellow:
self.driver.find_element_by_css_selector('li.consents')
consents = self.driver.find_elements_by_css_selector('div.checkbox-group')
for consent in consents:
checkbox = consent.find_element_by_css_selector('label.checkbox-group__label')
checkbox.click()
I can neither recognize the on-off switch nor get its current value (On / Off).
Please help to have a look
try using xpath = "//span[#class='onoffswitch-inner' and contains(#id,'aui')]" but it doesn't help to recognize this button
"id" is a dynamic one, it will be changed once loading the page
Code:
<li id="aui_3_4_0_1_1099">
<div id="aui_3_4_0_1_1098" class="onoffswitch">
<input id="notificationActive" class="onoffswitch-checkbox" type="checkbox" autocomplete="off" checked="checked" name="notificationActive"></input>
<label id="aui_3_4_0_1_1097" class="onoffswitch-label" for="notificationActive">
<span id="aui_3_4_0_1_1096" class="onoffswitch-inner">
::before
::after
</span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</li>
Thanks,
I'm using MVC4 but I imagine this is an issue for anyone using the new Bootstrap 3 version. Since form-control is now width:100% by default, what is the best practice for placing validation messages?
In version 2.x, placing the validation messages in the help-inline span just after the input control worked best to ensure that the message was placed to the right of the control.
But in version 3, they always get pushed to the bottom making all the controls shift down because the validation messages are forced under the control.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
<span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span>
</div>
</div>
I've considered manually setting them on a new column like this (below) but wondering if there was a more acceptable way or a less manual way of dealing with this.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
</div>
<div class="col-lg-5">
<p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p>
</div>
</div>
I wouldn't say there are "best practices" for presenting form validation errors. It's more of a personal design choice.
Depending on how much JS you want to write, you could get a little slick and insert an input group addon which holds an error message in a tooltip icon, like so...
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
Honestly though, I think messages appearing below input fields are fine, as long as they don't disturb page layout and push content down when they appear. (Which is just a matter of having a container that displays block and has a a hard-coded height.)