I have a form on my TimesheetPaymentForm component. However I'd like to use a nested component ChecksForm inside the form
<x-cards.body>
<x-forms.row
wire: model="user.full_name"
errorName="user.full_name"
name="user.full_name"
text="Payee"
type="text"
disabled
>
</x-forms.row>
#livewire('checks.checks-form')
</x-cards.body>
Checks-form only has check-specific inputs and I don't want to use #include since I would have to duplicate the data and validation each time I use this in my app.
The data from the ChecksForm component is loading as expected in the TimesheetPaymentForm. However, since this data is nested in the main component, when it validates those on the TimesheetPaymentForm and I get an error saying the input is not in the rules to be valiaded.
Related
I want to have a dynamic component that can conditionally render child dynamic components.
Let's imagine having a parent component Parent.php
In my view blade this is then called something like this
(Of course, this wouldn't be parent but a method that resolves that name)
<x-dynamic-component :elements="$elements" component="parent" />
Within that component, based on the $elements variable, it should render other dynamic components
$element could be for instance Radio.php or Checkbox.php
So what I'm trying to do within my parent component is this:
<div>
#foreach($elements as $element)
#if($element->hasDynamicComponent())
<x-component-dynamic :component="$element->getComponentName()" />
#endif
#endforeach
The problem is, that Laravel nevertheless parses those lines regardless of this if statement.
I'm getting the following error message:
Unable to locate a class or view for component [component-dynamic]. (View: .....)
This is because $element->hasDynamicComponent() is false and therefore getComponentName is empty. Of course Laravel cannot resolve a component without a name.
The thing is Laravel shouldn't even try to resolve this, because hasDynamicComponent is false.
I have a Vue component that displays information for a log entry. On my page, I have a for loop that instantiates this component for each log entry. I could have anywhere from 0 - potentially 100+ logs.
<log-entry v-for="(log, index) in logs) :key=index :log="log" />
I have a mixin that contains some methods that can be used all over my application such as a method that looks up a user by their ID.
$_myAppMixin_lookupUserById(id, users) {
// return user with matching id
}
My question is, what kind of performance hit will my app take if I use the mixin in the log-entry component?
I'm thinking that if my log-entry component is instantiated 50 times on a page, my app is loading the mixin 50 times. I'm wondering though, is Vue able to reconcile all the duplicate code?
I'm not able to enter text into a specific input box as determined by a data attribute. There could be dozens of inputs with the same class, so I'd prefer not to add dusk='xxxx' all over the page.
For route and server-side efficiency, the AJAX function pulls a type from the array of inputs and routes to a function that branches the action.
Blade code:
{!! Form::text('question[]', null,
['class'=>'form-control actionChange', "data-id"=>$question->id, "data-type"=>'question']) !!}
The page starts with other questions with a different type, so I have tried using nth-child(x) to grab the selector within the modal, but no success. I've tried using $browser->script() as well.
Reading several similar questions, such as this one, it appears that a loop within the modal is likely the best way to go. This method correctly assigns the selector to the loop variable, $input. It correctly clear()s data, and I've tested similar code with click() and it successfully works. However, it will not enter data in the input. type() and keys() don't appear to work with the RemoteWebElement, so I believe my only choice to enter data is sendKeys().
Dusk test code:
$browser->assertPathIs('/notice')
->whenAvailable('.modal', function($modal) use($browser) {
$modal->assertSee('Survey for:')
->waitFor('#heading')
// WORKS fine
->keys('#heading', 'Edited Heading for Survey', '{enter}')
->waitFor('.actionSurvey');
// Edit a question -- NOT WORKING
foreach ($browser->elements('.actionChange') as $input) {
$dataType = $input->getAttribute('data-type');
if($dataType === 'question') {
$input->clear() // WORKS Fine
->sendKeys('Edited_Question') // NOT successful
break;
I've tried with and without the clear() method, as well as various selector choices both within and out of the modal loop. Same for script() Also, tried using the $modal variable to get the elements, but this was just a guess as I'm a bit out of my depth of understanding at this point.
I probably fubar'd something basic, but I don't understand why one method works, and another doesn't on the same handle.
I have a required input which is connected to a model.
Now i want to show an error message if the required field is empty. But only if the input has been changed or the form gets submitted. So initially there should be no error even if the input is empty.
My current solution is a property named "hasChanged" which gets set by an observer on init.
http://emberjs.jsbin.com/tovawezide/2/edit?html,js,output
Is there a shorter solution with less boilerplate in ember? like an build in "hasChanged"?
I think my way gets confusing with more inputs.
Note: im not talking about ember-data or its isDirty property nor do i ask for validation libraries.
We have been using ember validations together with easyForms quite succesfully for this sort of task.
export default Ember.ObjectController.extend({
validations: {
requiredField: {
presence: true,
}
}
});
-
{{#form-for model}}
{{input requiredField}}
{{submit value="Submit" class="button"}}
{{/form-for}}
Trying to migrate a Richfaces 3.3 project to 4. Got to a rich:suggestionBox component and converting it to a rich:autocomplete component, but having major troubles.
Requirements are: fill in part of the autocomplete, it presents user with suitable options. When the user selects something from the dropdown, the component should update it's value, disable itself, and also calculate/update the default value in a secondary field, which the user is able to edit. So far I have this:
<a4j:jsFunction name="jsFunc"
execute="autoComplete"
render="species_name individualUserStr"
actionListener="#{individualsBean.selectedIndividualElem.assignDefaultNickname}"/>
<rich:autocomplete
autocompleteMethod="#{individualsBean.speciesForBox}"
mode="cachedAjax"
layout="table"
var="sp"
id="species_name"
value="#{individualsBean.selectedIndividualElem.userCommonName}"
fetchValue="#{sp.commonName}"
disabled="#{individualsBean.selectedIndividualElem.userCommonName != null
and individualsBean.selectedIndividualElem.userCommonName ne ''}"
onselectitem="jsFunc()"
>
...
</rich:autocomplete>
<h:inputText value="#{individualsBean.selectedIndividualElem.ssi.individualUserStr}"
id="individualUserStr"
maxlength="28"
styleClass="inputTextMediumRF">
</h:inputText>
Right now, when the user selects something the jsFunc is called, assignDefaultNickname is called and everything works fine, except for the fact that the calculation in assignDefaultNickname, used to determine the value of the secondary field, individualUserStr, depends upon the value of species_name, but species_name is not submitted until I submit the form, so the calculation done in assignDefaultNickname is incorrect.
I need to somehow call the setter on individualsBean.selectedIndividualElem.userCommonName, before assignDefaultNickname is called, but I cannot figure out how to do this. There seems to be problems with AJAX and this autocomplete function; that's part of the reason why I have to use this round-a-bout jsFunction component to even call the method in the first place.
Any suggestions on how to solve this?
Found the solution to my own question. Basically, needed to learn how to use the execute attribute. The lesson to any other JSF 2.0 n00bs out there is to use execute to selectively reprocess the page. With execute you can make a white-space separated list of component IDs that should have their values re-bound to the backing bean, in case they need to be used in the listener responding to an AJAX event. In my case, this meant changing the jsFunction tag as follows:
<a4j:jsFunction name="jsFunc"
execute="species_name individualUserStr"
render="species_name individualUserStr"
actionListener="#{individualsBean.selectedIndividualElem.assignDefaultNickname}"/>
As you can see, the jsFunction now, when it is calling the assignDefaultNickname function will first update the values bound to both the auto-complete and the inputText components and THEN run assignDefaultNickname.