Develop Reference

Using document.getElementById() to load images in Rails

Wanting to use document.getElementById() to load images into HTML in Rails.
Section of HTML code
<div id="dealersCards">
<span id = "D0"></span>
<span id = "D1"></span>
<span id = "D2"></span>
<span id = "D3"></span>
<span id = "D4"></span>
<span id = "D5"></span>
<span id = "D6"></span>
<span id = "D7"></span>
</div>
Corresponding Javscript code
function displayPlayerOneInitialCards()
{
length = dealerCards.length;
for( dealerCount = 0; dealerCount < length; dealerCount++)
{
newCard = dealerCards[dealerCount]
if(dealerCount == 0)
{
var cardToDisplay = newCard.cardFaceDown;
}
if(dealerCount == 1)
{
var cardToDisplay = newCard.cardToDisplay;
}
dealerIdName = 'D';
dealerIdName = dealerIdName + dealerCount.toString();
fileNameCard= '<img width="80" height="128" src="images/'+ (cardToDisplay.trim())+'" alt="Card"/>';
document.getElementById(dealerIdName).innerHTML = fileNameCard;
}
}
Error message:
No route matches [GET] "/game/BlackJack/images/H3.gif"
images are in app/assets.

Jukebox.random is not a function", shuffle button not working

I’m making a object oriented jukebox but for some reason my shuffle button is not working when I click on it. It’s supposed to play a random song from my songlist but it’s not working for some reason. Can someone please explain what I’m doing wrong?
// defines the Jukebox object
var Juke = function(songList) {
// the code for what happens when you create a Jukebox object
// goes here
//sets list of songs by a tag elements in html
//initialize songNumber to 0
//initialize currentSong to the songList's songnumber
//initialize timeinsong to 0
this.songList = document.getElementById('playlist').getElementsByTagName('A'),
// the code for playing a song would go here
this.songNumber = 0,
this.currentSong = this.songList[this.songNumber],
this.timeInSong = 0,
//function to play jukebox
this.play = function() {
// if pl
if (document.getElementById('play').classList.contains('fa-play-circle-o')) {
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
document.getElementById('play').classList.remove('fa-play-circle-o');
document.getElementById('play').classList.add('fa-pause-circle-o');
document.getElementById('player').currentTime = this.timeInSong;
var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(0deg); -webkit-transition: -webkit-transform 2s ease;'; //
document.getElementById('vinyl').setAttribute('style', css)
document.getElementById('player').play();
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
} else {
this.timeInSong = document.getElementById('player').currentTime
document.getElementById('player').pause();
document.getElementById('play').classList.remove('fa-pause-circle-o');
document.getElementById('play').classList.add('fa-play-circle-o');
}
},
this.next = function() {
// creates a new Jukebox object method
// this play the next song in the array and removes the li class and adds to the next element in the array
document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight')
this.songNumber++;
//incrementing song number by one
if (this.songNumber == this.songList.length) {
// if the song number is equal to the last element in the arrary start from 0
this.songNumber = 0;
}
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
// add highlight to li song number
this.currentSong = this.songList[this.songNumber]
//currrent song is equal to this song number
document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
if (document.getElementById('play').classList.contains('fa-pause-circle-o')) {
document.getElementById('player').play();
}
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
// setting title of the song to current song name
},
this.stop = function() {
// time of song is -
this.timeInSong = 0;
document.getElementById('seekbar').setAttribute('value', 0);
// adding pause to the player
document.getElementById('player').pause();
// removing pause class
document.getElementById('play').classList.remove('fa-pause-circle-o');
document.getElementById('play').classList.add('fa-play-circle-o');
},
this.previous = function() {
// removing song number highlight class
document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight');
//decrementing song number by 1
this.songNumber--;
// if song number isless than 0 play the last one
if (this.songNumber <= 0) {
this.songNumber = this.songList.length - 1;
}
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
// adding highlight to current song
this.currentSong = this.songList[this.songNumber]
// current song is this song number
document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
console.log(document.getElementById('player').getAttribute("src"));
document.getElementById('player').play();
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
// song tittle
},
this.addSong = function() {
// method to add song
var ul = document.getElementById('playlist')
// url
var url = document.getElementById('url').value;
var name = document.getElementById('title').value;
//name is equal to title value
if (url != "" && name != "") {
//i furl and name are not empty
var li = document.createElement('li');
// creting new li element
var atag = document.createElement('a');
atag.setAttribute('href', url);
atag.innerHTML = name;
var but = document.createElement('button');
but.innerHTML = "";
but.setAttribute('onclick', "Jukebox.delete(this)");
// appending user value
li.appendChild(atag);
li.appendChild(but).classList.add('delete', 'fa', 'fa-times');
ul.appendChild(li);
document.getElementById('url').value = '';
document.getElementById('title').value = '';
} else {
alert("Error You haven't Filled in A Form Item")
}
},
this.delete = function(n) {
if (document.getElementById('player').src == n.parentNode.getElementsByTagName('a')[0].getAttribute('href')) {
document.getElementById('player').src = '';
document.getElementById('player').pause();
this.next();
}
n.parentNode.parentNode.removeChild(n.parentNode);
this.songList = document.getElementById('playlist').getElementsByTagName('A');
},
this.preparingToFastForward = function() {
document.getElementById('player').currentTime += document.getElementById('player').currentTime + 100 < document.getElementById('player').duration ? 100 : 0;
},
this.backDatAssUp = function() {
document.getElementById('player').currentTime -= document.getElementById('player').currentTime - 100 > 0 ? 100 : 0;
},
this.listener = function() {
document.getElementById('player').addEventListener("timeupdate", function() {
var currentTime = document.getElementById('player').currentTime;
var duration = document.getElementById('player').duration;
if (currentTime / duration != 1) {
document.getElementById('seekbar').setAttribute('value', currentTime / duration);
var deg = document.getElementById('player').currentTime % 2;
deg = Math.floor(deg % 2) > 0 ? 170 : -170;
console.log(deg)
var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(' + deg + 'deg); -webkit-transition: -webkit-transform 2s ease;';
document.getElementById('vinyl').setAttribute('style', css)
} else {
Jukebox.next();
}
});
}
}
this.random = function() {
var randomIndex = Math.floor(this.songList.length * Math.random());
this.currentSong = randomIndex;
randomIndex.play();
}
function setVolume() {
var mediaClip = document.getElementById("player");
mediaClip.volume = document.getElementById("volume1").value;
}
var Jukebox = new Juke(document.getElementById('playlist'));
<body onload="Jukebox.listener()">
<input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'>
<div class='container'>
<div class='recordPlayer'>
<img id='vinyl' class='recordPic' src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRpCviLXje4Wve8WwujEm2luErz6VbuoVFkNW785Kxuap6O1Gpt0eXobRk'>
<img class='recPlayer' src="https://c1.staticflickr.com/3/2260/3694333300_37bd1ff316.jpg">
<img class='recArm' src="arm.png">
<div class='controls'>
<span class='titleTitle'>Currently Playing:<span id='songTitle'></span></span><br>
<audio id='player' src='http://www.archive.org/download/bolero_69/Bolero.mp3'>
</audio>
<progress id="seekbar" value="0" max="1"></progress><br>
<button id='back' class='fa fa-backward' onclick="Jukebox.backDatAssUp()"></button>
<button id='play' class='fa fa-play-circle-o' onclick="Jukebox.play()"></button>
<button id='stop' class='fa fa-stop-circle-o' onclick="Jukebox.stop()"></button>
<button id='previous' class='fa fa-step-backward' onclick="Jukebox.previous()"></button>
<button id='next' class='fa fa-step-forward' onclick="Jukebox.next()"></button>
<button id='back' class='fa fa-forward' onclick="Jukebox.preparingToFastForward()"></button>
<button id='random' onclick="Jukebox.random()"> Rnadom song</button>
</div>
</div>
<div class='listOsongs'>
<ol id="playlist">
<h4>Up Next</h4>
<li>
<a id="song" href="http://www.archive.org/download/bolero_69/Bolero.mp3">
Ravel Bolero
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
Moonlight Sonata - Beethoven
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="https://cf-media.sndcdn.com/MzhGaP8pde4q.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vTXpoR2FQOHBkZTRxLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODI2Mzh9fX1dfQ__&Signature=SyWy~ghuKuTgWmoMWvnGgA~HArGVxjKkiD61UUENA4Ke-aUgivz4ANDUmNW68-AOE-o-7X~MYn8ObL4AonSuVsPz3LbGPQcmxD-3N14qpCFEx3F4zwZh43v1-aDzlypCRtY6IaEzun9NksxbABrqqL~BokIKSH0U6yxJmEmKq98e8PrUO24IcDHiSZZlviYI-bRRtdsFXxM1bxbYh-s32Rkoihj~uxTOGVDwAADwexg5VT2Z8xAuMj2NJ9vMCYkydhmZGOG4G~SQ3lZE3ODyEtD5Vf6myOMGjhWIq9qss~u6eHJbrQ2AB~oon-44WIqEknjWT63NP-O-WyHCBmAf4w__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="https://cf-media.sndcdn.com/zYh4wOY76Fez.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20velloNHdPWTc2RmV6LjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODMzMzN9fX1dfQ__&Signature=nIZ6247SDTQ5LY5pGrdvJkxi3wektW8Kp2uRxOlCg3TthYAq6FeYiu0TJJEdQNNPF8y5WCvbJUi4G553RMwn5xLpxkZR0s0f6B0Fw4m~T18zvic1YH~kRxRVy1ropC2NPax4aI9yCWdKpgFmPNKz21lhFIXoa9F6hnIHaQT0jdFv9eNnjv8CN024j5RnfbFaT1vSzu0AnguXqMlm4uJS8XD~XOT1Y62X4qHzCp685Ahf~Lm9LyhECBXK3nrVF~3QIsxwdYp73Epui29eZsd~7LVCeLwQabU4kvXL9ntTZFft9-JiqLZH4pkmWmSTWlN3Dw~c8dVlZQihruYa81qVPg__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
</ol>

