This question already has answers here:
$(this) inside of AJAX success not working
(2 answers)
Closed 4 years ago.
I am trying to fetch the img src which is in flip class. Below is the HTML that I am having. I basically want to get the src img and change it on the click on swatch-option.
<li class="item product product-item">
<div class="product-item-info" data-container="product-grid">
<a href="http://127.0.0.1/magento2252/stellar-solar-jacket.html" class="product photo product-item-photo" tabindex="-1">
<span class="product-image-container" style="width:240px;">
<span class="product-image-wrapper" style="padding-bottom: 125%;">
<img class="product-image-photo" src="http://127.0.0.1/magento2252/pub/media/catalog/product\cache\c687aa7517cf01e65c009f6943c2b1e9\/w/j/wj01-blue_main.jpg" width="240" height="300" alt="Stellar Solar Jacket" style="display: block;">
<img class="flip" src="http://127.0.0.1/magento2252/pub/media/catalog/product//w/j/wj01-red_back.jpg" width="240" height="300" alt="Stellar Solar Jacket" style="display: none;">
</span>
</span>
</a>
<div class="product details product-item-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="http://127.0.0.1/magento2252/stellar-solar-jacket.html">
Stellar Solar Jacket </a>
</strong>
<div class="product-reviews-summary short">
<div class="rating-summary">
<span class="label"><span>Rating:</span></span>
<div class="rating-result" title="67%">
<span style="width:67%"><span>67%</span></span>
</div>
</div>
<div class="reviews-actions">
<a class="action view" href="http://127.0.0.1/magento2252/stellar-solar-jacket.html#reviews">3 <span>Reviews</span></a>
</div>
</div>
<div class="price-box price-final_price" data-role="priceBox" data-product-id="1225" data-price-box="product-id-1225">
<span class="normal-price">
<span class="price-container price-final_price tax weee">
<span class="price-label" style="display: inline;">As low as</span>
<span id="product-price-1225" data-price-amount="75" data-price-type="finalPrice" class="price-wrapper "><span class="price">$75.00</span></span>
</span>
</span>
</div>
<div class="swatch-opt-1225" data-role="swatch-option-1225">
<div class="swatch-attribute size" attribute-code="size" attribute-id="141">
<div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">
<div class="swatch-option text" id="option-label-size-141-item-168" aria-checked="false" aria-describedby="option-label-size-141" tabindex="0" option-type="0" option-id="168" option-label="S" aria-label="S" option-tooltip-thumb="" option-tooltip-value="S" rel="1218" role="option">S</div>
<div class="swatch-option text" id="option-label-size-141-item-169" aria-checked="false" aria-describedby="option-label-size-141" tabindex="0" option-type="0" option-id="169" option-label="M" aria-label="M" option-tooltip-thumb="" option-tooltip-value="M" rel="1221" role="option">M</div>
<div class="swatch-option text" id="option-label-size-141-item-170" aria-checked="false" aria-describedby="option-label-size-141" tabindex="0" option-type="0" option-id="170" option-label="L" aria-label="L" option-tooltip-thumb="" option-tooltip-value="L" rel="1224" role="option">L</div>
</div>
</div>
<div class="swatch-attribute color" attribute-code="color" attribute-id="93" option-selected="50">
<div aria-activedescendant="option-label-color-93-item-50" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">
<div class="swatch-option color selected" id="option-label-color-93-item-50" aria-checked="false" aria-describedby="option-label-color-93" tabindex="0" option-type="1" option-id="50" option-label="Blue" aria-label="Blue" option-tooltip-thumb="" option-tooltip-value="#1857f7" rel="1222" role="option" style="background: #1857f7 no-repeat center; background-size: initial;"></div>
<div class="swatch-option color" id="option-label-color-93-item-58" aria-checked="false" aria-describedby="option-label-color-93" tabindex="0" option-type="1" option-id="58" option-label="Red" aria-label="Red" option-tooltip-thumb="" option-tooltip-value="#ff0000" rel="1223" role="option" style="background: #ff0000 no-repeat center; background-size: initial;"></div>
<div class="swatch-option color" id="option-label-color-93-item-60" aria-checked="false" aria-describedby="option-label-color-93" tabindex="0" option-type="1" option-id="60" option-label="Yellow" aria-label="Yellow" option-tooltip-thumb="" option-tooltip-value="#ffd500" rel="1224" role="option" style="background: #ffd500 no-repeat center; background-size: initial;"></div>
</div>
</div>
</div>
<div class="product-item-inner">
<div class="product actions product-item-actions">
<div class="actions-primary">
<form data-role="tocart-form" data-product-sku="WJ01" action="http://127.0.0.1/magento2252/checkout/cart/add/uenc/aHR0cDovLzEyNy4wLjAuMS9tYWdlbnRvMjI1Mi93b21lbi90b3BzLXdvbWVuL2phY2tldHMtd29tZW4uaHRtbA%2C%2C/product/1225/" method="post">
<input type="hidden" name="product" value="1225">
<input type="hidden" name="uenc" value="aHR0cDovLzEyNy4wLjAuMS9tYWdlbnRvMjI1Mi9jaGVja291dC9jYXJ0L2FkZC91ZW5jL2FIUjBjRG92THpFeU55NHdMakF1TVM5dFlXZGxiblJ2TWpJMU1pOTNiMjFsYmk5MGIzQnpMWGR2YldWdUwycGhZMnRsZEhNdGQyOXRaVzR1YUhSdGJBJTJDJTJDL3Byb2R1Y3QvMTIyNS8,">
<input name="form_key" type="hidden" value="OIKwIjHelyF4WqGg"> <button type="submit" title="Add to Cart" class="action tocart primary">
<span>Add to Cart</span>
</button>
<input class="swatch-input super-attribute-select" name="super_attribute[141]" type="text" value="" data-selector="super_attribute[141]" data-validate="{required: true}" aria-required="true" aria-invalid="false"><input class="swatch-input super-attribute-select" name="super_attribute[93]" type="text" value="" data-selector="super_attribute[93]" data-validate="{required: true}" aria-required="true" aria-invalid="false" data-attr-name="color">
</form>
</div>
<div data-role="add-to-links" class="actions-secondary">
<a href="#" class="action towishlist" title="Add to Wish List" aria-label="Add to Wish List" data-post="{"action":"http:\/\/127.0.0.1\/magento2252\/wishlist\/index\/add\/","data":{"product":"1225","uenc":"aHR0cDovLzEyNy4wLjAuMS9tYWdlbnRvMjI1Mi93b21lbi90b3BzLXdvbWVuL2phY2tldHMtd29tZW4uaHRtbA,,"}}" data-action="add-to-wishlist" role="button">
<span>Add to Wish List</span>
</a>
<a href="#" class="action tocompare" title="Add to Compare" aria-label="Add to Compare" data-post="{"action":"http:\/\/127.0.0.1\/magento2252\/catalog\/product_compare\/add\/","data":{"product":"1225","uenc":"aHR0cDovLzEyNy4wLjAuMS9tYWdlbnRvMjI1Mi93b21lbi90b3BzLXdvbWVuL2phY2tldHMtd29tZW4uaHRtbA,,"}}" role="button">
<span>Add to Compare</span>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
The code which I am applying is as below which is inside onclick function of optionclass:-
$widget.element.on('click', '.' + options.optionClass, function () {
var prodId = $(this).attr('rel');
$.ajax({
url: urlBuilder.build('swatch/index/product'),
data: {productId:prodId},
type: 'post',
success: function(result) {
var flipsrc = result.flipsrc;
if(result.success != ''){
var urlsrc = $(this).closest('div.product-item-info').find('img.flip').attr('src');
console.log(urlsrc);
}
}
});
return $widget._OnClick($(this), $widget);
});
The output is undefined.
Inside the success callback, this has stopped referring to the same context at line 2. So store the intended this in a local variable, ex. _this.
$widget.element.on('click', '.' + options.optionClass, function () {
var prodId = $(this).attr('rel');
var _this = this;
$.ajax({
url: urlBuilder.build('swatch/index/product'),
data: {productId:prodId},
type: 'post',
success: function(result) {
var flipsrc = result.flipsrc;
if(result.success != ''){
var urlsrc = $(_this).closest('div.product-item-info').find('img.flip').attr('src');
console.log(urlsrc);
}
}
});
return $widget._OnClick($(this), $widget);
});
Related
So basicaly i need to filter my results based on the checked buttons
This is the design of the page, those 3 on the top are the checkboxes, 1- done 2- in progress 3- soon
this is the html, im using angular ng-repeat to add cards on the page based on my SQL db data
<section id="team" class="team section-bg portfolio">
<div class="container aos-init aos-animate" data-aos="fade-up">
<div class="section-title">
<h1 id="obrometroH1">Galeria de Obras</h1>
<p>Acompanhe as obras da Prefeitura de Cajamar</p>
</div>
<div style="text-align: center;">
<input type="checkbox" class="btn-check" id="btn-check" checked autocomplete="off" />
<label class="btn btn-primary btn-lg" for="btn-check">
<img style="width: 30px;" src="~/Content/img/entregue-rounded.png" class="img-fluid animated icone-mapa" alt="" />
Entregue</label>
<input type="checkbox" class="btn-check" id="btn-check2" checked autocomplete="off" />
<label class="btn btn-primary btn-lg" for="btn-check2">
<img style="width: 30px;" src="~/Content/img/andamento-rounded.png" class="img-fluid animated icone-mapa" alt="" />
Em andamento</label>
<input type="checkbox" class="btn-check" id="btn-check3" checked autocomplete="off" />
<label class="btn btn-primary btn-lg" for="btn-check3">
<img style="width: 30px;" src="~/Content/img/breve-rounded.png" class="img-fluid animated icone-mapa" alt="" />
Em breve</label>
</div>
<ul id="portfolio-flters" class="d-flex justify-content-center aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
<li data-filter="*" class="filter-active">Todos</li>
<li data-filter=".filter-6">Serviços Públicos</li>
<li data-filter=".filter-1">Educação</li>
<li data-filter=".filter-5">Lazer</li>
<li data-filter=".filter-2">Saúde</li>
<li data-filter=".filter-3">Segurança</li>
<li data-filter=".filter-4">Desenvolvimento Urbano</li>
<li data-filter=".filter-7">Cajamar Bem Cuidada</li>
</ul>
<div class="row portfolio-container">
<div ng-repeat="x in listObras | orderBy:orderByField:reverseSort" class="col-lg-12 portfolio-item filter-{{x.IdTipoObra}}">
<div class="member d-flex align-items-start aos-init aos-animate" data-aos="zoom-in" data-aos-delay="100">
<div class="col-lg-3"><a ng-click="obra(x.Id)"><img src="~/Content/img/obras/{{x.FotoPrincipal}}" style="width: 300px; height:200px;" class="img-fluid" alt=""></a></div>
<div class="member-info col-lg-9">
<h4 ng-click="obra(x.Id)" style="color: #3b3b3b;">
<img ng-if="x.IdStatus == 1" style="width: 30px;" src="~/Content/img/entregue-rounded.png" class="img-fluid animated icone-mapa" alt="" />
<img ng-if="x.IdStatus == 2" style="width: 30px;" src="~/Content/img/andamento-rounded.png" class="img-fluid animated icone-mapa" alt="" />
<img ng-if="x.IdStatus == 3" style="width: 30px;" src="~/Content/img/breve-rounded.png" class="img-fluid animated icone-mapa" alt="" />
{{x.Nome}}
</h4>
<span>{{x.Endereco}}</span>
<p>{{x.Descricao}}</p>
<div class="social">
<button ng-click="obra(x.Id)" style="color: white;width: 316px;" type="button" class="btn btn-info">Ver mais</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Apply Change Event on your checkbox,
Like this,
For Angular:
<input type="checkbox" class="btn-check" id="btn-check" (change)="performFilter(filterBy)"checked autocomplete="off" />
Check below link for the function which would be useful, Find " performFilter(filterBy?: string)", She handled in elegant way.
https://github.com/DeborahK/Angular-Communication/blob/master/APM-Final%20v8/src/app/products/product-list.component.ts
For Javascript,
<input type="checkbox" class="btn-check" id="btn-check" onchange="performFilter(filterBy)"checked autocomplete="off" />
Logic will remain the same.
It worked using this Js
$('#btn-check').click(function () {
var checked = $(this).is(':checked');
$.ajax({
type: "POST",
url: '/Home/GetAllEntregue',
data: { checked: checked },
success: function (result) {
$scope.listObras = result;
$scope.$apply();
},
error: function () {
alert('Error 500');
},
});
});
I have a grid view (using flex box approach) and i want to change it to list view using style sheet and j query/java script. Problem: Since in grid view approach all elements are in separate div, while changing it to list view they all need to be in single line (some still need vertically aligned) and this is responsive application.
I have created style sheet class to change flex box from row to column and things look good. But now all div are not in single line. Need some help with style sheet class.
On click of a button, i will remove grid-row, grid-item and add grid-column and grid-column-item classes. But as shown in HTML, it is all div structure in grid-item class. I need to change this div as well (like product_search_img class on extreme left in a single line followed by next three div in one column (in same line) and then followed by price, add to cart button in one column.
Current Layout:
Required Layout:
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
height: 400px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 230px;
position: relative;
padding: 7px;
box-sizing: border-box;
}
.grid-column {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
.grid-column-item {
height: 200px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 920px;
position: relative;
padding: 7px;
border-bottom: 1px solid #ccc;
}
.grid-column-item:first-child {
margin-top: 7px;
border-top: 1px solid #ccc;
}
<div class="grid-row">
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>
From your comment, I believe you're already able to get the outer block to work as required, in the example below I have edited and created 3 separate blocks and did some restructuring.
Also, check the In Stock div, it will toggle between list_view and grid_view.
There will be few additional divs you will need to create deeper inside second_block example to handle VPN and SKU in the same line for List View.
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
/* height: 400px; */
flex-basis: 25%;
-ms-flex: auto;
max-width: 230px;
position: relative;
padding: 7px;
box-sizing: border-box;
border: 2px solid red;
}
.grid-column {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
.grid-column-item {
height: 200px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 920px;
position: relative;
padding: 7px;
border-bottom: 1px solid #ccc;
}
.grid-column-item:first-child {
margin-top: 7px;
border-top: 1px solid #ccc;
}
.outer_block {
display: flex;
flex-direction: column;
}
.list_view {
display: none;
}
#media only screen and (max-width: 800px) {
.grid-row {
flex-direction: column;
}
.grid-item {
min-width: 100%;
}
.outer_block {
flex-direction: row;
}
.img-thumbnail {
width: 100px;
}
.second_block {
flex: 1;
}
.grid_view {
display: none;
}
}
<div class="grid-row">
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<div class="outer_block">
<div class="first_block">
<!-- Image -->
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%" />
</div>
</a>
</div>
<div class="second_block">
<!-- Accessories Text -->
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a
>
<a
tabindex="1"
role="button"
data-placement="bottom"
data-trigger="focus"
class="color-font-black bold statusflag statusflag2 HideProductStatusFlag"
data-toggle="popover"
data-content="body"
id="statusflag2"
data-original-title=""
title=""
></a>
</div>
<!-- Link to Prod Description -->
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<!-- VPN AND SKU -->
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span
><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span
><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<!-- In Stock when in List View-->
<div id="login-mode-cntl" class="list_view">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
</div>
<div class="third_block">
<!-- Adding Button -->
<div class="row">
<!-- Price -->
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">
$1,345.46
</div>
<!-- In Stock when in Grid View-->
<div class="row" id="login-mode-cntl" class="grid_view">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value" />
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to remove value that I stored after onclcik in an input type. Now I want to remove value onclick. I using checkbox to add value with condition if box is unchecked that add value. Now I want to remove the matched value from input onclick in checked condition, if a.
HTML
<ul class="Popular" id="Popular">
<li class="item odd" onclick="handleClick(334);" id="">
<span class="input-holder"><input type="checkbox" id="related-checkbox-334" class="checkbox related-checkbox" name="related_products[]" value="334">ADD</span>
<div class="product" id="disbaledtoclick">
<a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/g/r/greeting.jpg" width="100px" height="100"></a>
<div class="product-details">
<p class="product-name"> 10 Handmade chocolates</p>
<div class="price-box">
<span class="regular-price" id="product-price-2-related">
<span class="price" disabled="">249.0000</span></span>
</div>
</div>
</div>
</li>
<li class="item odd" onclick="handleClick(338);" id="">
<span class="input-holder"><input type="checkbox" id="related-checkbox-338" class="checkbox related-checkbox" name="related_products[]" value="338">ADD</span>
<div class="product" id="disbaledtoclick">
<a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/w/h/white-teddy-6inch-addon.jpg" width="100px" height="100"></a>
<div class="product-details">
<p class="product-name"> Small Teddy Bear (6")</p>
<div class="price-box">
<span class="regular-price" id="product-price-2-related">
<span class="price" disabled="">279.0000</span></span>
</div>
</div>
</div>
</li>
<li class="item odd" onclick="handleClick(339);" id="">
<span class="input-holder"><input type="checkbox" id="related-checkbox-339" class="checkbox related-checkbox" name="related_products[]" value="339">ADD</span>
<div class="product" id="disbaledtoclick">
<a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/5/-/5-dairy-milk.jpg" width="100px" height="100"></a>
<div class="product-details">
<p class="product-name"> 5 Dairy milk 13 gms each</p>
<div class="price-box">
<span class="regular-price" id="product-price-2-related">
<span class="price" disabled="">200.0000</span></span>
</div>
</div>
</div>
</li>
<li class="item odd" onclick="handleClick(340);" id="">
<span class="input-holder"><input type="checkbox" id="related-checkbox-340" class="checkbox related-checkbox" name="related_products[]" value="340">ADD</span>
<div class="product" id="disbaledtoclick">
<a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/h/a/half-kg-kajukatli.jpg" width="100px" height="100"></a>
<div class="product-details">
<p class="product-name"> Half kg Kaju Katli</p>
<div class="price-box">
<span class="regular-price" id="product-price-2-related">
<span class="price" disabled="">200.0000</span></span>
</div>
</div>
</div>
</li>
<li class="item odd" onclick="handleClick(341);" id="">
<span class="input-holder"><input type="checkbox" id="related-checkbox-341" class="checkbox related-checkbox" name="related_products[]" value="341">ADD</span>
<div class="product" id="disbaledtoclick">
<a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/a/d/ad007_large_teddy_bear_gift_to_india.jpg" width="100px" height="100"></a>
<div class="product-details">
<p class="product-name"> Large Teddy Bear (12")</p>
<div class="price-box">
<span class="regular-price" id="product-price-2-related">
<span class="price" disabled="">200.0000</span></span>
</div>
</div>
</div>
</li>
</ul>
Javascript
var numArray = [];
function handleClick(cb) {
if (jQuery('related-products-field')) {
if (jQuery('related-products-field')) {
var checkbox = jQuery('#related-checkbox-' + cb);
// The is(':checked') function checks if the checkbox is checked
var isChecked = checkbox.is(':checked');
if (isChecked) {
I want remove code here
}
}
if (!isChecked) {
numArray.push(cb);
//alert(numArray);
//var allele = document.getElementById("dialog").innerHTML = numArray;
document.getElementById('related-products-field').value = numArray.join(",");
}
//alert("xcccc");
checkbox.prop('checked', !isChecked);
// do the rest of the function
}
}
// }
}
value save in input on click
<input type="hidden" name="related_product" id="related-products-field" value="338,339,340">
if (isChecked) {
var index = numArray.indexOf(cb); //to get index of your item in numArray
if (index > -1) {
numArray.splice(index, 1); //removes item from array
}
document.getElementById('related-products-field').value = numArray.join(",")
}
javascript have splice() function to remove item from array.
jsfiddle for reference: jsfiddle demo
I using bootstrap-fileinput to load an image to my project. Is it possible to get the image details like the size, resolution, etc?
My code is:
<div class="col-md-4">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" >
<img src="<?php echo $src; ?>" style="width:200px;height:150px" alt=""/>
</div>
<div class="fileinput-preview fileinput-exists thumbnail" id="imagem" style="max-width: 200px; max-height: 150px;">
</div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new">Escolher imagem </span>
<span class="fileinput-exists">Alterar </span>
<input id="imagem" type="file" name="...">
</span>
<a id="btnRemoverImagemCapa" href="#" class="btn red fileinput-exists" data-dismiss="fileinput"> Remover </a>
</div>
</div>
I'm trying to get the key attribute of the <td> tag from the below HTML code.
<td class="xedit editable editable-click editable-open" id="3" key="details" data-original-title="" title="">Javascript library </td>
<div class="popover fade top in editable-container editable-popup" style="top: 289px; left: 534px; display: block;">
<div class="arrow"></div>
<div class="popover-content">
<div>
<div class="editableform-loading" style="display: none;"></div>
<form class="form-inline editableform" style="">
<div class="control-group form-group">
<div>
<div class="editable-input" style="position: relative;">
<input type="text" class="form-control input-sm" style="padding-right: 24px;">
<span class="editable-clear-x">
</span>
</div>
<div class="editable-buttons">
<button type="submit" class="btn btn-primary btn-sm editable-submit">
<i class="glyphicon glyphicon-ok">
</i>
</div>
</div>
</div>
</form>
</div>
jQuery used :
var x = $(this).closest('div').find('.editable-container').closest('td').attr('key'); //Doesn't work
var x = $(this).closest('td').attr('key'); //Doesn't work
Try to use:
var x = $(this).closest('.editable-container').prev().attr('key');