error jquery 3.5.1at HTMLButtonElement.dispatch et at v.handle

Question

I have a problem with jquery 3.5.1. The code runs fine in 3.3.1 but not in 3.5.1. Here is an overview of the problem in image. An error "at HTMLButtonElement" and "at HTMLButtonElement.dispatch (jquery-3.5.1.min.js?_v=ee940c05:2:43090)" occurs when jquery 3.5.1 is loaded.

        var array = {
        key: '078016f3132847b07af647afd854c75e',
        urlMovie: 'https://api.themoviedb.org/3/search/movie?api_key=',
        urlSerie: 'https://api.themoviedb.org/3/search/tv?api_key=',
        urlImg: 'styles/prez/img/',
        urlJaq: 'https://image.tmdb.org/t/p/w154',
        noCover: 'no_cover.jpeg',
    };
    
    function mock_fetch(url, rep) {
        const query = url + "&language=fr-FR&query=" + rep + "&page=1&include_adult=false";
        let response = await fetch(query);
        return await response.json();
    }
    
    async function getValue(inputRep) {
        let data;
        try {
            const responseData = await mock_fetch(array.urlMovie + array.key, inputRep);
    console.log(responseData);
            data = responseData?.results;
            console.log(data);
            if (!data.length) {
                alert("Le film que vous demandez n'est pas disponible !");
            } else {
                viewPoster(data);
            }
        } catch (error) {
            console.log(error);
        }
        return data;
    };
    
    function viewPoster(data) {
        $("#prez_choiseJaq").css("display", "inline-grid");
        var template = "";
        data.forEach((film, index) => {
            template += `<a href="#" id="prez_jaquetteDiv" class="prez_col" data-index=${index}><p class="prez_title">${film.title}</p><img src="${film.poster_path ? (array.urlJaq + film.poster_path) : array.urlImg + array.noCover}" class="prez_jaquette" /></a>`;
        })
        $("#prez_choiseJaq").html(template);
    };
    
    function selectMovie(event) {
        event.preventDefault();
        getValue($("#prez_input").val());
    }
    
    function doSomethingWithFilm(event) {
        console.log(`You clicked film number ${$(this).data('index')}`)
    }
    
    function init() {
        $("#prez_input").keypress(event => { event.key === "Enter" && selectMovie(event) });
        $("#prez_btn").on("click", selectMovie);
        $(document).on("click", ".prez_col", doSomethingWithFilm);
    }
    
    $(init);

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        </script>
        </head>
        <body>
        <div id="prez_rech" class="prez_rech">
            <label for="fname">Recherche du film :</label>
            <input type="text" placeholder="Entrez votre film ici" id="prez_input">
            <xf:button type="button" id="prez_btn">Rechercher</xf:button>
        </div>
    
        <div id="prez_choiseJaq"></div>
        </body>
        </html>

UPADATE :

Now it works. Thanks @Tibrogargan for helping me out. it was enough to put the async and axwait in the right place.

async function mock_fetch(url, rep) {
    const query = url + "&language=fr-FR&query=" + rep + "&page=1&include_adult=false";
    let response = await fetch(query);
    response = await response.json();
    console.log(response);
    return response;
}

async function getValue(inputRep) {
    let data;
    try {
        const responseData = await mock_fetch(array.urlMovie + array.key, inputRep);
        console.log(responseData);
        data = responseData?.results;
        console.log(data[1]);
        if (!data.length) {
            alert("Le film que vous demandez n'est pas disponible !");
        } else {
            viewPoster(data);
        }
    } catch (error) {
        console.log(error);
    }
    return data;
};

thank you in advance for your help

You're getting no response from the fetch. It's not jQuery - that's not being used in the fetch. — Tibrogargan, Jun 05 '22 at 09:34
You made `mock_feetch` async, so it's returning before there are any results. you need to do `const responseData = await mock_fetch....`, or handle the promise w/ a `then` instead. — Tibrogargan, Jun 05 '22 at 09:53
It doesn't behave that way when the data is being mocked, because there are no async calls being done - the data is available immediately, so the promise is returned already fulfilled. — Tibrogargan, Jun 05 '22 at 10:12
@Tibrogargan it doesn't work by doing "responseData = await mock_fetch....." and the "then" method I don't know how to do it. I don't really understand asynchronous operation. — marilyn, Jun 05 '22 at 19:45
What exactly do you mean by "it doesn't work"? Works for me, with one other minor change that you should be able to google very easily. — Tibrogargan, Jun 06 '22 at 05:38
I have rolled back the changes which fundamentally changed the question. Please ask a new question for a separate issue. — phuzi, Jun 06 '22 at 10:27
@Tibrogargan I put back the original code you made with "responseData = await mock_fetch..." this is what it does, an error "Uncaught Syntax Error: Unexpected reserved word" and for the other method you gave me you suggested "then" I looked sure google I know where to put it in place it's in the "getvalue" function or in "mock_fetch [jsfiddle](https://jsfiddle.net/marilyn91/ownvatm0/3/) — marilyn, Jun 06 '22 at 13:59
@Tibrogargan It's good it works, I put an update in the post. — marilyn, Jun 07 '22 at 10:14

error jquery 3.5.1at HTMLButtonElement.dispatch et at v.handle

0 Answers0

Linked