I am using omdb api, it turns out that when I click on the link already created in the first request, it does not show me the modal for each movie (id) in specific.
$(document).ready(() => {
$('.modal').modal();
const API_KEY = '98430029';
const btnSearch = $('#btn-search');
btnSearch.on('click', (e) => {
e.preventDefault();
const input = $('#search').val();
getMovies(input);
})
function getMovies(movie){
axios.get('http://www.omdbapi.com/?apikey=${API_KEY}&s=${movie}')
.then(response => {
const movies = response.data.Search;
let template = '';
$.each(movies, (i, info) => {
template += '
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img class="card-image" src="${info.Poster === 'N/A' ? '': info.Poster}">
<h5 class="card-content">${info.Title}</h5>
<a data-id="${info.imdbID}" href="#modal1"
class="detail btn modal-trigger btn-floating halfway-fab waves-effect waves-light red">
<i class="material-icons">more</i>
</a>
</div>
</div>
</div>
';
})
$('#content').html(template);
$(".detail").on('click',() => {
let id = $(this).attr("data-id");
getDetails(id);
});
})
.catch(err => console.log(err))
}
function getDetails(id) {
axios.get('http://www.omdbapi.com/?apikey=${API_KEY}&i=${id}')
.then(response => {
const info = response.data;
//Esto no me muestra al hacer click
let template ='
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>${info.Title}</h4>
<p>${info.Plot}</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Cerrar</a>
</div>
</div>
';
$("#modal-detail").html(template);
})
.catch(err => console.log(err))
}
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Buscador de Peliculas</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="container">
<h1 class="center-align">Encuentra tu película</h1>
<form class="center-align" id="form">
<div class="input-field col s12">
<input type="text" id="search" placeholder="Nombre de tu película">
</div>
<a class="waves-effect waves-light btn" id="btn-search" style="margin-bottom: 30px">Buscar</a>
</form>
<div class="red-text text-darken-2 left-align" id="error"></div>
</div>
<div class="container">
<div id="content" class="row"></div>
</div>
<div id="modal-detail"></div>
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>