How do I create a simple AJAX call where I can toggle a value without reloading the page

[eleybourn]

I've tried so many things to get a simple AJAX call to work.

I have a table of session records and one of the columns is whether it is test data or not. I'd like to be able to click that field to toggle it on and off.

Right now, I'm using overriding the column to render the value as a buttons that trigger the form submit to a specific route.
platform.php
Route::post('flipSession', SingleCompanyScreen::class)->name('platform.flipSession');

SingleCompanyScreen.php
In my Screen file, I have the following code for the table layout. You'll notice I have two columns for test_data. This is me testing various ways of getting it to work. Both with native Buttons and by manually creating the button in HTML.
$layout_table_session = Layout::table('sessions', [ TD::make('id', 'ID')->sort(), TD::make('created_at', 'Created')->usingComponent(DateTimeSplit::class, upperFormat: 'Y-m-d', lowerFormat: 'H:i:s')->sort()->filter(Input::make()), TD::make('test_data', 'Valid')->sort()->usingComponent(Boolean::class)->render(fn($session) => Button::make("●") ->method('flipSession', ['company' => $session->company_id, 'flipsession' => $session->id]) ->id("flipSessionButtonx-".$session->id) ->class($session->test_data == 0 ? 'btn btn-link text-success' : 'btn btn-link text-danger')),

The relevant functions in SingleCompanyScreen.php are
`
public function flipSession(Request $request) {
$session = Session::find($request->flipsession);
$session->test_data = $session->test_data == 0 ? 1 : 0;
$session->save();

	$html = $this->sessionIconWrapper($this->sessionIcon($session->test_data), $request->company_id, $request->flipsession);
	$target = "flipSessionButton-".$request->flipsession;
	$action = "replace";
	$iconview = view('platform::components.stream', ["target"=>$target, "action"=>$action, "slot"=>$html, "rule"=>true]);
	return response($iconview)->header("Content-Type", "text/vnd.turbo-stream.html; charset=UTF-8");
	//return response("<turbo-stream target='".$target."' action='".$action."'><template>".$html."</template></turbo-stream>")->header("Content-Type", "text/vnd.turbo-stream.html; charset=UTF-8");
}

public function sessionIcon($test_data) {
	$class = $test_data == 0 ? 'text-success' : 'text-danger';
	return '<span class="'.$class.'">●</span>';
}

public function sessionIconWrapper($icon, $company_id, $session_id) {
	return '<button data-controller="button" data-turbo="true" class="btn btn-link" type="submit" form="post-form" id="flipSessionButton-'.$session_id.'" formaction="http://localhost/admin/single_company/flipSession?company='.$company_id.'&amp;flipsession='.$session_id.'" onchange="$(\'post-form\').setAttribute(\'data-form-submit\', false)">'.$icon.'</button>';

`

The problem with this approach
Right now, I've tracked the problem with this approach to the way forms are disabled after submitting.

From submit(event) in form_controller.js
`
if (this.isSubmit) {
event.preventDefault();
return false;
}

    const action = this.loadFormAction(event);

    if (action === null) {
        event.preventDefault();
        return false;
    }

    this.isSubmit = true;

`

Basically, because it's submitted, it's rejected all other clicks. And because this is a table with hundreds of values, I need to be able to click multiple times (without reloading).

I've also tried

• Custom Stimulus functions
• Listeners
• And other things I've forgotten.

What is the best practice in Orchid to click a button > send data to the server > receive a response (I assume Turbo) > update only that element without refreshing the screen.

All help would be appreciated. I'm totally stuck.

[eleybourn]

I've got it working (badly). Basically, I've added
onclick="document.getElementById(\'post-form\').setAttribute(\'data-form-submit\', false)
to the button.

However, I would still like to know the official way of doing this.

[eleybourn]

I've sorted it out.

I sorted it out. For anyone else who's having a similar challenge, this is what I did.
In resources/js/controllers/flip.js
Note: I'm extending ApplicationController (which is loaded as window.Controller) to access the native Orchid AJAX call (loadStream).

//flip.js
export default class FlipController extends window.Controller  {

    asyncLoadData({ params: { route, company, session}} ) {
        var data = {"company_id": company, "session_id": session};
        this.loadStream(route, data);
    }
}

Append to resources/js/app.js (the Orchid website instructions say dashboard.js, but app.js exists instead)

import FlipController from "./controllers/flip"

application.register("flip", FlipController);

Edit config/platform.php

    'vite' => [
        'resources/js/app.js',
    ],

I then had to update my dev machine to the latest version of node and npm. I needed to do that in order to run

$ npm install -g npm@latest
$ npm run build

on the server (I also added that to my build scripts)
In routes\platform.php (CompanySessionScreen is my Orchid Screen class)
Route::post('flipSession', CompanySessionScreen::class)->name('platform.flipSession');
Then finally, in the CompanySessionScreen class (I've cut out the standard functions like query and name for brevity). You'll notice I manually code the Button HTML (yes, I know I should use a blade). I can't use the native Orchid Button as I need to set a series of Stimulus attributes (data-controller, data-action, etc)

class CompanySessionScreen extends Screen
{
    
    public function flipSession(Request $request) {
        $session = Session::find($request->session_id);
        $session->test_data = $session->test_data == 0 ? 1 : 0;
        $session->save();
        
        $html = $this->sessionIconWrapper($this->sessionIcon($session->test_data), $request->company_id, $request->session_id);
        $target = "flipSessionButton-".$request->session_id;
        $action = "replace";
        $iconview = view('platform::components.stream', ["target"=>$target, "action"=>$action, "slot"=>$html, "rule"=>true]);
        return response($iconview)->header("Content-Type", "text/vnd.turbo-stream.html; charset=UTF-8");
    }

    public function sessionIcon($test_data) {
        $class = $test_data == 0 ? 'text-success' : 'text-danger';
        return '<span class="'.$class.'">●</span>';
    }
    
    public function sessionIconWrapper($icon, $company_id, $session_id) {
        return '<button data-controller="flip" data-turbo="true" class="btn btn-link btn-lg" type="button" id="flipSessionButton-'.$session_id.'" data-action="click->flip#asyncLoadData" data-flip-route-param="/admin/company_session/flipSession" data-flip-company-param="'.$company_id.'" data-flip-session-param="'.$session_id.'">'.$icon.'</button>';
    }

    public function layout(): iterable
    {
        return Layout::table('sessions', [
            TD::make('id', 'ID')->sort(),
            TD::make('test_data', 'Valid')->render(fn($session) => $this->sessionIconWrapper($this->sessionIcon($session->test_data), $session->company_id, $session->id)),