(jQuery) (Bootstrap) image keeps displaying on bottom

Question

I have this problem with image displaying. Image should display on top of the card, but it keeps displaying on bottom.

$(document).ready(function() {
  $("li:first").click(function () {
    $(".card").show();
    $(".card").append('<img class="card-img-top" src=' + (filmi.Movies[0].Poster) + '/>')

Even here in HTML can be seen that structure of elements is in right order from top to bottom. When click on the "movie title" throws image on the last place in div.

<div class="col">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="" />
          <div class="card-block">
            <h4 class="card-title"></h4>
            <p class="card-text"></p>
          </div>

Fiddle JS included: https://jsfiddle.net/x3jem2fb/

Is possible to insert these values into "card-img-top" instead of adding new "card-img-top"? — Slasher, May 11 '17 at 16:21
You don't need append or prepend to do that..check this: https://jsfiddle.net/x3jem2fb/2/ — Hackerman, May 11 '17 at 16:29

score 2 · Answer 1 · edited May 23 '17 at 11:47

2

Modify your javascript to use prepend() rather than append()

Append() will append the element after the previous element whereas prepend() does the opposite.

  $("li:first").click(function () {
    $(".card").prepend('<img class="card-img-top" src=' + (filmi.Movies[0].Poster) + '/>');
    $(".card").show();
  });

HOWEVER

This will continue to add more elements into the DOM for each click you make so you might want to consider how you will handle this.

If you just want to update the image source you could do the following:

$("li:first").click(function () {
    $(".card").find('.card-img-top')).attr('src',filmi.Movies[0].Poster);
    $(".card").show();  
});

But you will want a much more dynamic way of selecting the correct image based on the item you selected.

See this answer for that particular problem:

edited May 23 '17 at 11:47

Community

1
1

answered May 11 '17 at 16:18

Master Yoda

4,334
10
43
77

Is posible to insert values into "card-img-top" instead of adding these elements? – Slasher May 11 '17 at 16:23
Do you mean modify the image source to update on click? – Master Yoda May 11 '17 at 16:24
Yes, just modifying it, instead of adding new one. – Slasher May 11 '17 at 16:25

Hackerman · Accepted Answer · 2017-05-11T16:50:35.147

You just need to update the src attribute:

  $("li:first").click(function () {
    $($(".card").find('.card-img-top')).attr('src',filmi.Movies[0].Poster)
    $(".card").show();    
  });

Working fiddle: https://jsfiddle.net/x3jem2fb/2/

Final Update, working sample for all the movies:

The Full Movie List:

$.each(filmi.Movies,function(i,item){
  $("ul").append('<li class="list-group-item" data-url="'+item.Poster+'">' + (item.Title) + '</li>').attr(item.imdbID)
})

The show card code, using the data attribute:

$("li").click(function () {
  $($(".card").find('.card-img-top')).attr('src',$(this).data('url'))
  $(".card").show();
});

Final sample: https://jsfiddle.net/x3jem2fb/4/

Rion Williams · Answer 3 · 2017-05-11T16:40:51.230

Appending vs. Prepending

This is likely because you are using append() instead of prepend(), which differ with regards to where the specified contents are added:

append() - Places content at the beginning of the specified selector.
prepend() - Places content at the end of the specified selector.

So just used prepend() to ensure that the content appears before your other contents:

$(".card").prepend('<img class="card-img-top" src=' + (filmi.Movies[0].Poster) + '/>');

However, it's worth noting that you already have an image tag there and it seems that you want to actually just update this one. If that is the case, you can forego appending or prepending anything and instead focus on associating which movie to use. I'll provide an example below on what something like that might look like.

Example with Selection Changing

As far as keeping track of the individual movies, you could assign an index when building your list:

for(let i = 0; i < filmi.Movies.length; i++){
       // Note setting the data-movie attribute
       $("ul:first").append('<li class="list-group-item" data-movie="' + i + '">' + (filmi.Movies[i].Title) + '</li>').attr(filmi.Movies[i].imdbID);
     $(filmi.Movies[i].imdbID).addClass('list-group-item list-group-item-action')
}

Then when one of these is clicked, you could look up the proper poster based off this identifier and update the image accordingly:

// When a movie is selected, update the contents using that card
$("li").on('click',function () {
    // Get the image clicked
    let movie = parseInt(this.getAttribute('data-movie'));

    // Update the image and show it
    $('.card > img:first').attr('src', filmi.Movies[movie].Poster);
    $(".card").show();
});

You can see an example of the code related to this below:

var movieIndex = 0;

$(document).ready(function() {
  // Output each available file
  for (let i = 0; i < filmi.Movies.length; i++) {
    $("ul:first").append('<li class="list-group-item" data-movie="' + i + '">' + (filmi.Movies[i].Title) + '</li>').attr(filmi.Movies[i].imdbID);
    $(filmi.Movies[i].imdbID).addClass('list-group-item list-group-item-action')
  }

  // Initially hide your card
  $(".card").hide();

  // When a movie is selected, update the contents using that card
  $("li").on('click', function() {
    // Get the image clicked
    let movie = parseInt(this.getAttribute('data-movie'));

    // Update the image
    $('.card > img:first').attr('src', filmi.Movies[movie].Poster);
    $(".card").show();
  });
});

const filmi = {
  "Movies": [{
      "Title": "La La Land",
      "Year": "2016",
      "Rated": "PG-13",
      "Released": "25 Dec 2016",
      "Runtime": "128 min",
      "Genre": "Comedy, Drama, Music",
      "Director": "Damien Chazelle",
      "Writer": "Damien Chazelle",
      "Actors": "Ryan Gosling, Emma Stone, Amiée Conn, Terry Walters",
      "Plot": "A jazz pianist falls for an aspiring actress in Los Angeles.",
      "Language": "English",
      "Country": "USA, Hong Kong",
      "Awards": "Won 6 Oscars. Another 184 wins & 224 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMzUzNDM2NzM2MV5BMl5BanBnXkFtZTgwNTM3NTg4OTE@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "8.3/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "93%"
        },
        {
          "Source": "Metacritic",
          "Value": "93/100"
        }
      ],
      "Metascore": "93",
      "imdbRating": "8.3",
      "imdbVotes": "232,825",
      "imdbID": "tt3783958",
      "Type": "movie",
      "DVD": "25 Apr 2017",
      "BoxOffice": "$150,459,658.00",
      "Production": "Liongate Films",
      "Website": "http://www.lalaland.movie/",
      "Response": "True"
    },
    {
      "Title": "Fracture",
      "Year": "2007",
      "Rated": "R",
      "Released": "20 Apr 2007",
      "Runtime": "113 min",
      "Genre": "Crime, Drama, Mystery",
      "Director": "Gregory Hoblit",
      "Writer": "Daniel Pyne (screenplay), Glenn Gers (screenplay), Daniel Pyne (story)",
      "Actors": "Anthony Hopkins, Ryan Gosling, David Strathairn, Rosamund Pike",
      "Plot": "An attorney, intent on climbing the career ladder toward success, finds an unlikely opponent in a manipulative criminal he is trying to prosecute.",
      "Language": "English",
      "Country": "USA, Germany",
      "Awards": "2 wins & 2 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMzIzNjQyMzkwM15BMl5BanBnXkFtZTcwOTg5ODQ0MQ@@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "7.2/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "71%"
        },
        {
          "Source": "Metacritic",
          "Value": "68/100"
        }
      ],
      "Metascore": "68",
      "imdbRating": "7.2",
      "imdbVotes": "146,665",
      "imdbID": "tt0488120",
      "Type": "movie",
      "DVD": "14 Aug 2007",
      "BoxOffice": "$39,000,000.00",
      "Production": "New Line",
      "Website": "http://www.fracturemovie.com/",
      "Response": "True"
    },
    {
      "Title": "Legend",
      "Year": "2015",
      "Rated": "R",
      "Released": "20 Nov 2015",
      "Runtime": "132 min",
      "Genre": "Biography, Crime, Drama",
      "Director": "Brian Helgeland",
      "Writer": "Brian Helgeland, John Pearson (book)",
      "Actors": "Paul Anderson, Tom Hardy, Christopher Eccleston, Joshua Hill",
      "Plot": "Identical twin gangsters Ronald and Reginald Kray terrorize London during the 1960s.",
      "Language": "English",
      "Country": "UK, France, USA",
      "Awards": "6 wins & 10 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMDQ4MGY0NWUtY2MxOC00YzI5LTg0OTEtZjNmY2Q2ZmM0MTA1XkEyXkFqcGdeQXVyNTQzOTc3MTI@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "7.0/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "61%"
        },
        {
          "Source": "Metacritic",
          "Value": "55/100"
        }
      ],
      "Metascore": "55",
      "imdbRating": "7.0",
      "imdbVotes": "106,814",
      "imdbID": "tt3569230",
      "Type": "movie",
      "DVD": "01 Mar 2016",
      "BoxOffice": "$14,146,549.00",
      "Production": "Universal Studios",
      "Website": "http://www.legend-the-movie.com/",
      "Response": "True"
    },
    {
      "Title": "Locke",
      "Year": "2013",
      "Rated": "R",
      "Released": "18 Apr 2014",
      "Runtime": "85 min",
      "Genre": "Drama",
      "Director": "Steven Knight",
      "Writer": "Steven Knight",
      "Actors": "Tom Hardy, Olivia Colman, Ruth Wilson, Andrew Scott",
      "Plot": "Ivan Locke, a dedicated family man and successful construction manager, receives a phone call on the eve of the biggest challenge of his career that sets in motion a series of events that threaten his carefully cultivated existence.",
      "Language": "English",
      "Country": "UK, USA",
      "Awards": "7 wins & 31 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTQ1MjE5MzU2M15BMl5BanBnXkFtZTgwNzE4OTMzMTE@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "7.1/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "91%"
        },
        {
          "Source": "Metacritic",
          "Value": "81/100"
        }
      ],
      "Metascore": "81",
      "imdbRating": "7.1",
      "imdbVotes": "100,104",
      "imdbID": "tt2692904",
      "Type": "movie",
      "DVD": "12 Aug 2014",
      "BoxOffice": "$1,326,469.00",
      "Production": "A24 Films",
      "Website": "http://www.lockethemovie.com/",
      "Response": "True"
    },
    {
      "Title": "Mad Max: Fury Road",
      "Year": "2015",
      "Rated": "R",
      "Released": "15 May 2015",
      "Runtime": "120 min",
      "Genre": "Action, Adventure, Sci-Fi",
      "Director": "George Miller",
      "Writer": "George Miller, Brendan McCarthy, Nick Lathouris",
      "Actors": "Tom Hardy, Charlize Theron, Nicholas Hoult, Hugh Keays-Byrne",
      "Plot": "A woman rebels against a tyrannical ruler in postapocalyptic Australia in search for her home-land with the help of a group of female prisoners, a psychotic worshipper, and a drifter named Max.",
      "Language": "English, Russian",
      "Country": "Australia, USA",
      "Awards": "Won 6 Oscars. Another 210 wins & 193 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTUyMTE0ODcxNF5BMl5BanBnXkFtZTgwODE4NDQzNTE@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "8.1/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "97%"
        },
        {
          "Source": "Metacritic",
          "Value": "90/100"
        }
      ],
      "Metascore": "90",
      "imdbRating": "8.1",
      "imdbVotes": "624,273",
      "imdbID": "tt1392190",
      "Type": "movie",
      "DVD": "01 Sep 2015",
      "BoxOffice": "$129,483,877.00",
      "Production": "Warner Bros.",
      "Website": "http://www.madmaxmovie.com/",
      "Response": "True"
    },
    {
      "Title": "The Wolf of Wall Street",
      "Year": "2013",
      "Rated": "R",
      "Released": "25 Dec 2013",
      "Runtime": "180 min",
      "Genre": "Biography, Comedy, Crime",
      "Director": "Martin Scorsese",
      "Writer": "Terence Winter (screenplay), Jordan Belfort (book)",
      "Actors": "Leonardo DiCaprio, Jonah Hill, Margot Robbie, Matthew McConaughey",
      "Plot": "Based on the true story of Jordan Belfort, from his rise to a wealthy stock-broker living the high life to his fall involving crime, corruption and the federal government.",
      "Language": "English, French",
      "Country": "USA",
      "Awards": "Nominated for 5 Oscars. Another 36 wins & 160 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjIxMjgxNTk0MF5BMl5BanBnXkFtZTgwNjIyOTg2MDE@._V1_SX300.jpg",
      "Ratings": [{
          "Source": "Internet Movie Database",
          "Value": "8.2/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "77%"
        },
        {
          "Source": "Metacritic",
          "Value": "75/100"
        }
      ],
      "Metascore": "75",
      "imdbRating": "8.2",
      "imdbVotes": "849,538",
      "imdbID": "tt0993846",
      "Type": "movie",
      "DVD": "25 Mar 2014",
      "BoxOffice": "$91,330,760.00",
      "Production": "Paramount Studios",
      "Website": "http://www.thewolfofwallstreet.com/",
      "Response": "True"
    }
  ]
}