The main problem you have is that you had your random function being defined outside the Juke constructor. Inside there's now a different error where you try to call a play method on a number-- but I don't know what you're trying to do there.
// defines the Jukebox object
var Juke = function(songList) {
// the code for what happens when you create a Jukebox object
// goes here
//sets list of songs by a tag elements in html
//initialize songNumber to 0
//initialize currentSong to the songList's songnumber
//initialize timeinsong to 0
this.songList = document.getElementById('playlist').getElementsByTagName('A'),
// the code for playing a song would go here
this.songNumber = 0,
this.currentSong = this.songList[this.songNumber],
this.timeInSong = 0,
//function to play jukebox
this.play = function() {
// if pl
if (document.getElementById('play').classList.contains('fa-play-circle-o')) {
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
document.getElementById('play').classList.remove('fa-play-circle-o');
document.getElementById('play').classList.add('fa-pause-circle-o');
document.getElementById('player').currentTime = this.timeInSong;
var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(0deg); -webkit-transition: -webkit-transform 2s ease;'; //
document.getElementById('vinyl').setAttribute('style', css)
document.getElementById('player').play();
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
} else {
this.timeInSong = document.getElementById('player').currentTime
document.getElementById('player').pause();
document.getElementById('play').classList.remove('fa-pause-circle-o');
document.getElementById('play').classList.add('fa-play-circle-o');
}
},
this.next = function() {
// creates a new Jukebox object method
// this play the next song in the array and removes the li class and adds to the next element in the array
document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight')
this.songNumber++;
//incrementing song number by one
if (this.songNumber == this.songList.length) {
// if the song number is equal to the last element in the arrary start from 0
this.songNumber = 0;
}
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
// add highlight to li song number
this.currentSong = this.songList[this.songNumber]
//currrent song is equal to this song number
document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
if (document.getElementById('play').classList.contains('fa-pause-circle-o')) {
document.getElementById('player').play();
}
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
// setting title of the song to current song name
},
this.stop = function() {
// time of song is -
this.timeInSong = 0;
document.getElementById('seekbar').setAttribute('value', 0);
// adding pause to the player
document.getElementById('player').pause();
// removing pause class
document.getElementById('play').classList.remove('fa-pause-circle-o');
document.getElementById('play').classList.add('fa-play-circle-o');
},
this.previous = function() {
// removing song number highlight class
document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight');
//decrementing song number by 1
this.songNumber--;
// if song number isless than 0 play the last one
if (this.songNumber <= 0) {
this.songNumber = this.songList.length - 1;
}
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
// adding highlight to current song
this.currentSong = this.songList[this.songNumber]
// current song is this song number
document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
console.log(document.getElementById('player').getAttribute("src"));
document.getElementById('player').play();
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
// song tittle
},
this.addSong = function() {
// method to add song
var ul = document.getElementById('playlist')
// url
var url = document.getElementById('url').value;
var name = document.getElementById('title').value;
//name is equal to title value
if (url != "" && name != "") {
//i furl and name are not empty
var li = document.createElement('li');
// creting new li element
var atag = document.createElement('a');
atag.setAttribute('href', url);
atag.innerHTML = name;
var but = document.createElement('button');
but.innerHTML = "";
but.setAttribute('onclick', "Jukebox.delete(this)");
// appending user value
li.appendChild(atag);
li.appendChild(but).classList.add('delete', 'fa', 'fa-times');
ul.appendChild(li);
document.getElementById('url').value = '';
document.getElementById('title').value = '';
} else {
alert("Error You haven't Filled in A Form Item")
}
},
this.delete = function(n) {
if (document.getElementById('player').src == n.parentNode.getElementsByTagName('a')[0].getAttribute('href')) {
document.getElementById('player').src = '';
document.getElementById('player').pause();
this.next();
}
n.parentNode.parentNode.removeChild(n.parentNode);
this.songList = document.getElementById('playlist').getElementsByTagName('A');
},
this.preparingToFastForward = function() {
document.getElementById('player').currentTime += document.getElementById('player').currentTime + 100 < document.getElementById('player').duration ? 100 : 0;
},
this.backDatAssUp = function() {
document.getElementById('player').currentTime -= document.getElementById('player').currentTime - 100 > 0 ? 100 : 0;
},
this.listener = function() {
document.getElementById('player').addEventListener("timeupdate", function() {
var currentTime = document.getElementById('player').currentTime;
var duration = document.getElementById('player').duration;
if (currentTime / duration != 1) {
document.getElementById('seekbar').setAttribute('value', currentTime / duration);
var deg = document.getElementById('player').currentTime % 2;
deg = Math.floor(deg % 2) > 0 ? 170 : -170;
console.log(deg)
var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(' + deg + 'deg); -webkit-transition: -webkit-transform 2s ease;';
document.getElementById('vinyl').setAttribute('style', css)
} else {
Jukebox.next();
}
});
}
this.random = function() {
var randomIndex = Math.floor(this.songList.length * Math.random());
this.currentSong = randomIndex;
randomIndex.play();
}
}
function setVolume() {
var mediaClip = document.getElementById("player");
mediaClip.volume = document.getElementById("volume1").value;
}
var Jukebox = new Juke(document.getElementById('playlist'));
<body onload="Jukebox.listener()">
<input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'>
<div class='container'>
<div class='recordPlayer'>
<img id='vinyl' class='recordPic' src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRpCviLXje4Wve8WwujEm2luErz6VbuoVFkNW785Kxuap6O1Gpt0eXobRk'>
<img class='recPlayer' src="https://c1.staticflickr.com/3/2260/3694333300_37bd1ff316.jpg">
<img class='recArm' src="arm.png">
<div class='controls'>
<span class='titleTitle'>Currently Playing:<span id='songTitle'></span></span><br>
<audio id='player' src='http://www.archive.org/download/bolero_69/Bolero.mp3'>
</audio>
<progress id="seekbar" value="0" max="1"></progress><br>
<button id='back' class='fa fa-backward' onclick="Jukebox.backDatAssUp()"></button>
<button id='play' class='fa fa-play-circle-o' onclick="Jukebox.play()"></button>
<button id='stop' class='fa fa-stop-circle-o' onclick="Jukebox.stop()"></button>
<button id='previous' class='fa fa-step-backward' onclick="Jukebox.previous()"></button>
<button id='next' class='fa fa-step-forward' onclick="Jukebox.next()"></button>
<button id='back' class='fa fa-forward' onclick="Jukebox.preparingToFastForward()"></button>
<button id='random' onclick="Jukebox.random()"> Rnadom song</button>
</div>
</div>
<div class='listOsongs'>
<ol id="playlist">
<h4>Up Next</h4>
<li>
<a id="song" href="http://www.archive.org/download/bolero_69/Bolero.mp3">
Ravel Bolero
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
Moonlight Sonata - Beethoven
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="https://cf-media.sndcdn.com/MzhGaP8pde4q.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vTXpoR2FQOHBkZTRxLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODI2Mzh9fX1dfQ__&Signature=SyWy~ghuKuTgWmoMWvnGgA~HArGVxjKkiD61UUENA4Ke-aUgivz4ANDUmNW68-AOE-o-7X~MYn8ObL4AonSuVsPz3LbGPQcmxD-3N14qpCFEx3F4zwZh43v1-aDzlypCRtY6IaEzun9NksxbABrqqL~BokIKSH0U6yxJmEmKq98e8PrUO24IcDHiSZZlviYI-bRRtdsFXxM1bxbYh-s32Rkoihj~uxTOGVDwAADwexg5VT2Z8xAuMj2NJ9vMCYkydhmZGOG4G~SQ3lZE3ODyEtD5Vf6myOMGjhWIq9qss~u6eHJbrQ2AB~oon-44WIqEknjWT63NP-O-WyHCBmAf4w__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="https://cf-media.sndcdn.com/zYh4wOY76Fez.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20velloNHdPWTc2RmV6LjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODMzMzN9fX1dfQ__&Signature=nIZ6247SDTQ5LY5pGrdvJkxi3wektW8Kp2uRxOlCg3TthYAq6FeYiu0TJJEdQNNPF8y5WCvbJUi4G553RMwn5xLpxkZR0s0f6B0Fw4m~T18zvic1YH~kRxRVy1ropC2NPax4aI9yCWdKpgFmPNKz21lhFIXoa9F6hnIHaQT0jdFv9eNnjv8CN024j5RnfbFaT1vSzu0AnguXqMlm4uJS8XD~XOT1Y62X4qHzCp685Ahf~Lm9LyhECBXK3nrVF~3QIsxwdYp73Epui29eZsd~7LVCeLwQabU4kvXL9ntTZFft9-JiqLZH4pkmWmSTWlN3Dw~c8dVlZQihruYa81qVPg__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
</ol>

