Javascript（jQuery）and Bootstrap modals

我目前正在开发一个项目，该项目根据点击的链接显示一些模型中的电影信息（从omdbapi.com拉出）。以前这一切都是在后端使用PHP完成的，并且没有任何问题，但是由于页面上可能有5-100个电影链接，因此创建所有模式导致页面需要一段时间才能加载。Javascript（jQuery）and Bootstrap modals

现在我想要将模式创建/弹出窗口移动到JS的前面，以便仅在单击该特定电影链接时才创建它。将它移动到使用Javascript我遇到了两个问题，我无法解决。

电影标题链接必须点击两次才能显示模式，我不确定是什么导致了这种情况。看看开发工具，我可以看到，第一次点击一个模式创建，但由于某种原因不显示。在第二次点击另一个被创建并显示。
一旦显示一个模式，我无法获得我的“X”按钮来关闭它。我在PHP "<button type=\"button\" class=\"close exit-button\" data-dismiss=\"modal\">×</button>" 中使用的代码不再有效。引导程序确实能够显示/隐藏与$("#movieInfo").modal("hide")模式，但如果我创建一个函数来运行此按钮时单击它仍然不会隐藏。

这里是JS代码，我使用：

window.addEventListener("load", function() { 
var movielink = document.getElementById("movie"); 
movielink.addEventListener("click", function(){generateModal(this.innerHTML);}, false); 
}, false); 

function generateModal(movieT) { 
    var movieTitle = encodeURIComponent(movieT).replace(/%20/g, '+'); 
    var url = "https://www.omdbapi.com/?t="+movieTitle+"&y=&plot=short"; 
    $.getJSON(url, function(json) { 
     $('#modalContainer').html("<div id = \"movieInfo\" class = \"modal fade\" role = \"dialog\">" 
      + "<div class \"modal-dialog modal-sm\">" 
      + "<div class = \"modal-content\">" 
      + "<div class = \"modal-body\">" 
      + "<div class = \"poster\">" 
      + "<img src = "+json.Poster+" width = 200 height = 300>" 
      + "</div>" 
      + "<div class = \"movie-specs\">" 
      + "<button id = \"closebtn\" type=\"button\" class=\"close exit-button\"s onclick = \"closeModal()\">&times;</button>" 
      + "<h3 class = \"movie-title\">"+json.Title+" ("+json.Year+")</h3>" 
      + "<p class = \"topmargin-gone\">"+json.Rated+" | "+json.Runtime+" | "+json.Genre+"</p>" 
      + "<p class = \"topmargin-gone\">"+json.Released+"</p><hr>" 
      + "<div class = \"ratingInfo\">" 
      + "<h4 class = \"topmargin-gone\"><strong>Ratings</strong></h4><p class = \"topmargin-gone\">Rated: "+json.imdbRating+"/10 " 
      + "from "+json.imdbVotes+" users | Metascore: "+json.Metascore+"</p>" 
      + "</div><hr>" 
      + "<div class = \"plot-actors\">" 
      + "<p>"+json.Plot+"</p><p><strong>Director: </strong>"+json.Director+"</p>" 
      + "<p><strong>Writers: </strong>"+json.Writer+"</p>" 
      + "<p><strong>Actors: </strong>"+json.Actors+"</p>" 
      + "</div>" 
      + "</div>" 
      + "</div>" 
      + "</div>" 
      + "</div>" 
      + "</div>"); 
    }); 
    $("#movieInfo").modal("show"); 

}

这是该链接是如何在一个循环中创建的PHP：

$allDisplay .= "<li><em><a id ='movie' href = '#'>" 
       . "$title[$z]</a></em> - $nominees[$z]</li>";

最后这是怎么了HTML看起来链接和模式所在的位置：

