I'm experiencing some performance issues on a medium-sized result set. The result set is a list of documents, each with a small array of properties (metadata like created, modified, tags, owner_name, etc.) that is hidden until the user clicks a show/hide button.
In the template, I'm using a lot of ng-shows, and when I comment all of these out, the performance improves dramatically, so I was wondering if there is a way to ask Angular not to compile any of this, not to render any of the ng-repeats until the user clicks the properties show/hide button. Or is there a more idiomatic way of going about this?
Update: actually, it isn't when I comment out the ng-shows, it seems to be when I comment out the entire block of html, making it seem like accessing properties of an object is the cause of the performance hit. Why?
Template:
<div class="property" ng-show="property.display && property.value && property.viewable" ng-repeat="property in item.properties()">
<span class="property-name">{{property.external}}:</span>
<span class="property-value" ng-show="property.type == 'string' || property.type == 'integer' || property.type == 'float'">
<span ng-hide="property.edit">{{property.value}}</span>
<span ng-show="property.edit">
<input name="{{property.internal}}" id="{{property.internal}}{{item.id()}}" />
<span class="edit-button"><a ng-click="simpleUpdate(item, property)">save</a></span>
<span class="edit-button"><a ng-click="editProperty(item, property)">cancel</a></span>
</span>
<span class="edit-button" ng-show="property.editable && !property.edit"><a ng-click="editProperty(item, property)">edit</a></span>
</span>
<span class="property-value" ng-show="property.type == 'stringArray'">
<span ng-hide="property.edit">{{property.value | join:', '}}</span>
<span ng-show="property.edit">
<textarea name="{{property.internal}}" id="{{property.internal}}{{item.id()}}" class="keywords" rows="1" cols="80"></textarea>
<span class="edit-button"><a ng-click="simpleUpdate(item, property)">save</a></span>
<span class="edit-button"><a ng-click="editProperty(item, property)">cancel</a></span>
</span>
<span class="edit-button" ng-show="property.editable && !property.edit"><a ng-click="editProperty(item, property)">edit</a></span>
</span>
<div class="clearboth"> </div>
</div>
Related
Hi Im struggling to get the value of each radio button groups. The functions is about getting answers from different questions.
{{form.answer_ids}}
<div v-for="ans in answers" :key="ans.id">
<div v-if="ans.question_id == question.id">
<div class="p-2 border rounded border-secondary m-2" >
<input
style="cursor:pointer;"
class="form-check-input m-2"
type="radio"
:name="ans.question_id"
:value="ans.id"
v-model="form.answer_ids"/>
<h5 class="ml-4 p-1" v-html="ans.description"> </h5>
</div>
</div>
</div>
<script>
data() {
return {
form: this.$inertia.form({
answer_ids:[]
}),
}
},
</script>
When there is v-model, the radio is not grouping yet returning only 1 value (not array), On the other hand, When I Remove v-model, The grouping is working but unable to get the data.
How can i possibly achieve this? Just taking the checked radio answer ids is enough for me.
Thank you very much and have a good day!
Python/Plone: Getting all keywords and showing for EDIT content is very slow (keywords.pt)
No of keywords is 20000 so traversing these huge no of keywords is taking one minute.
Keywords which no has grown large is taking time....any solution is welcomed
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
i18n:domain="plone">
<head><title></title></head>
<body>
<!-- Keyword Widgets -->
<metal:view_macro define-macro="view"
tal:define="kssClassesView context/##kss_field_decorator_view;
getKssClasses nocall:kssClassesView/getKssClassesInlineEditable;">
<div metal:define-macro="keyword-field-view"
tal:define="kss_class python:getKssClasses(fieldName,
templateId='widgets/keyword', macro='keyword-field-view');
uid context/UID|nothing"
tal:attributes="class kss_class;
id string:parent-fieldname-$fieldName-$uid">
<ul metal:define-slot="inside">
<li tal:repeat="item accessor"
tal:content="item"/>
</ul>
</div>
</metal:view_macro>
<metal:define define-macro="edit">
<metal:use use-macro="field_macro | context/widgets/field/macros/edit">
<tal:define metal:fill-slot="widget_body" define="contentKeywords accessor;
allowedKeywords python: context.collectKeywords(fieldName, field.accessor, widget.vocab_source);
site_props context/portal_properties/site_properties|nothing;
format widget/format | string:select;
allowRolesToAddKeywords site_props/allowRolesToAddKeywords|nothing;">
<div tal:condition="allowedKeywords" id="existingTagsSection">
<tal:comment tal:replace="nothing">
dl semantically associates selector name with values
</tal:comment>
<dl id="existingTags">
<label for="subject">
<dt id="existingTagsTitle">uuuuuuuuuuuuuuuuuuuuuuuuu
<span i18n:translate="label_select_existing_tags">
Select from existing tags.
</span>
</dt>
<span id="existingTagsHelp" class="formHelp" i18n:translate="label_existingTagsHelp">
Use Control/Command/Shift keys to select multiple tags.
</span>
<tal:comment tal:replace="nothing">
Type-to-skip functionality with javascript enabled
could be described as
"Hover and type the first letter to skip through tags."
However, on touch-driven devices, vertical hover typically
scrolls the page, so horizontal hover is necessary to enable this.
Alternatively, clicking any of the tags also enables type-to-skip.
So the help could technically be extended to handle this special case
as "Hover or click and type the first letter to skip through tags.",
but I think this would be confusing to the majority of users.
The decision at this point is to not try to explain any of this on the page.
</tal:comment>
</label>
<div class="visualClear"><!-- --></div>
<select id="predefined_subjects"
name="predefined_subjects:list"
size="14"
multiple="multiple"
tal:condition="python:format!='checkbox'"
tal:attributes="id string:${fieldName};
name string:${fieldName}_existing_keywords:list;">
<option value="#" tal:repeat="keyword allowedKeywords"
tal:content="keyword" tal:attributes="value keyword;
selected python:test(context.unicodeTestIn(keyword, value), 'selected', None)">
An existing tag
</option>
</select>
<tal:comment tal:replace="nothing">
These spans are hidden by css, and used by the JavaScript called below.
</tal:comment>
<span id="noTagsSelected" i18n:translate="label_noTagsSelected">No tags currently selected.</span>
<span id="oneOrMoreTagsSelected" i18n:translate="label_oneOrMoreTagsSelected">% tags currently selected.</span>
<tal:comment tal:replace="nothing">
Call js to modify this widget with both a scrollbar and checkboxes.
There may be a better place to put this js call;
examples exist in others' widget.py and js files,
but having it here covers cases where some but not all select elements
call js to be modified.
Todo: The #subject should eventually refer to the template variable.
</tal:comment>
<script type="text/javascript">
jq(document).ready( function() {
jq("#subject").multiSelect();
});
</script>
<input type="hidden"
value=""
tal:condition="not:field/required | nothing"
tal:attributes="name string:${fieldName}_existing_keywords:default:list" />
<tal:loop tal:repeat="keyword allowedKeywords"
tal:condition="python:format=='checkbox'">
<div class="ArchetypesKeywordValue" id=""
tal:attributes="id string:archetypes-value-${fieldName}_${repeat/keyword/number}">
<input class="blurrable"
tal:attributes="
type string:checkbox;
name string:${fieldName}_existing_keywords:list;
id string:${fieldName}_${repeat/keyword/number};
checked python:test(context.unicodeTestIn(keyword, value), 'checked', None);
value keyword" />
<label
tal:content="keyword"
tal:attributes="for string:${fieldName}_${repeat/keyword/number}">
An existing tag
</label>
</div>
</tal:loop>
</dl>
<dl id="selectedTagsSection">
<dt id="selectedTagsHeading" class="formHelp"></dt>
<dd id="selectedTags"></dd>
</dl>
<div class="visualClear"><!-- --></div>
</div>
<!-- <tal:condition condition="python:not widget.roleBasedAdd or (allowRolesToAddKeywords and [role for role in user.getRolesInContext(context) if role in allowRolesToAddKeywords])">-->
<dl id="newTagsSection">
<label for="subject_keywords">
<dt id="newTagsTitle">
<span i18n:translate="label_create_new_tags">
Create and apply new tags.
</span>
</dt>
<span id="newTagsHelp" i18n:translate="label_newTagsHelp" class="formHelp">
Enter one tag per line, multiple words allowed.
</span>
</label>
<br />
<dd id="newTags">
<textarea
id="entered_subjects"
name="subject:lines"
rows="4"
tal:attributes="id string:${fieldName}_keywords;
name string:${fieldName}_keywords:lines;"
tal:define="subject python:[item for item in value if not context.unicodeTestIn(item,allowedKeywords)]"
tal:content="python:'\n'.join(subject)">
A new tag
</textarea>
</dd>
</dl>
<!-- </tal:condition>-->
</tal:define>
</metal:use>
</metal:define>
<div metal:define-macro="search">
<div metal:use-macro="context/widgets/keyword/macros/edit">
</div>
</div>
</body>
</html>
I fear is a know issue of the old Plone 4 keyword widget.
You should probably change the widget.
An add-on like eea.tags should help.
You can also try to use Plone 5 widget from plone.app.widgets, but this probably it's a more complex task (and not without side effects).
<div class="btm0">Question 1
</div><span class="small"></span>
<span id="form2">
<span id="form2:j_idt4598" style="display: none;"></span><ul id="form2:radioButton" class="controls full-width">
<li>
<input class=" firepath-matching-node" name="form2:radioButton" id="form2:radioButton:0" type="radio"><label for="form2:radioButton:0"> Yes</label></li>
<li>
<input class=" firepath-matching-node" name="form2:radioButton" id="form2:radioButton:1" type="radio"><label for="form2:radioButton:1"> No</label></li>
</ul>
<span id="form2:errMessage"></span>
</span>
<div class="btm0">Question 2
</div><span class="small"></span>
<span id="form1">
<span id="form1:j_idt4617" style="display: none;"></span><ul id="form1:radioButton" class="controls full-width">
<li>
<input class=" firepath-matching-node" name="form1:radioButton" id="form1:radioButton:0" type="radio"><label for="form1:radioButton:0"> Yes</label></li>
<li>
<input class=" firepath-matching-node" name="form1:radioButton" id="form1:radioButton:1" type="radio"><label for="form1:radioButton:1"> No</label>
I have this above simple page having a label and option button.
I want to select the 'Question 1 - Yes' using an XPath.
Is there an easy way to create a unique XPath, which will select the correct 'YES' option (which could be Question 1 or Question 2)? I don´t want to hardcode the XPath.
I tried out a partial solution but I only get the second 'YES' option selected:
//*[contains(text(),'Question 1')]/following::label[contains(text(),'Yes')]
Not sure if this is what you are asking, but if you want to limit the scope of your XPath expression to just the 2 label elements after the div, you can use the position() function:
//div[contains(text(),'Question 1')]/following::label[position() <= 2 and contains(text(),'Yes')]
If this is not what you are looking for, please try to clarify your question, perhaps by providing some sample results.
I was able to get some solution after try, but really not happy with the answer as I have to to change my xpath based on YES or NO of option button
for YES :
//*[contains(text(),'Question 1')]/./following::li[1]/label[contains(text(),'Yes')]
for NO :
//*[contains(text(),'Question 1')]/./following::li[2]/label[contains(text(),'Yes')]
As you see in the above solution, I have to toggle the values of li[].
But with above solution, I am able to pinpoint the option.
I am trying to pull a link from a page that is in a formal I can't seem to find by simply googling... it might be simple but xpath is not my area of expertise
I am using c# and trying to pull the link and just write it to the console to figure out how to get the link
here is my C# code
var document = webGet.Load("http://classifieds.castanet.net/cat/vehicles/cars/0_-_4_years_old/");
var browser = document.DocumentNode.SelectSingleNode("//a[starts-with(#href,'/details/')]");
if (browser != null)
{
string htmlbody = browser.OuterHtml;
Console.WriteLine(htmlbody);
}
the html code section is
<div class="last">…</div>13»
<select name="sortby" class="sortby" onchange="doSort(this);">
<option value="">Most Recent</option>
<option value="of" >Oldest First</option>
<option value="mw" >Most Views</option>
<option value="lw" >Fewest Views</option>
<option value="lp" >Lowest Price</option>
<option value="hp" >Highest Price</option>
</select><div style="clear:both"></div>
</div>
<br /><br /><br />
<a href="/details/2008_vw_gti/1454282/" class="prod_container" >
<h2>2008 VW GTi</h2>
<div style="float:left; width:122px; z-index:1000">
<div class="thumb"><img src="http://c.castanet.net/img/28/thumbs/1454282-1-1.jpg" border="0"/></div>
<div class="clear"></div>
mls
</div>
<div class="descr">
The most fun car I have owned. Dolphin Grey, 4 door, Dual Climate control, DRG Transmission with paddle shift. Leather...
</div>
<div class="pdate">
<p class="price">$19,000.00</p>
<p class="date">Kelowna<br />Posted: Oct 15, 2:54 PM<br />Views: 349</p>
</div>
<div style="clear:both" ></div>
<div class="seal"><img src="/images/bookmark.png" /></div>
</a>
<a href="/details/price_drop_gorgeous_rare_white_2009_honda_accord_ex-l_coupe/1447341/" class="prod_container" >
<h2>PRICE DROP!!! Gorgeous Rare White 2009 Honda Accord EX-L Coupe </h2>
<div style="float:left; width:122px; z-index:1000">
<div class="thumb"><img src="http://c.castanet.net/img/28/thumbs/1447341-1-1.jpg" border="0"/></div>
<div class="clear"></div>
sun2010
</div>
<div class="descr">
the link I'm trying to get is the "/details/2008_vw_gti/1454282/" part. THanks
HTML isn't XML.
XPath is a tool for navigating through XML documents, however HTML does not conform to XML requirements. The HTML you've linked about isn't well formed XML, and as such XPath won't work.
You either need to look at using an HTML to XML convertor, and then adding the output of that conversion to your question to write XPath against, or investigate using a different tool for the job. I'd suggest doing a Google search for "C# HTML scrapers", but I'm not familiar with .Net so I can't offer a narrower option.
Try the following Xpath expression :
//a[#class="prod_container"]/#href
I'm trying to use sIFR to create a tag cloud effect for a homepage I'm working on. There are 4 lines of text, with various font sizes and font colours within each line.
I suspect sIFR purists would say this creates too many movie clips to be safe, but it really is the effect we're looking for and it's the best option we have which is good for SEO and will degrade gracefully. If we can get it working, that is...
The problem I'm having is that the colours, font sizes, etc. all display just fine, but there seems to be excessive padding around the text, creating the effect that the line-height is nearer 200% than 200% or 1 em. I've got it working OK in Internet Explorer 7 and some other browsers, but Firefox seems to be displaying everything all wrong!
Any ideas and help appreciated ;)
<h1 style="font-weight:600;">
<span class="titleleft">Content </span>
<span class="titleright">Formula:</span>
<span class="focussed">Focused </span>
<span class="creative">creative </span>
<span class="and">and </span>
<span class="targeted">targeted </span>
<span class="content">content </span>
<span class="for">for </span>
<span class="bluechip">blue chip </span>
<span class="global">global </span>
<span class="websites">websites </span>
<span class="and2">and </span>
<span class="intranets">intranets. </span>
<span class="wedeliver">We deliver </span>
<span class=success>success </span>
<span class="witha"> with a </span>
<span class="degree">360 degree </span>
<span class="approach">approach to online</span><br />
<span class="communications">communications.</span>
</h1>
Sample configuration line:
sIFR.replace(arial,
{selector: '#main_content_left_home>h1>span.titleleft'
,css: '.sIFR-root { color: #000000; font-weight:bold;letter-spacing: -1;}'
,tuneWidth: (+10)
});
sIFR.fixWrap = false;
sIFR.fitExactly = true;
sIFR.useStyleCheck = false;
sIFR.useDomLoaded = false;
sIFR.preserveSingleWhitespace = true;
sIFR.autoInitialize = true;
sIFR.forceWidth = true;
sIFR.repaintOnResize = true;
Check whether the extra size is inside the Flash movie, or around it. In the latter case, you'll have to resort to CSS tweaking.
In the former case, check out the tuneHeight / tuneWidth and offsetTop / offsetLeft arguments for sIFR.replace(). These let you change position of the text inside the Flash movie and let you change how much margin the Flash movie leaves around the text.
This is sometimes necessary because the dimensions of the text are reported incorrectly by Flash.