How to get the value of the data item to use in {{if}}? - jquery-templates

I am trying to get the value of the data item to use in a {{if}} tag, but cannot get it to work. So, the question is how do we get that value? You can see full code here http://jsfiddle.net/epitka/BhYvh/
<script id="contentHeaderTemplate" type="text/x-jquery-tmpl">
{{if($data.Id===1)}} Create New Order{{else}}Edit Order {{/if}}
<br />
</script>

Drop the parentheses.
{{if $data.Id === 1 }}
http://jsfiddle.net/mattball/KdqZF/
See also the {{if}} template tag API page.

You don't need the parentheses in that if statement. Try:
{{if $data.Id === 1 }}

Related

Getting all tag elements in an array with SwiftSoup

I worked on a project in python using BeautifulSoup for parsing an Html doc and adding ruby and rt tags to each string. Recently I've been working on a similar project for a personal IOS app. I found SwiftSoup which was similar but ran into a problem parsing a tag which I was able to do beautifully using BeautifulSoup. In Beautiful soup I am able to get a tag like the one below
<p id="p6" data-pid="6" data-rel-pid="[41]" class="p6">
<span class="parNum" data-pnum="1"></span>
This is a(<span id="citationsource2"></span><a epub:type="noteref" href="#citation2">link</a>)to some website。
</p>
using .content from BS4 I am able to get the tags into an array like this
['\n', <span class="parNum" data-pnum="1"></span>, '\n This is a(', <span id="citationsource2"></span>, <a epub:type="noteref" href="#citation2">link</a>, ')to some website。\n ']
After i go through the array and check if the children tags have text or if the element in the array is a text element and i just append the ruby tags. The result is this
<p id="p6" data-pid="6" data-rel-pid="[41]" class="p6">
<span class="parNum" data-pnum="1"></span>
<ruby>This<rt>1</rt></ruby><ruby>is<rt>2</rt></ruby> <ruby>a<rt>3</rt></ruby>(<span id="citationsource2"></span><a epub:type="noteref" href="#citation2"><ruby>link<rt>4</rt></ruby></a>)<ruby>to<rt>5</rt></ruby> <ruby>some<rt>6</rt></ruby> <ruby>website<rt>7</rt></ruby>。
</p>
With SwiftSoup I parse the Document doing this since it doesn't have a similar method like the BS4 .content
let soup:Document = try! SwiftSoup.parse(html)
let elements:Elements = try! soup.select("p")
for j in try! elements.html(){
print(try! j)
//Doesn't work prints out every single character not every element
}
The problem is that it treats the whole content of the p tag as an element it doesnt separate the elements in the p tag like BS4 does. I looked at the documentation but I don't see anything about separating the elements from the tag into an array.
This is what I want to achieve with Swiftsoup
['\n', <span class="parNum" data-pnum="1"></span>, '\n This is a(', <span id="citationsource2"></span>, <a epub:type="noteref" href="#citation2">link</a>, ')to some website。\n ']
But end up getting everything as one element in the array instead of seperated elements.
[<span class="parNum" data-pnum="1"></span>This is a(<span id="citationsource2">
</span> <a epub:type="noteref" href="#citation2">link</a>)to some website.]
Is there any way of achieving this using swiftsoup or another swift html parser that could achieve the same thing?
After looking at the SwiftSoup files I was able to find the answer to my question. SwiftSoup has a method called getChildNodes which allows you to get all the content of the specified tag. It returns an array of the content of the tag. Hope this helps anyone who has also faced a similar problem.
let soup:Document = try! SwiftSoup.parseBodyFragment(html)
let p : Elements = try! soup.select("p")
for j in p{
print(try! j.getChildNodes())
}}

How to select specific data in dynamic table using protractor?

