Can't center some element in a Bootstrap row - frontend

Hi everyoneπŸ˜‰ Can't center some element in a Bootstrap row. (sm β‰₯576px)
col-sm-12 col-md-6 (What did I do wrong?)
<div class="container">
<div class="label">прСимущСства</div>
<h2 class="title">8 ΠΏΡ€ΠΈΡ‡ΠΈΠ½ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π½Π°ΠΌΠΈ</h2>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="reasons_block">
<div class="reasons_round">
<img src="img/reasons/reason_1.png" alt="reason">
</div>
<div class="reasons_descr">
<div class="reasons_subtitle">Никаких Π½Π°Π»ΠΈΡ‡Π½Ρ‹Ρ…, ΠΎΠΏΠ»Π°Ρ‚Π° происходит автоматичСски</div>
<div class="reasons_text">
Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ ΠΏΠΎΠ΅Π·Π΄ΠΊΠΈ оплачиваСтся пассаТиром с привязанной банковской ΠΊΠ°Ρ€Ρ‚Ρ‹, Ρ‚.Π΅. Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… рисков связанных с ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ·ΠΊΠΎΠΉ наличности ΠΊΠ°ΠΊ для пассаТира, Ρ‚Π°ΠΊ ΠΈ для водитСля, Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΌΠ΅Π»ΠΊΠΈΠ΅ дСньги для Ρ€Π°Π·ΠΌΠ΅Π½Π°.
</div>
</div>
</div>
</div>

Related

Scrape data from show more button on same page

From website need to scrape odds. At the end of the row have a button on which need to click and from there to scrape odds.
Here is an example of a row for one match
<div class="event-row" event="[object Object]" number-of-displayed-markets="3">
<div class="event-container">
<div class="event-wrap">
<div class="event-wrap-time timelist"> 04:00 </div>
<div class="event-wrap-category has-tooltip" data-original-title="null">
<div class="flag-wrap">
<div class="flags-0-5625">
<div class="flag flag-mex"></div>
</div>
</div>
<div class="tournament-abbreviation"> MEX </div>
</div>
<div class="event-wrap-name pointer"><span>Puebla - Guadalajara</span></div>
<!----><!---->
</div>
<div class="event-outcomes-wrap">
<div class="event-outcomes-row">
<div class="event-outcomes-container">
<!---->
<div class="event-outcomes-odd pointer"> 2.50 </div>
<div class="event-outcomes-odd pointer"> 2.90 </div>
<div class="event-outcomes-odd pointer"> 3.10 </div>
</div>
<!---->
</div>
<div class="event-outcomes-row">
<div class="event-outcomes-container">
<!---->
<div class="event-outcomes-odd pointer"> 1.40 </div>
<div class="event-outcomes-odd pointer"> 1.60 </div>
<div class="event-outcomes-odd pointer"> 2.85 </div>
<div class="event-outcomes-odd pointer"> 5.85 </div>
</div>
<!---->
</div>
<div class="event-outcomes-row">
<div class="event-outcomes-container">
<!---->
<div class="event-outcomes-odd pointer"> 2.25 </div>
<div class="event-outcomes-odd pointer"> 6.30 </div>
<div class="event-outcomes-odd pointer"> 3.65 </div>
<div class="event-outcomes-odd pointer"> 6.25 </div>
</div>
<!---->
</div>
</div>
<div class="event-markets-count pointer">
<div class="event-markets-count-value">+56</div>
</div>
</div>
</div>
After clicking on the button <div class="event-markets-count-value">+56</div> got something like a popup window on the same page and from there I need to scrape <div class="eventview-market-name"> D C </div> odds 1X X2 and 12. I need to do same for every match on page.
<div class="eventview-container noselect">
<div class="eventview-content">
<div class="eventview-header" event="[object Object]">
<div class="eventview-header-content">
<div class="eventview-header-event-name">
<div class="home-team-name">Puebla</div>
<div class="team-names-separator"> - </div>
<div class="away-team-name">Guadalajara</div>
</div>
<div class="eventview-header-details">
<!----><span> Sun 21.11. 04:00 - </span><!----><span>Mexico 1</span>
</div>
<!---->
</div>
<i class="icon icon-close"></i>
</div>
<div class="eventview-bet-groups">
<div class="eventview-bet-groups-button active"><span> All </span></div>
<div class="eventview-bet-groups-button"><span> Basics </span></div>
<div class="eventview-bet-groups-button"><span> Goals </span></div>
<div class="eventview-bet-groups-button"><span> Both teams to score </span></div>
<div class="eventview-bet-groups-button"><span> Combo </span></div>
<div class="eventview-bet-groups-button dropdown">
<span> More </span><i class="icon dropdown-icon icon-arrow-down-a"></i><!---->
</div>
</div>
<div class="eventview-body-wrap">
<!---->
<div class="eventview-market-wrap">
<div class="eventview-market-wrap">
<!---->
<div class="event-markets-wrap">
<div class="eventview-market">
<div market="[object Object]" class="eventview-market-header pointer">
<div class="eventview-market-name"> Finish </div>
<div class="eventview-icons-group">
<div class="market-description-tooltip has-tooltip" data-original-title="null"><i class="icon icon-info-secondary"></i></div>
<div class="favourite-market"><i class="icon icon-star"></i></div>
</div>
</div>
<div class="eventview-outcome-wrapper eventview-market-outcomes expanded">
<div class="eventview-outcome" outcome="[object Object]" marketoutcomeslength="3" market="[object Object]" selectoutcome="function () { [native code] }">
<div class="eventview-outcome-name">1</div>
<div class="eventview-outcome-odd"> 2.50 </div>
</div>
<div class="eventview-outcome" outcome="[object Object]" marketoutcomeslength="3" market="[object Object]" selectoutcome="function () { [native code] }">
<div class="eventview-outcome-name">X</div>
<div class="eventview-outcome-odd"> 2.90 </div>
</div>
<div class="eventview-outcome" outcome="[object Object]" marketoutcomeslength="3" market="[object Object]" selectoutcome="function () { [native code] }">
<div class="eventview-outcome-name">2</div>
<div class="eventview-outcome-odd"> 3.10 </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="eventview-market-wrap">
<div class="eventview-market-wrap">
<!---->
<div class="event-markets-wrap">
<div class="eventview-market">
<div market="[object Object]" class="eventview-market-header pointer">
<div class="eventview-market-name"> D C </div>
<div class="eventview-icons-group">
<div class="market-description-tooltip has-tooltip" data-original-title="null"><i class="icon icon-info-secondary"></i></div>
<div class="favourite-market"><i class="icon icon-star"></i></div>
</div>
</div>
<div class="eventview-outcome-wrapper eventview-market-outcomes expanded">
<div class="eventview-outcome" outcome="[object Object]" marketoutcomeslength="3" market="[object Object]" selectoutcome="function () { [native code] }">
<div class="eventview-outcome-name">1X</div>
<div class="eventview-outcome-odd"> 1.34 </div>
</div>
<div class="eventview-outcome" outcome="[object Object]" marketoutcomeslength="3" market="[object Object]" selectoutcome="function () { [native code] }">
<div class="eventview-outcome-name">12</div>
<div class="eventview-outcome-odd"> 1.40 </div>
</div>
<div class="eventview-outcome" outcome="[object Object]" marketoutcomeslength="3" market="[object Object]" selectoutcome="function () { [native code] }">
<div class="eventview-outcome-name">X2</div>
<div class="eventview-outcome-odd"> 1.50 </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-markets-wrap">
<div class="eventview-market">
<div market="[object Object]" class="eventview-market-header pointer">
<div class="eventview-icons-group">
<div class="market-description-tooltip has-tooltip" data-original-title="null"><i class="icon icon-info-secondary"></i></div>
<div class="favourite-market"><i class="icon icon-star"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---->
</div>
My not working code:
box = driver.find_element(By.XPATH, '//*[#id="timelist-events-wrap"]')
single_row_events = box.find_elements(By.CLASS_NAME, 'event-row')
for match in single_row_events:
more_odds = match.find_element(By.CLASS_NAME, 'event-markets-count').click()
time.sleep(1)
goals = match.find_element(By.XPATH, '//*[#id="app"]/div/div/div[1]/div[2]/div[2]/div[2]/div/div/div[2]/div[4]/span').click()
odds_event = match.find_element(By.XPATH, '//*[#id="app"]/div/div/div[1]/div[2]/div[2]/div[2]/div/div/div[3]/div/div[1]/div/div[1]/div[3]')
odds_events.append(odds_event)
close = match.find_element(By.XPATH, '//*[#id="app"]/div/div/div[1]/div[2]/div[2]/div[2]/div/div/div[1]/i').click()
for odds_event in teams:
for odds_event in odds_events:
for n, box in enumerate(odds_event):
rows = box.find_elements(By.XPATH, './.')
if n == 0:
dc.append(rows[0].text)
This clicking on more_odds but can't scrape and store in an array.
Show me error Traceback (most recent call last): File "C:\Users\Pete\OneDrive\Documents\Scrape\bets\bbet.py", line 57, in <module> more_odds = match.find_element(By.CLASS_NAME, 'event-markets-count').click()

Xpath that you've used isn't relative, they are absolute. Making them brittle in nature. I have corrected a few locators, and I have also induce WebDriverWait (ExplicitWait)
Code:
wait = WebDriverWait(box, 30)
odds_events = []
single_row_events = box.find_elements(By.XPATH, "//div[#class='event-row']")
print("How many rows ?", len(single_row_events))
for match in single_row_events:
try:
time.sleep(.5)
match.find_element(By.XPATH, ".//div[#class='event-markets-count pointer']").click()
print('Row should have clicked')
odds_event = wait.until(EC.visibility_of_element_located((By.XPATH, "//div[#class='away-team-name']"))).text
odds_events.append(odds_event)
except:
pass

Why is get route showing TypeError: Cannot read property 'title' of null and crashing the website?

i am building an express app with mongodb in nodejs, When i make a get request to the show posts route , then all posts are rendered correctly when i pass them in ejs file but after the show page is displayed it gives an error on the terminal
events.js:291 throw er; // Unhandled 'error' event ^ TypeError: Cannot read property 'title' of null
this is my get route in router/posts.js
router.get("/commerce", (req,res)=>{
if(req.query.search){
var noMatch;
// gives search results on author name, content and title of the post
const regex = new RegExp(escapeRegex(req.query.search), 'gi')
Post.find({$or: [{title:regex} , {content:regex}, {'author.username':regex}], subject: "commerce"}, function(err,allposts){
if(err) console.log(err)
else{
if(allposts.length<1){
noMatch = "No posts matched the search results , please try again"
}
console.log("searched", allposts)
res.render("commerce", {posts: allposts, noMatch: noMatch, message: req.flash('success')});
}
})
} else{
Post.find({subject: "commerce"}, function(err,allposts){
if(err) {
console.log(err);
res.statusCode = 500;
res.end('error');
}
else{
console.log("actually all posts",allposts)
res.render("commerce", {posts: allposts, noMatch: noMatch , message: req.flash('success')});
}
})
}
})
commerce.ejs
<%- include("./partials/header1.ejs") %>
<link rel="stylesheet" href="/stylesheets/commerce.css">
<%- include("./partials/header2.ejs") %>
<div class="top-horiz-bar">
<div class="logo-section-in-bar">
<img class="top-img-logo" src="./finallogopic.png" alt="logo-pic" height="60px" width="60px">
<!-- <img class="top-name-logo" src="./zoomed-brand-name.png" alt="logo-name" height="80px" width="130px"> -->
<h2 class="top-name-logo">Backbanchers</h2>
</div>
<div class="other-icons">
<div class="search-box">
<input id="search-font" class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="person-account">
<a class="account-info" href="#">
<i class="far fa-user-circle fa-2x"></i>
<span>Sign-in/up</span>
</a>
</div>
</div>
</div>
<div class="vertical-nav-bar">
Home<span><i class="fas fa-home"></i></span>
<a class="blog-section-left" href="#">Blogs<span><i class="fas fa-user-graduate"></i></span>
<!-- <ul class="sections-blog">
<a class="option-blog" href="#"><li>Business & Economics</li></a>
<a class="option-blog" href="#"><li>Commerce</li></a>
<a class="option-blog" href="#"><li>Personality Devlopment</li></a>
</ul> -->
</a>
Authors<span><i class="fas fa-pencil-alt"></i></span>
Newsletter<span><i class="fas fa-newspaper"></i></span>
Contact US<span><i class="fas fa-phone-alt"></i></span>
<!-- Services<span><i class="fas fa-question"></i></span> -->
About Us<span><i class="fas fa-users"></i></span>
<!-- Services<span><i class="fas fa-question"></i></span> -->
</div>
<div class="all-engineering-articles">
<div class="side-box">
<div class="one-of-3-heading">
<h2 class="side-box-heading-one">Trending</h2>
<div class="sub-part-section">
<h2 class="title-side-box">How 3D cameras with integrated data processing reduce the load on network and host PC</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Indy Cars Get a Little Saferβ€”Thanks to a 200+ mph Windshield</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Additive Manufacturing Qualification & Certification During Crises</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
<div class="two-of-3-heading">
<h2 class="side-box-heading-two">Recommended</h2>
<div class="sub-part-section">
<h2 class="title-side-box">Autonomous Mobile Robots and Cobots Improve Worker Safety and Retention</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Sustainable Control Panel Design</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">The Difference Between: Push-In Terminals versus Other Types of Connections</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
<div class="three-of-3-heading">
<h2 class="side-box-heading-three">Popular</h2>
<div class="sub-part-section">
<h2 class="title-side-box">
Why Using IIoT for Pneumatics is Simple, Yet Critical</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">
IR Camera Captures Defects in 3D Printing</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Additive Manufacturing Qualification & Certification During Crises</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
</div>
<% posts.forEach(function(post){ %>
<div class="blog-post">
<div class="blog-post__img">
<img src="https://image.freepik.com/free-photo/cyborg-hand-pressing-keyboard-laptop-3d-rendering_117023-946.jpg" alt="article-pic" class="blog-post__article-img">
</div>
<div class="blog-post__info">
<div class="blog-post__date">
<span><%= post.publishDay%></span>
<span><%= post.publish_date %></span>
</div>
<div class="author-name">
<ul class="author-content">
<li class="name-aut"><%= post.author.username %>></li>
<li class="save-to-later"><i class="fas fa-plus "></i></li>
</ul>
</div>
console.log(<%= post.title %>)
<h1 class="blog-post__title"><%= post.title %></h1>
<p class="blog-post__text"><%= post.content.substring(0,120) %></p>
Read more
<ul class="btns-on-blogcard">
<!-- <li class="btns-blog"><i class="far fa-eye fa-2x "></i></li> -->
<li class="btns-blog"><i class="far fa-hand-peace fa-2x "></i></li>
<li class="btns-blog"><i class="fas fa-share fa-2x "></i></li>
</ul>
</div>
</div>
<% }) %>
<div class="page-end">
</div>
<div class="next-page">
<h2 class="new-page-blogs">-Page 1 of 1- <span class="next-page-btn">Next page</span></h2>
</div>
</div>
<section class="footer" >
<footer id="foo">
<div class="overall-footer">
<div class="first-part">
<h2 class="our-name">Backbenchers</h2>
<img id="logo-of-learners" src="finallogopic.png" alt="our-logo" height="40%" width="14%">
</div>
<div class="bordering-right">
</div>
<div class="second-part">
<h2 class="second-links">Quick Links</h2>
<ul class="ul-class-footer">
<li class="quick-buttons">Home</li>
<li class="quick-buttons">Buisness & Economics</li>
<li class="quick-buttons">Commerce</li>
<li class="quick-buttons">Engineering</li>
<li class="quick-buttons">Personality Devlopment</li>
</ul>
</div>
<div class="third-party">
<div class="name-social-footer">
<li class="quick-buttons-2">Facebook</li>
<li class="quick-buttons-2">Instagram</li>
<li class="quick-buttons-2">LinkedIn</li>
</div>
<style>
a{
text-decoration: none;
color: white;
}
</style>
<div class="media-buttons-footer">
<a class="btns-footer-class-1" href="#"><i id="facebook-1" class="fab fa-facebook-f "></i></a>
<a class="btns-footer-class-2" href="#"><i id="instagram-1" class="fab fa-instagram "></i></a>
<a class="btns-footer-class-3" href="#"><i id="linkedin-1" class="fab fa-linkedin-in "></i></a>
</div>
</div>
<div class="fourth-party">
<h2 class="fourth-links">Social</h2>
<a href="mailto:ritishgupta45#gmail.com">
<span id="envolope-footer" class="fas fa-envelope fa-2x"></span>
<span id="email-footer" class="text">Backbenchers#gmail.com</span>
</a>
<input id="name-id-id" type="email" placeholder="Name">
<input id="email-id-id" type="email" placeholder="Email-id" required>
<input id="leave-msg-id-id" type="text" placeholder="leave a message">
<div class="send-button-footer">
<button id="send-id-id" type="submit">Send</button>
</div>
</div>
<div class="fifth-party">
<h2 class="fifth-links">Connect with Us</h2>
<h2 class="heading-of-news-footer">Newsletter subscription</h2>
<p class="para-of-news-footer">Subscribe to our fortnightly newsletter <br> to gain great knowledge exposure. <br> Also, stand a chance to participate <br> in brainstorming competitions <br> and win exciting prizes.</p>
<div class="suscribe-footer">
<input id="footer-suscribe-btns" type="email" placeholder="enter your email id" required>
<div class="red-btn-suscribe">
<button id="suscribing" type="button">Subscribe</button>
</div>
</div>
</div>
<div class="final-part">
<div class="box-copy">
<div class="btns-margin">
<h2 class="bottom-copy-footer">About Us</h2>
<h2 class="bottom-copy-footer">Privacy Policy</h2></a>
<h2 class="bottom-copy-footer">Terms and conditions</h2>
</div>
<h2 class="final-copywrite">copyright Β© All Rights Reserved | Backbenchers</h2>
</div>
</div>
</footer>
</section>
<%- include("./partials/footer.ejs") %>
output ss 1 of console.log("actually all posts",allposts)
output ss 2 of console.log("actually all posts",allposts)
in these output ss
i have added console.log("actually all posts",allposts) before res.render() and got the output whrere all posts are printed and at last null is also printed where is that null coming from? , and after this null , error is printed on the console as visible in the scrrenshots above

