Can I have call onclick when after append html in vuejs, I using vue-append
this.html = '<div id="'+folderData[key].id+'" class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">' +
'<a href="#" class="nav-link" style="color:black" data-toggle="tooltip" title="'+textTooltip+'"> '+
'<div class="info-box '+back+'">'+
'<span v-on:click="gofolder('+folderData[key].id+')" class="info-box-icon bg-success '+icon+'"></span>' +
'<div v-on:click="gofolder('+folderData[key].id+')" class="info-box-content">' + textName + '</div>' +
checkbox +
'</div>'+
'</a>' +
'</div>'
<template>
<div v-append.sync="html" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row">
</div>
</template>
Can you just listen to #appended event?
<div v-append.sync="html" #appended="onClickHandler" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row"></div>
I using v-for and an array to load, problem solved!
Firstly, I will not using vue-append and create a frames html and using v-for to create a list follow array data, because my list data will changes if I click in button
Ex:
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row">
<div :id="item.id" class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2" v-for="item in items" :key="item.id">
<a href="#" class="nav-link" style="color:black" data-toggle="tooltip" :title="item.tooltip">
<div class="info-box">
<span #click="gofolder(item.id)" :class="item.icon"></span>
<div #click="gofolder(item.id)" class="info-box-content">{{item.textName}}</div>
<input v-if="item.checkbox === true" type="checkbox" class="" value="">
</div>
</a>
</div>
</div>
specifically here:
v-for="item in items" :key="item.id"
after, I can call event onclick on buttons then not be afraid it will take the wrong value
Related
I'm using Jquery selector.
I have two addDDetails.
When we click on addDDetails, system will highlight pink on second addDDetails ( which I remark [ I want select This!!! ])
I noticed that I click on first addDDetails, system highlight pink wrongly at first addDetails.
How can I click on first addDDetails, system highlight pink on second addDDetails?
Thanks.
$(".addDDetails").click(function () {
$(this).closest(".Details > div").find(".addDDetails").css("background", "pink")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="row Details" style="border-style:solid;">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+ [ I want select This!!! ]</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
</div>
You can use eq() to find the specified index element and bind the corresponding event handler.
Or you can use .index() in class selector to judge the current element index and make corresponding logic.
If the elements are siblings, you could do this:
var index = $(this).index();
If not, you can pass a selector of the set in which to look for the element.
var index = $(this).index('your selector');
e. g.
const _selector = '.addDDetails';
const _cssName = 'background-color';
$(_selector).click(function() {
const index = $(this).index(_selector);
$(_selector).css(_cssName, 'red');
if (index == 0) {
$(this).eq(index).css(_cssName, '');
} else {
$(_selector).css(_cssName, '');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="row Details" style="border-style:solid;">
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield">
<span class="icon icon--plus addDDetails">+ [ I want select This!!! ]</span>
</div>
<div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield">
</div>
</div>
</div>
</div>
Here the answer use
.children('div').eq(1)
$(".addDDetails").click(function () {
$(this).closest(".Details").children('div').eq(1).find('.addDDetails').length == 1).css("background", "pink");
});
Thanks.
I need to wrap all divs after each h4 tag so then i can modify the column size depending on the results.
As is:
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
To be:
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
</div>
What I tried:
$(" h4.hotels-area").each(function(){
$(this).nextAll().wrapAll('<div class="description-wrap"></div>')
});
When I do this it messed up my HTML. I do not have access to the html so i need to do it this way, once i wrap then i will count how many div are into the description-wrap class, but I can't get to wrap.
I thought on wrapping because what i need is to be able to count how many col-md-6 col-sm-12 col-xs-12 padding-banner-left are after each h4 and if the result is an unpaired number the first col-md-6 col-sm-12 col-xs-12 padding-banner-left i will change the cols to col-md-12 without knowing how col-md-6 col-sm-12 col-xs-12 padding-banner-left i have after each h4 i won't be able to achive my goal
You could add a div.description-wrap after each h4 tag inside .bannerPrincipales (with the jQuery.after function).
Then, you could cycle each div inside .bannerPrincipales, and say:
if it has description-wrap class, then it will be the wrapper;
else append it inside wrapper (with the jQuery.append function).
And, finally, you could count the number of divs inside wrapper with the length property.
$(function () {
$('.bannerPrincipales h4').after('<div class="description-wrap"></div>');
let wrapper = null;
$('.bannerPrincipales div').each((i, div) => {
if ($(div).hasClass('description-wrap')) {
wrapper = div;
} else {
$(wrapper).append(div);
}
});
$('.bannerPrincipales .description-wrap').each((i, wrapper) => {
let place = $('.bannerPrincipales h4:eq(' + i + ')').text();
let n = $(wrapper).find('div').length;
console.log(place + ' has ' + n + ' divs');
});
});
.description-wrap {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">a</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">b</div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">c</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">d</div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">e</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">f</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">g</div>
</div>
I need to get all the tags that have the class containtText back to me and I can find that tag value more than 300 characters and use continue for value . . .
But when I use this code:
<div class=" col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 p-0">
<div class="row m-auto topbar col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 p-3 mb-3">
<span (click)="close()">
<i class="fas fa-times"></i>
</span>
</div>
<div class=" mian-content form-inline content col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 pt-2 pb-3">
<div *ngFor="let item of globalModel;let i=index"
class="form-group justify-content-start col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 pt-2">
<div class="col-md-2 col-xl-2 col-lg-2 col-sm-12 col-lg-2">
<label><strong>{{item.name | translate }} :</strong></label>
</div>
<div *ngIf="!item.isDate && !item.isBoolean && !item.isImage" class="showMore col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl">
<span class="spanArea">
{{item.value}}
<span class="">
<button mat-button (click)="FindLenghtString(item.value,i)" color="accent">Accent</button>
</span>
</span>
</label>
</div>
<div *ngIf="item.isBoolean" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl" *ngIf="item.value && !item.isDate">
<span> <i class="fa fa-check-circle ic-green"></i></span>
</label>
<label class="lbl" *ngIf="!item.value && !item.isDate">
<span> <i class="fa fa-ban ic-red"></i> </span>
</label>
</div>
<div *ngIf="item.isImage" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl" *ngIf="item.value && !item.isDate">
<span (click)="openDialog(item.value)" class="show-img-box">
<i class="fa fa-search"></i>
{{'POST.PREVIEW' | translate}}
</span>
</label>
</div>
<div *ngIf="item.isDate" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl"
*ngIf="item.isDate && lang=='fa'"><span>{{item.value | date: 'dd/MM/yyyy hh:mm'}}</span></label>
<label class="lbl" *ngIf="item.isDate && lang!='fa'"><span>{{ item.value | jalali }}</span> </label>
</div>
</div>
</div>
ts :
Elipses(): void {
console.log(document.getElementsByClassName('containtText'));
}
it show me :
HTMLCollection []
and that value :
but when i need to get Value of 2 it show me the undefined
console.log(document.getElementsByClassName('containtText')['2']);
how can i get value 2 and change that ?????
Can you try to call the function Elipses() after the view is created?
I suggested the following in a comment
ngOnInit(){
setTimeout(()=>this.Elipses());
}
However, I understand that you made it work by putting it inside AfterViewInit instead.
First, I would not use jQuery or plain JavaScript when I have Angular :D
Second, ['2'] this is an index, so why '2'? :D
A simple solution in Angular:
Page:
<div>
{{text}}
</div>
<button (click)="showText()>{{buttonName}}</button>
Component:
text = string;
fullText = "Really long text";
buttonName = "Show more";
ngOnInit(){
text = fullText.substring(0, 5);
}
showText(){
if(text.length === 5){
text = fullText;
buttonName= "Show less";
} else {
text = fullText.substring(0, 5);
buttonName = "Show more";
}
}
I am trying to make the data that this function generates appear in my CSV file. However, when it creates the CSV file there is no data and it's a blank csv document. Any suggestions?
const fs = require('fs');
const csv = await page.$$eval('.product_desc_txt', function(products){
// Iterate over product descriptions
let csvLines = products.map(function(product){
// Inside of each product find product SKU and its price
let productId = product.querySelector("div.product_desc_txt > div.body-copy.custom-body-copy").innerText.trim();
let productPrice = product.querySelector("span[data-wishlist-linkfee]").innerText.trim();
// Format them as a csv line
return `${productId};${productPrice}`;
});
// Join all lines into one file
return csvLines.join("\n");
});
fs.writeFileSync("test.csv", csv);
});
This is the code from the source, it basically repeats itself over and over with different item numbers and prices. I just need the item number and price. looped over.
<div class="list-tbl">
<div class="row" data-body-header>
<div class="col-xs-12">
<div class="split-line split-line-header-gap">
<div class="row">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-2 body-copy">
<div class="style-check">
<input type="checkbox" id = "selectall" name="selectall" value="279114616" class="selectall">
<label for="selectall">
<span>All</span>
</label>
</div>
</div>
<div class="col-xl-1 col-lg-1 col-md-2 col-sm-3 col-xs-4 body-copy"></div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-xs-6 body-copy">
<span class="hidden visible-lg visible-xl">Item</span>
</div>
<div class="col-xl-2 col-lg-2 text-right body-copy hidden visible-xl">
Price
</div>
<div class="col-xl-1 body-copy hidden visible-xl"></div>
<div class="col-xl-1 col-lg-1 col-md-2 body-copy hidden visible-xl visible-lg">
Quantity
</div>
<div class="col-xl-3 col-lg-4 col-md-4 body-copy hidden visible-xl visible-lg visible-md"></div>
</div>
</div>
</div>
</div>
<input type="hidden" id="isBDAppVar" value="BD" />
<input type="hidden" class="orderItem-2000423036" value="237459854"/>
<div class="row item-row" id = "2000423036" data-body-row>
<div class="col-xs-12">
<div class="split-line split-line-gap">
<div class="row">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-2">
<div class="style-check marg_chk">
<input type="checkbox" class="checkbox" name="select" id ="select_0" value="0">
<label for="select_0">
<span class="hide">
Select
Item
</span>
</label>
</div>
</div>
<div class="col-xl-1 col-lg-1 col-md-2 col-sm-3 col-xs-4">
<div class="product-img-holder">
<img class="img-responsive prod-image-coming-soon" title="Pringles Snack Pack Potato Crisps, Original, 0.67 oz, 60 ct"
src="https://images.costcobusinessdelivery.com/ImageDelivery/imageService?profileId=12028466&imageId=1055688__1&recipeName=350"
onerror="this.onerror='';this.src='/wcsstore/CostcoGLOBALSAS/images/prod-image-coming-soon.svg';this.alt='Product Image Coming Soon'"
alt="Shoping List Product Image" />
</div>
</div>
<!-- price + linkfee based on region -->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-8 col-xs-6">
<div class="product_desc_txt">
<a href=" https://www.costcobusinessdelivery.com/.product.1055688.html " class="body-copy-link">
Pringles Snack Pack Potato Crisps, Original, 0.67 oz, 60 ct
</a>
<div class="body-copy custom-body-copy">
Item 1055688
</div>
<div class="margin_tp_10"></div>
<div class="body-copy hidden visible-md visible-sm visible-xs visible-lg">
<span data-wishlist-linkfee="false" > $15.89</span>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2 body-copy text-right hidden visible-xl ">
<span data-wishlist-linkfee="false" > $15.89</span>
</div>
This question already has answers here:
Get the value in an input text box
(13 answers)
Closed 5 years ago.
im a beginner on Javascript , i have 3 button ADD TO CART each one has a value , so when i click on one of them , i keep getting the value of first button
this is my HTML CODE
<div class="container main-section">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 product">
<div class="row product-part">
<div class="col-md-12 col-sm-12 colxs-12 img-section">
<img src="'. $photolink["photo"] .'">
</div>
<div class="col-md-12 col-sm-12 col-xs-12 product-title">
<h1>'. $row["produit"] .'</h1>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 product-description">
<p>'. $row["description"] .' </p>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 product-cart">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-6">
<p>'. $row["price"] .' $</p>
</div>
<div class="col-md-6 col-sm-12 col-xs-6 text-right product-add-cart">
<input type="submit" value="ADD TO CART" class="btn btn-success" id="productid" data-value="'. $row["id"] .'" onclick="getID()" >
</div>
</div>
</div>
</div>
</div>
this is my javascript code
function getID()
{
var val = document.getElementById('productid').getAttribute('data-value');
console.log(val);
}
You must select an element specificly. Using pure JQuery:
function getID(that) {
console.log($(that).attr("data-value"));
}
Then on your HTML:
<input type="submit" value="ADD TO CART" class="btn btn-success" id="productid" data-value="'. $row["id"] .'" onclick="getID(this)">