-1

I try to run the script for every @foreach loop like in the code below. But it seems the script only work only for the first loop. How to make it run for every loop ?

@foreach ($list as $e)
   @section('js')
                <script type="text/javascript">
                                            
                function a(){
                                                
                        $.ajax({
                            url: '{{ url("get-topik/") }}/{{ $e->id }}'
                        })
                        .done(function(data) {
            
                        var html="";
                           for(var i=0;i<data.length;i++){
                              html += '<span class="badge badge-pill badge-sm badge-primary" style="background-color: #51b3f9">'+data[i].get_topik.topik+'</span>'
            
                          }
                     $("#topik").append(html)
                       });
                    }
                                                
    
                a();
        
            </script>
            @endsection

       <span id="topik">
                            
        </span>

@endforeach

Thanks Before :)

Louis Sant
  • 11
  • 4
  • 1
    What are you trying to achieve with this script? This script does not run when the template is rendering. You're basically trying to define *n* functions, all of them called `a()`, which cannot be done. – El_Vanja Dec 11 '20 at 19:28
  • What i hoping is a() function run as many as the foreach loop with different $e-id @El_Vanja – Louis Sant Dec 11 '20 at 19:31
  • 1
    You must understand that the scripts do not execute in the `foreach`. Learn about [client and server side](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming). What you're doing here is creating a new script tag, each of them defining their own function `a()` to be executed after the template is rendered, on page load. And you can't have multiple functions with the same name. You don't need AJAX here at all, you can directly insert the data you're fetching. – El_Vanja Dec 11 '20 at 19:35
  • Welcome to SO... Making ajax requests in a loop is never a good idea or a good design. For your case, I can suggest that you should get the topik for each item of the $list in the same controller method where you are getting the $list and then send that data to view. It will not only be efficient saving multiple network requests but also less messy design – Donkarnash Dec 11 '20 at 19:40

1 Answers1

0

You might be looking for:

<script type="text/javascript">
                            
    function a(id, url){
                                    
            $.ajax({
                url: url + id
            })
            .done(function(data) {

            var html="";
                for(var i=0;i<data.length;i++){
                    html += '<span class="badge badge-pill badge-sm badge-primary" style="background-color: #51b3f9">'+data[i].get_topik.topik+'</span>'

                }
            $("#topik-" + id).append(html)
            });
    }
                                    

    
</script>
        

@foreach ($list as $e)
   
       <span id="topik-{{$e-id}}">
                            
        </span>
        <script> a( {{$e->id}}, {{ url("get-topik/") }} ) </script>

@endforeach

Otherwise, I don't think this is the best approach to achieve what you want to do, Have you tried to do it only with laravel instead of mixing with ajax?

fluid undefined
  • 364
  • 2
  • 6