How do I use javascript to add class=open into rendered <div class="card flex-row"> using map().
On the inspect element browser i see the reaction on click but that action didn't adding the determined class
Here is my code :
function fetchingData() {
fetch("http://localhost:3001/quote/sendquote")
.then((response) => {
if (!response.ok) {
throw Error;
}
return response.json();
})
.then((data) => {
console.log(data);
const rend = data.person
.map((data) => {
return `
<div class='card flex-row'>
<img src='https://png.pngtree.com/png-vector/20191023/ourlarge/pngtree-user-vector-icon-with-white-background-png-image_1849343.jpg' class='book'>
<div class='flex-column info'>
<div class='title' id="person">Dear ${data.frstname}</div>
<div class='author'></div>
<div class='hidden bottom summary'>
<input id="quote" type="text" value="">
</div>
</div>
<div class='flex-column group'>
<div class='members'>
<span class='current'>14</span> /
<span class='max'>30</span>
</div>
<div class='hidden bottom'>
<button class='simple'>Submit</button>
</div>
</div>
</div>`;
})
.join("");
console.log(rend);
document.querySelector(".center").insertAdjacentHTML("afterbegin", rend);
})
.catch((err) => {
console.log("rejected", err);
});
}
fetchingData();
<div class='container'>
<div class='center list flex-column'>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
let old = $(".card").get(0);
$(".card").click(function() {
if (old != null && $(old).hasClass("open")) $(old).toggleClass("open");
$(this).toggleClass("open");
old = this;
});
</script>
<script>
</script>
Related
The browser console is reporting immediately after activating the camera on the device
Started continous decode from camera with id BGOlLyxMumeB0YGZoWhjlsR1atGM5DEXtxqIrhEmoqk=
It was not possible to play the video.
The camera is however running in the <video tag.
The error references library#latest:15:31010 Error loading this URI: Unknown source
Follows is the HTML code on the page where the error is generated.
What could be the source of the error / or how could it be overcome?
<div id='security_check'></div>
<div class='grid-x grid-padding-x'>
<div class='cell small-12 '>
<label>scan:</label>
<pre><code id="result"></code></pre>
</div>
<div class='cell small-2 '>
</div>
</div>
<div class='grid-x grid-padding-x'>
<div class='cell small-12 '>
<div id="sourceSelectPanel" style="display:none">
<label for="sourceSelect">change_video_source:</label>
<select id="sourceSelect" style="max-width:400px">
</select>
</div>
</div>
</div>
<div class='grid-x grid-padding-x'>
<div class='cell small-6'>
<a class="button" id="resetButton">Stop</a>
</div>
<div class='cell small-6'>
<a class="button" id="startButton">Go</a>
</div>
</div>
<div class='grid-x grid-padding-x'>
<video id="video" width="320" height="180" style="border: 1px solid gray"></video>
</div>
</div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
<script type="text/javascript" src="https://unpkg.com/#zxing/library#latest"></script>
<script type="text/javascript">
window.addEventListener('load', function () {
let selectedDeviceId;
const codeReader = new ZXing.BrowserMultiFormatReader()
console.log('ZXing code reader initialized')
codeReader.getVideoInputDevices()
.then((videoInputDevices) => {
const sourceSelect = document.getElementById('sourceSelect')
selectedDeviceId = videoInputDevices[0].deviceId
if (videoInputDevices.length >= 1) {
videoInputDevices.forEach((element) => {
const sourceOption = document.createElement('option')
sourceOption.text = element.label
sourceOption.value = element.deviceId
sourceSelect.appendChild(sourceOption)
})
sourceSelect.onchange = () => {
selectedDeviceId = sourceSelect.value;
};
const sourceSelectPanel = document.getElementById('sourceSelectPanel')
sourceSelectPanel.style.display = 'block'
}
document.getElementById('startButton').addEventListener('click', () => {
codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
if (result) {
console.log(result)
document.getElementById('result').textContent = result.text
let formData = new FormData();
let CodeParams = {
code_data: result.text,
item_id: item.id
};
formData.append("code_json_data", JSON.stringify(CodeParams));
Rails.ajax({
url: "update_q",
type: "post",
data: formData
});
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error(err)
document.getElementById('result').textContent = err
}
})
console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
})
document.getElementById('resetButton').addEventListener('click', () => {
codeReader.reset()
document.getElementById('result').textContent = '';
console.log('Reset.')
})
})
.catch((err) => {
console.error(err)
})
})
</script>
I'm looking for solutions to display the right movie information in my overlay.
I have a "popup window" that appears when i click on a movie and it is supposed to display movie's informations in it but when I click on a movie, no matter which one it is, it only displays the last movie informations, what Should I do to fix it ?
const movieIntegration =() => {
allMovies.map(movie=> {
movieGallery.innerHTML += `<div class="imgContainer">
<img src="${movie.img}" alt="${movie.name}">
<div class="titleContainer">
<div class="movieTitle"> ${movie.name} </div>
<div class="seemore"> See more </div>
</div>
</div>`
const seemore = document.querySelectorAll(".seemore")
seemore.forEach(elm => {
elm.addEventListener("click",() => {
pageContainer.innerHTML += `<div class="popupContainer">
<div class="popup">
${movie.name}
<div id="likeButton">
<img src="img/like.png">
</div>
<div id="editButton">
<img src="img/edit.png">
</div>
<a href="submit.html">
<div id="addingButton">
<img src="img/add.png">
</div>
</a>
</div>
</div>`
console.log(true)
}, true)
})
})
}
the problem is that you are getting all the .seemore element for each movie and you are editing the content of ALL elements for each movie, so the last movie will overwrite the content for all the previous.
A solution could be something like this:
const movieIntegration = () => {
allMovies.map((movie) => {
movieGallery.innerHTML += `<div class="imgContainer">
<img src="${movie.img}" alt="${movie.name}">
<div class="titleContainer">
<div class="movieTitle"> ${movie.name} </div>
<div class="seemore"> See more </div>
</div>
</div>`
})
const seemore = document.querySelectorAll('.seemore')
seemore.forEach((elm, i) => {
elm.addEventListener(
'click',
() => {
pageContainer.innerHTML += `<div class="popupContainer">
<div class="popup">
${allMovies[i].name}
<div id="likeButton">
<img src="img/like.png">
</div>
<div id="editButton">
<img src="img/edit.png">
</div>
<a href="submit.html">
<div id="addingButton">
<img src="img/add.png">
</div>
</a>
</div>
</div>`
},
true
)
})
}
In this way you are mapping the .seemore elements AFTER you finish the map of allMovies and, for each .seemore element you get the associated movie and write his name inside.
I'm trying to make a movie searching site using TMDb and axios npm. What am I doing wrong?
Search works fine, but I can't access the movies themselves.
$(document).ready(() => {
$('#searchForm').on('submit', (e) => {
let searchText = $('#searchText').val();
getMovies(searchText);
e.preventDefault();
});
});
function getMovies(searchText) {
axios.get('https://api.themoviedb.org/3/search/movie?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US&query=' + searchText)
.then((response) => {
console.log(response);
let movies = response.data.Search;
let output = '';
$.each(movies, (index, movie) => {
output += `
<div class="col-md-3">
<div class="well text-center">
<img src="${movie.poster_path}">
<h5>${movie.original_title}</h5>
<a onclick="https://www.themoviedb.org/movie/('${movie.id}')" class="btn btn-primary" href="#">Movie Details</a>
</div>
</div>
`;
});
$('#movies').html(output);
})
.catch((err) => {
console.log(err);
});
}
function movieSelected(id) {
sessionStorage.setItem('id', id);
window.location = 'movie.html';
return false;
}
function getMovie() {
let id = sessionStorage.getItem('id');
axios.get('https://api.themoviedb.org/3/movie/' + id + '?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US')
.then((response) => {
console.log(response);
let movie = response.data;
let output = `
<div class="row">
<div class="col-md-4">
<img src="${movie.Poster}" class="thumbnail">
</div>
<div class="col-md-8">
<h2>${movie.Title}</h2>
<ul class="list-group">
<li class="list-group-item"><strong>Genre:</strong> ${movie.genres.Name}</li>
<li class="list-group-item"><strong>Released:</strong> ${movie.release_date}</li>
<li class="list-group-item"><strong>Rated:</strong> ${movie.vote_average}</li>
<li class="list-group-item"><strong>Review:</strong> ${movie.overview}</li>
</ul>
</div>
</div>
<div class="row">
<div class="well">
<h3>Plot</h3>
${movie.Plot}
<hr>
View TMDb
Go Back To Search
</div>
</div>
`;
$('#movie').html(output);
})
.catch((err) => {
console.log(err);
});
}
#movies img,
#movie img {
width: 100%;
}
#media(min-width:960px) {
#movies .col-md-3 .well {
height: 390px;
}
#movies .col-md-3 img {
height: 240px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MovieInfo</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MovieInfo</a>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h3 class="text-center">Search For Any Movie</h3>
<form id="searchForm">
<input type="text" class="form-control" id="searchText" placeholder="Search Movies...">
</form>
</div>
</div>
<div class="container">
<div id="movies" class="row"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
--More details, because I have more code:
Search works fine, but I can't access the movies themselves.
Search works fine, but I can't access the movies themselves.
Search works fine, but I can't access the movies themselves.
Search works fine, but I can't access the movies themselves.
This will help you click here, Now it is working. There was very small bug, which I mentioned to you.
And also fixed the image not showing issue.
Just replace response.data.Search by response.data.results
$(document).ready(() => {
$('#searchForm').on('submit', (e) => {
let searchText = $('#searchText').val();
getMovies(searchText);
e.preventDefault();
});
});
function getMovies(searchText) {
axios.get('https://api.themoviedb.org/3/search/movie?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US&query=' + searchText)
.then((response) => {
console.log(response);
let movies = response.data.results;
let output = '';
$.each(movies, (index, movie) => {
output += `
<div class="col-md-3">
<div class="well text-center">
<img src="${movie.poster_path}">
<h5>${movie.original_title}</h5>
<a onclick="https://www.themoviedb.org/movie/('${movie.id}')" class="btn btn-primary" href="#">Movie Details</a>
</div>
</div>
`;
});
$('#movies').html(output);
})
.catch((err) => {
console.log(err);
});
}
function movieSelected(id) {
sessionStorage.setItem('id', id);
window.location = 'movie.html';
return false;
}
function getMovie() {
let id = sessionStorage.getItem('id');
axios.get('https://api.themoviedb.org/3/movie/' + id + '?api_key=d80a54a0422d5fff6149c48741c8bece&language=en-US')
.then((response) => {
console.log(response);
let movie = response.data;
let output = `
<div class="row">
<div class="col-md-4">
<img src="${movie.Poster}" class="thumbnail">
</div>
<div class="col-md-8">
<h2>${movie.Title}</h2>
<ul class="list-group">
<li class="list-group-item"><strong>Genre:</strong> ${movie.genres.Name}</li>
<li class="list-group-item"><strong>Released:</strong> ${movie.release_date}</li>
<li class="list-group-item"><strong>Rated:</strong> ${movie.vote_average}</li>
<li class="list-group-item"><strong>Review:</strong> ${movie.overview}</li>
</ul>
</div>
</div>
<div class="row">
<div class="well">
<h3>Plot</h3>
${movie.Plot}
<hr>
View TMDb
Go Back To Search
</div>
</div>
`;
$('#movie').html(output);
})
.catch((err) => {
console.log(err);
});
}
#movies img,
#movie img {
width: 100%;
}
#media(min-width:960px) {
#movies .col-md-3 .well {
height: 390px;
}
#movies .col-md-3 img {
height: 240px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MovieInfo</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MovieInfo</a>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h3 class="text-center">Search For Any Movie</h3>
<form id="searchForm">
<input type="text" class="form-control" id="searchText" placeholder="Search Movies...">
</form>
</div>
</div>
<div class="container">
<div id="movies" class="row"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I need for help, how to change parent div from each child div i have html like bellow
<div id="parent1">
<div class="toParent3">
</div>
<div class="toParent2">
</div>
<div class="toParent4">
</div>
</div>
<div id="parent2">
//content
</div>
<div id="parent3">
//content
</div>
i want to do ,when the first load i wanna show only #parent1 and its child, and then when child's #parent1 is clicked, I want to change whole #parent1 to #parent2 and hide all div except #parent2
You can use append, this code is only for parent2 as per your example.
$('.toParent2').click(function(){
$('.parent2').append($('.toParent2'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent1">
<div class="toParent3">
Child to parent 3
</div>
<div class="toParent2">
Child to parent 2
</div>
<div class="toParent4">
Child to parent 4
</div>
</div>
<div class="parent2">
//content
</div>
<div class="parent3">
//content
</div>
here's a vanilla js solution that is a bit more generic.
let all = document.getElementsByClassName('movable');
function hideParents() {
Array.prototype.forEach.call(document.getElementsByClassName('_parent_'), (e) => {
e.classList.add('hidden');
});
}
Array.prototype.forEach.call(document.getElementsByClassName('toParent1'), (e) => {
console.log('lols', e.addEventListener);
e.addEventListener('click', () => {
hideParents();
Array.prototype.forEach.call(all, (e2) => {
setTimeout(() => {
const p = document.getElementById('parent1');
p.appendChild(e2);
p.classList.remove('hidden');
});
});
});
});
Array.prototype.forEach.call(document.getElementsByClassName('toParent2'), (e) => {
e.addEventListener('click', () => {
hideParents();
Array.prototype.forEach.call(all, (e2) => {
setTimeout(() => {
const p = document.getElementById('parent2');
p.appendChild(e2);
p.classList.remove('hidden');
});
});
});
});
Array.prototype.forEach.call(document.getElementsByClassName('toParent3'), (e) => {
e.addEventListener('click', () => {
hideParents();
Array.prototype.forEach.call(all, (e2) => {
setTimeout(() => {
const p = document.getElementById('parent3');
p.appendChild(e2);
p.classList.remove('hidden');
});
});
});
});
._parent_.hidden {
display: none;
}
<div class="_parent_" id="parent1">
I'm parent1
<div class="movable toParent3">To3
</div>
<div class="movable toParent2">To2
</div>
<div class="movable toParent1">To1
</div>
</div>
<div class="_parent_ hidden" id="parent2">
I'm parent2
</div>
<div class="_parent_ hidden" id="parent3">
I'm parent3
</div>
not that removing setTimeout() there's a glitch happening, the elements are moved correctly but the DOM is refreshed too early
here's another solution, that replaces the text of the parent instead of moving the children.
One final problem..how to dynamicaly change class name of same instruments by adding number?
<div class="score">
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Flute"></div>
<div class="stff_Clarinet"></div>
</div>
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Flute"></div>
<div class="stff_Clarinet"></div>
</div>
</div>
To this?...
<div class="score">
<div class="system">
<div class="stff_Flute_1"></div>
<div class="stff_Flute_2"></div>
<div class="stff_Clarinet"></div>
</div>
<div class="system">
<div class="stff_Flute_1"></div>
<div class="stff_Flute_2"></div>
<div class="stff_Clarinet"></div>
</div>
</div>
I have this code https://jsfiddle.net/7cLoxn29/1/ but something is wrong...
I'm not terribly fond of jQuery, so I created a vanilla JS solution for you (hopefully that's OK!):
let parents = document.querySelectorAll(".system")
parents.forEach((parent) => {
let children = parent.querySelectorAll("div")
children = Array.from(children).reduce((accumulator, current) => {
if (current.className in accumulator) {
accumulator[current.className].push(current)
} else {
accumulator[current.className] = [current]
}
return accumulator
}, {})
for (var key in children) {
if (children[key].length > 1) {
children[key].forEach((child, i, target) => {
child.className = `${child.className}_${i+1}`
})
}
}
})
Note that this is ES2015 JS code.
Here's an updated fiddle: https://jsfiddle.net/7cLoxn29/5/