Silent/kiosk printing incompatible with Angular? - angularjs

Ok, so here's my story: I developed a web application that populates printing area which I prepared before with something like this :
<div class="print-area">
<div class="receipt" ng-repeat="receipt in receipts" style="padding: 10px">
<div .... >
<span .... >
<table .... >
</div>
</div>
where receipts is an array generated asynchronously by Ajax call (with $http dependency injector) :
$http.get("/some/api/call").success(function(reply){
$scope.receipts = reply;
$timeout(function(){
window.print();
}, 1000);
});
and thing started to get weird here, I use latest chrome 51.0.2704.79 in windows 7 machine with (--kiosk --kiosk-printing) enabled, whenever window.print() gets called, some of the .receipt don't get printed. They're just skipped randomly (mostly the last .receipt element) and leave a blank space. But, when I disabled --kiosk --kiosk-printing options, it prints all .receipt normally.
I had no issue with the printer driver and have tested it in another computer with the same result, it seems kiosk mode disturb angular in some ways
Any suggestion ? Thank you

found it! It's an issue with Google Chrome itself. If you're also have the same problem, Follow this : https://bugs.chromium.org/p/chromium/issues/detail?id=136343

Related

Exception in queued GPT command TypeError: Cannot read property 'addService' of null

I am using adsesne code in my angularjs application. On the first load of application ads are working fine when I switch content dynamically I get this error.
Exception in queued GPT command TypeError: Cannot read property 'addService' of null site:stackoverflow.com.
This is the script which I load inside my div.
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.defineSlot('/28379801/MWBanner320x50', [320, 50], 'div-adlocation').addService(googletag.pubads());
googletag.enableServices();
});
</script>
<!-- /28379801/MWBanner320x50 -->
<div id='div-adlocation' style='width: 320px; height: 50px; margin:auto'>
<script>
googletag.cmd.push(function() { googletag.display('div-adlocation'); });
</script>
</div>
Any possible work around using angularjs?
I had the same issue and saw your post. Only after two weeks I found out by accident that you get the same error if you define the slot twice with the same adUnitPath. Maybe you have the same issue.
Solution
Make sure that the adUnitPath is define only once. The easiest way to check this for me was to console.log(<the adUnitPath>) with every googletag.defineSlot(...) call. In the screenshot you can see that two attempts are made to definer the same slot. However, this is not possible because the adUnitPath must be unique.
Example of the error and the double define action

Using the awesome angularAudioRecorder but can't seem to work with the audio-model blob in my controller

I have been using the following awesome plugin 'angularAudioRecorder' to build a simple voice recorder app in AngularJS/Ionic. Been messing with CordovaMedia and ngCordova media plugins for days, then this dropped in and worked a treat.
My issue now is that I can't seem to reference to the recorded blob in my apps controller.
See below for the snippet of the html which works a charm.
<ng-audio-recorder id='audioInput' audio-model='recordedInput' time-limit='2' on-record-complete="finished()">
<!-- Start controls, exposed via recorder-->
<div ng-if="recorder.isAvailable">
<a ng-click="recorder.status.isRecording ? recorder.stopRecord() : recorder.startRecord()" id="recordBarK-button10" style="color:#F5AA2C;" class="button button-light button-large button-block button-outline" ng-class="{'btn-primary': !recorder.status.isRecording, 'btn-danger': recorder.status.isRecording}">{{recorder.status.isRecording ? 'Stop' : 'Start'}} Recording</a>
</div>
</ng-audio-recorder>
And here is my controller for the template:
.controller('recordBarKCtrl', function($scope, $state, $ionicLoading) {
$scope.finished = function() {
alert("im done recording now");
alert($scope.audioInput.size);
//$state.go('previewBarK');
}
})
The finished function gets called fine, but the issue is I can't seem to reference the audio recording, which is I believe supposed to be available vie the 'audio-model' I defined as recordedInput. I am probably getting something very basic wrong here but I hope someone help me out of the dark.
plugin docs are here: http://logbon72.github.io/angular-recorder/
I tried to check out the demo. But it didn't work.
And I found this:
As per new chrome update (From Google Chrome 47), getUserMedia() is no longer supported in chrome browser over http:// (Unsecure Origin) , It will work on https:// (Secure Origin)
It means you need https to be able to make this thing working. There are a number of WebRTC solutions. But I guess now, they also need HTTPS.
pass the recorder object to your function like following :
<ng-audio-recorder id='audioInput_<% audio_to_client_id %>' audio-model='recordedInput'
on-conversion-complete="finished(recorder)"
on-record-start="clearPrevRecord()">
and in your controller do the following :
$scope.audio_blob = null
$scope.record_object = null
$scope.finished = function(record) {
$scope.audio_blob = record.audioModel
$scope.record_object = record
}
then you are able to get the blob object the record object in your controller.

cant view pdf in angularjs pdf viewer

