I am trying to develop a shopping cart system using kendo-ui mobile and phonegap. First I am listing all the items in a list view. In each listview item, there will be one plus button, minus button and a label.I am using this combination for selecting the quantity of items.So, if we click plus button, the label value should be 0+1=> 1 and when we click minus, it should be like 1-1=>0 .To change the value of label when clicking button, I am passing the id of label to change the corresponding label value. But I am not able to pass the id form html to javascript, like I do in web development. Here is my code,
My listview item template,
<script type="text/x-kendo-tmpl" id="endless-scrolling-template">
<div class="product">
<img src="images/image.jpg" alt="#=ProductName# image" class="pullImage"/>
<h3>#:ProductName#</h3>
<p>$#:kendo.toString(UnitPrice, "c")#</p>
<a id="minus" data-role="button" data-click="minus(#:ProductID#)" >-</a>
<label id=#:ProductID#>0</label>
<a id="plus" data-role="button" data-click="plus(#:ProductID#)" data-name="plus">+</a>
<a id="loginButton" data-role="button" data-click="login">Add to Cart</a>
<div class="console"></div>
</div>
and my javascript functions,
<script>
function plus(itemid) {
var quantity=document.getElementById(itemid).innerHTML;
document.getElementById(itemid).textContent = parseInt(quantity)+1;
}
function minus(itemid) {
var quantity=document.getElementById(itemid).innerHTML;
document.getElementById(itemid).textContent = parseInt(quantity)-1;
}
</script>
Can anyone please tell me what Iam doing wrong here? Or can you provide an alternate solution?
When using Kendo, you can use Kendo MVVM. When JS objects are wired up in views using Kendo MVVM, when the value of the input elements change, the value of the JS objects reflects the change automatically. So what you need to do is to create a JS model for your view and set it as your view's model using data-model="yourModel". See this link: http://docs.kendoui.com/getting-started/mobile/mvvm
In your scenario here I think this link will help you: http://demos.kendoui.com/web/mvvm/source.html
This behavior is explained in the Kendo mobile book I wrote and you can see the checkout screen of the sample application built for the book here: http://movies.kendomobilebook.com/
Related
Given the following html:
<a class="MDB ABC" href="#" target="_self" data-my-id="wid-close"
role="button" aria-label="Close" style="color:#000000 !important;" title="Close">
The above html does not contain any id or name which I can use to identify this in Espresso.
I want to use aria-label or title or the custom one data-my-id
in my espresso findElement.
Can someone tell me if there a way to add any of the above?
Below is an example which works when we have id:
onWebView(withId(R.id.webview))
.withElement(findElement(Locator.ID, "signup-button"))
.perform(webClick());
I want something like
.withElement(findElement(title , "Close"))
Scenario:
I'm using Android Robotium Solo (v5.6.3) to automate web page interactions within my app. I need to automate data entry into INPUT fields that are contained within an IFRAME but I do not have much luck!
The Problem:
When I attempt to use, for example, solo.waitForWebElement(By.id("room-number", 5000, true) and solo.typeTextInWebElement(By.id("room-number", "101"), solo is unable to locate the element.
The discussion on this related issue "Accessing an iFrame inside a WebView #794" (https://github.com/RobotiumTech/robotium/issues/794), suggests that it's possible to use "solo.getConfig().webFrame = XXX" to focus solo on the content of a specific IFRAME and then access the WebElements. Unfortunately, I've not been able to get it to work and haven't been able to find any full examples. I assume XXX might need to be the "id" of the IFRAME but in my scenario (where I don't have control of the source code for the web pages being automated) the IFRAME tag has no id assigned.
I've created a simple example test scenario:
index.html - the main page that hosts the IFRAME
<html>
<body bgcolor="#AA3333">
<div id="wrapper">
<iframe src="embed.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
</body>
</html>
embed.html - the source for the IFRAME that contains the INPUT element.
<html>
<body bgcolor="#3333AA">
<div id="page-container" style="height:100vh; width:100%;">
<label>Room Number</label>
<input type="text" name="ROOM_NUMBER" id="room-number">
</div>
</body>
</html>
After reviewing the source code for Robotium in more detail I confirmed that using
solo.getConfig().webFrame = ['id' of IFRAME as a String]
allows subsequent calls to solo.typeTextInWebElement etc. to work OK as expected.
The trick in my scenario is that the parent page assigned no id to the IFRAME so I programatically assign one at runtime using the following javascript
document.getElementsByTagName("iframe")[0].id = "test";
and then use
solo.getConfig().webFrame = "test"
In my Ionic App, I want to use emojione for smiley in chat. Unfortunately, I didn't find useful documentation to show how to use emojione.
Now I want to create a popup that contain all list of smiley and it's related group. like this:
In downloaded files, There are png sprite of smiley and it's css file, But there isn't any HTML file that show the smiley list.
How can I create this list?
After research two days, I didn't find any answer on internet, So, I wrote the list (that contain all of the emoji with it's category) myself and solve the problem.
In downloaded folder at emojione.com, there is some file that I used to create list:
1. emojione.sprites.css That contain background-position and classname
2. emojione.sprites.png This is a sprite image of all emoji
3. emoji.json Than contain all emoji name,category, unicode and ...
I used ionic tab and angular ng-repeat and groupBy filter in angular-filter
angular-filter: Bunch of useful filters for AngularJS
Important: Use unicode In emoji.json for each emoji classname to show emoji in background of an element(spite).
HTML
<div class="emoji-wrapper">
<div class="tabs">
<a ng-repeat="(key, value) in emojies | groupBy:'category'" class="tab-item" ng-click="changeTab($index)">
{{key}}
</a>
</div>
<div ng-repeat="(key, value) in emojies | groupBy:'category'" id="{{key}}" ng-show="tabActive[$index]">
<ul>
<li ng-repeat="emoji in value">
<span class="emojione emojione-{{emoji.unicode}}"></span>
</li>
</ul>
</div>
</div>
JS
$scope.emojies = [];
$scope.tabActive = [];
$scope.tabActive[0] = true;
$http.get("emoji.json").then(function (response) {
angular.forEach(response.data , function ($elem , $index) {
$scope.emojies.push($elem);
});
});
$scope.changeTab = function (index) {
$scope.tabActive = [];
$scope.tabActive[index] = true;
};
I am creating a very simple WebView application on android. However, I want to edit the html file before displaying it in the WebView.
For example, if the original html source looked like :
<html>
<body>
<h1> abc </h1>
<h2> abc </h2>
......
<h6> abc </h6>
</body>
</html>
And I want to change it to:
<html>
<body>
<h1> cba </h1>
<h2> cba </h2>
......
<h6> cba </h6>
</body>
</html>
(all "abc" become "cba")
And then, I want to display that new code in my WebView. How can I do this? thanks
I am not sure why do you need this and what kind of app it is to need this. But if you have to do it check foll code:
$(function() {
for(var i =0;i<101;i++) {
if(jQuery('h'+i).length)
jQuery('h'+i).html(jQuery('h'+i).html().split("").reverse().join(""));
}
});
First, a note on your header tags: <h100> is a common misconception for newcomers. <h_> tags are simply an organizational item for your page, and only go out to <h6> You can have multiple <h1> tags on the same page, which are just headings for that section of content (with <h2> implying a subsection of <h1>, etc).
From there, when you say "original source", I assume you mean this is your own code, correct? Not a WebView sourced from another site? If this is the case, and you are only looking to change a specific instance of a specific string in your own code, a Find and Replace should be sufficient via any text or code editor you are using.
But if this is the case, you might want to look into first learning HTML and being able to render it in a basic web browser before moving on to also trying to learn Android.
I am working with Android Application using Jsoup for extracting text from website, in the below Html I want to get text of the parent div only. What I want is to display Date & Time which is in the parent div of class "fr".
<div class="fr">
<div id="newssource">
<a href="http://nhl.com" class="newssourcelink" target="_blank">
Philadelphia Flyers
</a>
</div>
April 15, 2014, 11:13 a.m.
</div>
What I have tried.
for(Element detailsDate:document.getElementsByClass("fr")){
newsDate.add(detailsDate.clone().children().remove().last().text().trim());
}
It only get text from child div i.e. "Philadelphia Flyers" which is in the "a" tag, but I want to display the Date & Time only.
use below jQuery code to get only Date and Time form "fr" div
<script>
jQuery('.fr').each(function(){
var textValue = jQuery(this).clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
alert(textValue);
});
</script>
I have found the answer by myself. Just Posted here for some one else with same issue.
for(Element detailsDate:document.getElementsByClass("fr")){
newsDate.add(detailsDate.getElementById("newssource").nextElementSibling());
}