I'm writing a plugin that have some fields defined in backend settings.
One of that field is a partial that contain a button, that trigger an Ajax request thanks to the data-attribute API.
<button type="button" class="btn btn-danger" data-request="onReset">
My button
</button>
Where should I put the "onReset()" function ? I tried to put it in my Settings model, even tried to create a Settings controller (whereas not necessary to work with settings page), but I always get the following error :
Ajax handler 'onReset' was not found
I don't know what to do to be able to trigger that onReset() function, can somebody familiar with Laravel / OctoberCMS could point me the right direction ?
Thanks
Settings are rendered by the \System\Controllers\Settings so whatever you write will be handled by \System\Controllers\Settings Controller Class,
so we need to extend \System\Controllers\Settings and we can add dynamic
method there,
inside your plugin's boot method you need to write this extension code
I am renaming your onReset handler to onPrefixReset in this example to avoid any other conflicts.
public function boot() {
\System\Controllers\Settings::extend(function($model) {
$model->addDynamicMethod('onPrefixReset', function() {
\Flash::success('You did it!');
// OR
//return ['some data data'];
});
});
}
onPrefixReset : we are adding some Prefix here, so accidentally we are not overriding internal original methods.
now inside your _partial
<button type="button" class="btn btn-danger" data-request="onPrefixReset">
My button
</button>
so now this onPrefixReset ajax handler is defined in \System\Controllers\Settings as we did that dynamically ;) it will handle your request.
you can return any data from here and it will be received at back-end settings page.
In HTML forms if you have an onReset event, you can add your call inside there:
function updateForm()
{
$.each($('form').find(":input"), function(){
$.uniform.update($(this));
});
}
<form onReset="updateForm();">
In this link you can you can do your own ordering within a click event:
$(document).ready(function() {
$("input:reset").click(function() { /click event
this.form.reset();
window.alert($("input:text").val());
return false;
});
});
Related
This should be really simple, but I don't get it. I want to replicate the functionality of a button that when pressed goes to an API (which could take about a minute to get the data and process it), it gets diabled, and after loading the data it gets enabled.
I'm using Laravel/Livewire/Alpine
So, in my livewire component I have:
public $loading = false;
In my blade file, I have the declaration for the div where the button is:
<div
class="grid grid-cols-3 gap-4"
x-data="{
loading: #entangle('loading')
}"
>
Then the button x-binds the disabled property to the loading value, when the button is clicked, it changes the property of the loading variable, and calls the loader function
<button
type="button"
class="btn btn-sm btn-jbn"
x-on:click="loading = true"
x-bind:disabled="loading"
wire:click="loader"
>
Load API
</button>
And it does what it is supposed to do... the button is grayed, it becomes unusable, the cursor change, etc., it executes the loader function in my livewire component, but it never return to the normal state after loading the API. In my livewiere componente I have:
public function loader() {
// API call and logic goes here, this works
$this->loading = false;
}
So I would imagine that at the end of the API process the entangled variable loading would return the button to its normal state, but it doesn't
What am I missing?
Livewire already has incorporated functionality to handle loading-states. Instead of implementing your own, you can use this.
Get rid of all your current loading-logic, and simply use wire:loading with wire:target on your button.
wire:loading can toggle the disabled attribute directly by doing wire:loading.attr="disabled", and wire:target is to set the target for that loading-state to the method you are calling, so in your case that's wire:target="loader".
This means your button looks like this,
<button
type="button"
class="btn btn-sm btn-jbn"
wire:click="loader"
wire:loading.attr="disabled"
wire:target="loader"
>
Load API
</button>
I have category component with add button as below.
<button wire:click.prevent="addNew" class="btn btn-primary mb-2">Add</button>
.....
.....
<x-mymodal-component :iscreate="$iscreate"/>
with 'addNew' method, I dispatch event to javascript listener.
public function addNew(){
$this->dispatchBrowserEvent('show-category-modal');
}
In the listener event, I try to show modal that made as component.
window.addEventListener('show-category-modal', event => {
$('#category-form').modal('show');
});
Below is modal component with data that need to pass into.
<x-mymodal-component :iscreate="$iscreate"/>
Any advice or guidance on this would be greatly appreciated, Thanks.
#livewire('mymodal-component', ['iscreate'=>$iscreate])
//Receive:
public function mount($iscreate)
{
}
I have many buttons in single form that's why i used ajax to call different method on different button click event. But while I call method using ajax and return view, it send code of view as response, And i need to redirect on that view my method code is as below.
public function store(Request $request)
{
return view('surat.proceed_sell');
}
can i redirect on other view using ajax? Or any other way to call different methods on different button click event then please let me know.
What you could do is return the url where to redirect as a response in your controller as
return url('the path');
and in your ajax success callback you could redirect to the view as
window.location = data;
The url should be defined in your route file where the view is rendered.
You cannot redirect to a view with Ajax because Ajax expects a response. What you should do is redirect to a page instead, using anchors.
First, define your routes
Route::get('surat/proceed', 'SuratController#proceed');
Then use anchor with a button to go that page. It doesn't matter how many buttons you have in the form, as longs as they are not of type submit, they should not submit the form.
<form method="post" action="">
Go to proceed
<button type="submit" class="btn btn-primary">Submit</button>
</form>
If this does not help you, please, update your question with your form code.
I have a ajax function that is called by button tag
<button id="of_save" type="button" class="button-primary">
<?php echo __('Save All Changes', 'optionsframework');?>
</button>
$('#of_save').live('click',function() {
...
...
...
}};
The problem is that theme author put a single button on top of settings page and a million of settings, so every time I want to hit save, I must scroll whole page.
I found a little JS script that intercept CTRL+S or another browser combination and is working wonderful
http://www.openjs.com/scripts/events/keyboard_shortcuts
The problem is I don't know how to call the ajax function from this JS
shortcut.add("Ctrl+Shift+X",function() {
alert("Hi there!");
// not working...
live('click',function());
});
I am using JQuery with Boxy plugin.
When a user clicks on a link on one page, I call Boxy.load to load a form onto the pop-up. The form loads and is displayed inside the pop-up without problems.
However, I can't bind the form to a submit event, since I can't select the form element.
This is the event handler:
$('#flag-link a.unflagged').click (function(e) {
url = $(e.target).attr('href');
Boxy.load(url, {behaviours: function(r) {
alert ($("#flag-form").attr('id'));
}
});
});
The alert reads "undefined" when it is displayed.
And this is the form:
<form id="flag-form" method="POST" action="somepage">
<table>
<tr><td><input type="text" name = "name"></td></tr>
<tr><td><input type="submit" value="OK"></td></tr>
</table>
</form>
What am I doing wrong?
First (a minor point, but a potential source of trouble), it should be id="flag-form" not id = "flag-form" (no spaces).
Second, you shouldn't need r.find(). Just do $("#flag-form").attr("id")
As far as I understand, live() method must be used to bind an element to an event in this case:
$("#flag-form").live("submit", function(){ ... }
Presently, live method is documented to be not supporting the submit event. However, I could work it out with Chrome and FF. On the other hand, I couldn't get it working in IE. A better way for cross-browser compatibility seems to be binding the submit button of the form to the click event.
$("#flag-form-submit").live("click", function(){
I learnt that declaring methods in behaviours: function (e) {} works, in addition to using live() methods.
E.g.:
$('#flag-link a.unflagged').click (function() {
Boxy.load(this.href, {
behaviours: function(r) {
r.find('#flag-form').bind('submit', function() {
// do on submit e.g. ajax calls etc.
});
}
});
return false;
});
Boxy opens the URL (url = $(e.target).attr('href');) in an iframe. So you cannot find the form from the opening page(parent page). Your code to bind the form should be in the child page (ie, the Boxy iframe). You can check the iframe URL using your code, url = $(e.target).attr('href');