.container ul:nth-child(1) li {
  cursor: pointer;
}

html,
body {
  height: 100%;
}

.container {
  min-height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="seznam-filmov.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>List of movies</h1>
  <div class="container">

    <div class="row">

      <div class="col">
        <ul class="list-group"></ul>
        <br />
        <br/>
      </div>

      <div class="col">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="" />
          <div class="card-block">
            <h4 class="card-title"></h4>
            <p class="card-text"></p>
          </div>
          <ul class="list-group list-group-flush"></ul>
          <div class="card-block">
            <a href="#" class="card-link">Spletna stran</a>
            <a href="#" class="card-link">IMDb</a>
          </div>
        </div>
      </div>

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

</html>

This works, but my "card-img-top" is still empty. This just adds new "card-img-top". — Slasher, May 11 '17 at 16:20
To do that, you'll need some mechanism to associate a given list item to a specific card. You could consider using an identifier that would detect when you click on a list item it would find the card associated with that one (via a data-attribute or something) and populate the image properly. — Rion Williams, May 11 '17 at 16:24
If you wanted to just "update" a single card, then you would just need to use the appropriate selector (to target the card) and then use the index or a property of the element that was clicked in the list to determine which image to display. — Rion Williams, May 11 '17 at 16:27
I've updated my answer to demonstrate the approach that I mentioned with associating items, hope it helps. — Rion Williams, May 11 '17 at 16:43

(jQuery) (Bootstrap) image keeps displaying on bottom

3 Answers3

Working fiddle: https://jsfiddle.net/x3jem2fb/2/

Final sample: https://jsfiddle.net/x3jem2fb/4/