I'm fairly new to Dojo toolkit, and well really like it. But I have a problem with nested tabs auto-refreshing. Here is a sample of my practice code where this problem exists. I'm currently concerned with this as it introduces a huge performance problem when the sub-tabs are plentiful; ex: my subtabs are the letters A-Z for initials for record retrieval.
I've tried all sorts of things to get around this, and all to no avail.
parseOnLoad=true/false
executeScripts=true/false
preload=true/false
nested=true/false
the parent page:
<div id="mainTabContainer" name="mainTabContainer" dojoType="dijit.layout.TabContainer" persist="true" style="margin:10px; width:800px; height:700px">
<div
id="tab1"
name="tab1"
dojoType="dojox.layout.ContentPane"
title="DblClick"
selected="true"
closable="false"
parseOnLoad="true"
executeScripts="true"
preload="false"
preventCache="true"
href="/dojo1.jsp?sParentTabID=tab1">
---
</div>
<div id="tab2" name="tab2" dojoType="dojox.layout.ContentPane" title="Read File" closable="false" executeScripts="true" parseOnLoad="true" href="/dojo2.jsp?sParentTabID=tab2">---</div>
<div id="tab3" name="tab3" dojoType="dojox.layout.ContentPane" title="Form get/post" closable="false" executeScripts="true" parseOnLoad="true" href="/dojo3.jsp?sParentTabID=tab3">---</div>
<div id="tab4" name="tab4" dojoType="dojox.layout.ContentPane" title="Accordions" closable="false" executeScripts="true" parseOnLoad="true" href="/dojo4.jsp?sParentTabID=tab4">---</div>
<div id="tab5" name="tab5" dojoType="dojox.layout.ContentPane" title="Nested Tabs" closable="false" executeScripts="true" parseOnLoad="true" href="/dojo5.jsp?sParentTabID=tab5">---</div>
<div id="tab6" name="tab6" dojoType="dojox.layout.ContentPane" title="Menu" closable="false" executeScripts="true" parseOnLoad="true" href="/dojo6.jsp?sParentTabID=tab6">---</div>
<div id="tab7" name="tab7" dojoType="dojox.layout.ContentPane" title="Simple Objects" closable="false" extractContent="true" executeScripts="true" parseOnLoad="true" href="/dojo7.jsp?sParentTabID=tab7">---</div>
<div id="tab8" name="tab8" dojoType="dojox.layout.ContentPane" title="Calendar" closable="false" extractContent="true" executeScripts="true" parseOnLoad="true" href="/dojo8.jsp?sParentTabID=tab8">---</div>
</div>
the child page (dojo5.jsp):
<div id="mainTabContainer_a4d6313" name="mainTabContainer_a4d6313" dojoType="dijit.layout.TabContainer" nested="true" style="width:95%;height:200px;">
<div id="tab1_a4d6313" name="tab1_a4d6313" dojoType="dijit.layout.ContentPane" title="First Tab" selected="true" closable="false" href="/test.jsp?tabID=tab1_a4d6313">---</div>
<div id="tab2_a4d6313" name="tab2_a4d6313" dojoType="dijit.layout.ContentPane" title="Second Tab" closable="true" href="/random.jsp?tabID=tab2_a4d6313">---</div>
<div id="tab3_a4d6313" name="tab3_a4d6313" dojoType="dijit.layout.ContentPane" title="AJAX Tab" closable="false" href="/random.jsp?tabID=tab3_a4d6313">---</div>
</div>
This is actually working correctly in Dojo 1.4, which is almost released (you can grab the release candidate now).
I did a bunch of work a few months ago, refactoring the code to avoid problems like this.
Related
I'm trying to style my blogs page for my website. I integrated my Contentful blog using API's and its all displayed correctly, but I just don't know how to target individual elements to style them individually. I would like to be able to
Style my main blogs page asa grid layout, attached is the specific grid layout I would like to achieve. I've also attached what my current main blogs page looks like now. I just don't know the code syntax to achieve this
I would like to style my individual (slug) blogs page simply adding space between each paragraphs, I jus don't know the code syntax to achieve this
I would like to be able to add tags to fetch the tags from my Contentful and display them on my blogs main page and on the individual slugs page
I've also attatched all the data that I have from contentful, could someone point me in the right direction for the syntax to use for the things I want to do? Thanks!
The grid layout I would like to achieve
My current grid layout
My blogs.js code
```import Navbar from "../components/Navbar/Navbar";
import Footer from "../components/Footer/Footer";
import { createClient } from "contentful";
import BlogCard from "../components/BlogCard/BlogCard";
export async function getStaticProps() {
const client = createClient({
space: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
previewacessToken: process.env.PREVIEW_ACCESS_TOKEN,
});
const res = await client.getEntries({ content_type: "menuItem" });
return {
props: {
blog: res.items,
},
};
}
export default function Blog({ blog }) {
console.log(blog);
return (
<div>
<div className="bg-[#F5f5f5] pt-16">
<div className="flex flex-col">
<header>
{" "}
<Navbar />
</header>
<main className="flex-1">
<div className="relative left-1/2 mt-12 min-w[100vw] translate-x-[-50%]">
<div className="relative mx-auto pb-30 lg:pb-30">
<div className="px-6 md:px-8.5 lg:px-40">
<div className="mx-auto max-w-container">
<div className="max-md:w-screen max-md:pr-5">
<div className="grid grid-cols-2 grid-rows-2 gap-10 mt-24 mb-32 h-full sm:grid-cols-2 sm:h-full sm:w-full md:mb-24 md:w-full max-lg:block max-md:mt-16">
{blog.map((menuItem) => (
<BlogCard key={menuItem.sys.id} menuItem={menuItem} />
))}
</div>
</div>
</div>
<Footer />
</div>
</div>
</div>
</main>
</div>
</div>
</div>
);
}```
My slug.js code
``` return (
<div>
<div className="bg-[#F5f5f5] pt-16">
<div className="flex flex-col">
<header>
<Navbar />
</header>
<main className="flex-1">
<div className="relative left-1/2 mt-12 min-w[100vw] translate-x-[-50%]">
<div className="relative mx-auto pb-30 lg:pb-30">
<div className="px-6 md:px-8.5 lg:px-40">
<div className="mx-auto max-w-container">
<div className="py-24 px-40 mx-auto leading-7 text-center0 md:mx-auto max-lg:px-0 max-md:px-0 max-md:py-16">
<p>{date}</p>
<p className="leading-7 text-left pb-10 max-md:-mb-5">
{author}
</p>
<h1 className="pb-20 w-full max-w-full h-auto text-5xl font-bold text-left md:w-full">
{title}
</h1>
<Image
className="pb-20 w-full max-w-full h-auto leading-7 max-md:-mt-8 max-md:pb-5"
src={"https:" + image.fields.file.url}
width={image.fields.file.details.image.width}
height={image.fields.file.details.image.height}
alt=""
/>
<div>
<div>{documentToReactComponents(text)}</div>
<div className="pb-10">
{documentToReactComponents(text.content.paragraph)}
</div>
</div>
</div>
<Footer />
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
);
}
```
My Individual blog card code
````export function BlogCard({ menuItem }) {
const { title, slug, date, author, image, shortDescription } =
menuItem.fields;
return (
<Link href={"/Blogs/" + slug}>
<div>
<Image
src={"https:" + image.fields.file.url}
width={image.fields.file.details.image.width}
height={image.fields.file.details.image.height}
alt=""
/>
</div>
<div className="mr-auto">
<div className="content">
<div className="info">
<h2>{title}</h2>
<p className="pb-5">{shortDescription}</p>
<p className="pb-2">{date}</p>
<p>{author}</p>
</div>
</div>
</div>
</Link>
);
}
export default BlogCard;```
I am using scrapy shell just to make sure my selectors for my spider are correct. I am able to get all other sections I need except this one p tag that contains the cross ref part numbers. I am scraping from this particular page here
When I try response.css('div.col-1-2-2' > div.rpr-help m-chm > div > p::text').extract() it returns blank
When I try response.css('div > p::text').extract() the results have the section I am looking for plus a bunch of data I do not want.
I have a feeling this is going to be a super easy answer, but I have no idea what I am missing here
This is a snippet of the html section of the page I am trying to scrape, the last 'p' tag starting with Part Number
<div class="col-1-2-2">
<div id="img-detail" style="text-align:center;">
<div id="img-detail-main">
<a id="ctl00_cphMain_imgenlarge" rel="nofollow" href="/detail-img.aspx?id=3094537&i=" class="cboxElement"><img id="ctl00_cphMain_iMain" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_01_l.jpg" style="border-width:0px;outline:none;">
<div class="img-overlay" style="display:none;"><img src="/images/play.png" style="height:107px;"></div>
<div id="main-text-overlay" style="display:none;"></div>
</a>
</div>
<div class="img-help">Click image to open expanded view</div>
<div id="img-detail-thumb">
<div class="a-button a-active">
<img id="ctl00_cphMain_rImgTh_ctl01_imgTh" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_01_tt.jpg" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl02_imgTh" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_02_tt.jpg" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl03_imgTh" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_03_tt.jpg" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl04_imgTh" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_04_tt.jpg" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl05_imgTh" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_05_tt.jpg" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl06_imgTh" class="diagram" data-dcmt="Clutch assembly AP3094537 is number 5 on this diagram. This is to give you an idea of the appearance and the location of the part. Your appliance model may be slightly different." src="https://483cda5f439700fab03b-6195bc77e724f6265ff507b1dc015ddb.ssl.cf1.rackcdn.com/0029384112_4.gif" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl07_imgTh" class="video" src="https://img.youtube.com/vi/7RS1l6t8efc/hqdefault.jpg" style="border-width:0px;">
<div class="img-overlay"><img src="/images/play.png"></div>
</div>
</div>
</div>
<div class="rpr-help m-chm">
<div class="header">
<h2 class="h6">Repair Help</h2>
</div><!-- /end .header -->
<div class="inner m-bsc">
<ul>
<li>Repair Video</li>
<li>Repair Q&A</li>
</ul>
</div>
<div>
<br>
<span class="h4">Cross Reference Information</span><br>
<p>Part Number 285785 (AP3094537) replaces 2670, 285331, 285380, 285422, 285540, 285761, 285785VP, 3350015, 3350114, 3350115, 3351342, 3351343, 387888, 388948, 388949, 3946794, 3946847, 3951311, 3951312, 62699, 63174, 63765, 64176, AH334641, EA334641, J27-662, LP326, PS334641.
<br>
</p>
</div>
</div>
</div>
Hope this works
response.xpath('//div[#class="col-1-2-2"]//p/text()').extract_first()
You can try this also, response.xpath('(//div[#class="rpr-help m-chm"]//p//text())[1]').get()
A work's client has reported an issue in our application when working with IE11.
On an specific form, sometimes, when opening it, if you type, the typed text won't show. If I open developer tools, it suddenly shows.
This is the rendered html belonging to that form:
<div class="col-sm-6 ">
<div class="form-group" data-ng-show="myform.txtPropietario.visible">
<label class="col-md-4 control-label my-show-hide-animation">Propietario:</label>
<div class="col-md-8">
<div class=" ">
<input name="txtPropietario" class="form-control text-left ng-pristine ng-valid" input-alpha-numeric="ES" onblur="this.value=this.value.toUpperCase();" data-ng-model="myform.values.txtPropietario" data-ng-disabled="myform.txtPropietario.disabled" type="text" step="0.01" maxlength="50" placeholder=" "></div>
<ul class="errores my-show-hide-animation ng-hide" data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$invalid && myform.procesado"><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.required" class="ng-hide"><span>Campo obligatorio</span></li><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.pattern" class="ng-hide"><span>El formato del dato ingresado no es válido.</span></li>
</ul>
</div>
</div>
</div>
The app work's over AngularJs and html is built over Bootstrap 3.
Any idea why is this happening?
It's hard to tell without seeing the CSS, however i encountered this issue a while back and fixed it by setting the height of the input box.
My theory is that IE didn't think there was enough height to show the text in the font size I had specified.
For example
<input type="text" id="example" style="height: 40px" />
I hope this helps.
I'm currently struggling while implementing a Spider for a Web Application, because my pages are not well structured at all. There're fields on the page, but sometimes they don't appear, and it's difficult to distinguish those because they only use class, not id as identifier. Is there a method to optimize the way we get the data in pages?
Below, an example of one page to crawl :
<div class = 'view-activity-field-wrapper even' style = 'display:none' >
<div class="view-activity-label">Status Notes <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="stickyStatusNotes" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>
<div class = 'view-activity-field-wrapper odd' style = 'display:none' >
<div class="view-activity-label">Relevant Question <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="stickyRelevantQuestion" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>
<!-- KEEP VALUE PROVIDED HERE -->
<div class = 'view-activity-field-wrapper odd' style = 'display:none' >
<div class="view-activity-label">Value Provided <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="viewvalueprovided" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>
<div id="Form_Scope1" class="Form_Scope topLevel CoachView CoachView_show" data-eventid="" data-viewid="Form_Scope1" data-config="config1" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_a30ea40f_cb24_4729_a02e_25dc8e12dcab.Form_Scope">
<div id="Action_Group2" class="Action_Group topLevel CoachView CoachView_show" data-eventid="" data-viewid="Action_Group2" data-config="config9" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_a30ea40f_cb24_4729_a02e_25dc8e12dcab.Action_Group">
<div id="div_5_1" class="ContentBox" data-view-managed="true" style="display: none;"> </div>
<div class="s-action-group clearfix sticky">
<div class="l-nodeId" style="">QTO001_N002A</div>
<div class="p-action-group">
<div id="div_5_1_1" class="Action CoachView CoachView_show" data-eventid="boundaryEvent_7" data-viewid="Action3" data-config="config15" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_a30ea40f_cb24_4729_a02e_25dc8e12dcab.Action">
<button id="div_5_1_1-lnk" class="p-primary-btn btn btn-primary" type="button" title="" data-original-title="" style="background-color: rgb(56, 168, 182);">
<i class="icon-indent-right"></i>
<span>Submit quote</span>
</button>
<a href="#action" style="display: none;">
</div>
How to click on button "Submit Quote" its
1.id="div_5_1_1-lnk" = one page of application
2.id ="div_9_1_1-lnk" = Another page of application
is dynamically changing in different pages of applications.
I have tried by xpath expression by position or relative path it is not working please let me know any other option available for this?
The following selector would work,
driver.findElement(By.cssSelector("div.Action button[id$='lnk']"));
Here '$' indicates that the id of button should end with value 'lnk'.
The equals sign in attribute selectors may be prefaced by other characters which alter the meaning a bit.
Remember that classes and ID's are attributes too, and can be used with attribute selectors.
Refer this for more info.
Try driver.findElement(By.cssSelector("button[id^='div_']"));
Click it using the class name
options=driver.find_elements_by_class_name("icon-indent-right")
for option in options:
if(option.text=="Submit quote"):
option.click()