Model Window Shows Same Content

So I'm making a dental website, this page I'm working on is for dental cases. So let's say there are three dental treatments, Dental Implants, Root Canal and Tooth Extraction. I'm developing something like, if someone clicks on Dental Implants, he can see a modal window, for the cases for that particular treatment. When he clicks on one of the cases, he can see a slideshow for that case. It works perfectly, but the only thing is that when I click on the dental implants or fracture case, I'm seeing the same modal window content. I found the code from w3school's website. Is there any way I can have multiple modal windows with different content? Thanks so much.
Screenshot of the window

I have a large project that use what you want. I'll try to reduce other codes for you understand better. I'll need to include in your bootstrap plugin.
1) Bellow you'll see two pictures with initial image and after click on some image:
2) Html (I insert dynamically all of datas by jquery with request on a server):
<div class="row content-side-imagem">
<div id="fourth-slide" class="carousel slide" produto1-ini="0" produto1-fim="0" produto1-seq="0" produto1-qtpagina="0">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-4 fourth-slide-imagem" >
<a class="galeriaImagens" data-toggle="modal" data-target="#galeriaImagens" data-backdrop="false">
<img id="produto1-imagem1" src="" alt="" title="" class="img-responsive center-block" >
<div class="carousel-caption">
<p id="produto1-legenda1" class="fourth-slide-legenda">
</p>
<p id="produto1-item1">
</p>
</div>
</a>
</div>
<div class="col-sm-4 fourth-slide-imagem" >
<a class="galeriaImagens" data-toggle="modal" data-target="#galeriaImagens" data-backdrop="false">
<img id="produto1-imagem2" src="" alt="" title="" class="img-responsive center-block" >
<div class="carousel-caption">
<p id="produto1-legenda2" class="fourth-slide-legenda">
</p>
<p id="produto1-item2">
</p>
</div>
</a>
</div>
<div class="col-sm-4 fourth-slide-imagem" >
<a class="galeriaImagens" data-toggle="modal" data-target="#galeriaImagens" data-backdrop="false">
<img id="produto1-imagem3" src="" alt="" title="" class="img-responsive center-block" >
<div class="carousel-caption">
<p id="produto1-legenda3" class="fourth-slide-legenda">
</p>
<p id="produto1-item3">
</p>
</div>
</a>
</div>
</div>
</div>
<div class="slides-control">
<a title="Imagem Anterior" id="tras-produto1-slide" class="carousel-control" href="#fourth-slide" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a title="Imagem Posterior" id="frente-produto1-slide" class="direita carousel-control" href="#fourth-slide" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
<div class="modal fade" id="galeriaImagens" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="numSlide5">
<p class="numSlide5Texto text-center"></p>
</div>
</div>
<div class="modal-body">
<div class="carousel slide" id="fith-slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item">
<img id="slide5-imagem1" alt="" title="" src="" class="img-responsive center-block">
<div class="carousel-caption">
<div id="slide5-legenda1" class="fith-slide-legenda">
</div>
</div>
</div>
</div>
<div class="slides-control">
<a title="Imagem Anterior" id="tras-slide5-slide" class="carousel-control" href="#fith-slide" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a title="Imagem Posterior" id="frente-slide5-slide" class="direita carousel-control" href="#fith-slide" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
3) jquery (call for first line carousel and for the second inside modal)
$(document).ready(function () {
$('.galeriaImagens').click(function () {
var descricaoLegenda = $(this).children('div.carousel-caption').children('.fourth-slide-legenda').text();
var listaLegenda = $('#fith-slide').children('.carousel-inner').children('.item')
.children('.carousel-caption').children('.fith-slide-legenda');
$('#fith-slide').find('.item.active').removeClass('active');
$.each(listaLegenda, function (index, value) {
if (descricaoLegenda == value.innerText)
{
var selecao = value;
$(selecao).parents('.item').addClass('active');
}
});
var totalItems = $('#fith-slide .item').length;
var currentIndex = $('#fith-slide div.active').index() + 1;
$('.numSlide5Texto').html('' + currentIndex + '/' + totalItems + '');
$('#fith-slide').bind('slid', function () {
currentIndex = $('#fith-slide div.active').index() + 1;
$('.numSlide5Texto').html('' + currentIndex + '/' + totalItems + '');
});
});
// slide 1 - imagens
var urlDestino = "";
var idEnvio = 0;
var nrReg = 0;
var idProduto = 0;
var frente = "S";
function slide1() {
$.ajax({
url: urlDestino,
type: "POST",
data: { "id": idEnvio, "idProduto": idProduto, "nrRegistro": nrReg },
async: true,
dataType: "json",
success: function (data) {
if (document.getElementById("fourth-slide").getAttribute("produto1-ini") == 0) {
if (data.lista.length == 0 || data.lista == "0") {
$('#fotos-imovel').hide();
$('.fotos-imovel-icone').hide();
}
}
if (data.lista.length == 0)
return;
if (data == "") {
return;
}
var i = data.lista.length;
if (i > 0) {
i = i - 1;
}
var item = document.getElementById("fourth-slide").getAttribute("produto1-seq");
if (frente == "N") {
var qtdPagina = document.getElementById("fourth-slide").getAttribute("produto1-qtpagina");
qtdPagina = parseInt(qtdPagina);
item = item - (3 + qtdPagina);
}
if (i == 2) {
item++;
$('#produto1-item1').html(item + " / " + data.qtd);
$('#produto1-legenda1').html(data.lista[0].Descricao);
$('#produto1-imagem1').attr("src", data.lista[0].EnderecoImagem);
$('#produto1-imagem1').attr("title", data.lista[0].Descricao);
$('#produto1-imagem1').attr("alt", data.lista[0].DescricaoAlternativa);
$('#produto1-imagem1').attr("width", data.lista[0].Largura);
$('#produto1-imagem1').attr("height", data.lista[0].Altura);
item++;
$('#produto1-item2').html(item + " / " + data.qtd);
$('#produto1-legenda2').html(data.lista[1].Descricao);
$('#produto1-imagem2').attr("src", data.lista[1].EnderecoImagem);
$('#produto1-imagem2').attr("title", data.lista[1].Descricao);
$('#produto1-imagem2').attr("alt", data.lista[1].DescricaoAlternativa);
$('#produto1-imagem2').attr("width", data.lista[1].Largura);
$('#produto1-imagem2').attr("height", data.lista[1].Altura);
item++;
$('#produto1-item3').html(item + " / " + data.qtd);
$('#produto1-legenda3').html(data.lista[2].Descricao);
$('#produto1-imagem3').attr("src", data.lista[2].EnderecoImagem);
$('#produto1-imagem3').attr("title", data.lista[2].Descricao);
$('#produto1-imagem3').attr("alt", data.lista[2].DescricaoAlternativa);
$('#produto1-imagem3').attr("width", data.lista[2].Largura);
$('#produto1-imagem3').attr("height", data.lista[2].Altura);
$('#produto1-imagem1').parent().show();
$('#produto1-imagem2').parent().show();
$('#produto1-imagem3').parent().show();
$('#fourth-slide').attr('produto1-ini', data.lista[0].IdImagem);
$('#fourth-slide').attr('produto1-fim', data.lista[2].IdImagem);
$('#fourth-slide').attr('produto1-seq', item);
$('#fourth-slide').attr('produto1-qtpagina', 3);
}
else if (i == 1) {
item++;
$('#produto1-item1').html(item + " / " + data.qtd);
$('#produto1-legenda1').html(data.lista[0].Descricao);
$('#produto1-nome1').text(data.lista[0].NomeclienteProduto);
$('#produto1-imagem1').attr("src", data.lista[0].EnderecoImagem);
$('#produto1-imagem1').attr("title", data.lista[0].Descricao);
$('#produto1-imagem1').attr("alt", data.lista[0].DescricaoAlternativa);
$('#produto1-imagem1').attr("width", data.lista[0].Largura);
$('#produto1-imagem1').attr("height", data.lista[0].Altura);
item++;
$('#produto1-item2').html(item + " / " + data.qtd);
$('#produto1-nome2').text(data.lista[1].NomeclienteProduto);
$('#produto1-imagem2').attr("src", data.lista[1].EnderecoImagem);
$('#produto1-imagem2').attr("title", data.lista[1].Descricao);
$('#produto1-imagem2').attr("alt", data.lista[1].DescricaoAlternativa);
$('#produto1-imagem2').attr("width", data.lista[1].Largura);
$('#produto1-imagem2').attr("height", data.lista[1].Altura);
$('#produto1-legenda2').html(data.lista[1].Descricao);
$('#produto1-imagem1').parent().show();
$('#produto1-imagem2').parent().show();
$('#produto1-imagem3').parent().hide();
$('#fourth-slide').attr('produto1-ini', data.lista[0].IdImagem);
$('#fourth-slide').attr('produto1-fim', data.lista[1].IdImagem);
$('#fourth-slide').attr('produto1-seq', item);
$('#fourth-slide').attr('produto1-qtpagina', 2);
}
else {
item++;
$('#produto1-item1').html(item + " / " + data.qtd);
$('#produto1-legenda1').html(data.lista[0].Descricao);
$('#produto1-nome1').text(data.lista[0].NomeclienteProduto);
$('#produto1-imagem1').attr("src", data.lista[0].EnderecoImagem);
$('#produto1-imagem1').attr("title", data.lista[0].Descricao);
$('#produto1-imagem1').attr("alt", data.lista[0].DescricaoAlternativa);
$('#produto1-imagem1').attr("width", data.lista[0].Largura);
$('#produto1-imagem1').attr("height", data.lista[0].Altura);
$('#produto1-imagem1').parent().show();
$('#produto1-imagem2').parent().hide();
$('#produto1-imagem3').parent().hide();
$('#fourth-slide').attr('produto1-ini', data.lista[0].IdImagem);
$('#fourth-slide').attr('produto1-fim', data.lista[0].IdImagem);
$('#fourth-slide').attr('produto1-seq', item);
$('#fourth-slide').attr('produto1-qtpagina', 1);
}
}
});
};
if (document.getElementById("fourth-slide").getAttribute("produto1-ini") == 0) {
frente = "S";
idEnvio = 0;
urlDestino = "/Produto/BuscaImagemFrente";
nrReg = 3;
idProduto = $('#IdProduto').val();
slide1();
}
$('#frente-produto1-slide').on('click', function () {
frente = "S";
var idFim = document.getElementById("fourth-slide").getAttribute("produto1-fim");
idEnvio = idFim;
urlDestino = "/Produto/BuscaImagemFrente";
nrReg = 3;
idProduto = $('#IdProduto').val();
slide1();
});
$('#tras-produto1-slide').on('click', function () {
frente = "N";
var idIni = document.getElementById("fourth-slide").getAttribute("produto1-ini");
idEnvio = idIni;
urlDestino = "/Produto/BuscaImagemTras";
nrReg = 3;
idProduto = $('#IdProduto').val();
slide1();
});
$('#fourth-slide').carousel({
interval: false
});
// slide 4 - imagens - galeria de imagens
var urlDestino = "";
var idProduto = 0;
function slide4() {
$.ajax({
url: urlDestino,
type: "POST",
data: { "idProduto": idProduto },
async: true,
dataType: "json",
success: function (data) {
if (data == "") {
return;
}
var i = data.length;
if (i > 0) {
i = i - 1;
}
var y = 0;
for (x = 0; x < data.length; x++) {
if (data[x].IdPostagemImagem == 3) {
y++;
if (y == 1) {
$('#slide5-legenda1').html(data[x].Descricao);
$('#slide5-imagem1').attr("src", data[x].EnderecoImagem);
$('#slide5-imagem1').attr("title", data[x].Descricao);
$('#slide5-imagem1').attr("alt", data[x].DescricaoAlternativa);
}
else {
$('#fith-slide .carousel-inner').append('<div class="item">' +
'<img alt="' + data[x].DescricaoAlternativa + '" title="' +
data[x].Descricao + '" src="' + data[x].EnderecoImagem + '" class="img-responsive center-block">' +
'<div class="carousel-caption"><div class="fith-slide-legenda">' +
data[x].Descricao + '</div></div></div>');
}
}
}
}
});
};
urlDestino = "/Produto/BuscaTodasImagens";
idProduto = $('#IdProduto').val();
slide4();
$('#fith-slide').carousel({
interval: false
});
});
4) Controller (with two calls from jquery):
[HttpPost]
public async Task<JsonResult> BuscaImagemFrente(int? id, int idProduto, int nrRegistro)
{
int qtdTot = await (from d in db.Imagem
join p in db.Produto on d.IdProduto equals p.IdProduto
where p.IdProduto == idProduto
&& d.IdPostagemImagem == 3
select d.IdProduto).CountAsync();
int dep = 0;
if (id == 0)
{
dep = int.Parse((from d in db.Imagem
join p in db.Produto on d.IdProduto equals p.IdProduto
where p.IdProduto == idProduto
&& d.IdPostagemImagem == 3
orderby d.IdImagem
select d.IdImagem).FirstOrDefault().ToString());
id = dep - 1;
}
if (id >= 0)
{
var frente = await (from d in db.Imagem
join p in db.Produto on d.IdProduto equals p.IdProduto
where d.IdImagem > id && p.IdProduto == idProduto
&& d.IdPostagemImagem == 3
orderby d.IdImagem
select new
{
d.IdImagem,
d.IdProduto,
d.EnderecoImagem,
d.CorFundoLegenda,
d.Descricao,
d.IdEmpresa,
d.Largura,
d.Altura,
d.IdPostagemImagem,
d.DescricaoAlternativa,
d.DescricaoLegenda,
d.PosicaoHorizontalLegenda,
d.Detalhamento
})
.Take(nrRegistro).ToListAsync();
return Json( new { lista = frente, qtd = qtdTot });
}
else
{
return Json(0);
}
}
[HttpPost]
public async Task<JsonResult> BuscaImagemTras(int? id, int idProduto, int nrRegistro)
{
int qtdTot = await (from d in db.Imagem
join p in db.Produto on d.IdProduto equals p.IdProduto
where p.IdProduto == idProduto
&& d.IdPostagemImagem == 3
select d.IdProduto).CountAsync();
if (id > 0)
{
var frente = await (from d in db.Imagem
join p in db.Produto on d.IdProduto equals p.IdProduto
where d.IdImagem < id && p.IdProduto == idProduto
&& d.IdPostagemImagem == 3
orderby d.IdImagem descending
select new
{
d.IdImagem,
d.IdProduto,
d.EnderecoImagem,
d.CorFundoLegenda,
d.Descricao,
d.IdEmpresa,
d.Largura,
d.Altura,
d.IdPostagemImagem,
d.DescricaoAlternativa,
d.DescricaoLegenda,
d.PosicaoHorizontalLegenda,
d.Detalhamento
})
.Take(nrRegistro).OrderBy(x => x.IdImagem).ToListAsync();
return Json(new { lista = frente, qtd = qtdTot });
}
else
{
return Json(0);
}
}
public async Task<JsonResult> BuscaTodasImagens(int idProduto)
{
var retorno = await (from d in db.Imagem
join p in db.Produto on d.IdProduto equals p.IdProduto
where p.IdProduto == idProduto
&& (d.IdPostagemImagem == 3 || d.IdPostagemImagem == 9)
orderby d.IdPostagemImagem, d.IdImagem
select new
{
d.IdPostagemImagem,
d.EnderecoImagem,
d.Descricao,
d.DescricaoAlternativa,
d.DescricaoLegenda
})
.ToListAsync();
return Json(retorno);
}
[HttpPost]
public async Task<JsonResult> BuscaDadosPlanta(int idProduto)
{
var frente = await (from d in db.Imagem
join p in db.Produto on d.IdProduto equals p.IdProduto
join e in db.EspecificacaoProduto on p.IdProduto equals e.IdProduto
where p.IdProduto == idProduto && d.IdPostagemImagem == 9 &&
e.IdEspecificacaoProduto == d.IdEspecificacaoProduto
//orderby d.IdEspecificacaoProduto
orderby d.IdPostagemImagem, d.IdImagem
select new
{
e.IdEspecificacaoProduto,
e.DescricaoEspecificacaoProduto,
e.DetalhamentoEspecificacaoProduto,
d.IdImagem,
d.IdProduto,
d.EnderecoImagem,
d.CorFundoLegenda,
d.Descricao,
d.IdEmpresa,
d.Largura,
d.Altura,
d.IdPostagemImagem,
d.DescricaoAlternativa,
d.DescricaoLegenda,
d.PosicaoHorizontalLegenda,
d.Detalhamento
}).ToListAsync();
return Json(frente);
}

