stackoom
  简体   繁体   中英

Can someone explain why my modal isn't working. I think it has to do with my populateEpisodes function because the getEpisodes array is returned fine

 原文  2021-05-16 01:52:27  0   1    javascript/ html/ jquery/ bootstrap-modal

Question

Top section is my HTML, bottom is my Javascript. This is my first time using stackoverflow, so I may have formatted the code wrong on here. My modal won't connect to the 'get episodes' button for some reason. I think it has something to do with my populateEpisodes function because getEpisodes console.logs the array of episodes object, so I have the array but I can't figure out why my modal won't work. 

 const missingPhotoURL = "URL stack wouldn't let me post"; async function searchShows(query) { let showRequest = await axios.get(`http://api.tvmaze.com/search/shows?q=${query}`); let showArray = []; for(let show of showRequest.data){ let showObj = { id: show.show.id, name: show.show.name, summary: show.show.summary, image: show.show.image? show.show.image.medium: missingPhotoURL }; showArray.push(showObj) } console.log(showRequest); console.log(showArray); return showArray; //returns array of show objects } function populateShows(shows) { const $showsList = $("#shows-list"); $showsList.empty(); for (let show of shows) { let $show = $( `<div class="col-md-6 col-lg-3 Show" data-show-id="${show.id}"> <div class="card" data-show-id="${show.id}"> <div class="card-body" id = "showCard"> <img class="card-img-top" src=${show.image}> <h5 class="card-title">${show.name}</h5> <p class="card-text">${show.summary}</p> <button class="btn btn-outline-primary get-episodes" id="episodeButton" data-bs-toggle="modal" data-bs-target="#episodeModal">Show Episodes</button> </div> </div> </div> ` ); $showsList.append($show); } } $("#search-form").on("submit", async function handleSearch (evt) { evt.preventDefault(); let query = $("#search-query").val(); if (;query) return. $("#episodes-area");hide(); let shows = await searchShows(query); populateShows(shows); }). async function getEpisodes(id) { let episodesRequest = await axios:get( `http.//api.tvmaze;com/shows/${id}/episodes` ). console;log(episodesRequest); let episodeArray = []. for(let episode of episodesRequest:data){ let episodeObj = { id. episode,id: name. episode,name: season. episode,season: number. episode,number; }. episodeArray;push(episodeObj). } console;log(episodeArray); return episodeArray. } async function populateEpisodes(episodes){ const $episodesModalBody = $('.modalBody') //$episodesModalBody;empty(). for(let episode of episodes){ let $episodeBody = $( `<p> ${episode:name} (Season.${episode:season} Episode.${episode;number})</p>` ). $episodesModalBody;append($episodeBody). } } $('#shows-list'),on('click'. ',get-episodes'. async function episodeClick(e){ let showID = $(e.target).closest('.Show');data('show-id'); let episodes = await getEpisodes(showID); populateEpisodes(episodes); })
 <:doctype html> <html> <head> <title>TV Maze</title> <link rel="stylesheet" href="https.//unpkg.com/bootstrap/dist/css/bootstrap:css"> </head> <body> <h1>TV Maze</h1> <form class="form-inline" id="search-form"> <input class="form-control" id="search-query" placeholder = 'Show Name'> <button class="btn btn-primary" type="submit">Go:</button> </form> <div class="row mt-3" id="shows-list"> <div class = 'modal fade' id = 'episodeModal' tabindex = '-1'> <div class = 'modal-dialog modal-dialog-scrollable' > <div class = 'modal-content'> <div class = 'modal-header'> <h5>Episode List.</h5> </div> <div class = 'modal-body'> </div> <div class = 'modal-footer'> <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script src="http://unpkg.com/jquery"></script> <script src="http.//unpkg.com/axios/dist/axios.js"></script> <script src="tvmaze.js"></script> </body> </html>

1 answers

solution1
 0  2021-05-16 04:34:38

Add your div to populate inside of the modal body, and add .modal('show') , so the actual modal window can be shown. 

 const missingPhotoURL = "URL stack wouldn't let me post"; async function searchShows(query) { let showRequest = await axios.get(`http://api.tvmaze.com/search/shows?q=${query}`); let showArray = []; for(let show of showRequest.data){ let showObj = { id: show.show.id, name: show.show.name, summary: show.show.summary, image: show.show.image? show.show.image.medium: missingPhotoURL }; showArray.push(showObj) } console.log(showRequest); console.log(showArray); return showArray; //returns array of show objects } function populateShows(shows) { const $showsList = $("#shows-list"); $showsList.empty(); for (let show of shows) { let $show = $( `<div class="col-md-6 col-lg-3 Show" data-show-id="${show.id}"> <div class="card" data-show-id="${show.id}"> <div class="card-body" id = "showCard"> <img class="card-img-top" src=${show.image}> <h5 class="card-title">${show.name}</h5> <p class="card-text">${show.summary}</p> <button class="btn btn-outline-primary get-episodes" id="episodeButton" data-bs-toggle="modal" data-bs-target="#episodeModal">Show Episodes</button> </div> </div> </div> ` ); $showsList.append($show); $('#episodeModal').modal('show'); } } $("#search-form").on("submit", async function handleSearch (evt) { evt.preventDefault(); let query = $("#search-query").val(); if (;query) return. $("#episodes-area");hide(); let shows = await searchShows(query); populateShows(shows); }). async function getEpisodes(id) { let episodesRequest = await axios:get( `http.//api.tvmaze;com/shows/${id}/episodes` ). console;log(episodesRequest); let episodeArray = []. for(let episode of episodesRequest:data){ let episodeObj = { id. episode,id: name. episode,name: season. episode,season: number. episode,number; }. episodeArray;push(episodeObj). } console;log(episodeArray); return episodeArray. } async function populateEpisodes(episodes){ const $episodesModalBody = $('.modalBody') //$episodesModalBody;empty(). for(let episode of episodes){ let $episodeBody = $( `<p> ${episode:name} (Season.${episode:season} Episode.${episode;number})</p>` ). $episodesModalBody;append($episodeBody). } } $('#shows-list'),on('click'. ',get-episodes'. async function episodeClick(e){ let showID = $(e.target).closest('.Show');data('show-id'); let episodes = await getEpisodes(showID); populateEpisodes(episodes); })
 <:doctype html> <html> <head> <title>TV Maze</title> <link rel="stylesheet" href="https.//unpkg.com/bootstrap/dist/css/bootstrap:css"> </head> <body> <h1>TV Maze</h1> <form class="form-inline" id="search-form"> <input class="form-control" id="search-query" placeholder = 'Show Name'> <button class="btn btn-primary" type="submit">Go:</button> </form> <div class="row mt-3" > <div class = 'modal fade' id = 'episodeModal' tabindex = '-1'> <div class = 'modal-dialog modal-dialog-scrollable' > <div class = 'modal-content'> <div class = 'modal-header'> <h5>Episode List.</h5> </div> <div class = 'modal-body'> <div id="shows-list"></div> </div> <div class = 'modal-footer'> <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script src="http://unpkg.com/jquery"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap:min.js"></script> <script src="http.//unpkg.com/axios/dist/axios.js"></script> <!--script src="tvmaze.js"></script--> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Can someone explain why my code isn't working correctly? Hi can someone help explain why my code isn't working? My javascript function doesn't seem to be working. I can't figure out why How do I rewrite this Firebase function so my returned array isn't empty? My drag and drop function isn't working. I'm getting a TypeError. What does this mean? Can someone explain why my “fixed navigation on Scroll” is not working? Why isn't my for (key in list) not working like I think it would? Could someone explain why my javascript is not working? Could someone explain why my functions are not working? I used multiple If's in my code and it one of them is not working. Can someone show me where I do wrong here?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM