How can I open a specific image - javascript

in my web application I have a gallery of photos.
What I' doing now is to try to open one of them as a modal, and then navigate through all the images with a carousel.
So, what is my problem? I'm unable to open the image I click on it.
For example: if I have 10 photos in my gallery, and I want to open de 4th one, when I click on it it opens the modal-carousel but showing the photo in position 0, making me have to click on the "Next" button to get to that photo.
One idea that came to my mind to fix this problem is to send the position and the src of the photo (each photo has a data-img-show="#cont"), but then how can I tell Javascript that there are previous images?
I'm running out of ideas to fix this problem.
This is my actual image:
<img class="img" id="Image_#cont" src="#pd.getImagePath" onclick="GetImages(#pd.getCode,this)" data-img-mostrar="#pd.getImageCode" />
This is my carousel-modal:
#foreach(var item in Model){
<div class="modal" tabindex="-1" id="myModal">
<div class="modal-dialog" id="modalDialog">
<div class="modal-content">
<div class="modal-header" id="modalHeader">
<button type="button" class="btn-close" id="btnClose" onclick="CloseModal()" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body px-0" data-bs-interval="false" id="#item.getNumeroEntrega()">
<div id="C_#item.getNumeroEntrega()" class="carousel slide carousel-dark" data-bs-interval="false">
<div id="Entrega_#item.getNumeroEntrega()" class="carousel-inner" data-bs-interval="false">
<!--Creacion del carousel con imagenes-->
<!--Fin del carousel-->
<button class="carousel-control-prev" type="button" data-bs-target="#C_#item.getNumeroEntrega()" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#C_#item.getNumeroEntrega()" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
}
And this is my Javascript code:
function GetImagenes(entrega, img){
var z = 0;
var modal = document.getElementById("myModal");
console.log(entrega);
console.log(img);
$.ajax({
method: "GET",
url: "GetPedidoImagenes",
contentType: "aplication/json; Charset=utf-8",
data: { 'entrega': entrega },
async: true,
success: function (result) {
console.log("Longitud: " + result.length);
if (result == 0) {
alert("No hay Imagenes");
}
else {
console.log(result);
while (z < result.length) {
var carusel = document.getElementById("Entrega_" + entrega);
if (z == 0) {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item active');
let btn = document.createElement('button');
btn.setAttribute('class', 'btn btn-primary');
btn.textContent = "Descargar Imágen";
let im = document.createElement('i');
im.setAttribute('class', 'fa fa-download mx-2');
btn.appendChild(im);
div.appendChild(btn);
var img = document.createElement("img");
img.setAttribute('class', 'img-responsive img-fluid');
img.setAttribute('id', "img01")
//img.setAttribute('src', srcImg)
div.appendChild(img);
img.setAttribute('src', result[z].path);
carusel.appendChild(div);
z++;
}
else {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item');
let btn = document.createElement('button');
btn.setAttribute('class', 'btn btn-primary');
btn.textContent = "Descargar Imágen";
let im = document.createElement('i');
im.setAttribute('class', 'fa fa-download mx-2');
btn.appendChild(im);
div.appendChild(btn);
var img = document.createElement('img');
img.setAttribute('class', 'img-responsive img-fluid');
img.setAttribute('id', "img01")
div.appendChild(img);
img.setAttribute('src', result[z].path);
carusel.appendChild(div);
z++;
}
}
modal.style.display = "block";
}
console.log(result);
}
})
};

Related

javascript in django template not working

I'm new in Django, im create product page in Django in product card i add increment decrement add to cart button, but add to cart button work on first product card so,what can i do?
I'm added add to card increment and decrement button using JavaScript why JavaScript only apply on one card product in Django. so, how to resolve when ever i use looping in Django my JavaScript not working or shown in console btn varriable already declared.
{% for i in productskey %}
<div class="col-sm-4">
<div class="product-image-wrapper" style="border:1px solid #ddd ;">
<div class="single-products">
<div class="productinfo text-center">
<a href="{% url 'prodetail' i.id %}">
<img src=" {{i.productImage.url}} " alt="" style="width:255px; height:255px"/>
</a>
<h2>₹{{i.productPrice}}</h2>
<p>{{i.productName}}</p>
<div class="btn">
<button class="mainusbtn">-</button>
<button class="mainbtn" class="btn btn-default" class="fa fa-shopping-cart">ADD TO CART</button>
<button class="plusbtn">+</button>
</div>
<!-- <i class="fa fa-shopping-cart"></i>Add to cart -->
</div>
<!-- <div class="product-overlay">
<div class="overlay-content">
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div> -->
</div>
<!-- <div class="choose">
<ul class="nav nav-pills nav-justified">
<li><i class="fa fa-plus-square"></i>Add to wishlist</li>
<li><i class="fa fa-plus-square"></i>Add to compare</li>
</ul>
</div> -->
</div>
<!-- </a> -->
</div>
<script>
let btn = document.querySelector('.mainbtn');
let pbtn = document.querySelector('.plusbtn');
let mbtn = document.querySelector('.mainusbtn');
btn.addEventListener("click", () => {
if (btn.innerText == 'ADD TO CART') {
btn.innerText = 1;
pbtn.style.display = 'inline-block';
mbtn.style.display = 'inline-block';
}
})
mbtn.addEventListener("click", () => {
if (btn.innerText == 5) {
pbtn.style.display = 'inline-block';
}
if (btn.innerText < 2) {
btn.innerText = 'ADD TO CART';
pbtn.style.display = 'none';
mbtn.style.display = 'none';
} else {
btn.innerText = btn.innerText - 1;
}
})
pbtn.addEventListener("click", () => {
btn.innerText = +(btn.innerText) + +1;
// if(btn.innerText == 5){
// pbtn.style.display = 'none';
// }
})
</script>

I have a "main.js:200 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')" when opening for second time a modal

The first time I click on an image, the modal is correctly loaded, but when I close it and open it again, I have this error:
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
This is my HTML code:
<div class="modal" tabindex="-1" id="myModal">
<div class="modal-dialog" id="modalDialog">
<div class="modal-content">
<div class="modal-header" id="modalHeader">
<button type="button" class="btn-close" id="btnClose" onclick="CloseModal()" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body px-0" data-bs-interval="false" id="#Model.FirstOrDefault().getNumeroEntrega()">
<div id="C_#Model.FirstOrDefault().getNumeroEntrega()" class="carousel slide carousel-dark" data-bs-interval="false">
<div id="Entrega_#Model.FirstOrDefault().getNumeroEntrega()" class="carousel-inner" data-bs-interval="false">
<!--Creacion del carousel con imagenes-->
<!--Fin del carousel-->
<button class="carousel-control-prev" type="button" data-bs-target="#C_#Model.FirstOrDefault().getNumeroEntrega()" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#C_#Model.FirstOrDefault().getNumeroEntrega()" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
And this my Javascript:
var modal = document.getElementById("myModal");
while (z < result.length) {
var carusel = document.getElementById("Entrega_" + entrega);
if (z == 0) {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item active');
let btn = document.createElement('button');
btn.setAttribute('class', 'btn btn-primary mt-3');
btn.textContent = "Descargar Imágen";
let im = document.createElement('i');
im.setAttribute('class', 'fa fa-download mx-2');
btn.appendChild(im);
div.appendChild(btn);
var img = document.createElement("img");
img.setAttribute('class', 'img-responsive img-fluid');
img.setAttribute('id', "img01")
//img.setAttribute('src', srcImg)
div.appendChild(img);
img.setAttribute('src', result[z].path);
carusel.appendChild(div);
z++;
}
else {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item');
let btn = document.createElement('button');
btn.setAttribute('class', 'btn btn-primary');
btn.textContent = "Descargar Imágen";
let im = document.createElement('i');
im.setAttribute('class', 'fa fa-download mx-2');
btn.appendChild(im);
div.appendChild(btn);
var img = document.createElement('img');
img.setAttribute('class', 'img-responsive img-fluid');
img.setAttribute('id', "img01")
div.appendChild(img);
img.setAttribute('src', result[z].path);
carusel.appendChild(div);
z++;
}
}
//'X' button onclick function
function CloseModal() {
let modal = document.getElementById('myModal');
modal.style.display = "none";
modal.remove();
}
This happened after removing a foreach loop in the HTML code, only for accessing the model values, and now I'm using #Model.FirstOrDefault.getNumero() and I have it correctly. I think this is okey but I don't know why I have that error.
The error is in the first carusel.appendChild(div), when z == 0

Why is collapsible not working for the dynamically created buttons

I am retrieving the data(question) from the database and setting that value to the button.
When I tried to click on the button it should expand the "answer" to that question but it's not happening. I have completely designed rows in the script itself.
I have created a div in HTML and trying to add the rows dynamically to that div in script.
<div class="accordion" id="accordionExample">
<div id="questions">
</div>
</div>
<script>
var store;
var store_count = 0;
var store_row = document.createElement("div");
db.collection("FAQs").orderBy("Priority","asc").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
var qid = doc.id;
var docRef = db.collection("PopopFAQs").doc(qid);
docRef.get().then(function(doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
store_count++;
store = document.createElement("div");
store.setAttribute("class", "card");
store.setAttribute("id", qid);
if(store_count == 1) {
store.innerHTML = `<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link no-wrap collapsed btn-faqs" type="button"
data-toggle="collapse" data-target="#`+ doc.data().Priority +`"
aria-expanded="false" aria-controls="collapseThree">
<i class="fa fa-arrow-right"></i> `+ doc.data().Question +`
</button>
</h5>
</div>
<div id="`+ doc.data().Priority +`" class="collapse show"
aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">`+ doc.data().Answer +`
</div>
</div>`;
}
else {
store.innerHTML = `<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link no-wrap collapsed btn-faqs" type="button"
data-toggle="collapse" data-target="#`+ doc.data().Priority +`"
aria-expanded="false" aria-controls="collapseThree">
<i class="fa fa-arrow-right"></i> `+ doc.data().Question +`
</button>
</h5>
</div>
<div id="`+ doc.data().Priority +`" class="collapse"
aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">`+ doc.data().Answer +`
</div>
</div>`;
}
store_row.append(store);
document.getElementById("questions").innerHTML = store_row.innerHTML;
} else {
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
});
});
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.parentNode.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}

How can I reach specific div in JavaScript?

I have a plp page which are listed items. And user can favorite any item.
My problem is when the user favorite one item, I want to change star icon it should be show favorited.
Here my item structure:
<div class="product-tile-top">
<div class="product-tile-top-inner tile-wishlist">
<span role="button" class="wish-list-icon" id="grc398342">
<div class="btn btn-default btn-sm pdp-wishlist-btn">
<span>
<img class="favorite" src="/_ui/responsive/common/images/favorite.svg" height="17px;">
</span>
</div>
</span>
</div>
</div>
Every item has unique id like this:
<span role="button" class="wish-list-icon" id="grc398342">
So, I want to reach and change only this section when user favorite:
<span>
<img class="favorite" src="/_ui/responsive/common/images/favorite.svg" height="17px;">
</span>
I changed my code like this but its not running?
var newURL = "/_ui/responsive/common/images/favorite-red.svg";
function fav(elemId){
$("#elemId").find(".favorite").attr("src", newURL)
}
$('#addBtn').click(function() {
var listName = $('#listName').val();
var productCode = $('#productCode').val();
$('#notificationP').text('');
if (listName.trim() == '') {
$('#notificationP').text($('#nameValidate').val());
return;
}
$('.loading-overlay').show();
$.ajax({
type : "POST",
url : ACC.config.encodedContextPath + "/wishlist/add",
data : 'productCode=' + productCode + '&listName=' + listName,
success : function(loginPopup) {
$('.loading-overlay').hide();
if (loginPopup.code == '0' || loginPopup.code == '2') {
$('#notificationP').text($('#duplicate').val());
} else if (loginPopup.code == '1') {
$('#notificationP').text($('#add').val());
fav(productCode);
}
else if(loginPopup.code == '3'){
$('#notificationP').text($('#maxProductsError').val()+' '+loginPopup.errorCodeMeg+')');
}
else {
$('#notificationP').text($('#globleError').val());
}
},
error : function(error) {
$('.loading-overlay').hide();
$('#notificationP').text($('#globleError').val());
}
});
});
How can I access this image?
Onclick of the div invoke a function and push the id of the div. Using children get the span child and make changes
function a(id) {
var ele = document.getElementById(id).children[0].children[0];
ele.style.color = "red";
ele.children[0].setAttribute('url',"www.xyz.com")
console.log(ele.children[0].getAttribute('url'))
}
<div class="product-tile-top">
<div class="product-tile-top-inner tile-wishlist">
<span role="button" class="wish-list-icon" id="grc398342" onclick=a(this.id)>
<div class="btn btn-default btn-sm pdp-wishlist-btn">
<span>dd
<img class="favorite" src="/_ui/responsive/common/images/favorite.svg" height="17px;">
</span>
</div>
</span>
</div>
</div>
You can use .find() method on the passed element in jquery like this. We give .find() the class name of the image and then change src attribute of the image. In this example if you click on the icon it will change to a star.
var newURL = "https://img.freepik.com/free-vector/start_53876-25533.jpg?size=338&ext=jpg";
function fav(elem){
$(elem).find(".favorite").attr("src", newURL)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-tile-top">
<div class="product-tile-top-inner tile-wishlist">
<span role="button" class="wish-list-icon" id="grc398342" onclick="fav(this)">
<div class="btn btn-default btn-sm pdp-wishlist-btn">
<span>
<img class="favorite" src="https://img.freepik.com/free-vector/yellow-star-trail-set_23-2147739091.jpg?size=338&ext=jpg" height="17px;">
</span>
</div>
</span>
</div>
</div>
As for your comment how to do this in ajax. You can return the item id in your ajax call and then access it like this
var newURL = "https://img.freepik.com/free-vector/start_53876-25533.jpg?size=338&ext=jpg";
function fav(elemId){
$("#elemId").find(".favorite").attr("src", newURL)
}
// your ajax call
$.ajax({
url: "",
data: { /*Your parameters*/},
success: function(returnedData){
fav(returnedData);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-tile-top">
<div class="product-tile-top-inner tile-wishlist">
<span role="button" class="wish-list-icon" id="grc398342">
<div class="btn btn-default btn-sm pdp-wishlist-btn">
<span>
<img class="favorite" src="https://img.freepik.com/free-vector/yellow-star-trail-set_23-2147739091.jpg?size=338&ext=jpg" height="17px;">
</span>
</div>
</span>
</div>
</div>

Can't load 2 different modal forms with JQuery Trigger

I have some modal forms to complete some fields, in this case I have 2 modal forms, 1 for Jury and 1 for Contact, when I press 'Add' link, in both cases works fine, but the problem is when I want to edit contact.
When I press Edit in both cases I call controller to complete the Java form and then, return to view and simulate a click in "Add" button with JQuery. In jury case works fine, but in Contact I only get a dark screen (like if modal works), but modal window never appear. Other problem is, when I press Edit button in Jury and then close the jury modal form, when I press Edit in Contact it launch the jury modal form...
Contact Modal and Add link (Edit link doesn't works)
<div class="row margin-top-10">
<div class="col-xs-2 col-md-2 col-md-push-10">
<a id="btnAddCForm" href="#modal-cForm-form" data-toggle="modal" class="btn fpa btn-block pull-right">AÑADIR NUEVO</a>
</div>
</div>
<div id="modal-cForm-form" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Nuevo/Editar Forma de contacto</h4>
</div>
<div class="modal-body">
<div class="scroller" style="height:390px" data-always-visible="1" data-rail-visible1="1">
Some fields
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn default">CANCELAR</button>
<button type="button" onclick="addContactForm();" class="btn fpa">ACEPTAR</button>
</div>
</div>
</div>
</div>
Jury Modal and Add link (Works fine)
<div class="row margin-top-10">
<div class="col-xs-2 col-md-2 col-md-push-10">
<a id="btnAddJurado" href="#modal-jury-form" data-toggle="modal" class="btn fpa btn-block pull-right">AÑADIR NUEVO</a>
</div>
</div>
<div id="modal-jury-form" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="resetValues();"></button>
<h4 class="modal-title">Nuevo/Editar Jurado</h4>
</div>
<div class="modal-body">
<div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible1="1">
Some Fields
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" onclick="resetValues();" class="btn default">CANCELAR</button>
<button type="button" onclick="addJury();" class="btn fpa">ACEPTAR</button>
</div>
</div>
</div>
</div>
Onload (In main html document)
window.onload = function () {
/*<![CDATA[*/
var idJuryAux = /*[[${person.juryAux.id}]]*/
null;
var idContactFormAux = /*[[${person.contactFormAux.id}]]*/
null;
/*]]>*/
var idProvincia = $('#provinceField').val();
var idPais = $('#countryField').val();
if (idPais == '-1') {
$('#provinceField').attr("readonly", true);
} else {
$('#provinceField').attr("readonly", false);
}
if (idProvincia == '-1') {
$('#cityField').attr("readonly", true);
} else {
$('#cityField').attr("readonly", false);
}
if (idJuryAux != null) {
/*<![CDATA[*/
var idCat = /*[[${person.juryAux.category}]]*/
null;
var idCargo = /*[[${person.juryAux.juryType}]]*/
null;
var catName = /*[[${person.juryAux.categoryName}]]*/
null;
var cargoName = /*[[${person.juryAux.juryTypeName}]]*/
null;
/*]]>*/
$('#btnAddJurado').trigger('click');
$("#categoryField").select2('data', {
id: idCat,
text: catName
});
$("#juryTypeField").select2('data', {
id: idCargo,
text: cargoName
});
}
if (idContactFormAux != null) {
/*<![CDATA[*/
var idType = /*[[${person.contactFormAux.type}]]*/
null;
var typeName = /*[[${person.contactFormAux.typeName}]]*/
null;
var idTag = /*[[${person.contactFormAux.tag}]]*/
null;
var tagName = /*[[${person.contactFormAux.tagName}]]*/
null;
var idPais = /*[[${person.contactFormAux.country}]]*/
null;
var paisName = /*[[${person.contactFormAux.countryName}]]*/
null;
var idProvincia = /*[[${person.contactFormAux.province}]]*/
null;
var provName = /*[[${person.contactFormAux.provinceName}]]*/
null;
var idCity = /*[[${person.contactFormAux.city}]]*/
null;
var cityName = /*[[${person.contactFormAux.cityName}]]*/
null;
var idInst = /*[[${person.contactFormAux.institution}]]*/
null;
var instName = /*[[${person.contactFormAux.institutionNme}]]*/
null;
/*]]>*/
$('#btnAddCForm').trigger('click');
$("#typeField").select2('data', {
id: idType,
text: typeName
});
$("#tagField").select2('data', {
id: idTag,
text: tagName
});
$("#countryField").select2('data', {
id: idPais,
text: paisName
});
$("#provinceField").select2('data', {
id: idProvincia,
text: provName
});
$("#cityField").select2('data', {
id: idCity,
text: cityName
});
$("#institutionField").select2('data', {
id: idInst,
text: instName
});
}
}
P.S. addJury(); and addContactForm(); only closes modal window, both works fine!
EDIT: I'm still waiting for a response...

Categories

Resources