Laravel Javascript Image Swap Dropdown List -


right i'm develop ecommerce shopping site using laravel 5.0 , fyp , there long way go .. anyway .

and , make product show page

this controller :

     public function getview($id) {     return view('store.show')->with('products', product::find($id))->with('categories',category::all())->with('db',product::all())->with('options', gambar::where('product_id','=',$id)->lists('name', 'img')); } 

as can see, on end of line have code lists('name', 'img')

it list out column name , image values list

everything works accept , need make drop down list image change on select .

look on code drop down list , imageswap :

    <div class="form-group">       {!! form::open(array('url' => 'foo/bar')) !!}      {!! form::label('link category') !!}<br />      {!! form::select('product_id',(['0' => 'select option'] + $options),null,['class' => 'form-control', 'id' => 'dlist', 'onchange' => 'swapimage()']) !!}      {!! form::close() !!}       <script type="text/javascript">      function swapimage(){      var image = document.getelementbyid("imagetoswap");      var dropd = document.getelementbyid("dlist");      image.src = dropd.value;      };      </script>     </div> 

and code image appear base on select (products->image main image , not seed dropdown list :

 <img id="imagetoswap" src="{{asset($products->image)}}"  /> 

the flow of list in controller works , give in view source chrome :

<img id="imagetoswap" src="img/upload/20-3-291-image-1.jpg"  /> 

so image not appear in page , should appear :

<img id="imagetoswap" src="localhost:8000/img/upload/20-3-291-image-1.jpg"  /> 

the question , how return "img" laravel asset {{asset()}}, image can display perfectly?

the problem lies in communication between laravel , javascript.

as point, use lists('name', 'img'): asset prefix not added there.

hence, when image.src = dropd.value; source of image doesn't have asset prefix.

i see 2 possibilities:

  • either treatment on list before sending it: lists('name', 'img')->map(asset) (with map method --not sure if it's available laravel 5.0)
  • or add in javascript: image.src = "{{asset()}}/" + dropd.value;

Comments

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -