I have added zxing barcode scanner plugin successfully in my android phonegap app here is js code where on page show I am able to see barcode scanner screen.
$('#scanpage').live('pageshow', function (event, ui) {
//navigator.notification.alert("Search page");
window.plugins.barcodeScanner.scan( function(result) {
//navigator.notification.alert("We got a barcode\n" + "Result: " + result.text + "\n" +"Format: " + result.format + "\n" +
// "Cancelled: " + result.cancelled);
}, function(error) {
navigator.notification.alert("Scanning failed: " + error);
});
});
here is html5 page code
div id="scanpage" data-role="page">
<div data-role="header" class="pageheader">
<div class="height30" style="padding-right:2%;">
<div class="back" style="margin-right:2%;">Back</div>
<div class="logo2" ><a href="#" ><img src="images/scan.png" style="padding-top:12px;" alt="Scan Code" /></a>
</div>
</div>
</div>
<div data-role="content" class="wrapper" style="width:100%">
<div style="background-color:#000000;" >
<div style="height:400px;" id="scanarea"></div>
<input name="" type="button" class="button" value="Focus and Scan" data-role="none" />
</div><!-- inner div-->
</div>
</div> <!-- end SCAN PAGE -->
BUT how it works, when I open the page firstly load html but in second whole screen is covered with bar-code scanner window I want to fix this scan area in a DIV 'scanarea' . But don't know how to fix it in certain div area and on button click scanning will perform and read the barcode.
scan window
html page
need to show like this
The barcode scanning screen is implemented as Android activity which hides PhoneGap's web view completely. If you want to customize this screen, you may want to change its layout file somehow.
I assume that your button "Focus and scan" should trigger a manual scan (the default is to recognize the first barcode, I think) – therefore you may have to change the activity implementation to include a handler for that button.
See also Simon Mac Donald's blog (he seems to be developing the barcode scanning plugin on Android) and this answer (which is exactly what I wrote above, snap :P).
Related
My html file contains:
</ion-content>
<ion-content class="card-background-page">
<ion-list>
<ion-card ion-item *ngFor="let item of items" (click)="itemTapped($event,item) ">
<img src="{{item.image}}"/>
<div class="card-title">{{item.title}}</div>
<div class="card-subtitle">{{item.subTitle}}</div>
</ion-card>
</ion-list>
</ion-content>
the controller contains this code:
this.items.push(
{title:"Item 1",subTitle:"one",image:"assets/img/preview_1.png"},
{title:"Item 2",subTitle:"two",image:"assets/img/panorama_2.png"}
)
it works well when running in the browser using ionic serve, but once built for Android (with the Ionic Cloud service) the images don't get displayed on the device.
I tried:
1)./assets/img/panorama_2.png instead of assets/img/panorama_2.png
2)<img src="url({{item.image}})"/> instead of <img src="{{item.image}}"/>
but still nothing
Make sure your assets are inside src/assets/img and not inside www/assets/img
I have a serious problem with ionic and android 4.3.
I have a list of elements dinamically loaded from a rest service.
When I execute the loadMore function (with the ion-infinite-scroll directive) the view doesn't resize on devices with android 4.3 version (tested on emulator and samsung gt-i9300), making it impossible to scroll over new elements.
I have tried to call the
$ionicScrollDelegate.resize();
on:
success function of $http.get
ng-repeat finish custom directive (even with a timeout of 10 seconds)
with no results.
This is my html code:
<ion-content lazy-scroll >
<ion-refresher
pulling-text="Reload.."
on-refresh="refresh()" >
</ion-refresher>
<div class="list card" ng-repeat="newsItem in newsList" ng-click="goToDetail(newsItem)">
<div class="item item-image myImage">
<img image-lazy-src="{{newsItem.image}}" fallback-src="./img/binewsplaceholder.png">
</div>
<div class="item">
<h2 ng-bind="newsItem.title"></h2>
<categories-in-list categories="newsItem.categories" ></categories-in-list>
<p><i class="ion-calendar myLabel"></i> {{newsItem.date | date: 'dd MMMM yyyy'}}</p>
<p class="text-right" ng-show="newsItem.distance && newsItem.distance != 'NaN' ">
<i class="ion-android-pin myLabel"></i> <span>{{newsItem.distance | number:0}} km</span>
</p>
</div>
</div>
<ion-infinite-scroll
immediate-check="false"
on-infinite="loadMore()"
ng-if="hasMorePage"
distance="1%">
</ion-infinite-scroll>
</ion-content>
Plus, I have the same issue on a "read more" function, that show/hide a div with long text. In that case I found the solution (than removed because of a weak ux) of:
Loading the view with the long text displayed
wait 5-6 second, then hide it
So..
Is this an issue with android 4.3?
I'm not sure, because in another app everything works fine, with the (more or less) same behavior.
Any suggestion?
Thanks.
I have the same issue on my same smartphone. I don't have an idea if this error coming from the Ionic or is a trouble with the device. I found this solution and work fine for me:
Setting overflow-scroll="false" in the ion-content HTML element:
<ion-content overflow-scroll="false">
I hope that has been of helpful.
So basically, there's this form. It works perfectly in every browser, even in the mobile simulator in Chrome, but as soon as I use a device such as Samsung Tablet and open the website in Android Browser, there's this particular textarea that doesn't let me finish the text when I go back in the field.
So I type a text, I leave the input field, I go back but the cursor jumps to the start, which means it doesn't let me finish the text I already started because I can't get to the end.
Clicking doesn't work, sliding works but jumps straight back to the start.
<div class="col-sm-12">
<label for="DEPOSIT_EXTRA_INFO" class="controllabel">Label<span class="info-trigger not-visible" data-reference="DEPOSIT_EXTRA_INFO"></span></label>
</div>
<div class="col-sm-12">
<textarea class="form-control" id="DEPOSIT_EXTRA_INFO" data-sim-mask="alphanumeric" data-required="true" name="DEPOSIT_EXTRA_INFO" maxlength="250" tabindex="20">~EXT_BABYACCOUNT.DEPOSIT_EXTRA_INFO~</textarea>
<div class="remaining-textarea pull-right hidden">Number of characters left<span class="remaining-textarea-counter">{0}</span>
</div>
</div>
I am testing an Android Hybrid application using Appium v1.3.4 (REV c8c79a85fbd6870cd6fc3d66d038a115ebe22efe) which is the lastest at the moment. I also downloaded the latest ChromeDriver from here: https://groups.google.com/forum/#!topic/chromedriver-users/iBdJQHu1ipQ
The login screen in the application under test is a hybrid view (WebView). So I am switching to the proper context via calling appiumDriver.context("WEBVIEW_com.my.app.pkg")as shown below and I am also able to successfully locate and populate both the username and the password fields with the proper text data using the following code:
appiumDriver.context("WEBVIEW_com.my.app.pkg");
WebElement userNameTextField = appiumDriver.findElement(By.id("username"));
userNameTextField.click();
userNameTextField.sendKeys(new String[]{"Guest"});
WebElement passwordTextField = appiumDriver.findElement(By.id("password"));
passwordTextField.click();
passwordTextField.sendKeys(new String[]{"password"});
// The following code is not working
WebElement loginButton = appiumDriver.findElement(By.id("loginbutton"));
loginButton.click();
However, my issue is when I try to click on the login button on this screen! This is how the button is written in HTML
<div href="#" id="loginbutton" class="button">Login</div>
I tried many ways to click on the button while I am in the Web context but all so far has been in vain...This is the HTML snippet for the login screen
<div id="formbody">
<div class="line">
<input placeholder="Username" type="text" id="username" class="styled_input" value="">
</div>
<div class="line">
<input placeholder="Password" type="password" id="password" class="styled_input" value="">
</div>
<div class="line_button">
<div href="#" id="loginbutton" class="button">Login</div>
</div>
</div>
After many many attempts to click on the div/link in the Webcontext, I gave up and switched to the NATIVE context and was able to click on the button using the following code:
appiumDriver.context("NATIVE_APP");
appiumDriver.findElementByName("Login").click();
Can anyone explain to me why I am able to interact with the username and password textfields in the WebView context but have to switch to the NATIVE_APP context to be able to interact with the button?
Also note that while in the WebView context I am able to find the button ... tag by id and to call loginButton.getText(), loginButton.isEnabled(), loginButton.isDisplayed() and getTagName()
Thanks
driver.findElement(By.xpath("//*[#id=\"formbody\"]/div[3]")).click();
should work. Inspect elements on your device using chrome, this will give you exact xpath.
To inspect elements, type this command in chrome: chrome://inspect/#devices
I am working on a web app where, I have a Common popup as a direct child of , it contains few popups created dynamically from the JSON. There are two separate pages having user input form. JSON file is updated using the form data.
I am updating the contents of the popups using the updated JSON in the form submit function. I am facing the problem to refresh the popup contents on form submit. I have to restart the APP to see the changes on popups.
I tried triggering 'refresh' and 'create' events on popups in form submit function, but still no result.
Moreover even if I set the contents of popup div to be empty using $('#popup-div').empty() in submit function, I can still see the popup. Don't know if this is the caching problem.
Please advice for some solution, Thanks
Example Code:
<body>
<div id="common-popup">
<div id="data-popup" data-role="popup">';
<p>Name: N/A<p>
<p>DOB: N/A <p>
</div> <!--Popup div ends -->
</div>
<div data-role="page" id="page1">
<input type='text' id='p1_name' value=''>Name: </input>
<input type='text' id='p1_dob' value=''>DOB: </input>
<button class="update-data" id="b1"/>
Watch Data
</div>
<div data-role="page" id="page2">
<input type='text' id='p2_name'>Name: </input>
<input type='text' id='p2_dob'>DOB: </input>
<button class="update-data" id="b2"/>
Watch Data
</div>
</body>
<script type="text/javascript">
$('.update-data').on('vclick', function(){
var id = $(this).id;
id = id.split('');
var htm = '<div id="data-popup" data-role="popup">';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
$('#common-popup').html(htm).trigger('create');
});
</script>
Here is the working demo
$( "#common-popup #data-popup")
.enhanceWithin().popup()
.on('popupafterclose', function(event) {
$(this).remove();
});
JS Fiddle Demo
The dynamic popup created should be removed after its closed. Creating it again and again makes multiple popups..but you are still referring to the first one, which created the problem.