Not able to extract urls from HTML BeautifulSoup object

I am looking to extract following url "https://mania.bg/p/pulover-alexander-mcqueen-p409648" from html (BeautifulSoup object) named urls that looks like:
[<a class="product sellout product-sellout float-left status-1" data-id="409648" data-producturl="https://mania.bg/p/pulover-alexander-mcqueen-p409648" data-status="1" href="https://mania.bg/p/pulover-alexander-mcqueen-p409648"> <div class="product-hover clearfix prevent-flicker"><div class="module-icons favourite tooltip" data-id="409648" data-title=" Π›ΡŽΠ±ΠΈΠΌΠ° Π½Π°Ρ…ΠΎΠ΄ΠΊΠ° Π½Π° 24 ΠΊΠ»ΠΈΠ΅Π½Ρ‚/ΠΈ. "> <img alt="" class="favourite-product like-product unactivated" data-id="409648" src="dist/assets/icon_favourite_off.png"/></div> <div class="campaign" style="color: #FFF;background-color: #000000;"> NIGHT </div> <div class="profit-icons-wrapper clearfix"> </div> <div class="product-basic-info"> <div class="image-wrapper"> <img alt="ΠŸΡƒΠ»ΠΎΠ²Π΅Ρ€ Alexander McQueen" class="front" data-url="https://media.mania.bg/product/048/409648/300/pulover-alexander-mcqueen-2.jpg" src="https://media.mania.bg/product/048/409648/300/pulover-alexander-mcqueen-1.jpg" title="ΠŸΡƒΠ»ΠΎΠ²Π΅Ρ€ Alexander McQueen - Mania"> </img></div> <div class="clearfix brand-line"> <div class="brand float-left text-uppercase">Alexander McQueen</div> <div class="size float-right">S</div> </div> </div> <div class="prices-section"> <div class="prices-inner-section"> <div class="price-wrapper clearfix"> <div class="price-title text-uppercase float-left"> Начална Ρ†Π΅Π½Π° </div> <div class="price old"> <span>98.00</span> <span class="currency">Π»Π².</span> </div> </div> <div class="price-wrapper clearfix"> <div class="discount price-title text-uppercase float-left"> -40% </div> <div class="price old"> <span>58.80</span> <span class="currency">Π»Π².</span> </div> </div> <div class="price-wrapper clearfix"> <div class="discount price-title text-uppercase float-left" style="color: #FFF;background-color: #000000"> -40% </div> <div class="price"> <span>35.28</span> <span class="currency">Π»Π².</span> </div> </div> </div> </div> </div> <div class="button button-auction buy-now text-center float-left tooltip prevent-popup-close" data-id="409648" data-title="МоТС Π΄Π° Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ Ρ‚ΠΎΠ·ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ към ΠΊΠΎΠ»ΠΈΡ‡ΠΊΠ°Ρ‚Π°.">Π”ΠžΠ‘ΠΠ’Π―Πœ<img alt="" class="bag-icon" src="dist/assets/icon_bag_button.svg"> </img></div> </a>]
With following code:
for num in range(len(urls)):
url = urls[num - 1].a['href']
I also tried to use:
url = urls[num - 1].a['data-producturl']
I get "TypeError: 'NoneType' object is not subscriptable" as url is None.

