Inertia loading up a page within a page

@wojakmcwagies that's exactly it thank you!

So can I ask how you manage to perform the Intertia get without redirecting away from the current page and without using partial reload, which obviously uses the same controller method that rendered the current page?

If I've understood the docs correctly, from the client side I essentially have router.visit() or its derivatives router.get() etc. These all seem to redirect to a new page.

Then from the server I see Inertia::render() which requires a Page as it's first argument where I just want to return some data.

Can you point me to the methods you are using please?

@bwrigley First of all, I'm going to say that I use Inertia with Svelte, so my example is in Inertia Svelte version. Second, I can't exactly show you how I do it, as it's fine tuned for my company and I don't know if leaking the code is a good idea, plus it's bloated as hell so removing them to the basic form isn't easy. What I can give you is the alternative versions:

1. Use Axios. Basically, you create a new method in your controller, create a route for that method, and use axios get method to reach that method in the controller. In the controller itself, you return JSON.

2. This one is even easier as you don't need another method in your controller. When you return data in the index method, just put in the data that you wanted to show for the detailed modal too. So something like this in the Svelte page:

    function showDetailed(row) {
        $form.image = row.image;
        $form.system = row.system;

        isView = true;
        modal.show();
    }

When you loop through the table to display your data, you'll do something like this right?

                <tbody>
                    {#each $rows as row}
                        <tr>
                            <td>
                                <div role="button" on:click={showDetailed(row)}>
									{row.system}
								</div>
                            </td>
                        </tr>
                    {:else}
                        <tr class="position-static">
                            <td colspan="8">No data available in table</td>
                        </tr>
                    {/each}
                </tbody>

The code above is an illustration where you get the "row" parameter for the showDetailed modal.

@wojakmcwagies

Ah, if I understand correctly then I think that's similar to the solution I was using: I have a small composable that can perform axios requests and retrieve the data.

What I was hoping to find was an Inertia specific method that could essentially do the same without having to rerender the page. Much like how I suspect a partial reload must work under the hood.

Thanks for taking the time to share your code!

If I've understood it correctly, you load all the rows into memory beforehand and only show limited row data in your table. Then when the user clicks to have a detailed view, you show more of the row data. But all of the row detail is already in memory right? You don't make a new request for additional data at that point?

My situation is that when I first render the page I want my controller to only send a couple of fields to display e.g. just your row.system . Then when the user selects an item I want to go back to the server to get all the other data as well as relationships or in your case I would be requesting row.image to display.

@bwrigley

If I've understood it correctly, you load all the rows into memory beforehand and only show limited row data in your table. Then when the user clicks to have a detailed view, you show more of the row data. But all of the row detail is already in memory right? You don't make a new request for additional data at that point?

Correct

My situation is that when I first render the page I want my controller to only send a couple of fields to display e.g. just your row.system .

Then you can use the first method. Since you're returning a plain JSON, it won't conflict with Inertia::render from your index method. You can imagine it like umm... when you delete a data, you might want to display a SweetAlert2 saying delete is success right? This is pretty much the same, except it's not only message but a data, and not SweetAlert2 but your own modal.

@wojakmcwagies thanks for sharing your thoughts and code :)