Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

amitsinha0603's avatar

Js file stop working

I am loading data using third party API, when user type in text field, it will call a function and get data from API and show it in autocomplete, but when I call function all js file stop working and slider and autocomplete feature stop working, suggest anyone how to fix it...

0 likes
4 replies
tykus's avatar

You probably have some error; check the Console in your browser's dev tools

1 like
amitsinha0603's avatar

I have fixed all js error, but still js stop loading, some slider stops working

this is my blade code

                                    <input wire:model.live.debounce.550ms="searchKey" id="cityInput"
                                         class="form-control" type="text"
                                        placeholder="Enter Origin/Destination City" autocomplete="off">
                                    <i class="flaticon-maps-and-flags"></i>
                                    
                                    <div class="destination-autocomplete" id="autocompleteList">
                                        <ul>
                                            <li class="search-list">
                                                <span class="destination-search-item">not found</span>
                                                <label class="destination-label"></label>
                                            </li>
                                            @if (is_array($results) && (isset($results['data']) && is_array($results['data'])))
                                            @foreach ($results['data'] as $key => $result)
                                            <li class="search-list">
                                                <a href="#">
                                                    @if(isset($result->SEARCH_KEY))
                                                    <span class="destination-search-item">{{ $result->SEARCH_KEY }}</span>
                                                    <label class="destination-label">{{ $result->TAG_TYPE }}</label>
                                                    @endif
                                                </a>
                                            </li>
                                            @endforeach
                                            @endif

                                            <div id="noResults" style="display: none; padding: 10px;">No
                                                results found
                                            </div>
                                        </ul>

                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>

this is my component code public function searchDestination() { $searchData = searchDest($this->searchKey, $this->travelType, $this->sector); $jdecodeResp = json_decode($searchData); $responseArray = (array) $jdecodeResp;

    $this->results['data'] = isset($responseArray['data']) ? $responseArray['data'] : [];
    
}

this is my layout file code

<title>{{ $title ?? 'Tourism' }} | {{ config('app.name', '') }} </title>
{{-- @vite(['resources/js/app.js']) --}}
<link rel="icon" type="image/png" href="https://connect.csc.gov.in/assets/img/favicon.png" sizes="24x24">
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/font/flaticon.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/css/plugin.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

@livewireStyles
<script src="{{ asset('assets/js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/js/plugin.js') }}"></script>
<script src="{{ asset('assets/js/main.js') }}"></script>

<script src="{{ asset('assets/js/custom-swiper2.js') }}"></script>
@livewireScripts

my autocomplete is working but because of js file flatuating, may be it is not loading, that's why some sliders also stop working, how to fix it, js file is not loading kindly suggest

js files loading first time but when I starting typing in text field, js file stop loading and js code stop working

Wolf3D's avatar

It might be a wild guess, but I had a similar problem. In my case it was a combination with Breeze, where in my app.js I had these lines:

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

In combination with Breeze, they should be disabled.

Please or to participate in this conversation.