I am trying to automate some scenarios using protractor where we need to verify whether the data is updating in dynamic table.
Please find below
HTML Code:
enter image description here
Table in page:
enter image description here
It can be done by verifying that element is present in the DOM with the added Group ID or Group Name.
For Group ID:
element(by.xpath("*//table//tbody//tr//td[1]//p[text()='Amanda Test
Group']")).isDisplayed()
For Group name:
element(by.xpath("*//table//tbody//tr//td[2]//p[text()='Amanda
Group']")).isDisplayed()
I'm assuming you're using Angular2+, yes?
In your HTML Template, you are probably using an *ngFor directive to populate the table dynamically. Add an index to the *ngFor (it's best practices for updating the DOM) in order to add a dynamic id to each element:
<tr *ngFor="let user of user; index as u" id="user-{{u + 1}}">
<td id="userName-{{u + 1}}">
{{user.firstName}} {{user.userName}}<br />
{{user.userName}}
</td>
<td id="userRoles-{{ u + 1 }}">
<span id="role-{{u + 1}}-{{ r + 1 }}" *ngFor="let role of user.roles; index as r">
{{ role.toUpperCase() + ', '}}
</span>
</td>
<!- Omitted code -->
</tr>
In your Page Object:
// Get first user on the table
get firstUser() {
return element(by.id('user-1');
}
// Get a specific user by id
public getUser(index: number) {
return element(by.id(`user-${index}`);
}
// Get all of the attributes for a single user by id
get userAttributes(index: number) {
return element.all(by.id(`user-${index}`);
}
I am not a fan of xpath selectors. Yes, they are faster. But in code that is dynamic or changes frequently, they are the most fragile of selectors. There is no reason your dynamic data cannot have a dynamic ID that clearly identifies each portion of the code you need.
Good luck!

rubaxa:sortable (Meteor) dying with error "TypeError: templateInstance.collection.findOne is not a function"

Using Meteor I implemented a pretty basic rubaxa:sortable instance. Not using multiple sortable lists or anything fancy. Pre-loaded "order" data in my Mongo Collection with unique numbers 1, 2, 3, etc.
Everything displays fine, and lets you sort once then the package dies when it tries to save the new order to the DB.
Error in the browser console is:
TypeError: templateInstance.collection.findOne is not a function. (In 'templateInstance.collection.findOne(itemId)', 'templateInstance.collection.findOne' is undefined)
adjustOrdersrubaxa_sortable.js:1404
sortableUpdaterubaxa_sortable.js:1446
_dispatchEventrubaxa_sortable.js:1102
_onDroprubaxa_sortable.js:799
(anonymous function)
handleEventrubaxa_sortable.js:853
Relevant code snippets below...
Server:
Products = new Mongo.Collection('products');
Sortable.collections = ['products'];`
Client JS:
Meteor.startup(function() {
Mongo.Products = new Mongo.Collection('products');
});
Client HTML:
<div class="sortable target" id="object">
{{#sortable items=products animation="100" handle=".sortable-handle" ghostClass="sortable-ghost" sortField="order"}}
{{> productSettingsRow}}
{{/sortable}}
</div>`
<template name="productSettingsRow">
<div data-id="{{order}}" class="sortable-item well well-sm">
<div class="row">
...
<div class="col s5">
<div class="input-field">
<input id="{{sku}}-displayName" type="text" value="{{displayName}}">
</div>
</div>
...
<div class="col s1">
<i class="sortable-handle mdi-action-view-headline pull-right"></i>
</div>
</div>
</div>
Tried searching on the error; don't see anything quite like this though #578 here seems similar(?):
https://github.com/RubaXa/Sortable/issues/578
Any suggestions, or any other info I can provide to help debug? (Also posted this to the GitHub repo as suggested.)
You need to define collections both on the client and the server. So all you might be missing is to put:
Products = new Mongo.Collection('products');
Sortable.collections = ['products'];
in a shared place, such as /lib/common.js.
Partial Solution Found...
The helper that was passing in the "products" collection was set up like this:
Template.productSettings.helpers({
products : function() {
return Mongo.Products.find().fetch();
}
});
It should have been:
Template.productSettings.helpers({
products : function() {
return Mongo.Products.find();
}
});
This way it's a pointer rather than an array. rubaxa:sortable doesn't yet handle arrays.
(Still working through a DB storage problem; this plugin doesn't seem to work out of the box with Meteor -- gives "Access Denied" when you try to update. Will try to sort that out tomorrow.)

(Lift) Ajax submit using SHtml.select onchange event

I'm tring to implement the classic functionality of this select:elements depends on this other select:selection using Lift, E.g. select the country and get the possible states for the selected country.
The problem that I'm facing is that the "this.myForm.submit()" that I have inside the onchange of the select element is not firing the ajax request. If I use an input type"submit" it works perfectly.
Is this behaivior related with Lift framework? Is there a better way of implementing this kind of functionality using Lift libraries?
The relevant snipped code:
"name=distributionPoints" #> SHtml.select(distributionPoints, Empty, selectedDistributionPoint = _, "id" -> "the_distributionPoints") &
"name=devices" #> (SHtml.select(devices, Empty, selectedDevice = _, "id" -> "the_devices") ++ SHtml.hidden(process))
The view html:
<form class="lift:form.ajax">
<select name="distributionPoints" id="the_distributionPoints" onchange="submit()">
<option></option>
</select>
<br/>
Device:
<select name="devices" id="the_devices">
<option></option>
</select>
</form>
The rendered HTML:
<form id="F391649920812YBACEZ" action="javascript://" onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+"F391649920812YBACEZ").serialize(), null, null, "javascript");return false;">
<div>
Punto de distribución:
<select onchange="submit()" id="the_distributionPoints" name="F630704816482OLP514"></select>
<br />
Equipo:
<select name="F391649920817BLRJW5" id="the_devices"></select><input type="hidden" name="F391649920818HPS35E" value="true" />
<br />
</div>
</form>
[edit]
I finally got the solution. Like Chris mentioned I used ajaxSelect instead of just selects and instead of using setHtml there's a method called JsCmds.ReplaceOptions that does exactly what I was looking for.
You should understand that when using Ajax submit the page is not reloaded. So I would suggest you to use JsCmds.setHtml on server side to "reset" the second select element.
So, in fact the first select is an ajaxSelect which is meant to modify the second one (so it is not concerned by the hidden submit in my opinion). The second select is updated when the first one is changed, using 'selectPoint(s)'
Piece of Scala code
def selectPoint(s):JsCmd = {
selectedDistributionPoint = s;
newDevices:List[String] = findCorrespondingDevices(s);
JsCmds.setHtml("name=devices", SHtml.select(newDevices, Empty, selectedDevice = _, "id" -> "the_devices")) ++ SHtml.hidden(process))
}
"name=distributionPoints" #> SHtml.AjaxSelect(distributionPoints, Empty, s=> selectPoint(s), "id" -> "the_distributionPoints") &
"name=devices" #> (SHtml.select(Nil, Empty, selectedDevice = _, "id" -> "the_devices") ++ SHtml.hidden(process))
Piece of template code
<input name="distributionPoints" id="the_distributionPoints" onchange="submit()"/>
<input name="devices" id="the_devices"/>

BeautifulSoup: get tag name of element itself, not its children

I have the below (simplified) code, which uses the following source:
<html>
<p>line 1</p>
<div>
<a>line 2</a>
</div>
</html>
soup = BeautifulSoup('<html><p>line 1</p><div><a>line 2</a></div></html>')
ele = soup.find('p').nextSibling
somehow_print_tag_of_ele_here
I want to get the tag of ele, in this case "div". However, I only seem to be able to get the tag of its children. Am I missing something simple? I thought that I could do ele.tag.name, but that is an exception since tag is None.
#Below correctly prints the div element "<div><a>line 2</a></div>"
print ele
#Below prints "None". Printing tag.name is an exception since tag is None
print ele.tag
#Below prints "a", the child of ele
allTags = ele.findAll(True)
for e in allTags:
print e.name
At this point, I am considering doing something along the way of getting the parent of ele, then getting the tags of parent's children and, having counted how many upper siblings ele has, counting down to the correct child tag. That seems ridiculous.
ele is already a tag, try doing this:
soup = BeautifulSoup('<html><p>line 1</p><div><a>line 2</a></div></html>')
print(soup.find('p').nextSibling.name)
so in your example it would be just
print(ele.name)
You can access anything inside an element as if accessing a dictionary.
Let's say you have an element like this one.
<input id="__VIEWSTATE3" name="__VIEWSTATE3" type="hidden" value="MwqzeTH4"/>
You can access each property like this
print(elem["id"])
# prints __VIEWSTATE3
print(soup.find('h1',id_='pdp_product_title'))
it doesnot print any detail please solved this
<h1 id="pdp_product_title" class="headline-2 css-zis9ta" data-test="product-title">Nike Air Force 1 Shadow</h1>