import requests
import bs4
url = 'https://mania.bg/p/pulover-alexander-mcqueen-p409648'
data = requests.get(url)
soup = bs4.BeautifulSoup(data.text,'html.parser')
urls = soup.find_all('a', attrs={'class': 'product sellout product-sellout float-left status-1'})
for num in range(len(urls)):
url = urls[num]['href']
print(url)

Try this. Here's an example:https://github.com/yiyedata/simplified-scrapy-demo/tree/master/doc_examples
from simplified_scrapy.simplified_doc import SimplifiedDoc
html ='''
[<a class="product sellout product-sellout float-left status-1" data-id="409648" data-producturl="https://mania.bg/p/pulover-alexander-mcqueen-p409648" data-status="1" href="https://mania.bg/p/pulover-alexander-mcqueen-p409648"> <div class="product-hover clearfix prevent-flicker"><div class="module-icons favourite tooltip" data-id="409648" data-title=" Π›ΡŽΠ±ΠΈΠΌΠ° Π½Π°Ρ…ΠΎΠ΄ΠΊΠ° Π½Π° 24 ΠΊΠ»ΠΈΠ΅Π½Ρ‚/ΠΈ. "> <img alt="" class="favourite-product like-product unactivated" data-id="409648" src="dist/assets/icon_favourite_off.png"/></div> <div class="campaign" style="color: #FFF;background-color: #000000;"> NIGHT </div> <div class="profit-icons-wrapper clearfix"> </div> <div class="product-basic-info"> <div class="image-wrapper"> <img alt="ΠŸΡƒΠ»ΠΎΠ²Π΅Ρ€ Alexander McQueen" class="front" data-url="https://media.mania.bg/product/048/409648/300/pulover-alexander-mcqueen-2.jpg" src="https://media.mania.bg/product/048/409648/300/pulover-alexander-mcqueen-1.jpg" title="ΠŸΡƒΠ»ΠΎΠ²Π΅Ρ€ Alexander McQueen - Mania"> </img></div> <div class="clearfix brand-line"> <div class="brand float-left text-uppercase">Alexander McQueen</div> <div class="size float-right">S</div> </div> </div> <div class="prices-section"> <div class="prices-inner-section"> <div class="price-wrapper clearfix"> <div class="price-title text-uppercase float-left"> Начална Ρ†Π΅Π½Π° </div> <div class="price old"> <span>98.00</span> <span class="currency">Π»Π².</span> </div> </div> <div class="price-wrapper clearfix"> <div class="discount price-title text-uppercase float-left"> -40% </div> <div class="price old"> <span>58.80</span> <span class="currency">Π»Π².</span> </div> </div> <div class="price-wrapper clearfix"> <div class="discount price-title text-uppercase float-left" style="color: #FFF;background-color: #000000"> -40% </div> <div class="price"> <span>35.28</span> <span class="currency">Π»Π².</span> </div> </div> </div> </div> </div> <div class="button button-auction buy-now text-center float-left tooltip prevent-popup-close" data-id="409648" data-title="МоТС Π΄Π° Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ Ρ‚ΠΎΠ·ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ към ΠΊΠΎΠ»ΠΈΡ‡ΠΊΠ°Ρ‚Π°.">Π”ΠžΠ‘ΠΠ’Π―Πœ<img alt="" class="bag-icon" src="dist/assets/icon_bag_button.svg"> </img></div> </a>]
'''
doc = SimplifiedDoc(html)
urls = doc.selects('a.product sellout product-sellout float-left status-1')
print ([(url.href,url['data-producturl']) for url in urls])
Result:
[('https://mania.bg/p/pulover-alexander-mcqueen-p409648', 'https://mania.bg/p/pulover-alexander-mcqueen-p409648')]

