loading content ajax into html popup
Question
So I'm trying to make this thing with the IMDb API. When you press the film title, it's supposed to show a popup with some information about that movie. I've been doing some things, but I don't know how to continue. How do I send the movie data I retrieved into the HTML popup I created?
So, this is my HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Plugin</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<h1>...</h1>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="movie" onclick="window.open('js/popup.js', 'imdbData','width=700,height=200');">The Shawshank Redemption </span>
sed metus tortor, condimentum at mi non, scelerisque bibendum ante.
Suspendisse dictum eget turpis nec condimentum.
fermentum mauris.
</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/main.js"></script>
</html>
My PHP file looks like this:
<?php
$jsonText = file_get_contents('http://www.omdbapi.com/?i=tt0111161');
$imdb = json_decode($jsonText, true);
$results[] = [
'Title' => $imdb['Title'], 'Year' => $imdb['Year'], 'imdbRating' => $imdb['imdbRating']
];
echo json_encode($results);
?>
And finally my main.js: (which isn't much really)
function getJson() {
$.ajax({
dataType: "json",
url: 'imdb.php',
success:
});
}
2 answers
solution1
0 2015-04-02 19:57:48
Not sure what the "popup" is, but let's assume that this "popup" has an element with id "movie-title" that you wish to populate with the Title property from your data:
function getJson() {
$.ajax({
dataType: "json",
url: 'imdb.php',
success: function (data) {
$('#movie-title').html(data.Title)
}
});
}
solution2
0 2015-04-02 20:08:46
I will do it in diffrent way. First of all i'll prepare all popup in php file (it is easer for me). Then create popup div .eg id my_popup
function show_popup() {
$.ajax({
dataType: "html",
url: 'imdb.php',
.done(function( msg ) {
$("#my_popup").html(msg) });
});
}
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.