Show Operation – Laravel

Show of any row from the list/table is done by using JavaScript.  To show we must take care of following things:

• Views ===> show button ===> data-id  with id’s value
• Views ===> Form with action and id  or Skip this step and include action with id in JS ( 2 ways to operate show operation )
• Views ===> JavaScript to be triggered when show button is clicked
• Controller ===> Show() function and  Returns the selected data as a response to json()
• Modal ===> JavaScript assigns values to modal’s id through JS

Views  ==> Show Button

<a style="background-color: green !important" href="javascript:void(0)" data-id="{{ $test->id }}" class="btn btn-xs btn-show">
  <i  class="fa fa-eye"></i>
</a>

JavaScript Code – Show Rendering

<script>
   $(function(){
	     $(document).on('click','.btn-show',function(e){  
		 e.preventDefault();
		 var id = $(this).attr('data-id');
		 var a_url = "{{ route('admin.testimonial.show','rrr') }}";
		 var url = a_url.replace('rrr',id);
		 $.ajax({
 		     type:'GET',
 		     url:url,
 		     success:function(res,responseText,jqxhr){
		    	$(".modal-content .name-script").html(res.name);
		    	$(".modal-content .address_designation-script").html(res.address_designation);
		    	$(".modal-content .testimonial-script").html(res.testimonial);
		    document.getElementById("myImg").src = res.image_path;
		     },
 		     error:function(res,responseText,jqxhr,errorStatus){
 		    		 console.error(res.b);
 		     }
 		     });
		  $("#showTestimonial").modal('show');
		});
	 })
</script>

Controller – Show() method

    public function show($id)
    {
        $testimonial = Testimonial::find($id);
        $testimonial['image_path'] = asset($testimonial->image);
        return response()->json($testimonial,200);
    }

Views ==> Modal Box – Where JS assign the value

<div  class="modal fade" id="showTestimonial" role="dialog">
	<div class="modal-dialog">
	    <div class="modal-content">
	        <div style="background-color: black;color: white;text-align: center"  class="modal-header">
	              <button type="button" class="close" data-dismiss="modal">×</button>
	              <h4 class="modal-title">Testimonial</h4>
	        </div>
	        <div style="text-align: center"  class="modal-body modal-content">
	    	        <div class="row">
	    	        	<div class="col-md-8">
			        		<h3 class="name-script"></h3>
			        		<h6 class="address_designation-script"></h6>
			        		<br>
		  	        		<p class="testimonial-script"></p>
		  	        		
	    	        	</div>
        
	    	        	<div class="col-md-4">
			        	
			        		<img id="myImg"  height="auto" width="100%" class="image-script" src="">
	    	        	</div>
	    	        </div>
	        </div>
	        <div class="modal-footer">
	          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        </div>
	    </div>
	</div>
</div>

This will automaticall popup the modal box when show button is clicked. Make sure the button have assigned with data-id values.

In short to assign values from JS to HTML through JSON

// To assign data to testimonial-script class of tag called <h3>

$(".modal-content .testimonial-script").html(res.testimonial);

// To assign data of image to myImg id of tag called <image>
document.getElementById("myImg").src = res.image_path;