Using php inside a javascript function that is being executed in a blade component event

@Snapey They want to inline the entire getDeletionData() function into the @component directive.

@Snapey Hello, thanks for answering.

A screenshot might be better to understand my problem, but I can't post links as it is my first day after signing up.

I will split the URL so that you can recompose it (if it is against the rules, I will edit this, sorry, I'm frustrated). http s://i.im gur.c om/eCQS0Ef.png

There are so many quotes that I am not able to make this work.

@Snapey Jinx! (You have a missing single quote after the second concat marker, though, to close the string parameter to URL(). And if you’re going to switch the single and double quotes, you need to escape the dollar signs in the JavaScript variable names, \$event – otherwise it’ll be interpreted as PHP and you’ll probably get a missing variable exception.)

@Snapey Doing this throws an error, as php is trying to use the a variable called $event Undefined variable: event.

@itsAsyc Did you try my version? That should work, since I didn’t switch the quotes.

@kokoshneta not surprising. I'm typing with one finger on an ipad.

I tried to switch it because of all the single quotes in the string already. My preferred approach would actually be sprintf.

My initial confusion was because of @component which i have not seen since laravel 5.5

@kokoshneta Im currently fighting with it, yours seems to be working better, I'm just having another issue now.

I had to add a () => { ... code ... } on top of the js snippet and now im fighting with the quotes on the query selector

() => {
    const warehouseId = $event.detail.value;
    const url = new URL(\'' . route('company.api.stocks.clear.countdeletions') . '\');
    url.searchParams.append(\'warehouse_id\', warehouseId);
    fetch(url)
        .then(response => response.json())
        .then(data => {
            // Handle the response data here
            const movementsInputField = document.querySelector(\'input[name=\\"movements\\"]\');
            const stocksInputField = document.querySelector(\'input[name=\\"stocks\\"]\');
            movementsInputField.value = data.movements_count;
            stocksInputField.value = data.stocks_count;
        });
    }

Im getting this console error Uncaught SyntaxError: '' string literal contains an unescaped line break.

Update, removing all those \" I was trying to add fixes everything ...

This is the final version ...

@component('company::components.form.select', [
    'name' => 'warehouse_id',
    'required' => true,
    'label' => trans('Almacen'),
    'icon' => 'warehouse',
    'options' => $warehouses,
    'event' => '@form-select-warehouseid-changed.window="() => {
    const warehouseId = $event.detail.value;
    const url = new URL(\'' . route('company.api.stocks.clear.countdeletions') . '\');
    url.searchParams.append(\'warehouse_id\', warehouseId);
    fetch(url)
        .then(response => response.json())
        .then(data => {
            // Handle the response data here
            const movementsInputField = document.querySelector(\'input[name=movements]\');
            const stocksInputField = document.querySelector(\'input[name=stocks]\');
            movementsInputField.value = data.movements_count;
            stocksInputField.value = data.stocks_count;
        });
    }
"'
])@endcomponent

Thank you guys!

@itsAsyc See my updated answer. I meant to include that from the start, but forgot – when you define the whole thing inline, of course you need to tell the JavaScript engine that it’s an anonymous function, but as long as you make sure that your strings start and end in the right places, that shouldn’t be a problem.