vendredi 15 janvier 2016

Laravel 5.1 passing image icons to the returned variables of JQuery auto-complete

As previously posted, I want to affix country flag icons to to the auto-complete results, right now, I'm getting this error:

GET http://localhost:2222/jquery/css/images/ui-bg_flat_75_ffffff_40x100.png 404 (Not Found)curCSS @ jquery-1.10.2.js:7093jQuery.extend.css @ jquery-1.10.2.js:7064isHidden @ jquery-1.10.2.js:6843showHide @ jquery-1.10.2.js:6876jQuery.fn.extend.hide @ jquery-1.10.2.js:6927jQuery.each.jQuery.fn.(anonymous function) @ jquery-1.10.2.js:9286$.fn.extend.hide @ jquery-ui.js:10545$.widget._create @ jquery-ui.js:2953(anonymous function) @ jquery-ui.js:415$.Widget._createWidget @ jquery-ui.js:585$.widget.$.(anonymous function).(anonymous function) @ jquery-ui.js:376(anonymous function) @ jquery-ui.js:531jQuery.extend.each @ jquery-1.10.2.js:657jQuery.fn.jQuery.each @ jquery-1.10.2.js:266$.widget.bridge.$.fn.(anonymous function) @ jquery-ui.js:523(anonymous function) @ useraddress:362jquery-1.10.2.js:8706 
GET http://localhost:2222/json/redirects?term=as 500 (Internal Server Error)jQuery.ajaxTransport.send @ jquery-1.10.2.js:8706jQuery.extend.ajax @ jquery-1.10.2.js:8136$.widget._initSource.source @ jquery-ui.js:3121$.widget._search @ jquery-ui.js:3176(anonymous function) @ jquery-ui.js:415$.widget.search @ jquery-ui.js:3168(anonymous function) @ jquery-ui.js:415(anonymous function) @ jquery-ui.js:3149handlerProxy @ jquery-ui.js:760

I suppose it's complaining about the URL {{ URL::to('/') }}/flags/us.png, so I queried it by accessing the images using the URL passed to the jquery code and I was able to access the images. Please, your professional support s highly needed. Thanks.

This is the controller:

public function SelectLocationPlaces(Request $userAdressRequest)
    {
        $flagsInDirectory = [];
        $filesInFolder = \File::files('{{ URL::to('/') }}/flags/');

        $term = $userAdressRequest->term;
        $data = LocationPlaces::where('name', 'LIKE', '%'.$term.'%')->take(10)->get();
        $countries = Country::all();
        $countryFlag = CountryFlag::all();
        $results = array();

        foreach ($data as $key => $value) {

            foreach ($countries as $key => $values) {
                if($value->country_id === $values->iso_alpha2){
                    $countrySelected = $values->name;
                }
            }

            foreach ($countryFlag as $key => $valueFlag) {
               if($countrySelected === $valueFlag->name){
                    $countryPerFlag = $valueFlag->flag;
                }
            }

            foreach($filesInFolder as $filenames)
            {
                if (file_exists(public_path('flags/'.$file->getClientOriginalName()))) {
                    if($countryPerFlag === $file->getClientOriginalName()){
                        $flagFile = $filenames->filename.'png';
                    }
                }
            }

            $results[] = 
            ['value'=>$value->name, 'countryPerFlag'=>$countryPerFlag];
        }
        return Response::json($results);
    }

This is the blade view:

    <div>{!! Form::text('city_town', Input::old('city_town'), ['class'=>'css-classes', 'placeholder'=>'area/city', 'id'=>'city_town']) !!}</div>    
        <script type="text/javascript">
            $('#city_town').autocomplete({
                source: '{{ url('json/redirects') }}',
                minLength: 0,
                autofocus: true,
                select: function(e, ui){
                    $('#name').val(ui.item.name);
                }
            });

            $('#city_town').data( "ui-autocomplete" )._renderItem = function( ul, item ) {

            var $li = $('<li>'),
                $img = $('<img>');

            $img.attr({
              src: '{{ URL::to('/') }}/flags/' + countryFlags,
              alt: item.name
            });

            $li.attr('data-value', item.name);
            $li.append('<a href="#">');
            $li.find('a').append($img).append(item.name);    

            return $li.appendTo(ul);
          };
        </script>
{!! Form::close() !!}

@stop



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire