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
Post a Comment