<html> 
<head> 
    <meta charset = "utf-8"> 
    <title>Award Search</title> 
    <!-- jQuery Library --> 
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!--Bootstrap CSS --> 
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <!-- Styles CSS sheet --> 
    <link rel = "stylesheet" href = "/src/styles/styles_awardQuery.css"> 
    <!--Bootstrap JavaScript --> 
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script src = "/src/php/modalCreation.js"></script> 
</head> 
<body> 
    <div class = "site-wrapper"> 
     <div class = "site-wrapper-inner"> 
      <div class = "cover-container"> 
       <div class = "masthead clearfix"> 
        <div class = "inner"> 
         <h3 class = "masthead-brand">Award Search</h3> 
         <ul class = "nav masthead-nav"> 
          <li><a href = "/src/pages/welcomePage.php">Home</a></li> 
          <li><a href = "/src/pages/aboutLoggedIn.html">About</a></li> 
          <li><a href = "/src/pages/logoutPage.php">Logout</a></li> 
         </ul> 
        </div> 
       </div> 

       <div class = "inner cover"> 
        <h1 class = "cover-heading">Academy Award Show Number <?php echo $academyNumber; ?> 
        <?php echo "($year[1])<br><span class = \"small\">Hosted by $acHost</span>"; ?></h1> 
        <?php echo $allDisplay; ?> 
        <div id ="modalContainer"></div> 
       </div> 

      </div> 
     </div> 
    </div> 
</body> 
</html>

我意识到这看起来很混乱，但只是想让它现在正常运作。如果任何人对任何一个问题都有深入的了解，将会非常感激。

谢谢。

来源

2015-11-27 bcBorn

$("#movieInfo").modal("show");被触发之前该集团实际上是附加到您的网页。这是由于网络延迟和AJAX调用的异步行为，这些行为允许您的脚本在不等待获得答案的情况下继续。

为了避免这种情况，你应该把这个线在网络回调结束：

function generateModal(movieT) { 
    var movieTitle = encodeURIComponent(movieT).replace(/%20/g, '+'); 
    var url = "https://www.omdbapi.com/?t="+movieTitle+"&y=&plot=short"; 
    $.getJSON(url, function(json) { 
     $('#modalContainer').html('<div id="movieInfo" class="modal fade" role="dialog">' 
      + '<div class "modal-dialog modal-sm">' 
      + '<div class="modal-content">' 
      + '<div class="modal-body">' 
      + '<div class="poster">'+'<img src='+json.Poster+' width=200 height=300>'+'</div>' 
      + '<div class="movie-specs">' 
      + '<button id="closebtn" type="button" class="close exit-button"s onclick="closeModal()">&times;</button>' 
      + '<h3 class="movie-title">'+json.Title+' ('+json.Year+')</h3>' 
      + '<p class="topmargin-gone">'+json.Rated+' | '+json.Runtime+' | '+json.Genre+'</p>' 
      + '<p class="topmargin-gone">'+json.Released+'</p><hr>' 
      + '<div class="ratingInfo">' 
      + '<h4 class="topmargin-gone"><strong>Ratings</strong></h4><p class="topmargin-gone">Rated: '+json.imdbRating+'/10 ' 
      + 'from '+json.imdbVotes+' users | Metascore: '+json.Metascore+'</p>' 
      + '</div><hr>' 
      + '<div class="plot-actors">' 
      + '<p>'+json.Plot+'</p><p><strong>Director: </strong>'+json.Director+'</p>' 
      + '<p><strong>Writers: </strong>'+json.Writer+'</p>' 
      + '<p><strong>Actors: </strong>'+json.Actors+'</p>' 
      + '</div>'+'</div>'+'</div>'+'</div>'+'</div>'+'</div>'); 

     // after we have made the modal, we show it 
     $("#movieInfo").modal("show"); 
    }); 
    // code here will be fired before the end of the AJAX call 
}

为其他错误，我认为，双模式可以解释的行为，所以修补这个第一，并告诉我们，如果你仍然无法关闭你的模态;）

来源

2015-11-28 11:52:44 Blag

这是问题！该解决方案纠正了两个问题我没有意识到AJAX调用与脚本的其余部分没有同步。 – bcBorn

@bcBorn欢迎您！ ;所以是的，ajax调用通常处于异步模式，以防止整个页面freez，如果你有一些网络问题，这就是为什么你使用“回调”，这将在你的请求成功/失败后调用;） – Blag

Javascript（jQuery）and Bootstrap modals

回答

相关问题