I'm new to web techs. I have a bunch of elements nested in each other. I want to change some of them's texts using asp.net neither jquery nor javascript. Firstly, I need to select that element by code. Then I need to assign new text value to it.
Here's my HTML.
<div class="container">
<article class="card">
<img runat="server" id="foodImage" src="/pics/food/dolma.jpg" alt="Sample Photo" />
<div class="mealInfo">
<span class="left"><a id="foodAnchor" runat="server" href="#">Dolma Yemeği</a><br />
<span class="prepInfo">For 6-8 people Prep time 2 hours</span>
</span>
<span class="right"><i class="fas fa-clipboard"></i>
<br />
385</span>
</div>
<div class="cookInfo">
<a class="cookName" href="#"><img src="/pics/ppic.jpg"/>electricianSmurf</a>
<a class="comment" href="#"><i class="far fa-comment"></i>5</a>
</div>
</article>
</div>
Here's my ASP code. I want to dynamically change foodImage's image and foodAnchor's text. I can get those elements using their IDs but there are 8 more "card" articles(they're used as flexbox). I want to reach all of them with code and change them according to the data coming from the database(ignore this database part, firstly I need to bring elements with code)
This is a coined code represents what I want to do. Please help.
List<anchorText's type or anchor type> anchorList = new List<anchorText's type or anchor type>;
for (int i = 0; i < anchorList.Count; i++)
{
Control targetElement = FindControl("card #foodImage mealInfo left a");
if (targetElement != null)
{
anchorList.Add(targetElement);
}
}
for (int i = 0; i < anchorList.Count; i++)
{
anchorList[i].Text = textComingFromDatabase;
}
Related
I want to get the span text using jQuery so my html code is like below
Note :- actually this logic was in table data so I given example code only.
<div class="strategiesddata">
<div class="strattabletodivmobright">
<p class="stategybuysellchkbox clearfix">
<span class="BUY active" name="spbuy">B</span>
<span class="SELL " name="spsell">S</span>
</p></div>
<div class="strattabletodivmobright">
<p class="stategybuysellchkbox clearfix">
<span class="BUY " name="spbuy">B</span>
<span class="SELL active" name="spsell">S</span>
</p></div>
</div>
In the above html code I have two active, buy or sell div's so my query is if it active span then I should take that span text
ex:- From first div B and next div S text I should take
For this I have written jQuery like this
$(".strategiesddata").each(function () {
t = $(this);
var tst = t.find(".stategybuysellchkbox").closest(".active").html();
});
And
$(".strategiesddata").each(function () {
t = $(this);
var tst = t.closest(".stategybuysellchkbox").find("span[.active]").html();
});
But I'm getting the value is undefined Suggest me where I did the mistake and how to achieve this?
Your jQuery statement is wrong, try this.
var tst = $(".stategybuysellchkbox").find(".active").text();
To reference the elements in question, you should be able to simply use
$(".stategybuysellchkbox span.active")
One issue here is that jQuery's methods like text() and html() will only get you the contents of the first element in the collection.
To get an array of all the text, use .map()
const activeText = $(".stategybuysellchkbox span.active")
.map((_, span) => span.textContent).get();
console.log(activeText);
.active { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div class="strattabletodivmobright">
<p class="stategybuysellchkbox clearfix">
<span class="BUY active" name="spbuy">B</span>
<span class="SELL " name="spsell">S</span>
</p></div>
<div class="strattabletodivmobright">
<p class="stategybuysellchkbox clearfix">
<span class="BUY " name="spbuy">B</span>
<span class="SELL active" name="spsell">S</span>
</p></div>
You definitely don't need jQuery for this either
const activeText = Array.from(
document.querySelectorAll(".stategybuysellchkbox span.active"),
(span) => span.textContent
);
Okay .. I want to create a button once it's clicked it allows you to add a photo .. like the input tag of attribute type = "file" .. I've already designed the button shape .. all what is remained is to click on it so a window blows up .. and choose a photo to display in the post box ..
enter image description here
<div class="extras">
<ul class="icons">
<li class="photos">
<i class="fa-solid fa-image">
</i>
</li>
<li class="tag"> <i class="fa-solid fa-user-tag"> </i> </li>
</ul>
<div class="button">
<button>launch</button>
</div>
</div>
here is the element of class photos which I want it to display the window of adding a photo once it's clicked .. exactly like .. just different button style ..
If I understand well, what you have to do is this: first you'll need to add an id to your <li class="photos"> and your <button>launch</button>. And also remove your <i id="up"> component since you'll add it with JavaScript. See the html bellow.
<div class="extras">
<ul class="icons">
<li id="photos-component" class="photos">
<!-- there used to be an <i> tag here! -->
</li>
<li class="tag">
<i class="fa-solid fa-user-tag"> </i>
</li>
</ul>
<div class="button">
<button id="launch-button">launch</button>
</div>
</div>
After adding the ids, you'll need to call a JavaScript file by inserting a <script src="insert-your-file-name.js"></script> at the bottom of your <body>. Probably, you already have done this. If not, do it.
In that file, you'll want to add the following code.
// This constant bellow contains your photos component
const photosComponent = document.getElementById("photos-component");
// This constant bellow contains your launch button
const button = document.getElementById("launch-button");
// This whole chunk of code bellow is a function that will run whenever
// you click the button
button.addEventListener("click", () => {
// Here we create a new empty <input> tag
const fileInput = document.createElement("input");
// Here we add all the attributes for the <input> tag
fileInput.id = "up";
fileInput.type = "file";
fileInput.classList.add("fa-solid fa-image");
// Here we add the input to the photos component
photosComponent.append(fileInput);
// Here we change the style of the button
button.classList.add("insert-button-style");
})
Hopefully it helps. You can always read more about the JavaScript HTML DOM (Document Object Model) by googleing it.
These links might help you in your search:
https://www.w3schools.com/js/js_htmldom.asp
https://www.javascripttutorial.net/javascript-dom/
I'm getting this error in console, Cannot read property '0' of undefined but still I'm getting the result as expected.
This is my HTML code
<div class="col-md-3">
<div class="slider-product">
<a href="#">
<img src="{{featureProducts[0].img_path}}" alt="Image" style="max-width:100%;">
<span class="tag">{{featureProducts[0].cat_name}}</span>
<div>
<a class="title">{{featureProducts[0].name}}</a>
</div>
<div class="price">
<i class="fa fa-inr"></i> {{featureProducts[0].min_price}}
</div>
</a>
</div>
</div>
Here is the function in typescript file
getFeatureProducts(){
this.httpClient.get(this.baseUrl+`/getFeatureProducts`)
.subscribe(
(data:any[]) => {
if(data.length) {
this.featureProducts = data;
}else{
this.featureProducts = null;
}
}
)}
featureProducts is declared inside the class as
featureProducts: any;
I know there is work around to this problem, like I can use multiple variables as below
in typescript
imgpath0 = this.featureProducts[0].imgPath;
And using this variable in html directly as
{{imgPath0}}
But this is not a better approach as I have lot of properties to be displayed in html and I cannot declare as many variables in ts.
Note: I don't want to loop using 'for' in html. Instead I need to fetch the properties as we usually do in JSON.
You can use *ngIf="featureProducts && featureProducts[0]" and prevent rendering the div until featureProducts object gets populated.
<div class="slider-product" *ngIf="featureProducts && featureProducts[0]">
<a href="#">
<img src="{{featureProducts[0].img_path}}" alt="Image" style="max-width:100%;">
<span class="tag">{{featureProducts[0].cat_name}}</span>
<div>
<a class="title">{{featureProducts[0].name}}</a>
</div>
<div class="price">
<i class="fa fa-inr"></i> {{featureProducts[0].min_price}}
</div>
</a>
</div>
I want to find out how to scrape website data. This is a part of the html that I am interested in. I am using cheerio for finding the data I need.
<td class="col-item-shopdetail">
<div class="shoprate2 text-right hidden-xs">
<div class="currbox-amount">
<span class="item-searchvalue-curr">SGD</span>
<span class="item-searchvalue-rate text-black">42.0000</span>
</div>
<div class="item-inverserate">TWD 100 = SGD 4.2</div>
<div class="rateinfo">
<span class="item-timeframe">12 hours ago</span>
</div>
</div>
<div class="shopdetail text-left">
<div class="item-shop">Al-Aman Exchange</div>
<div class="item-shoplocation">
<span class="item-location1"><span class="icon icon-location3"></span>Bedok</span>
<span class="item-location2"><span class="icon iconfa-train"></span>Bedok </span>
</div>
</div>
</td>
I wish to make "col-item-shopdetail" class as an object and store all class with name "col-item-shopdetail" into an array for access.
So if possible, it will be access like array.item-inverserate or through cheerio selector like
$('.col-item.shopdetail').children[0].children[0].children[1]
I have tried looping through the names of shop and store in an array and use another loop after finish looping the names to find the rates. Then try and match the rates to the name by access same index of the array. However this did not work for unknown reason where each time the rate printed is of different value and index of the same name are different in each try.
This is close to what I want but it does not work:
how to filter cheerio objects in `each` with selector?
In other words, you want an array of objects representing elements having class .col-item-shopdetail and each of those objects should have a property corresponding to the .item-inverserate element they contain ?
You need the map method
my_array = $('.col-item-shopdetail').map(function(i, el) {
// Build an object having only one property being the .item-inverserate text content
return {
itemInverserate: $(el).find('.item-inverserate').text()
};
}).get();
// You can also directly target inverserate nodes
// which will exclude empty entries ('shopdetail' that have no 'inverserate')
// Loop over .item-inverserate elements found
// somewhere in a .col-item-shopdetail
// (beware, space matters)
my_array = $('.col-item-shopdetail .item-inverserate').map(function(i, el) {
// Build an object having only one property being the .item-inverserate text content
return {itemInverserate: $(el).text()};
// Note: If all you need is the inverserate value,
// Why not avoiding an intermediate full object?
// return $(el).text()
}).get();
Since Cheerio developers have built their API based on jQuery with most of the core methods, we can simply test snippets in the browser ...
my_array = $('.col-item-shopdetail').map(function(i, el) {
return {
itemInverserate: $(el).find('.item-inverserate').text()
};
}).get();
console.log(my_array[0].itemInverserate)
my_array_2 = $('.col-item-shopdetail .item-inverserate').map(function(i, el) {
// Build an object having only one property being the .item-inverserate text content
return {itemInverserate: $(el).text()};
}).get();
console.log(my_array_2[0].itemInverserate)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><td class="col-item-shopdetail">
<div class="shoprate2 text-right hidden-xs">
<div class="currbox-amount">
<span class="item-searchvalue-curr">SGD</span>
<span class="item-searchvalue-rate text-black">42.0000</span>
</div>
<div class="item-inverserate">TWD 100 = SGD 4.2</div>
<div class="rateinfo">
<span class="item-timeframe">12 hours ago</span>
</div>
</div>
<div class="shopdetail text-left">
<div class="item-shop">Al-Aman Exchange</div>
<div class="item-shoplocation">
<span class="item-location1"><span class="icon icon-location3"></span>Bedok</span>
<span class="item-location2"><span class="icon iconfa-train"></span>Bedok </span>
</div>
</div>
</td></tr>
</table>
I am new on the area of MVC 4 and Razor.
I am trying to build a Gallarary with "CSS3 Lightbox".
All looks ok but my problem that I cant work with razor and links.
I cant understand what is wrong by the links of pre and next url.
Hope you can help, I thins maybe something wrong.
My code looks like that:
#for (var i = 1; i < ViewBag.GallaryItems.Length; i++)
{
<li>
<a href="#image-#i">
<img src="#ViewBag.GallaryItems[i].path" />
<!-- <img src"~/Images/gallary/pic1.jpg" alt="image01"/> -->
<span>Pointe</span>
</a>
<div class="lb-overlay" id="image-#i">
<img src="#Url.Content(ViewBag.GallaryItems[i].path)" />
<div>
<h3>#ViewBag.GallaryItems[i].title<span>/point/</span></h3>
<p>#ViewBag.GallaryItems[i].description</p>
Prev
Next
</div>
x Close
</div>
</li>
}
simple didn
href="#image-#(i-1) on prev
and href="#image-#(i+1) on the next and all works fine now!