# Laravel 10 Ajax CRUD with Image Upload Tutorial Example

## Laravel 10 Ajax CRUD with Image Upload Example

[April 3, 2023](https://www.tutsmake.com/laravel-10-ajax-crud-with-image-upload-tutorial/) [By Admin](https://www.tutsmake.com/author/devtutsmake-com/) [Leave a Commenton Laravel 10 Ajax CRUD with Image Upload Example](https://www.tutsmake.com/laravel-10-ajax-crud-with-image-upload-tutorial/#respond)

Laravel 10 ajax crud example with image upload. In this tutorial, we will show you how to create ajax crud app with image file upload and preview in Laravel 10 apps.

PlayUnmuteRemaining Time -33:46Auto(360pLQ)ShareFullscreen[Laravel 8 image upload and display](https://humix.com/redirect?url=https%3A%2F%2Ftutussfunny.com%2Fhumix%2Fvideo%2F34104bb69e5763ceb16efc394c7c0141304af9b42fa2fc5e4a52747bf371d36c)

This Laravel 10 ajax crud example with image file upload and preview tutorial guide you step by step on how to implement ajax crud app with image upload and preview using jquery, dataTable js, and bootstrap modal. This laravel ajax crud web app is not reloading the whole web page.

### Laravel 10 Ajax CRUD with Image Upload Tutorial Example

Let’s use the following steps to implement ajax crud with image upload in laravel without page refresh; is as follows:

* Step 1 – Install Laravel 10 App
* Step 2 – Connecting App to Database
* Step 3 – Create Migration And Model
* Step 4 – Install Yajra DataTables In App
* Step 5 – Add Routes
* Step 6 – Create Controller
* Step 7 – Create Blade View
* Step 8 – Run Development Server

#### Step 1 – Install Fresh Laravel Setup

First of all, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:

```
composer create-project --prefer-dist laravel/laravel blog
```

#### Step 2 – Connecting App to Database

Next step, Set the database credentials in your application. Let’s open your project .env file and set the database credentials here.

```
 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here
```

Recommended:- [Laravel 10 PHP Guzzle Http Client GET & POST Example](https://www.tutsmake.com/laravel-10-php-guzzle-http-client-get-post-example/)

#### Step 3 – Create Migration And Model

In this step, Execute the following command on terminal to create product table migration and create Product Modal using bellow command:

| 1 | `php artisan nake:modal Product -m` |
| - | ----------------------------------- |

Navigate **database/migrations/** and **open create\_products\_table.php** file. Then update the following code into this file:

| 12345678910111213141516171819202122232425262728293031323334353637 | `<?php` `use` `Illuminate\Database\Migrations\Migration;use` `Illuminate\Database\Schema\Blueprint;use` `Illuminate\Support\Facades\Schema;` `class` `CreateProductsTable extends` `Migration{    /**     * Run the migrations.     *     * @return void     */    public` `function` `up()    {        Schema::create('products', function` `(Blueprint $table) {            $table->id();            $table->string('title');            $table->string('product_code')->nullable();            $table->string('image')->nullable();            $table->text('description');            $table->timestamps();        });    }` `/**     * Reverse the migrations.     *     * @return void     */    public` `function` `down()    {        Schema::dropIfExists('products');    }}`  |
| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

Now run the following command:

```
php artisan migrate
```

This command will create tables in your database.

Recommended:-[Next, Navigate to App directory and open **Product.php** file and then update the following code to into **Product.php** file as follow:Step 4 – Install Yajra Datatables Package in LaravelIn this step, Execute the following command to terminal to install Yajra Datatables Packages in your laravel application. Use the below command and install yajra packages in your Laravel 10 app:composer require yajra/laravel-datatables-oracleAfter successfully Install Yajra Datatables Packages in your laravel application. Next step, open config/app.php file and add service provider and aliases.  config/app.php   'providers' => \[   Yajra\Datatables\DatatablesServiceProvider::class, \],   'aliases' => \[   'Datatables' => Yajra\Datatables\Facades\Datatables::class, \]  After set providers and aliases then publish vendor run by following command.php artisan vendor:publish](https://www.tutsmake.com/laravel-10-livewire-crud-with-jetstream-tutorial/)[Recommended:- ](https://www.tutsmake.com/laravel-10-livewire-crud-with-jetstream-tutorial/)[Laravel 10 Ajax Image Upload with Preview Tutorial](https://www.tutsmake.com/laravel-10-ajax-image-upload-with-preview-tutorial/)

#### Step 5 – Add Routes

In this step, Add routes in the **web.php** file as below.

Navigate to **routes/web.php** file and update the following routes:

```
use App\Http\Controllers\ProductController;

Route::get('product-list', [ProductController::class, 'index']);
Route::get('product-list/{id}/edit', [ProductController::class, 'edit']);
Route::post('product-list/store', [ProductController::class, 'store']);
Route::get('product-list/delete/{id}', [ProductController::class, 'destroy']);
```

#### Step 6 – Create Controller

In this step, create a new controller name **ProductController**. So use the below command and create a new controller that name is **ProductController**.

```
php artisan make:controller ProductController
```

Next navigate to **app/Http/Controllers** and open **ProductController.php** file. Then update the following methods for add products, edit product and delete the product into this controller file:

In Product Controller, you need to create some methods as follow:

* Index()
* Store()
* Edit()
* Destroy()

**Index() method**

Using the index() method, you will show the product list. So update the below code in your product controller index() method:

| 123456789101112 | `public` `function` `index(){    if(request()->ajax()) {        return` `datatables()->of(Product::select('*'))        ->addColumn('action', 'product-button')        ->addColumn('image', 'image')        ->rawColumns(['action','image'])        ->addIndexColumn()        ->make(true);    }    return` `view('list');}` |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

**Store() Method**

Using the Store() method, you will save and update the product into a database table. So update the below code in your product controller Store() method:

| 1234567891011121314151617181920212223242526 | `public` `function` `store(Request $request){     request()->validate([        'image'` `=> 'image\|mimes:jpeg,png,jpg,gif,svg\|max:2048',   ]);` `$productId` `= $request->product_id;` `$details` `= ['title'` `=> $request->title, 'product_code'` `=> $request->product_code, 'description'` `=> $request->description];` `if` `($files` `= $request->file('image')) {` `//delete old file       \File::delete('public/product/'.$request->hidden_image);` `//insert new file       $destinationPath` `= 'public/product/'; // upload path       $profileImage` `= date('YmdHis') . "."` `. $files->getClientOriginalExtension();       $files->move($destinationPath, $profileImage);       $details['image'] = "$profileImage";    }` `$product`   `=   Product::updateOrCreate(['id'` `=> $productId], $details);` `return` `Response::json($product);}` |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

**Edit() Method**

Using the Edit() method, you will edit the product details, So update the below code with your edit method:

| 1234567 | `public` `function` `edit($id){      $where` `= array('id'` `=> $id);    $product`  `= Product::where($where)->first();` `return` `Response::json($product);}` |
| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |

**Delete() Method**

Using the delete method, you can delete a product from the product list and also database table. So update the below code with your delete() method:

| 12345678 | `public` `function` `destroy($id){    $data` `= Product::where('id',$id)->first(['image']);    \File::delete('public/product/'.$data->image);    $product` `= Product::where('id',$id)->delete();` `return` `Response::json($product);}` |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

Now, update all methods into your **ProductController.php** file as follow:

| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 | `<?php` `namespace` `App\Http\Controllers;` `use` `App\Product;use` `Illuminate\Http\Request;use` `Redirect,Response,DB;use` `File;use` `PDF;` `class` `ProductController extends` `Controller{    public` `function` `index()    {        if(request()->ajax()) {            return` `datatables()->of(Product::select('*'))            ->addColumn('action', 'product-button')            ->addColumn('image', 'image')            ->rawColumns(['action','image'])            ->addIndexColumn()            ->make(true);        }        return` `view('list');    }` `public` `function` `store(Request $request)    {         request()->validate([            'image'` `=> 'image\|mimes:jpeg,png,jpg,gif,svg\|max:2048',       ]);` `$productId` `= $request->product_id;` `$details` `= ['title'` `=> $request->title, 'product_code'` `=> $request->product_code, 'description'` `=> $request->description];` `if` `($files` `= $request->file('image')) {` `//delete old file           \File::delete('public/product/'.$request->hidden_image);` `//insert new file           $destinationPath` `= 'public/product/'; // upload path           $profileImage` `= date('YmdHis') . "."` `. $files->getClientOriginalExtension();           $files->move($destinationPath, $profileImage);           $details['image'] = "$profileImage";        }` `$product`   `=   Product::updateOrCreate(['id'` `=> $productId], $details);` `return` `Response::json($product);    }` `public` `function` `edit($id)    {          $where` `= array('id'` `=> $id);        $product`  `= Product::where($where)->first();` `return` `Response::json($product);    }    public` `function` `destroy($id)    {        $data` `= Product::where('id',$id)->first(['image']);        \File::delete('public/product/'.$data->image);        $product` `= Product::where('id',$id)->delete();` `return` `Response::json($product);    }}` |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

Recommended:- [Laravel 10 Auto Load More Data On Page Scroll](https://www.tutsmake.com/laravel-10-auto-load-more-data-on-page-scroll/)

#### Step 7 – Create Blade View

In this step, create 3 blade views files. The first file is an action button that contains two buttons and the button name is edit and delete. The second file contains the product list. and the third file name image.blade.php file, it contains image.

Now, Navigate to **resources/views** and create **action.blade.php** file. This file contains a two-button name edit and delete. So you can update the below code in your action button file.

| 123456 | `<a` `href="javascript:void(0)"` `data-toggle="tooltip"`  `data-id="{{ $id }}"` `data-original-title="Edit"` `class="edit btn btn-success edit-product">    Edit</a><a` `href="javascript:void(0);"` `id="delete-product"` `data-toggle="tooltip"` `data-original-title="Delete"` `data-id="{{ $id }}"` `class="delete btn btn-danger">    Delete</a>` |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

Next, **create a list.blade.php** file inside **resources/views/** folder and update the below code in your product list file.

| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 | `<!DOCTYPE` `html><html` `lang="en"><head><!-- CSRF Token --><meta` `name="csrf-token"` `content="{{ csrf_token() }}"><title>Laravel Ajax Crud Example with Image Upload Tutorial - Tuts Make</title><link` `rel="stylesheet"` `href="`[`https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css`](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css)`"` `/><link`  `href="`[`https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css`](https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css)`"` `rel="stylesheet"><script` `src="`[`https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js`](https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js)`"></script> <script` `src="`[`https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js`](https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js)`"></script><script` `src="`[`https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js`](https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js)`"></script><script` `src="`[`https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js`](https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js)`"></script></head><body><div` `class="container"><a` `href="javascript:void(0)"` `class="btn btn-info ml-3"` `id="create-new-product">Add New</a><br><br></br><br><table` `class="table table-bordered table-striped"` `id="laravel_datatable"><thead><tr><th>ID</th><th>S. No</th><th>Image</th><th>Title</th><th>Product Code</th><th>Description</th><th>Created at</th><th>Action</th></tr></thead></table></div><div` `class="modal fade"` `id="ajax-product-modal"` `aria-hidden="true"><div` `class="modal-dialog"><div` `class="modal-content"><div` `class="modal-header"><h4` `class="modal-title"` `id="productCrudModal"></h4></div><div` `class="modal-body"><form` `id="productForm"` `name="productForm"` `class="form-horizontal"` `enctype="multipart/form-data"><input` `type="hidden"` `name="product_id"` `id="product_id"><div` `class="form-group"><label` `for="name"` `class="col-sm-2 control-label">Title</label><div` `class="col-sm-12"><input` `type="text"` `class="form-control"` `id="title"` `name="title"` `placeholder="Enter Tilte"` `value=""` `maxlength="50"` `required=""></div></div><div` `class="form-group"><label` `for="name"` `class="col-sm-2 control-label">Product Code</label><div` `class="col-sm-12"><input` `type="text"` `class="form-control"` `id="product_code"` `name="product_code"` `placeholder="Enter Tilte"` `value=""` `maxlength="50"` `required=""></div></div><div` `class="form-group"><label` `class="col-sm-2 control-label">Description</label><div` `class="col-sm-12"><input` `type="text"` `class="form-control"` `id="description"` `name="description"` `placeholder="Enter Description"` `value=""` `required=""></div></div><div` `class="form-group"><label` `class="col-sm-2 control-label">Image</label><div` `class="col-sm-12"><input` `id="image"` `type="file"` `name="image"` `accept="image/*"` `onchange="readURL(this);"><input` `type="hidden"` `name="hidden_image"` `id="hidden_image"></div></div><img` `id="modal-preview"` `src="`[`https://via.placeholder.com/150`](https://via.placeholder.com/150)`"` `alt="Preview"` `class="form-group hidden"` `width="100"` `height="100"><div` `class="col-sm-offset-2 col-sm-10"><button` `type="submit"` `class="btn btn-primary"` `id="btn-save"` `value="create">Save changes</button></div></form></div><div` `class="modal-footer"></div></div></div></div></body></html>` |
| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

Next, you will create a script code for performing create, store, update and delete products from the database table products using jQuery ajax request in laravel. So update this code in your **list.blade.php** file:

| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 | `<script>var` `SITEURL = '{{URL::to('')}}';$(document).ready( function` `() {$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});$('#laravel_datatable').DataTable({processing: true,serverSide: true,ajax: {url: SITEURL + "product-list",type: 'GET',},columns: [{data: 'id', name: 'id', 'visible': false},{data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},{data: 'image', name: 'image', orderable: false},{ data: 'title', name: 'title'` `},{ data: 'product_code', name: 'product_code'` `},{ data: 'description', name: 'description'` `},{ data: 'created_at', name: 'created_at'` `},{data: 'action', name: 'action', orderable: false},],order: [[0, 'desc']]});/*  When user click add user button */$('#create-new-product').click(function` `() {$('#btn-save').val("create-product");$('#product_id').val('');$('#productForm').trigger("reset");$('#productCrudModal').html("Add New Product");$('#ajax-product-modal').modal('show');$('#modal-preview').attr('src', '`[`https://via.placeholder.com/150`](https://via.placeholder.com/150)`');});/* When click edit user */$('body').on('click', '.edit-product', function` `() {var` `product_id = $(this).data('id');$.get('product-list/'` `+ product_id +'/edit', function` `(data) {$('#title-error').hide();$('#product_code-error').hide();$('#description-error').hide();$('#productCrudModal').html("Edit Product");$('#btn-save').val("edit-product");$('#ajax-product-modal').modal('show');$('#product_id').val(data.id);$('#title').val(data.title);$('#product_code').val(data.product_code);$('#description').val(data.description);$('#modal-preview').attr('alt', 'No image available');if(data.image){$('#modal-preview').attr('src', SITEURL +'public/product/'+data.image);$('#hidden_image').attr('src', SITEURL +'public/product/'+data.image);}})});$('body').on('click', '#delete-product', function` `() {var` `product_id = $(this).data("id");if(confirm("Are You sure want to delete !")){$.ajax({type: "get",url: SITEURL + "product-list/delete/"+product_id,success: function` `(data) {var` `oTable = $('#laravel_datatable').dataTable();oTable.fnDraw(false);},error: function` `(data) {console.log('Error:', data);}});}}); });$('body').on('submit', '#productForm', function` `(e) {e.preventDefault();var` `actionType = $('#btn-save').val();$('#btn-save').html('Sending..');var` `formData = new` `FormData(this);$.ajax({type:'POST',url: SITEURL + "product-list/store",data: formData,cache:false,contentType: false,processData: false,success: (data) => {$('#productForm').trigger("reset");$('#ajax-product-modal').modal('hide');$('#btn-save').html('Save Changes');var` `oTable = $('#laravel_datatable').dataTable();oTable.fnDraw(false);},error: function(data){console.log('Error:', data);$('#btn-save').html('Save Changes');}});});function` `readURL(input, id) {id = id \|\| '#modal-preview';if` `(input.files && input.files[0]) {var` `reader = new` `FileReader();reader.onload = function` `(e) {$(id).attr('src', e.target.result);};reader.readAsDataURL(input.files[0]);$('#modal-preview').removeClass('hidden');$('#start').hide();}}</script>` |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

Next, navigate to **resources/views** and create **image.blade.php** file. Then update the following code into your **image.blade.php** file:

| 12345 | `@if($image)<img` `id="preview"` `src="{{ ('public/product/'.$image) }}"` `alt="Preview"` `class="form-group hidden"` `width="100"` `height="100">@else<img` `id="preview"` `src="`[`https://via.placeholder.com/150`](https://via.placeholder.com/150)`"` `alt="Preview"` `class="form-group hidden"` `width="100"` `height="100">@endif` |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

Recommended:- [Laravel 10 Ajax CRUD Using Datatable Tutorial](https://www.tutsmake.com/laravel-10-ajax-crud-using-datatable-tutorial/)

#### Step 8 – Run Development Server

Now, execute the following command on the terminal to start development server. So open your terminal and run PHP artisan serve command:

```
 php artisan serve
If you want to run the project diffrent port so use this below command 
php artisan serve --port=8080  
```

Now you are ready to run our this example, so open your browser and hit the below URL:.

```
http://localhost:8000/product-list
```

### Conclusion

Laravel 10 ajax crud example with image upload and preview tutorial, you have learned how to create ajax crud example app with image upload preview using jQuery, yajra datatables and bootstrap modal without a refresh or reload the whole web page.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnphp.gitbook.io/learnphp/laravel-advanced/laravel-10-ajax-crud-with-image-upload-tutorial-example.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.