-1

I have the following selec-box :

 <select class="form-control select2-single" data-width="100%" name="numero_projet" id="numero_projet">
    <option label="&nbsp;">&nbsp;</option>
    @foreach($projets as $projet)
      <option data-id="{{$projet->id_projet}}" value="{{$projet->id_projet}}">{{$projet->numero_projet}}</option>
    @endforeach
   </select>

And the following ajax code to get data :

<script>
    $(document).ready(function(){


        $('#numero_projet').change(function(){

            var id_projet = $(this).find("option:selected").data("id");

            console.log(id_projet);

        $.ajaxSetup({

            headers: { 'X-CSRF-TOKEN': 
        $('meta[name="_token"]').attr('content') }

          });
        
        $.ajax({
                  
            url:"getProjet/"+id_projet,
            type:"GET",
            
    })
        })

        })
</script>

And the following controller :

 public function getProjet()

    {

    if(request()->ajax())
        {
           $id_projet = request('numero_projet');

          $projets_casting = Projet_Casting::where('id_projet',$id_projet)->get();

            return response()->json(['projets_casting' => $projets_casting]);
          
        }
    }

And I have the following view where I should display the data that I get from controller :

 <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Select from Library</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @foreach($projets_casting as $projet_casting)
                    <div class="modal-body scroll pt-0 pb-0 mt-4 mb-4">
                        <div class="accordion" id="accordion">
                            <div class="mb-2">
                                <button class="btn btn-link p-0 folder-button-collapse" data-toggle="collapse"
                                    data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    <span class="icon-container">
                                        <i class="simple-icon-arrow-down"></i>
                                    </span>
                                    <span class="folder-name">Castings</span>
                                </button>
                                <div id="collapseOne" class="collapse show" data-parent="#accordion">
                                    <div class="list disable-text-selection">
                                        <div class="row">
                                       
                                            <div class="col-6 mb-1 sfl-item-container casting"
                                                data-preview-path="img/products/chocolate-cake-thumb.jpg"
                                                data-path="img/products/chocolate-cake-thumb.jpg"
                                                data-label="chocolate-cake-thumb.jpg">
                                                <div class="card d-flex mb-2 p-0 media-thumb-container">
                                                    <div class="d-flex align-self-stretch">
                                                        <img src="img/products/chocolate-cake-thumb.jpg" alt="uploaded image"
                                                            class="list-media-thumbnail responsive border-0" />
                                                    </div>
                                                    <div class="d-flex flex-grow-1 min-width-zero">
                                                        <div
                                                            class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
                                                            <div class="w-100">
                                                                <p class="truncate mb-0">{{$projet_casting->id_casting}}</p>
                                                            </div>
                                                        </div>
                                                        <div
                                                            class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
                                                            <label class="custom-control custom-checkbox mb-0">
                                                                <input type="checkbox" class="custom-control-input">
                                                                <span class="custom-control-label"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                         

                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                 @endforeach    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-primary sfl-submit">Selectionner</button>
                    </div>
                </div>
            </div>

it shouls display in this div the id_casting of each projects

<div class="w-100">
 <p class="truncate mb-0">{{$projet_casting->id_casting}}</p>
</div>

But I get the following error :

Undefined variable: projets_casting (View:..........)

What is wrong with my code ?

If you have any idea please help

Improve this question

1 Answer 1

Reset to default
2

You're trying to mix the rendering of the view with actions that Javascript will execute once the rendering has been finished. If you're sending an Ajax request, you should do something with the JSON response to modify your HTML.

But don't expect Laravel to set $projets_casting: That would only work if you were sending the information when returning the view to the user.

UPDATE

Another option would be to return a rendered view on the Ajax request (instead of returning the JSON data) and you should simply insert the endpoint response into the HTML section. But I'm not a big fan of doing this.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

@Professeur , thank you for your answer , if it possible suggest me if you have a documentation about modifying HTML with JSON response
@user14053977 I've updated the answer to add another option for fixing this. You may find easier to return view('pageContent', $projets_casting) instead of response()->json(['projets_casting' => $projets_casting]). pageContent would be a view like the one you have, but only for the dinamyc part of the page. Then you just need to modify the HTML using Javascript: $('content').html($ajaxResponse);
I should create a new view named for example : pageContent ?
Yes, that's an option. A new view containing everything below @foreach($projets_casting as $projet_casting), so every time you ask for the ajax request, the view is rendered and you get the HTML with the content you expect. Then you just need to insert the received HTML into the website.
Regarding updating the HTML directly on Javascript using the JSON response, you can take a look at this: stackoverflow.com/questions/47624490/…

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.