I haven't been able to find anything relating to an action to submit an update request when we click away. Something like wire:clickaway = "update( {{ example -> id }} )"
Essentially, I am trying to create the effect of when a user clicks on the title, it will open an input box. Than when user clicks away, it will save the data that has been updated in the box.
Right now, I got this working with a checkmark icon appearing when the edit is true using Alpine
<div x-data="{edit : false}" >
<h2 #click="edit = true" x-show="edit === false" >{{$example -> title}} </h2>
<div x-show="edit === true">
<input name="title" type="text" placeholder="{{$example -> title}}" wire:model="title" >
<i class="bi bi-check " wire:click="update({{ $example->id }})" #click="edit = false"></i>
</div>
</div>
I wanted to change this to something like
<div x-data="{edit : false}" >
<h2 #click="edit = true" x-show="edit === false" >{{$example -> title}} </h2>
<input x-show="edit === true" name="title" type="text" placeholder="{{$example -> title}}" wire:model="title" wire:clickaway="update({{ $example->id }})" #click.away="edit = false" >
</div>
Is there a way to pass the submit of update({{ $example->id }}) using the Alpine JS #click.away?
The answer is what #Dirk Jan said
wire:change="update({{ example -> id }})"
Related
running into an issue with alpine js.
First of all I have a master component that allows the user to switch between two tabs
#props(['pages', 'blogs'])
<div x-data="init()" class="overview row mb30">
<div class="pageContent__content__languages disFlex mb20 bBottom">
<span
#click.prevent='tab = "pages"'
:class='{ "active": tab === "pages" }'
class="pageContent__content__languages__item disFlex aiCenter pt10 pb10 pr10 pl10 mr10 pointer">
Pagina's
</span>
<span
#click.prevent='tab = "blogs"'
:class='{ "active": tab === "blogs" }'
class="pageContent__content__languages__item disFlex aiCenter pt10 pb10 pr10 pl10 bRadius mr10 pointer">
Blogs
</span>
</div>
<div x-show="tab === 'pages'">
<x-form.edit.navigation.pages :pages="$pages" />
</div>
<div x-show="tab === 'blogs'">
<x-form.edit.navigation.blogs :blogs="$blogs" />
</div>
<button type="button" wire:click="navigationAddToMenu" class="btn blue w100 mt10">
Toevoegen aan menu
</button>
</div>
#push('scripts')
#once
<script type='text/javascript'>
function init() {
return {
selected: #entangle('selected'),
tab: 'pages',
};
}
</script>
#endonce
#endpush
These tabs either display pages or blogs depending on which tab is clicked.
Inside of these blade components is just a foreach loop to display the items,
#props(['pages'])
<div style="grid-area: unset" class="pageContent__settings bRadius--lrg disFlex fdCol">
<table class="overview__wrapper">
<tbody class="bRadius--lrg">
#foreach($pages as $page)
<tr class="overview__row bBottom">
<td class="overview__row__checkbox">
<input x-model='selected' value='{{ $page->id }}' type="checkbox"
id="col-row-{{$loop->index}}">
<label for="col-row-{{$loop->index}}"></label>
</td>
<td class="overview__row__name lh1">
{{ $page->page_name }}
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
The blog blade component is nearly identical.
Now the user is able to check a checkbox to add items to their menu, this is binded using the #entangle directive and the x-model on the checkbox.
So far when the user is on the default tab pages and they select a page the correct ID is retrieved from the checkbox, BUT when the user switches tab to the blogs display, and clicks a checkbox the value is retrieved from the pages tab.
e.g.
1 page and 1 blog, page has id of 1 blog has id of 2. User is on the pages tab and clicks on the checkbox the correct value of 1 is now added to the selected array, user switches tabs to blogs and clicks the checkbox the expected behavior would be to have the id of 2 added to the selected array, but it still adds 1.
Inspecting the HTML and the loops do add unique ids to each of their items.
Fixed it, need to make my ids on the input more unique, instead of doing
<input x-model='selected' value='{{ $blog->id }}' type="checkbox"
id="col-row-{{$loop->index}}">
<label for="col-row-{{$loop->index}}"></label>
I added a extra identifier
<input x-model='selected' value='{{ $blog->id }}' type="checkbox"
id="col-row-blogs-{{$loop->index}}">
<label for="col-row-blogs-{{$loop->index}}"></label>
and pages for the pages.
This fixed the issue
Hi Im struggling to get the value of each radio button groups. The functions is about getting answers from different questions.
{{form.answer_ids}}
<div v-for="ans in answers" :key="ans.id">
<div v-if="ans.question_id == question.id">
<div class="p-2 border rounded border-secondary m-2" >
<input
style="cursor:pointer;"
class="form-check-input m-2"
type="radio"
:name="ans.question_id"
:value="ans.id"
v-model="form.answer_ids"/>
<h5 class="ml-4 p-1" v-html="ans.description"> </h5>
</div>
</div>
</div>
<script>
data() {
return {
form: this.$inertia.form({
answer_ids:[]
}),
}
},
</script>
When there is v-model, the radio is not grouping yet returning only 1 value (not array), On the other hand, When I Remove v-model, The grouping is working but unable to get the data.
How can i possibly achieve this? Just taking the checked radio answer ids is enough for me.
Thank you very much and have a good day!
<div class="ty-company-fields">
<div class="apply_for_vendor_account">
<h1 class="tygh-top-panel ty-dropdown-box__title ty-mainbox-simple-title ty-mainbox-simple-container clearfix ty-homepage-vendors">Calculator</h1>
<form action="" method="post" name="calculator" id="calculator">
<div class="ty-control-group">
<label for="contact_form" class="ty-control-group__title cm-required ty-input-text cm-focus" >Please Enter First Number</label>
<input type="text" name="cal[value1]" id="contact_form" size="32" value="{$cal.value1}" class="ty-input-text cm-focus ty-control-group_title cm-required" />
</div>
<div class="ty-control-group">
<label for="contact_form_number" class="ty-control-group__title cm-required">Please Enter Second Number</label>
<input type="text" name="cal[value2]" id="contact_form_number" class="ty-input-text cm-focus ty-control-group_title cm-required" size="32" value="{$cal.value2}" />
</div>
{if $result }
<p>The Result is: {$result}</p>
{/if}
<div class="buttons-container">
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator2.add]" but_id="contact" but_meta="ty-btn__primary" value = "+" data-ca-target-form="calculator" data-ca-dispatch="dispatch[calculator.calculator]"}
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator.add]" but_id="contact" but_meta="ty-btn__primary" value = "+"}
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator.add]" but_id="contact" but_meta="ty-btn__primary" value = "+"}
{include file="buttons/button.tpl" but_text=__("submit") but_name="dispatch[calculator.add]" but_id="contact" but_meta="ty-btn__primary" value = "+"}
</div>
</form>
</div>
</div>
you can use the normal form and normal submit button, Normal way is also works fine in cs cart.
In this case, when you press the button the whole values are post to controller calculator.add and take the actions.
Inside form tag in action attribute, you need this:
<form action="{""|fn_url}" method="post" name="calculator" id="calculator">
...
</form>
In the first parameter you could also insert a specific dispatch value, for example calculator.manage if you want to navigate to specific page of yours or leave it empty.
Moreover, inside your tpl file add this at the bottom (and inside capture smarty tag):
{capture name="buttons"}
{include file="buttons/save.tpl" but_name="dispatch[calculator.manage]" but_role="submit-link" but_target_form="calculator"}
{/capture}
this capture smarty tag, will add the general Save button of cs-cart, at the right top corner.
Now, you probably have a controller file named calculator.php which also contain code like that:
if($mode == "manage") {
//your code here
}
I'm trying to mechanize the select devices part of the Apple Dev Portal "Edit iOS Provisioning Profile", which can be found here (if you're logged in).
The source looks like this:
<form name="profileEdit" method="get" action="https://developer.apple.com/services-developerportal/QH43B2/account/ios/profile/regenProvisioningProfile.action?content-type=text/x-url-arguments&accept=application/json&requestId=838c910b-f63d-843e7b1ce126&userLocale=en_US&teamId=BF5K33D" successURL="/account/ios/profile/profileDownload.action?provisioningProfileId=">
<input type="hidden" name="distributionType" value='store'/>
<input type="hidden" name="returnFullObjects" value="false"/>
<div class="nameSection">
<dl>
<dt class="selectDevices">Devices:</dt>
<dd class="selectDevices">
<div class="table">
<div class="rows">
<div><input type="checkbox" name="deviceIds" class="validate" value="8T8RG7HX" id="devices-6" ><span class="title">iPhone 4 - JC</span></div>
<div><input type="checkbox" name="deviceIds" class="validate" value="7Y9F8N47" id="devices-7" ><span class="title">iPhone 5 - DP</span></div>
<div><input type="checkbox" name="deviceIds" class="validate" value="ZNES97W7" id="devices-8" checked><span class="title">iPhone 5 - JC</span></div>
<div><input type="checkbox" name="deviceIds" class="validate" value="CRDSL7S5" id="devices-9" checked><span class="title">iPod 4 inch</span></div>
</div>
</div>
</dd>
<dd class="form-error deviceIds hidden">Please select a Device</dd>
</dl>
</div>
<div class="bottom-buttons">
<a class="button small left cancel"><span>Cancel</span></a>
<a class="button small blue right submit"><span>Generate</span></a>
</div>
</form>
What I want to do is check all boxes:
form = page.form_with(:name => 'profileEdit') or raise UnexpectedContentError
form.checkboxes_with(:name => 'deviceIds').each do |checkbox|
puts checkbox["id"] # prints correct value of devices-6...
checkbox.check
end
form.method = 'GET'
form.submit
I get no run time errors, however when I refresh the actual page, not all checkboxes are checked as I intended. Am I missing something?
For this:
form.checkboxes_with(:name => 'deviceIds').each do |checkbox|
puts checkbox["id"] # prints correct value of devices-6...
checkbox.check
end
What do these result in:
tmp1 = form.checkboxes_with(:name => 'deviceIds').map { |cb| cb.check }
tmp2 = form.checkboxes_with(:name => 'deviceIds').map { |cb| cb.checked? }
I would expect [true, true, true, true] for both. If not, something is clearing those out. The check() method is implemented in RadioButton which does clear the checked state of all buttons of the same name, but it should be limited to radiobutton types. The checked attribute is writable by itself, so you could try directly writing it:
form.checkboxes_with(:name => 'deviceIds').each do |cb|
cb.checked = true
end
And avoid what may be a bug or inconsistency in that page/mechanize/whatever. Just a guess, but something to try.
As for as I have understood, your issue is that you are visiting the actual page after setting checkboxes which will not work. But if you inspect the results returned after submit you will realize that Mechanize has set the check boxes and returned the response.
If you want to visually see that in an actual browser, you may need to use Watir / Webdriver etc.
I'm experiencing some performance issues on a medium-sized result set. The result set is a list of documents, each with a small array of properties (metadata like created, modified, tags, owner_name, etc.) that is hidden until the user clicks a show/hide button.
In the template, I'm using a lot of ng-shows, and when I comment all of these out, the performance improves dramatically, so I was wondering if there is a way to ask Angular not to compile any of this, not to render any of the ng-repeats until the user clicks the properties show/hide button. Or is there a more idiomatic way of going about this?
Update: actually, it isn't when I comment out the ng-shows, it seems to be when I comment out the entire block of html, making it seem like accessing properties of an object is the cause of the performance hit. Why?
Template:
<div class="property" ng-show="property.display && property.value && property.viewable" ng-repeat="property in item.properties()">
<span class="property-name">{{property.external}}:</span>
<span class="property-value" ng-show="property.type == 'string' || property.type == 'integer' || property.type == 'float'">
<span ng-hide="property.edit">{{property.value}}</span>
<span ng-show="property.edit">
<input name="{{property.internal}}" id="{{property.internal}}{{item.id()}}" />
<span class="edit-button"><a ng-click="simpleUpdate(item, property)">save</a></span>
<span class="edit-button"><a ng-click="editProperty(item, property)">cancel</a></span>
</span>
<span class="edit-button" ng-show="property.editable && !property.edit"><a ng-click="editProperty(item, property)">edit</a></span>
</span>
<span class="property-value" ng-show="property.type == 'stringArray'">
<span ng-hide="property.edit">{{property.value | join:', '}}</span>
<span ng-show="property.edit">
<textarea name="{{property.internal}}" id="{{property.internal}}{{item.id()}}" class="keywords" rows="1" cols="80"></textarea>
<span class="edit-button"><a ng-click="simpleUpdate(item, property)">save</a></span>
<span class="edit-button"><a ng-click="editProperty(item, property)">cancel</a></span>
</span>
<span class="edit-button" ng-show="property.editable && !property.edit"><a ng-click="editProperty(item, property)">edit</a></span>
</span>
<div class="clearboth"> </div>
</div>