When I click on the first link pjax fires with the correct content. However, when I select the second link pjax adds to the alread select link like this "http://localhost.com/name/test1/name/test2/" then returns to the index page. I am guessing because of the addition of the second link. How do I resolve this problem?
<li><a data-pjax='#content' href="name/test1/"> test1 </a></li>
<li><a data-pjax='#content' href="name/test2/"> test2</a></li>
<li><a data-pjax='#content' href="name/test3/"> test3 </a></li>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('a[data-pjax]').pjax({container:'#content',timeout:15000});
});
});
</script>
Probably because you are using relative path in the links, try changing it to:
<li><a data-pjax='#content' href="/name/test1/"> test1 </a></li>
<li><a data-pjax='#content' href="/name/test2/"> test2</a></li>
<li><a data-pjax='#content' href="/name/test3/"> test3 </a></li>
By adding / at the beginning of your href attributes.
Assuming you started at /, when you click on the first link, pjax changes the page location windows.location to /name/test1/. A link to name/test2/ on page /name/test1/ means /name/test1/ + name/test2/ => /name/test1/name/test2/, since it is a relative path.
Related
I would like to click open navigation bar element ("Residential Detached") shown here:
Here's the HTML behind this element:
<div id="app_banner_menu">
<ul class="AspNet-Menu">
<li><a data-bind="" url="/ParagonLS/Home/Page.mvc" tabDescription="Home" subTabDescription="" subTabMaxAllowed="0" targetEx="" rel="" subTabGroup="false" subTabGroupAdd="false" subTabStartIndex="" subTabGroupClose="false" fullWindow="False" hideAddressBar="False"><span id="home-nav" class="MenuIcons homeButton"></span></a></li>
<li>
<span id="search-nav" class="MenuIcons searchButton"></span>
<div>
<ul>
<li>
Search By Class
<ul>
<li><a data-bind="" url="/ParagonLS/Search/Property.mvc/Index/1" tabDescription="Residential Detached" subTabDescription="Criteria" subTabMaxAllowed="3" targetEx="" rel="" class=" SearchByClass1 " subTabGroup="true" subTabGroupAdd="true" subTabStartIndex="0" subTabGroupClose="true" fullWindow="False" hideAddressBar="False">Residential Detached</a></li>
<li><a data-bind="" url="/ParagonLS/Search/Property.mvc/Index/2" tabDescription="Residential Attached" subTabDescription="Criteria" subTabMaxAllowed="3" targetEx="" rel="" class=" SearchByClass2 " subTabGroup="true" subTabGroupAdd="true" subTabStartIndex="0" subTabGroupClose="true" fullWindow="False" hideAddressBar="False">Residential Attached</a></li>
This is the code I wrote to accomplish the same, but it doesn't work.
resedential_detached_class = browser.find_element_by_xpath("//div[contains(text(),'Residential Detached')]").click()
How can I pick just that element and click open it? It will lead me to a new page.
Have you try this selenium tag:
resedential_detached_class = browser.find_element_by_link_text('Residential Detached').click()
I'd like to get the information I want from the homepage below.
http://ticket.cgv.co.kr/Reservation/Reservation.aspx?MOVIE_CD=&MOVIE_CD_GROUP=&PLAY_YMD=&THEATER_CD=&PLAY_NUM=&PLAY_START_TM=&AREA_CD=&SCREEN_CD=&THIRD_ITEM=#
To be exact, I want to get all the information of li tag in movie-list nano has-scrollbar-y
<div class="movie-select">
<div class="movie-list nano has-scrollbar-y" id="movie_list">
<li class="rating-15" data-index="0" movie_cd_group="20018753" movie_idx="81626">
*************************
**the data that i want!**
*************************
<li class="rating-15" data-index="1" movie_cd_group="20018753" movie_idx="81626">
*************************
**the data that i want!**
*************************
...
...
<li class="rating-15" data-index="100" movie_cd_group="20018753" movie_idx="81626">
*************************
**the data that i want!**
*************************
However, when i use the below code to crawling all the information on this homepage. i cannot get data within a particular tag(div class 'list-list').
url = 'http://ticket.cgv.co.kr/Reservation/Reservation.aspx?MOVIE_CD=&MOVIE_CD_GROUP=&PLAY_YMD=&THEATER_CD=&PLAY_NUM=&PLAY_START_TM=&AREA_CD=&SCREEN_CD=&THIRD_ITEM=#'
r = requests.get(url)
soup = BeautifulSoup(r.text)
when i check html page text that get from request.get,
there was no data under
like
</div>
<div class="movie-list nano has-scrollbar-y" id="movie_list">
<ul class="content scroll-y" onscroll="movieSectionScrollEvent();"></ul>
</div>
but when i check chrome , All the information is there!
<div class="movie-list nano has-scrollbar-y" id="movie_list">
<ul class="content scroll-y" onscroll="movieSectionScrollEvent();" tabindex="-1">
<li class="rating-15" data-index="0" movie_cd_group="20018753" movie_idx="81626">
<a href="#" onclick="return false;">
<span class="icon"> </span>
<span class="text">바이스</span><span class="sreader"></span></a></li>
<li class="rating-15" data-index="1" movie_cd_group="20019110" movie_idx="81721">
<a href="#" onclick="return false;">
<span class="icon"> </span><span class="text">미성년</
...
So this is my Question.
how can i get all data within from this homepage?
The data is loaded via javascript.
1) Either use a method like selenium which will allow this rendering to occur before attempting to access
2) Use dev tools and examine the POST XHR to this http://ticket.cgv.co.kr/CGV2011/RIA/CJ000.aspx/CJ_HP_SCHEDULE_TOTAL_DEFAULT and see if it provides the info you want and can be replicated with requests
Your issue is the onclick event. You need to interact with the javascript on that page before beautiful soup can parse it. See this previous answer https://stackoverflow.com/a/29385645/10981724
I have a basical layout with a sidebar. I want to hide the sidebar when I am on /users/profile. How can I do it using the if helper? Is there a way to get the current file name?
Here is the code:
<div class="wrapper">
{{#if user}}
<nav id="sidebar">
<div class="sidebar-header">
<h3>Options</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<h1>
Home
</h1>
</li>
<li>
<h1>
Chat
</h1>
</li>
<li>
<h1>
About us
</h1>
</li>
</ul>
</nav>
{{else}}
{{/if}}
With the current code if a user is logged in the sidebar is showed , otherwise it is hidden. I want the same behaviour also if I am on users/profile.
Your routing is handled by Node.js. Somewhere in your Node.js you probably have instructions on what to do when the user opens /users/chatlist or /users/search, e.g. you select which template to render. Once you know the request is for route /users/profile, you use a JSON payload for your handlebars to properly render the page. You can customize that payload as you wish, including adding some helper fields. For example it may look like:
{
user: { ... },
sidebar: {
visible: false
}
}
Then inside your template, you may use it for a conditional check, like:
{{#if sidebar.visible}}
<nav id="sidebar">
...
</nav>
{{/if}}
I am using hot towel SPA template.
i am trying to use at Bootstrap Hover Dropdown Plugin but hover over drop down effect never triggers.
nav.html contains
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">My Account</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Change Email</a></li>
<li><a tabindex="-1" href="#">Change Password</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Logout</a></li>
</ul>
Steps to reproduce.
1) create Application using Hot Towel SPA template
2) add bootstrap-hover-dropdown.min.js in vendors bundel
3) replace the nav.html code with the code above.
same nav.html code pasted above applicationHost div does trigers hover drop down effect. But when injected using durandal. it doesn't work.
Here is what you need to do to have the dropdown hover working:
in your nav.html file: remove the last line <script src="../../TemplateFiles/assets/hover-dropdown/bootstrap-hover-dropdown.js"></script>not needed here.
in your shell.js file: add the following function:
function compositionComplete() {
$('[data-hover="dropdown"]').dropdownHover();
}
And also modify your shell var as below:
var shell = {
activate: activate,
compositionComplete: compositionComplete,
router: router
};
That's all!
The trick here: in the compositionComplete function I 'force' the initialisation of the dropdown hover effect. If you take a look in the plugin source file, at the end of the file you have this:
$(document).ready(function() {
// apply dropdownHover to all elements with the data-hover="dropdown" attribute
$('[data-hover="dropdown"]').dropdownHover();
});
In a more 'classic' situation you have nothing to do (except reference the source plugin). The problem with Durandal is that this is not triggered so I do it in the compositionComplete.
Hope I'm clear.
I am trying to achieve keeping the menu open on the tab selected as the page reloads to the link clicked.
Here is the html code:
<nav>
<ul id="nav">
<li><img id="icon" src="icons/setup(48).png" />Setup
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</li>
<li><img id="icon" src="icons/userProfile_48.png" />User Maintenance
</li>
<li><img id="icon" src="icons/projects.png" />Projects
<ul>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
<li>Project Title</li>
</ul>
</li>
</ul>
</nav>
Here is the jQuery:
$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(300);
$("#nav li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(300);
$(this).addClass("open");
}
else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(300);
}
});
});
At the moment it is working as it should when selecting a link and redirecting to that page but it just does not keep the menu tab open on the new page it loaded.
Some help will be great. Thanks
This part is to assist with keeping the menu open on page load.
<script>
$(document).ready(function () {
$("#nav li a").click(function (e) {
if ($(this).next("ul").length > 0) {
e.preventDefault();
var navInner = $(this).next("ul");
if (navInner.is(":visible")) {
}
}
});
});
You will need to pass the information which tab was open to the new page and reopen the tab once the page has loaded.
Two options come to mind:
Attach the information to the link by registering an onclick-Event to modify it before the browser starts navigating to the target URL.
Save the information in a session cookie you can access from Javascript.
I use the same script.
This is how I've solved this:
<li>Articles
<ul>
<li>Manager</li>
<li>Categories</li>
<li>Featured</li>
<li>Add</li>
</ul>
</li>
And add the line to JQuery script:
$(document).ready(function(){
$("#nav > li > a.open").next("ul").show(); // add this line here
$("#nav > li > a").on("click", function(e){ ............
You can also add some class to parent <li> containing <ul> you want to have expanded
for expample articles, and then in head:
<script type="text/javascript">
$(document).ready(function(){
$(".menu-list > li > a.articles").next("ul").show();
});
</script>
I dont know if this is correct way, but it works ;)