Hi I'm trying to the text inside the span, the one with "Text to get"
I'm getting the div with class="membership-limit-section capture-area" using cheerio and node.js, but I can't get the text from the span.
I have this function to get the div and I can see that it does have more elements inside, but I can«t get the text
url = "URLdata";
rp(url)
.then(function (html) {
var getHtml = $("div[class='membership-limit-section capture-area']", html);
console.log(getHtml);
})
.catch(function (err) {
console.log(err);
});
<body data-n-head>
<div id="_nuxt">
<div id="__layout">
<div class="app-wrapper purge-css-ignore">
<div class="main-container">
<section class="el-container">
<main
class="el-main auto-height-on-print capture-area"
id="components-root"
>
<div data-v-5cc60f9e>
<div data-v-5cc60f9e class="responsive-section">
<div
data-v-7ce2662e
data-v-5cc60f9e
class="membership-limit-section capture-area"
>
<div data-v-5cc60f9e class="dividends">
<div>
<div
data-v-593f497d
class="el-card capture-area is-always-shadow"
>
<h1 data-v-593f497d>Test</h1>
<div
role="alert"
class="el-alert el-alert--warning is-light"
data-v-593f497d
>
<div class="el-alert__content">
<span class="el-alert__title">Text to get</span>
<i
class="el-alert__closebtn el-icon-close"
style="display: none;"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</section>
</div>
</div>
</div>
</div>
</body>
Can someone help on how to get the text from the span?
Thanks
The following selector will do for that specific response: .membership-limit-section.capture-area .el-alert__title
Then you can use .text() to obtain the text of the span.
var getHtml = $(
".membership-limit-section.capture-area .el-alert__title",
html
);
console.log(getHtml.text())
Update:
gurufocus.com/stock/KO/dividend I want the "Continuous dividend
increase since 1963" but I cannot get it. I'm able to parse info from
yahoo using cheerio, but not from this website
The content you want to scrape, is loaded on the client side using XHR. So you won't be able to parse it directly using request & cheerio since that part is not being returned, either you hit the endpoint returning that data directly, or you use puppeteer on the main site.
When scraping with requests and cheerio, always log the content and see if what you want to parse is present.
The following selector will do for that specific response: const a=$('div.membership-limit-section capture-area').innerText Then just use a variable it has text of span tag.
Related
I am stuck by finding a specific button within my list of items... The button exists 3 times with exact same data-testid, but the parent is different. And I end with
error: cy.click() can only be called on a single element. Your subject contained 3 elements. Pass { multiple: true } if you want to serially click each element.
HTML:
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1">
<button data-testid="details_button">click</button>
</div>
</div>
</div>
<div data-testid="list-item">
<div>
<div>
<span data-testid="status2">
<button data-testid="details_button">click</button>
</div>
</div>
</div>
How can I select the details_button of either status1 or status2?
My attempt was:
cy.get('[data-testid=status1]')
.get('[data-testid="details_button"]').click()
cy.get('[data-testid=status1]')
.parent().parent()
.get('[data-testid="details_button"]').click()
Your first attempt is almost correct, but use .find() for the second step
cy.get('[data-testid=status1]')
.find('[data-testid="details_button"]') // find works here (same as .within())
.click()
Works for this HTML
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1">
<button data-testid="details_button">click</button>
<!-- span closing tag is missing -->
</div>
</div>
</div>
The reason that works is because the HTML posted is slightly invalid - the <span> has no closing tag.
Cypress thinks that the button is inside the span, so using .find() works.
However if that's a typo, you should change to your 2nd command using .parent() and also change .get() to .find()
cy.get('[data-testid=status1]')
.parent()
.find('[data-testid="details_button"]')
.click()
Works for this HTML
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1"></span>
<!-- span is closed, button is outside span so use .parent() command -->
<button data-testid="details_button">click</button>
</div>
</div>
</div>
You can use the siblings() method is cypress.
cy.get('[data-testid=status1]').siblings('[data-testid="details_button]').click()
cy.get('[data-testid=status2]').siblings('[data-testid="details_button]').click()
You can also use a combination of parent() and within(), something like:
cy.get('span[data-testid=status1]')
.parent('div')
.within(() => {
cy.get('button[data-testid="details_button]').click()
})
cy.get('span[data-testid=status2]')
.parent('div')
.within(() => {
cy.get('button[data-testid="details_button]').click()
})
I am using summernote rich text editor, and I want to edit my posted data(stored in DB). I am sending the value to the text area and inputs but not showing into the text area and showing into the input. kindly share some solutions and suggestions with me. any jquery and js function like this...
here is rendered data to web page
route.get('/edit/:id', async (req, res) =>{
const id = req.params.id
const article = await Article.findById(id)
res.render('editarticle',{article:article})
})
and here is ejs or HTML
<%- include('header'); -%>
<div class="container-9">
<h2>Create Article Here</h2>
<hr>
<form action="/create/blog" method='post'>
<input type="text" name="title" id="" placeholder="Enter Title" value='<%=article.title%>'/>
<input type="text" name="description" id="dics" placeholder="Enter Description" value='<%=article.discription%>'/>
<hr>
<button id='btn-post' type="submit">Post</button>
<textarea name='content' id="body" rows="10" value="<%=article.content%>" ></textarea>
</form>
</div>
<%- include('footer'); -%>
I have solved this problem with help of one line of code. I have got the solution after 2 month
var value = $('#value').val()
console.log(value);
$('textarea#body').summernote('pasteHTML', value);
if want to render the HTML for edit this will work, var value = $('#value').val() it just receiving the value (HTML) from the backend and $('textarea#body').summernote('pasteHTML', value); this line of code pesting the HTML into summernote editor.
#tushar Very useful !!
I use it on summer note as like
Put Content in a div, and set it display none
<div id="contentDumpDiv" style="display:none;">
<?php echo $post['content'] ?>
</div>
then use this javascript code
var value = $('#contentDumpDiv').html();
$('textarea#saContent').summernote('pasteHTML', value);
I'm trying to filter some results I will get from an api using Semantic UI's dropdown search component.
The issue is that I don't know how to get the text I'm typing in the input field
The dropdown search I have:
<div class="ui fluid search selection dropdown" id="user-dropdown">
<input id="user-dropdown-input" name="country" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Search...</div>
<div class="menu" id="user-dropdown-menu">
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
</div>
</div>
How dropdown is initialized:
$(document).ready(function () {
$('.ui.dropdown').dropdown({
clearable: true,
fullTextSearch: true
});
});
What I tried:
$('#user-dropdown').on('keyup', function () {
let input = $('#user-dropdown');
console.log('Val: ' + input.dropdown().val());
// also tried: $('#user-dropdown-input').val()
// $('#user-dropdown-input').html()
// $('#user-dropdown-input').text()
});
Basically what I want is if I type "abc" to print the value "abc" into the console, but I don't know how to get that value.
what worked for me was searching the input used for search that looks like:
<input class="search" autocomplete="off" tabindex="0">
and I added a type to this input
document.getElementsByClassName('search').type = 'text';
and then got the value by class on keyup
$('.search').keyup(function() {
console.log($(this).val());
});
I'm so excited to post my first Stack Overflow query. :D
I recently started a Node.js course and with that, I just want to point out I'm not doing any hardcore stuff just yet.
I have a local node server running with nodemon. I started working with ejs and discovered that a forEach loop is melting my web page for some reason.
I tried doing research and sifting through my code removing certain parts piece by piece that weren't there before the issue until the issue went away and discovered that when I take the forEach loop out of my code in my ejs file, the problem goes away.
//this is my .js file located in my ./routes folder
const express = require('express');
const router = express.Router();
const admin_data = require('./admin');
router.get('/', (req, res, next) => {
const products = admin_data.products;
res.render('shop', {
page_title: 'Shop',
prods: products
});
});
//nothing too hectic.
//this is my ejs file located in my ./views folder.
<% if (prods.length > 0) { %>
<div class="grid">
<% forEach (var products in prods) { %> //if i remove this and it's closing '}' it works fine.
<article class="card product-item">
<header class="card__header">
<h1 class="product__title">product</h1>
</header>
<div class="card__image">
<img src="" alt="A Book">
</div>
<div class="card__content">
<h2 class="product__price">$19.99</h2>
<p class="product__description">A very interesting book about so many even more interesting things!
</p>
</div>
<div class="card__actions">
<button class="btn">Add to Cart</button>
</div>
</article>
<% } %>
</div>
<% } %>
I expect the code to render the page but instead receive an error:
"SyntaxError: Unexpected token { in C:\Users\Ruan
Buitendag\Documents\NodeJS\Practice Server\views\shop.ejs while
compiling ejs" in my vscode terminal and "Content Security Policy: The
page’s settings blocked the loading of a resource at inline
(“default-src”)" in my browser console.
EDIT: PS. I tried running the page in firefox developer edition, plain firefox and google chrome.
I think the problem is in your loop. Use forEach this way:
<% prods.forEach(function(product) { %>
<article class="card product-item">
<header class="card__header">
<h1 class="product__title">product</h1>
</header>
<div class="card__image">
<img src="" alt="A Book">
</div>
<div class="card__content">
<h2 class="product__price">$19.99</h2>
<p class="product__description">A very interesting book about so many even more interesting things!</p>
</div>
<div class="card__actions">
<button class="btn">Add to Cart</button>
</div>
</article>
<% }) %>
Alternatively you can use for...of loop like this:
<% for (var product of prods) { %>
...
Im using NodeJS with React and I have a problem. I didnt find a npm module or a code that allowed me to create a pagination for a list of results.
I have a variable called "jobs", that contains a list of job ads.
In my render function I call:
{this.state.jobs.map(this.renderClass)}
that map every job with a function.
This function is renderClass, that contains the render of:
<section key={c.id} className="panel panel-featured-left panel-featured-primary">
<Link to={'/job/'+c.id}>
<div className="panel-body">
<div className="widget-summary">
<div className="widget-summary-col widget-summary-col-icon">
<div className="summary-icon">
<img src={image} className="img-responsive" />
</div>
</div>
<div className="widget-summary-col">
<div className="summary">
<h4 className="title">{c.company}</h4>
<div className="info">
<strong className="amount"></strong><br/>
<p><i className="fa fa-map-marker"></i> {c.location}</p>
<p><i className="fa fa-suitcase"></i> {c.position}</p>
</div>
</div>
<div className="summary-footer">
<a className="text-muted text-uppercase"><i className="fa fa-calendar"></i> {day}/{month}/{year}</a>
</div>
</div>
</div>
</div>
</Link>
</section>
In this way I have a huge list of jobs, but I would a paging.
How can I do this?
Thanks
I would save the page in a state,
and do something like that (say each page has 10 jobs ) -
{this.state.jobs.slice(this.state.page * 10, this.state.page * 10 + 10)
.map(this.renderClass)}
I suggest your need to build a component for handling pagination. Some thing like that:
<Pagiantion
listLenght = {111}
selectedPage = {1}
itemPerPage = {10}
....
/>
I found the best component handling it, react-pagination-custom.
It allow you custom everything (number buttons, wrap container, spread,..). Its document is well, demo is also clear.