Ajax call to fill HTML table

Posted In Laravel
  • youtta 6 months ago
    ```
    I have the select dropdown:
    <select class="form-control" id="cup">
                @foreach($tourname as $value)
                    <option value="{{ $value->tournament_id }}">{{ $value->name}}</option>
                @endforeach
            </select>
    		
    				
    I want to show the table of specific ID records on the 'Onchange' event of ajax. Please guide Ajax I am new to it.
    
    
    <table class="table table-sm table-hover  table-striped" id="table">
            <thead>
            <tr>
                <th>Club </th>
                <th>Vs</th>
                <th>Club</th>
                <th>Match Type</th>
                <th>Date</th>
                <th>Time</th>
                <th>Status</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
            </thead>
            <tbody>
    
            @if($matches->count() > 0)
            @else
                <th colspan="5" class="text-center">No any matches</th>
            @endif
    
            </tbody>
        </table>
    		
    I have the select dropdown:
    <select class="form-control" id="cup">
                @foreach($tourname as $value)
                    <option value="{{ $value->tournament_id }}">{{ $value->name}}</option>
                @endforeach
            </select>
    		
    				
    I want to show the table of specific ID records on the 'Onchange' event of ajax. Please guide Ajax I am new to it.
    
    
    <table class="table table-sm table-hover  table-striped" id="table">
            <thead>
            <tr>
                <th>Club </th>
                <th>Vs</th>
                <th>Club</th>
                <th>Match Type</th>
                <th>Date</th>
                <th>Time</th>
                <th>Status</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
            </thead>
            <tbody>
    
            @if($matches->count() > 0)
            @else
                <th colspan="5" class="text-center">No any matches</th>
            @endif
    
            </tbody>
        </table>
    		
    
  • safe-mood 2 months ago
    hi @youtta
    
    * this my solution hope it work for u 
    * Blade  :  tournameAjax.blade.php in a subfolder with the name  partials put  just your table with   foreach 
    
    * Controller  :
    
    
    				if ($request->ajax())  {      
    				 $tourname = Tourname::where("id", $request->tournament_id)->first();
    				 $view = view("partials.tournameAjax", compact('tourname'))->render();
    													return
    													response()->json(
    															array('html' => $view)
    													);                    
    			}
    * js and ajax call on change : 
    
    			$(document).ready(function() {
    			$("select#cup").on('change', function() {
    					var tournament_id = $(this).children("option:selected").attr('id');
    					$.ajax({
    							method: "POST",
    							url: "/youRoute",
    							data: {
    									tournament_id: tournament_id,
    									__token: '{{csrf_token()}}'
    							},
    							success: function(data) { // ajax success
    									if (data != []) {
    											// put ur  result
    											$('#table').html(data.html);
    									}
    							}
    					});
    			});
    		});

    hi @youtta

    • this my solution hope it work for u

    • Blade : tournameAjax.blade.php in a subfolder with the name partials put just your table with foreach

    • Controller :

        		if ($request->ajax())  {      
        		 $tourname = Tourname::where("id", $request->tournament_id)->first();
        		 $view = view("partials.tournameAjax", compact('tourname'))->render();
        											return
        											response()->json(
        													array('html' => $view)
        											);                    
        	}
      
    • js and ajax call on change :

        	$(document).ready(function() {
        	$("select#cup").on('change', function() {
        			var tournament_id = $(this).children("option:selected").attr('id');
        			$.ajax({
        					method: "POST",
        					url: "/youRoute",
        					data: {
        							tournament_id: tournament_id,
        							__token: '{{csrf_token()}}'
        					},
        					success: function(data) { // ajax success
        							if (data != []) {
        									// put ur  result
        									$('#table').html(data.html);
        							}
        					}
        			});
        	});
        });
      
  • glenn-mccoy 6 days ago
    I had the same issue, resolved it by removing the storage directory and then clicking on Fix Storage Link inside the Voyager admin.
    
    If you look at the symlink created during installation you'll see it's /Users/tony/Sites/wavedev/storage/app/public [run 3](https://run3az.com)
    
    Removing that link and then logging into Wave, then the Voyager dashboard will provide you an option to repair the symbolic link - which fixes the issue.

    I had the same issue, resolved it by removing the storage directory and then clicking on Fix Storage Link inside the Voyager admin.

    If you look at the symlink created during installation you'll see it's /Users/tony/Sites/wavedev/storage/app/public run 3

    Removing that link and then logging into Wave, then the Voyager dashboard will provide you an option to repair the symbolic link - which fixes the issue.

Please login or signup to leave a response.

Login

or Sign Up

Sign Up

or Login
×
tnylea
Cheers Friend!

I'm Tony, the creator of this site. I'm trying to increase my twitter following. Want to follow me?

Follow @tnylea If not, no worries :)