How to find span with biggest data-item using jQuery

I have a div with spans inside. They have data-item attr. How to find div with the biggest data-item attr. They are numbers starting from 0. For example I have:
<div class="wrapper">
<span data-num="0">text</span>
<span data-num="1">text</span>
<span data-num="2">text</span>
<span data-num="3">text</span>
</div>
Updated: This is part of my code, it's about uploading files and one of the input fields is multiple. And I show in a div with separate spans image names of the files. Use should add multiple files so I need to find the biggest data-num and increment it for the next file.
function getFiles(document, window, index) {
var inputs = document.querySelectorAll( '.app-file' );
input.addEventListener( 'change', function( e )
{
var fileName = '';
var num = 0;
if( this.files && this.files.length > 1 || $(this).next().next().html()) {
var fileName = [];
for (var i = 0; i < this.files.length; ++i) {
fileName.push(this.files.item(i).name);
var comma = '';
if($(this).next().next().html()) {
comma = ',';
}
divName.innerHTML = divName.innerHTML + comma + '<span class="image_name" data-num="'+num+'">' + this.files.item(i).name + '</span><span class="glyphicon glyphicon-remove remove-file" data-toggle="tooltip" data-placement="top" title="Remove"></span>';
num++;
}
} else {
fileName = e.target.value.split('\\').pop();
divName.innerHTML = '<span class="image_wrapper"><span class="image_name" data-num="'+num+'">' +fileName + '</span><span class="glyphicon glyphicon-remove remove-file" data-toggle="tooltip" data-placement="top" title="Remove"></span></span>';
var maxIndexItem = $.makeArray($('#wrapper [data-num]')).reduce(function(result, item) {
return $(item).data('num') > $(result).data('num') ? $(item) : result;
});
alert(maxIndexItem.text());
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="file-name" data-input="corporate_document" id="corporates"></div>

HTML
<div class="wrapper">
<span data-num="0">text1</span>
<span data-num="1">text2</span>
<span data-num="2">text3</span>
<span data-num="3">text4</span>
<span>text5</span>
<span data-num="">text6</span>
</div>
JS
$(document).ready(function(){
var arr = [];
$(".wrapper span").each(function(){
var dataNum = $(this).data("num");
if (dataNum != null) {
arr.push(dataNum);
}
}).promise().done( function(){
var max = Math.max.apply(Math, arr);
alert( $(".wrapper").find("[data-num=" + max + "]").text());
} );
});
Refer Fiddle

I think this code can helps you:
var maxIndexItem = $.makeArray($('.wrapper [data-num]')).reduce(function(result, item) {
return $(item).data('num') > $(result).data('num') ? $(item) : result;
});
alert(maxIndexItem.text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<span data-num="0">text 0</span>
<span data-num="1">text 1</span>
<span data-num="2">text 2</span>
<span data-num="3">text 3</span>
</div>

Keep vertical scroll position when clicking horizontal carousel button

I have a long page with lots of patient data inside an accordion container. At the top of the page there is a carousel with the 7 days of the week. If you click on the left or right arrow, either the previous or following week will show, which in turn, will show the applicable data below in the accordion.
What I need to do is when a user clicks on the left or right arrow, hold the page position on the current accordion section, but still allow the data to be updated. The data currently updates, but the container location may change. That particular container may not have data for one week, but the next week may have data.
I would like to click the arrow and still show the previous container heading.
Ex. I'm on the Hematology container and I click on the right arrow. I want the Hematology container to still be in view, even if there is no content inside.
Here is a screenshot of my page with the carousel and containers.
I know how to do this with anchor tags when dealing with links to different pages, but this is a bit different.
This project uses Angular to asynchronously get the new data for the containers. You can see it below. Thanks
Here is my code for the carousel:
<div id="myCarousel" class="carousel slide russ" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox"></div>
<a class="left carousel-control" href=".russ" role="button" data-slide="prev">
<span class="fa fa-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href=".russ" role="button" data-slide="next" onclick="stopVerticalScrolling()">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
My first crack at this:
<script>
function stopVerticalScrolling() {
var scroll = $(window).scrollTop();
$("html").scrollTop(scroll);
//javascript: alert($(window).scrollTop());
}
</script>
AngularJS Code:
function get_sticky_popup_data(timeline, patientMRN, patientSiteid, start, end) {
$http
.get('/API/data/patientdetails/Titlebar/get_admission_data/' + patientSiteid + '?MRN=' + patientMRN)
.success(function(data) {
$scope.carouseldata = data;
build_sticky_table(timeline, $scope.carouseldata, start, end);
var carouselItemTop = $('.displayTableContainer').position();
$('.displayTableContainer').attr('data-offset-top', carouselItemTop.top);
}).error(function(e) {
console.log('error in Ajax call get_admission_data: ' + e.message);
});
}
function build_sticky_table(timeline, items, start, end) {
var startDate = new Date(start.toString());
var endDate = new Date(end.toString());
var dtRotate = new Date(startDate);
var firstWeeksDataObject = new Array(7);
var datediff = ((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
var weeks = (datediff % 7 === 0 ? parseInt((datediff / 7)) + 1 : parseInt((datediff / 7))); // you need this many tables
$('.item').remove();
items.push({
'admit': timeline.admission_range_start,
'datetime': timeline.event_start_date,
'diagnosis': '',
'discharge': timeline.admission_range_end,
'location': timeline.location,
'room_bed': timeline.roombed
});
var isActive = false;
var starting_month_from_query_string = $('#workflow_header_month').val();
var starting_year_from_query_string = $('#workflow_header_year').val();
var match_weekly_data_from_query_string_month_and_year = false;
var previous_match_found = false;
var current_event_start_date = timeline.event_start_date;
if (starting_month_from_query_string !== "0" && starting_year_from_query_string !== "0") {
match_weekly_data_from_query_string_month_and_year = true;
}
for (var i = 0; i <= weeks; i++) {
var name = 'stickytbl' + i.toString();
$('.carousel-inner').append(buildtable(name, i)); //inserts a new table
var hcells = $('#' + name + ' > thead > tr > td');
var brows = $('#' + name + ' > tbody> tr');
$.each(hcells, function (index, item) {
if (index > 0) {
var cell = $(brows[0]).children('td');
var cell2 = $(brows[1]).children('td');
var cell3 = $(brows[2]).children('td');
//set the column data
var currentColumnHeaderDate = dtRotate.getMonth() + 1 + '/' + dtRotate.getDate() + '/' + dtRotate.getFullYear();
var currentColumnHeaderDateWithTime = new Date(currentColumnHeaderDate.toString() + ' 23:59:59');
firstWeeksDataObject[index] = currentColumnHeaderDate;
$(item).text((dtRotate.getMonth()) + 1 + '/' + dtRotate.getDate() + '/' + dtRotate.getFullYear());
//set the row data
if (dtRotate <= currentColumnHeaderDateWithTime) {
var arrayReturn = getDaysData(items, start, end, dtRotate, currentColumnHeaderDate);
//set table row data
$(cell[index]).html(arrayReturn[0]);
$(cell2[index]).html(arrayReturn[1]);
$(cell3[index]).html(arrayReturn[2]);
}
//increment the date
dtRotate.setDate(dtRotate.getDate() + 1);
}
});
}