I want to display menus which can be image as well as pdf .
I am using ng-pdfviewer to achieve this . My controller code is ::
venueApp.controller('venueController',['$scope',PDFViewerService',function($scope,pdf){
$scope.viewer = pdf.Instance("viewer");
$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
};
$scope.nextPage = function() {
$scope.viewer.nextPage();
};
$scope.prevPage = function() {
$scope.viewer.prevPage();
};
}]);
and my html code is ::
<a id="image_{[ menu.id ]}" ng-if="menu.filename.indexOf('.pdf') > -1">
<button ng-click="prevPage()"><</button>
<button ng-click="nextPage()">></button>
<br>
<span>{[currentPage]}/{[totalPages]}</span>
<br>
<pdfviewer src="{[menu.menu_url]}" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
</a>
I am using {[]} for expression evalutaion because i configured it to . Now in my console , the plugin is outputting the correct messages i guess
Printed in console by this plugin
src attribute changed, new value is https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf
loadPDF https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf
Warning: Deprecated API usage: getDocument is called with pdfDataRangeTransport, passwordCallback or progressCallback argument -- printed by pdf.js
But the pdf is not being painted . My DOM element for the padf viewer tag is ::
<pdfviewer src="https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf" on-page-load="pageLoaded(page,total)" id="viewer" class="ng-isolate-scope"><canvas></canvas></pdfviewer>
I dont understand what is the issue . Maybe it is with the pdf file as chrome also does not display it , instead just downloads it . the link for the sample pdf is ::
https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf
Also i am posting this question in SO instead of just posting it in the github plugin page because i seriously think it has to do something with the pdf file instead od the plugin .
P.S it is not my CV , just took one from the pool of applicants in our company :P
I have used http://viewerjs.org/ for offline pdf with angular. But here it seems you have online pdf path . So why are you not trying google document viewer ? It is best for online documents.
Please look at following link:
https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf
you need to change url parameter with your path.
Also you can use this link in your website with iframe as following:
<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

Selenium click event does not trigger angularjs ng-click

I have this page where there is a textbox and there is save button associated with each text box. I need to click on the save button so that it will save the value in text box. It is working manually and using selenium. But when running through Selenium WebDriver it's not saving the text box value. But there is no error exception being thrown. Input, Click is working.
savetextvalue() is not triggered in short.
There is similar issue Selenium click event does not trigger angularjs event
<pp-save-control fn-save-text="saveText();" btn-class="btn btn-default btn-mtl" button-id="btnkbaemailauthsub" place-holder-text="" input-class="tb-mtl" input-id="txtkbaemailauthsub" config-name="40" title-text="KBA email authentication subject" outer-container-class="div-mtl-header" class="ng-isolate-scope"><div class="div-mtl-header">
<span class="label-mtl ng-binding">KBA email authentication subject</span><img ng-hide="(isHelpHidden != null && isHelpHidden != 'true') ? false : true" class="help-mtl ng-hide" src="/Images/help.png">
<div class="div-mtl-tb-holder">
<input type="text" placeholder="" class="tb-mtl" name="txtkbaemailauthsub" id="txtkbaemailauthsub">
<button ng-click="saveTextValue();" ng-hide="false" class="btn btn-default btn-mtl btn-mtl-alignment" name="btnkbaemailauthsub" id="btnkbaemailauthsub" type="button">save</button>
</div>
</div>
</pp-save-control>
There are multiple text box and associated save button. Depending on the 'config-value'(You can see at top) value is getting saved.
Replace the locator according to your convenience
WebElement element= driver.findElement(By.id("btnkbaemailauthsub"));
JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);
OR
JavascriptLibrary jsLib = new JavascriptLibrary();
jsLib.callEmbeddedSelenium(driver,"triggerMouseEventAt", element,"click", "0,0");
OR
WebElement element= driver.findElement(By.id("btnkbaemailauthsub"));
// Configure the Action
Actions action = new Actions(driver);
//Focus to element
action.moveToElement(element).perform();
// To click on the element
action.moveToElement(element).click().perform();
Hope it will help you :)
Get back to me if still facing issue :)
driver = webdriver.Chrome('/path to /webdriver 22');
driver.find_element_by_css_selector('button[ng-click="func()"]');
Try putting in wait's in between your actions because Selenium doesn't know how angular loads and works. Protractor was created right for the purpose of handling angular web pages, which is a wrapper over selenium webdriver. However if you still want to test angularjs with Selenium then waiting for few seconds implicitly or fluent wait's between each action should help you with your need and accomplish what you intend to. Hope it helps.
In Selenium IDE try:
<td>sendKeysAndWait</td>
<td>id=mybutton</td>
<td>${KEY_ENTER}</td>
same with Webdriver:
WebElement element_p = (new WebDriverWait(_driver, 3))
.until(ExpectedConditions.visibilityOfElementLocated(By
.id("myButton")));
element_p.sendKeys(Keys.RETURN);
The same issue happens when using Selenide over Selenium. I found a workaround using Selenide, if that is an option for you:
After finding the clickable element, use Selenide's pressEnter() instead of click().
element.should(exist).pressEnter();
I faced this issue myself before. Here is how I solved it.
Right click on the button -> Go to inspect element -> Copy css selector and store it in a variable
The code to click the button :
your_element = your_driver.find_element_by_css_selector(css_selector_variable)
your_driver.execute_script('arguments[0].click()',your_element)

Kendo-AutoComplete won't Read from External Source (w/Angular)

Bit of a Kendo/Angular noob here so I apologize if this is a simple issue or if I've managed to completely muck up my attempt here.
All I'm trying to do at this point is get the Kendo-AutoComplete control to kick off a request to the server but thus far my attempts have been unsuccessful. Here's my HTML:
<input type="text" kendo-auto-complete ng-model="Company" k-options="companyAutoComplete" class="form-control" id="txtCompany" />
And here's the applicable javascript in my controller:
$scope.companyAutoComplete = {
dataTextField: "CompanyName",
dataSource: new kendo.data.DataSource({
transport: {
read: function (options) {
console.log("Read attempted.");
}
}
})
};
But the read method never fires when I change the text in the textbox. :(
I've been going through examples as I can find them but nothing seems to indicate what the issue is. Kendo is working, Angular is working, this is not working.
Your code is correct and works (tested it here). You need to type 3 symbols in the box for the request to kick in.

Resources