find_all already gives you the list of a elements; you just need to get the href from each.
from bs4 import BeautifulSoup
import requests
url = 'https://mania.bg/p/pulover-alexander-mcqueen-p409648'
r = requests.get(url)
soup = BeautifulSoup(r.content, 'html.parser')
for a in soup.find_all(
'a',
attrs={'class':
'product sellout product-sellout float-left status-1'}):
print(a['data-producturl'])

Views not refreshing correctly using SailsJS

in my code, i have a view called "show.ejs" which shows client details. the proble; now is that if i update client details (image, associated docs, ...) the content remains the same and changes only if i refresh the page ( by F5 ) .
this my update and show actions in ClientController :
findOne : function(req,res){
Client.findOne({
id : req.param('id')
})
.populate('docs')
.populate('sites')
.exec(function(err,client){
if(err) throw err;
if(client) {
return res.view('client/show', {
client : client
});
} else {
return res.redirect('/client');
}
})
},
update : function(req,res){
var name = req.param('name'),
id = req.param('id'),
town = req.param('town'),
adress = req.param('adress'),
postalCode = req.param('postalCode'),
telephone = req.param('telephone'),
email = req.param('email'),
fax = req.param('fax'),
responsable = req.param('responsable'),
website = req.param('website'),
activity = req.param('activity');
Client.findOne({id : id}).exec(function(err,client) {
if(err) console.log(err);
client.name = name;
client.town = town;
client.adress = adress;
client.telephone = telephone;
client.fax = fax;
client.website = website;
client.email=email;
client.responsable=responsable;
client.postalCode=postalCode;
client.activity = activity;
client.save();
req.file('logo').upload({
dirname: require('path')
.resolve(sails.config.appPath+'/assets/uploads/clients/logos/')
}, function (err, logo) {
if (err) throw err;
if(typeof logo !== 'undefined' && logo.length > 0 ) {
require('fs').unlink('./assets/uploads/clients/logos/'+client.logo, function(err){
if(err) console.log(err)
client.logo = require('path').basename(logo[0].fd);
client.save();
})
}
return res.redirect('/client/'+client.id );
});
})
}
and this is how i setup the view :
<div class="row">
<div class="col-md-12">
<!-- BEGIN PROFILE SIDEBAR -->
<div class="profile-sidebar" style="background-color: #f5f5f5;">
<!-- PORTLET MAIN -->
<div class="portlet light profile-sidebar-portlet " style="background-color: #f5f5f5;">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<img src="/uploads/clients/logos/<%= client.logo %>" class="img-responsive img-circle" alt="image client"> </div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle ">
<div class="profile-usertitle-name"><%= client.name %></div>
<div class="profile-usertitle-job"> Client </div>
</div>
</div>
<!-- END PORTLET MAIN -->
<!-- PORTLET MAIN -->
<div class="portlet light " style="background-color: #f5f5f5;">
<!-- STAT -->
<div class="row list-separated profile-stat">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="uppercase profile-stat-title"> <%= 44 %> </div>
<div class="uppercase profile-stat-text"> Sites </div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="uppercase profile-stat-title"><%= 49 %> </div>
<div class="uppercase profile-stat-text"> Documents </div>
</div>
</div>
<!-- END STAT -->
<div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-map-marker"></i>
<span class="profile-desc-text" ><%= client.adress %></span>
</div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-envelope"></i>
<%= client.email %>
</div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-globe"></i>
<%= client.website %>
</div>
</div>
</div>
<!-- END PORTLET MAIN -->
</div>
<!-- END BEGIN PROFILE SIDEBAR -->
<!-- BEGIN PROFILE CONTENT -->
<div class="profile-content">
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title tabbable-line">
<div class="caption caption-md">
<i class="icon-globe theme-font hide"></i>
<span class="caption-subject font-blue-madison bold uppercase">Client NΒ° <strong> <%= client.id %></strong></span>
</div>
<ul class="nav nav-tabs">
<li class="active">
informations
</li>
<li>
Documents
</li>
<li>
Sites
</li>
</ul>
</div>
<div class="portlet-body">
<div class="tab-content">
<!-- PERSONAL INFO TAB -->
<div class="tab-pane active" id="tab_1_1">
<form class="form-horizontal" role="form" action="edit">
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-offset-10 col-md-2">
<input type="text" hidden name="id" value="<%=client.id%>">
<button type="submit" class="btn green">
<i class="fa fa-pencil"></i> Modifier</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-body">
<h3 class="form-section">Informations Personneles </h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">ID :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.id %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Nom :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.name %> </p></strong> </strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Responsable :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"><%= client.responsable %></p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Email :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.email %> </p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">TΓ©lΓ©phone :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.telephone %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Fax :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.fax %> </p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<h3 class="form-section">Adresse</h3>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">#</label>
<div class="col-md-9">
<strong> <p class="form-control-static"> <%= client.adress %> </p></strong>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Ville:</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.town %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Code postal:</label>
<div class="col-md-6">
<strong> <p class="form-control-static"> <%= client.postalCode %></p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
</div>
</form>
</div>
<!-- END PERSONAL INFO TAB -->
<!-- CHANGE AVATAR TAB -->
<div class="tab-pane" id="tab_1_2">
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<button type="submit" class="btn green" data-toggle="modal" href="#basic">
<i class="fa fa-plus"></i> Ajouter un doc </button>
</div>
</div>
</div>
</div>
</div>
<!--- doc model -->
<div class="modal fade" id="basic" tabindex="-1" role="basic" 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">Ajouter un Document</h4>
</div>
<div class="modal-body">
<form action="/client/addDocument" method="POST" enctype="multipart/form-data">
<input type="text" hidden name="id" value="<%= client.id %>">
<div class="form-group" style="padding-bottom: 22px;">
<label class="col-md-3 control-label">Titre</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-info-circle"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="titre du document" name="title"> </div>
</div>
</div>
<br>
<div class="form-group" style="padding-bottom: 22px;">
<label class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-info-circle"></i>
</span>
<textarea type="text" class="form-control input-circle-right" name="description" placeholder="description du document"> </textarea>
</div>
</div>
</div>
<div class="form-group" style="padding-bottom: 22px; padding-top: 40px;">
<label class="col-md-3 control-label">Document</label>
<div class="col-md-9">
<div class="input-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn green btn-file">
<span class="fileinput-new"> Selectionner Fichier </span>
<span class="fileinput-exists"> Changer </span>
<input type="file" name="fichier"> </span>
<span class="fileinput-filename"> </span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn green">Enregistrer</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- fin doc model -->
<br>
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption font-green">
<i class=" fa fa-file font-green"></i>
<span class="caption-subject bold uppercase" style="margin-right : 11px;">Liste des Documents</span>
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover dt-responsive" width="100%" id="sample_1">
<thead>
<tr>
<th class="all">#</th>
<th class="min-tablet">Titre</th>
<th class="desktop">Description</th>
<th class="all" style="width : 66px">Action.</th>
</tr>
</thead>
<tbody>
<% _.each(client.docs, function (doc) { %>
<tr>
<td ><%=doc.id%></td>
<td ><%= doc.title %></td>
<td ><%= doc.description %></td>
<center> <td>
<a href="#" title="telecharger" class="btn btn-circle btn-icon-only green" ><i class="fa fa-download" ></i></a>
<a href="#" title="Supprimer" class="btn btn-circle btn-icon-only purple-sharp" data-toggle="confirmation" data-placement="left" data-btn-ok-label="Continuer" data-btn-ok-icon="icon-like" data-btn-ok-class="btn-success" data-btn-cancel-label="Annuler!"
data-btn-cancel-icon="icon-close" data-btn-cancel-class="btn-danger"><i class="fa fa-trash-o"></i></a>
</td></center>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>

Actually following your code, the problems reside in
client.save()
which is an asynchronous function.
the problem is you are changing the client and you are not waiting for the changes to be saved to upload the logo and reload the data.
here's the official doc, which is stating that model.save has a callback to it.
client.save(function(){
/*your code */
})

The view, with those EJS functions is doing what is expected to do. You see, you are not providing some way to magically change data on-the-fly. Instead what EJS and your controller is doing is this: Get all data needed - with findOne -> Put that data on the view - with EJS and <% %> markers -> Render and serve a static HTML document - res.view.
If you need data to change on the fly you need a more powerful framework on the frontend, like Vuejs or Angular... EJS is meant to assembly a static page with dynamic data ONCE. Take a look at the docs

Toolbar to follow up after the keyboard appears in Material

how to make the toolbar remains at the bottom, do not go up on top after the keyboard appears ??
what's wrong with my code or less some plugins for cordova or framework7! maybe someone can help me to solve this problem.
<div class="views">
<div class="view">
<div class="pages">
<div data-page="viewprofil" class="page navbar-fixed toolbar-fixed">
<div class="navbar" style="background-color: #1abc9c;box-shadow: 0 5px 10px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);">
<div class="navbar-inner" >
<div id="kembali" class="left sliding button">
<i class="icon icon-back"></i>
</div>
<div class="left sliding">Akun</div>
</div>
</div>
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a id="kembali">
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
</a>
<a href="{{pathFor 'history'}}" >
<i class="fa fa-clock-o fa-2x"></i>
</a>
<a href="{{pathFor 'viewprofil'}}" class="toolbar-aktif">
<i class="fa fa-user fa-2x"></i>
</a>
</div>
</div>
<div class="page-content" style="background-color: #ecf0f1;color: #444444;">
<div class="content-block-title" style="top: 0px; margin-top:0px;"><h2>Pengaturan Akun</h2></div>
<div class="list-block">
<ul class="box-data">
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">person</i></div>
<div class="item-inner">
<div class="item-input">
<input id="namalengkap" type="text" placeholder="Nama lengkap" value="{{nama}}">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">email</i></div>
<div class="item-inner">
<div class="item-input">
<input type="text" value="{{email}}" disabled>
</div>
</div>
</div>
</li>
<li>
<li class="accordion-item">
<a class="item-content item-link">
<div class="item-media"><i class="icon material-icons" aria-hidden="true">lock</i></div>
<div class="item-inner">
<div class="item-title">Kata Sandi</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Kata Sandi baru">
</div>
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Ulangi Kata Sandi">
</div>
</div>
</li>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">call</i></div>
<div class="item-inner">
<div class="item-input">
<input type="tel" placeholder="No. Handphone" value="{{notelp}}">
</div>
</div>
</div>
</li>
</ul>
<div class="content-block">
<div class="logButton button button-fill button-raised color-red" id="logout" ><i class="fa fa-power-off " aria-hidden="true"></i> Keluar</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
After
Before

I never came out of an idea to keep it in the bottom, but here is a quick fix:
var myApp = new Framework7({
material: true
});
var mainView = myApp.addView('.view-main', {
});
$$ = Dom7;
$$('#my-input').on('focus', function() {
mainView.hideToolbar();
});
$$('#my-input').on('blur', function() {
mainView.showToolbar();
});
Simply show and hide the toolbar on input focus and blur events.
Live Example: https://jsfiddle.net/wowq3n64/

Resources