I am creating a website, where I want to implement Up and Down voting button. I am using Flask and Bootstrap for that. So, if anyone can tell me how to add up and down votes without using jQuery?
Bootstrap version is 4, so no glyphicons are available. Any help?
<div class="card">
<div class="card-body">
{{{{Need those buttons here}}}}
<div class="row" style="margin-left: 5px;">
{{posts[post]["user"]}}
<em> {{posts[post]["title"]}} </em>
</div>
<div class="row" style="margin-left: 5px;">
/user311
<a target="_blank" href={{ posts[post]["replies"]["link"] }}>{{ posts[post]["replies"]["head"] }} </a>
</div>
</div>
</div>
Just link to a font awesome CDN and then add this to your card-body div:
<div>
<i class="fa fa-caret-up fa-2x"></i>
</div>
<div>
<i class="fa fa-caret-down fa-2x"></i>
</div>
N.B. Change fa-2x according to the size you want for the icon.
jsfiddle: https://jsfiddle.net/9j0ggd5g/5/
Related
I've been working on a Django project, I'm using Pycharm community edition 2021 and Django version as 4.0.3, the problem is that , whenever I reload my site there are no pictures shown which I want to display from another website. Error is like this "Indicate whether to send a cookie in a cross-site request by specifying its Same Site attribute", I have tried much more method to resolve this by adding removing cookies but unable to solve it, as I dnt know whether these same site cookies bug is in IDE , Django or chrome?
{% extends 'base.html'%}
{% block body %}
<div class="container my-4 mx-4 py-8 px-8" >
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://api.unsplash.com/search/photos?&client_id=wIXk0jpTFTYBNuisfNDCRmfWDt-
ZDTXZhBtviWWN7U8&query=office" class="d-block w-100 " alt="...">
</div>
<div class="carousel-item">
<img src="https://api.unsplash.com/search/photos?client_id=wIXk0jpTFTYBNuisfNDCRmfWDt-
ZDTXZhBtviWWN7U8&query=office" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://api.unsplash.com/search/photos?client_id=wIXk0jpTFTYBNuisfNDCRmfWDt-
ZDTXZhBtviWWN7U8&query=office" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
{% endblock body %}
I have problems to press this type of buttons with Selenium since the name by which I look for "5dbnhpbwuny6rmr65h86" and the button are in different div in Python.
Complete HTML code: https://codeshare.io/a39b3g.
Image HTML.
Example HTML code:
<div class="o_kanban_view o_kanban_dashboard o_pos_kanban o_cannot_create o_kanban_ungrouped" style="display: flex;"><div class="o_kanban_record">
<div class="o_kanban_card_header">
<div class="o_kanban_card_header_title">
<div class="o_primary">5dbnhpbwuny6rmr65h86</div>
<div class="o_secondary">Unused</div>
</div>
<div class="o_kanban_manage_button_section">
<a class="o_kanban_manage_toggle_button" href="#">Más <i class="fa fa-caret-down"></i></a>
</div>
</div>
<div class="container o_kanban_card_content o_visible">
<div class="row">
<div class="col-xs-6 o_kanban_primary_left">
<button class="btn btn-default oe_kanban_action oe_kanban_action_button" data-name="open_session_cb" data-type="object" type="button">New Session
</button>
</div>
<div class="col-xs-6 o_kanban_primary_right">
</div>
</div>
</div><div class="container o_kanban_card_manage_pane o_invisible">
<div class="row">
<div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_view">
<div class="o_kanban_card_manage_title">
<span>Ver</span>
</div>
<div>
<a data-name="341" data-type="action" href="#" class=" oe_kanban_action oe_kanban_action_a">Sesiones</a>
</div>
<div>
<a data-name="342" data-type="action" href="#" class=" oe_kanban_action oe_kanban_action_a">Pedidos de ventas</a>
</div>
</div>
<div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_new">
<div class="o_kanban_card_manage_title">
<span>Informes</span>
</div>
<div>
<a data-name="343" data-type="action" href="#" class=" oe_kanban_action oe_kanban_action_a">Pedidos</a>
</div>
</div>
</div>
<div class="o_kanban_card_manage_settings row">
<div class="col-xs-12 text-right">
<a data-type="edit" href="#" class=" oe_kanban_action oe_kanban_action_a">Configuración</a>
</div>
</div>
</div>
</div><div class="o_kanban_record o_kanban_ghost"></div><div class="o_kanban_record o_kanban_ghost"></div><div class="o_kanban_record o_kanban_ghost"></div><div class="o_kanban_record o_kanban_ghost"></div><div class="o_kanban_record o_kanban_ghost"></div><div class="o_kanban_record o_kanban_ghost"></div></div>
I came up with something like that, but I do not have the right solution:
for div in driver.find_elements_by_xpath("//div[#class='o_kanban_record']"):
if div.find_elements_by_xpath("//div[contains(text() , '5dbnhpbwuny6rmr65h86')]") != []:
div.find_elements_by_xpath("//button[contains(text() , 'New Session')]").click()
Thanks!
To click() on the New Session button for any of the Strings e.g.
iuijg6bzr2xs9gsueq2i or 5dbnhpbwuny6rmr65h86, you can take help of a function and pass any String to get the relevant New Session button clicked.
The final solution, which detects the state of the button is:
driver.find_elements_by_xpath("//div[#class='o_primary' and contains(text(), '%s')]/parent::div[*]/parent::div[*]/parent::div[*]/descendant::button[#data-name='open_session_cb']" % (shop))[0].click()
OR
driver.find_elements_by_xpath("//div[#class='o_primary' and contains(text(), '%s')]/parent::div[*]/parent::div[*]/parent::div[*]/descendant::button[#data-name='open_ui']" % (shop))[0].click()
Get all divs and buttons:
divs = driver.find_elements_by_css_selector(".o_primary")
buttons = driver.find_elements_by_css_selector(".btn.btn-default.oe_kanban_action.oe_kanban_action_button")
Go through the list of div elements and find needed one and do click action on the appropriate button:
for div, button in zip(divs, buttons):
if div.text == "5dbnhpbwuny6rmr65h86":
button.click()
Have you heard about Splinter? It is an abstraction layer on top of Selenium and it allows you to find elements by text: https://splinter.readthedocs.io/en/latest/finding.html
driver.find_by_text('5dbnhpbwuny6rmr65h86')
find_by_text returns a list of elements,so it should be
element = driver.find_by_text('5dbnhpbwuny6rmr65h86').first
element.find_by_xpath("//button[contains(text() , 'New Session')]").first.click()
Note: Untested
My site has a newsbanner which is displayed on every page, thus I have created static_placeholders to manage the content of it. However, the banner has a different look on mobile, which means I've created 2 sections, where one displays the large screen newsbanner and the other section displays the mobile version. The content, however, is the same, so I have duplicated the static_placeholder from the large screen section to the mobile section like this:
<div class="section no-padding">
<div class="row hide-on-large-only hide" id="announcement-mobile" style="background: linear-gradient(to bottom, #26a69a 0%, #26a69a 50%, #ffffff 50%, #ffffff 100%); ">
<div class="col s12">
<div class="card">
<div class="card-image"><a class="btn-floating btn-flat waves-effect waves-default transparent hide-announcement" href="#!" style=""><i class="material-icons">close</i> </a>
{% static_placeholder "CTA billede" %}
<span class="card-title"><i class="material-icons">fiber_new</i> {% static_placeholder "CTA overskrift" %}</span></div>
<div class="card-content">
<p class="teal-text text-lighten-1 left-align">{% static_placeholder "CTA tekst" %}</p>
</div>
<div class="card-action">
{% static_placeholder "CTA links" %}
</div>
</div>
</div>
</div>
</div><!-- end mobile -->
<div class="section no-padding">
<div class="row hide-on-med-and-down hide" id="announcement" style="background: linear-gradient(to bottom, #26a69a 0%, #26a69a 50%, #ffffff 50%, #ffffff 100%); ">
<div class="col s12 m8 offset-m2">
<div class="card horizontal hoverable">
<div class="card-image">
{% static_placeholder "CTA billede" %}
</div>
<div class="card-stacked">
<a class="btn-floating btn-flat waves-effect waves-default transparent hide-announcement" href="#!"><i class="material-icons blue-grey-text">close</i> </a>
<div class="card-content blue-grey-text">
<span class="card-title light blue-grey-text"><i class="material-icons small">fiber_new</i>{% static_placeholder "CTA overskrift" %} </span>
<div class="divider blue-grey" style="padding-bottom: 5px; margin-bottom: 15px;"></div>
<p class="blue-grey-text left-align">{% static_placeholder "CTA tekst" %}</p>
</div>
<div class="card-action">
{% static_placeholder "CTA links" %}
</div>
</div>
</div>
</div>
</div><!-- end desktop -->
</div><!-- End CTA -->
This however throws the following error:
Which results in placeholder becoming uneditable.
python version 3.6.1
Django version 1.10.7
Djangocms version 3.4.4
I'm new to Jinja and this is my first post here on Stack Overflow.
I'm trying to loop through a gallery of images handled by bootstrap carousel/modal. I was able to let it work; <img> and <div> are rendered correctly, however I can't loop through the active element. Searching the web, I found that macros can help achieve it but I'm not familiar with using them. Here's the code I'm working on:
<div class="modal fade" id="myModalGal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- Wrapper for slides -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
{% for content in porte %}
{% if content.gal_porte %}
<img src="{{content.gal_porte}}" class="img-responsive" alt="test">
<div class="carousel-caption"></div>
</div>
<div class="item">
{% elif content.gal_porte %} <img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
{% endif %}
{% endfor %}
</div>
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev"> <i class="fa fa-arrow-left"></i>
</a> <a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next"> <i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
Jinja for loops have counters so you can check if you are on the first iteration of the loop and make that one the active slide.
Something like this:
<div class="carousel-inner">
{% for content in porte %}
<div class="item{% if loop.index == 1 %} active{% endif %}">
<img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
</div>
{% endfor %}
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>
I want to crawl the HTML data(elements view using Chrome Developer Tools, not page view).
I crawled HTML data in Python.
- The following is tried code in Python.
#-*- coding: utf-8 -*-
import requests
url = 'http://m.entertain.naver.com/comment/list?page=2&gno=news117%2C0002600716&sort=newest&aid=0002600716&oid=117'
response = requests.get(url)
print(response.content)
But only Page view was crawled.
- The following is crawled Page view using the above Python code.
...
<div id="social-comment">
<ul class="cmt_lst">
<li class="ld"><span>로딩중입니다.</span></li>
</ul>
</div>
...
I want to crawl the Elements view using Python.
- The following is Elements view using Chrome Developer Tools(I want to crawl the HTML data).
...
<div id="social-comment">
<div class="sc_cmt_wrp" queryid="C1431107741291317890" style="display: block;">
<div id="tabArea">
<ul class="cmt_tab">
<li style="width:50%" class="on">
댓글 <span class="_count">22</span>
</li>
<li>댓글쓰기</li>
</ul> </div>
<div id="sortOptionArea" style="display: block;">
<div class="cmt_choice">
<input type="radio" name="scmt-sort" id="newest" class="_scmt_sort(newest) _nclicks(rpt.rct)">
<label for="newest" title="최신순" class="_scmt_sort(newest) _nclicks(rpt.rct) on" onclick="javascript:;">최신순</label>
<input type="radio" name="scmt-sort" id="oldest" class="_scmt_sort(oldest) _nclicks(rpt.old)">
<label for="oldest" title="과거순" class="_scmt_sort(oldest) _nclicks(rpt.old)" onclick="javascript:;">과거순</label>
<input type="radio" name="scmt-sort" id="likability" class="_scmt_sort(likability) _nclicks(rpt.rcm)">
<label for="likability" title="호감순" class="_scmt_sort(likability) _nclicks(rpt.rcm)" onclick="javascript:;">호감순</label>
<input type="radio" name="scmt-sort" id="replycount" class="_scmt_sort(replycount) _nclicks(rpt.rpl)">
<label for="replycount" title="답글많은순" class="_scmt_sort(replycount) _nclicks(rpt.rpl)" onclick="javascript:;">답글많은순</label>
</div> </div>
<div id="noticeArea"></div>
<div id="commentListPaginationArea"> <div class="_noComments _refreshable"></div> <div class="_commentClosed _refreshable"></div> <div id="commentItemArea" class="_refreshable"><ul class="cmt_lst"> <li id="scmt-item-1149361" class=""> ldo1**** <p> 서인영 아직도 존예...하....자야는데..</p> <div class="func"> <span class="time">2015.04.28 오후 11:49</span> <span class="mobile">모바일에서 작성</span> | 신고 </div> <div class="btn_area2"> <div> 답글 <strong>0</strong> </div> <div> 10 7 </div> </div> </li> <li id="scmt-item-1149360" class=""> dbgh**** <p> 1빠 댓글수채우기.</p> <div class="func"> <span class="time">2015.04.28 오후 11:49</span> <span class="mobile">모바일에서 작성</span> | 신고 </div> <div class="btn_area2"> <div> 답글 <strong>0</strong> </div> <div> 1 5 </div> </div> </li> </ul></div> <div id="paginationArea" style="display: block;"> <div class="cmt_pg"> <span class="cmt_pg_prev">이전</span> <span class="cmt_pg_btn uc_vh scmt-page-prev-off" style="display: none;"><span class="cmt_pg_prev">이전</span></span> <em class="cmt_pg_pg _pageInfo">21 - 22 <span class="u_vc">페이지 </span><span class="cmt_pg_total">/ <span class="u_vc">총 </span>22<span class="u_vc"> 페이지</span></span></em> <span class="cmt_pg_btn uc_vh scmt-page-next-off" style="display: inline-block;"><span class="cmt_pg_next">다음</span></span> <span class="cmt_pg_next">다음</span> </div></div> </div></div></div>
...
I don't know about Java script. If possible, Give tell me the easy way(Python, wget & curl in Linux).