I'm trying to implement a pull to refresh functionality to my app, but ion-refresher does not seem to be functional. Could it be a bug?
Here is my HTML component:
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="logSomethingToConsole()">
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<ion-row justify-content-center text-center id="temp-text">
<h1> Some Text </h1>
</ion-row>
</ion-content>
The doRefresh(event) function is not called.
You have to set the property[disabled]="false" in ion-refresher component.
See: https://github.com/ionic-team/ionic/issues/14992
Related
I am facing a strange behaviour of IONIC 1 IOS application in IOS 11.0.3 .
I had a list of Item and which I rendered on screen via using ng-repeat via using following code. i.e
<div class="list-container" ng-cloak>
<div ng-repeat="message in messageCtrl.messageList track by $index" ng-class="messageCtrl.checkClass
(message);" class="messages" ng-cloak>
<div class="message" ng-cloak>
<span ng-cloak>
<a href="javascript:void(0);" ng-click="goToSechduleScreen(message, 'present');" ng-cloak>
{{ message.message }}
<strong ng-cloak>{{ message.annotation }}</strong>
<span ng-cloak class="scheduleMessage" ng-if="messageCtrl.doesMessageIsScheduled(message
);"><i class="icon ion-clock"></i></span>
</a>
</span>
<div class="datetime" am-time-ago="message.date_created" ng-cloak></div>
</div>
</div>
</div>
The above code is working fine in all IOS device which is running on IOS 10 or lower. but in IOS 11.0.3 some "ng-repeat" item are not displayed .when I scroll up and down sometime Items are visible or some not.
Please check following screen-short for better clarity.
When some items are displayed and some items are not,
When all items are displayed sometime when I scroll up and down,
when just only single item displayed and rest of item are not displayed
Any kind of help or suggestion is appreciated.
Thanks in advance.
I've installed a Angular UI Bootstrap 2.5.0 package in my visual studio and I'm trying to perform a carousel operation, but it doesn't work at all. Following is my code.
<div class="panel-body" id="tblSubs" ng-controller="ControllerName">
<carousel interval="myInterval">
<slide ng-repeat="id in code">
<h3 class="text-center">{{id.Name}}</h3>
<p>{{id.Contact}}</p>
<p>{{id.Info}}</p>
</slide>
</carousel>
</div>
I'm able to get the data but the data doesn't come in carousel.
Any help would be appreciated.
Since version 0.14.0 you need to add the uib prefix to some of the directives, enter uib-carousel instead of carousel etc..
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
I am developing an application using worklight framework from IBM in which I use jquery mobile library to code.
Unfortunately, when I use $.mobile.silentScroll to scroll, it has no effect, it does not work.
Has anyone met that issue? In other work, How to scroll page in worklight?
I don't think you can do this with jQuery Mobile's silentScroll, as it basically uses window.scrollTo, and this allows to scroll only within the current viewport (what you currently see on the screen).
Instead I would recommend to use iScroll's various API methods: scrollTo, ScrollToElement or Snap, etc.
I tested the below in Android and it worked.
You'll of course need to adjust it to your application...
common\js\main.js:
var myScroll;
function wlCommonInit(){
myScroll = new IScroll('#wrapper');
}
common\index.html:
<body style="display: none;">
<div id="wrapper">
<div data-role="page" id="page">
<div data-role="content" id="content" style="padding: 15px">
<div id="firstDiv">
<input type="button" value="scroll to the other div" onclick="myScroll.scrollToElement('#secondDiv', '0s');"/>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="secondDiv">
hello
</div>
</div>
</div>
</div>
...
...
</body>
0s means there will be no scroll effect; it will essentially 'jump' to the desired location.
I am using bootstrap version 2.x and when i use the app on a non mobile browser the scrollbars work correctly, however when i browse using iOS (iphone 5) there are no scrollbars -- specially vertical scrollbars and i cannot touch scroll on the screen - its just fixed i cannot more left or right or up or down......
Is there something i need to enable for touch scrolling like a different js library? or is there something broken.
I have read that if the tags for are not closed properly this could occur but my tags are closed.
So basically all my content is now not visible except for the first portion as i cannot scroll down...
Here is some code ( i am using durandal as a SPA)
this is my shell:
<div>
<header>
<!--ko compose: {view: 'nav'} --><!--/ko-->
</header>
<section id="content" class="main container-fluid">
<!--ko compose: {model: router.activeItem,
afterCompose: router.afterCompose,
transition: 'entrance'} -->
<!--/ko-->
</section>
<footer>
<!--ko compose: {view: 'footer'} --><!--/ko-->
</footer>
</div>
at the moment i removed all 'nav' and 'footer' rendering and only something in the content HTML that is rendered in there a simple page:
<section>
<div>
<button id="btnrefresh" class="btn btn-info btn-force-refresh pull-right"><i class="icon-refresh"></i> Refresh</button>
<button id="btnrefresh2" data-bind="click: refresh" class="btn btn-info btn-force-refresh pull-right"><i class="icon-refresh"></i> Data Refresh</button>
<h3 class="page-title" data-bind="text: title" ></h3>
<div data-bind="visible: showDetails" style="height:500px;width:50px;background-color:red">
</div>
</div>
</section>
this will not scroll in IOS :(
The answer to this was that it as a Durandal based problem.
After severe debugging and stripping everything out except durandal i figured out this can be fixed by opening up durandal/app.js and commenting out the following lines of code:
adaptToDevice: function() {
//document.ontouchmove = function (event) {
// event.preventDefault();
//};
}
Cheers
I have a weird problem with a simple form with checkboxes..
The first time it's shown it looks fine.. But then after navigating back to the previous page and be to it again - the ui is not updates resulting in plain checkboxes without jQuery mobile style..
I've Googled like crazy and found a couple of hints like .fieldcontain(); but it's doesn't work =(
The data is being retrieved through knockout bindings..
Any good ideas?
Here's the code...
<div id="searchCitiesPage" data-role="page" data-theme="a" class="page searchCities">
<header data-role="header" data-theme="b">
</header>
<div data-role="content" class="content" data-theme="a">
<script id="countyListTemplate" type="x-jquery-tmpl">
<form id="fieldform" action="form.php" method="post">
<fieldset id="fieldsetgroup" data-role="controlgroup">
{{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
<input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
<label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
{{/each}}
</fieldset>
</form>
</script>
<div data-bind="template: 'countyListTemplate'"></div>
<div class="submit">
Næste
</div>
</div>
I was having a problem like this too, but in my case, the checkboxes were being redrawn dynamically before loading the page. I tried refreshing:
$("input[type='checkbox']").checkboxradio("refresh");
But it gave me an error stating that checkboxradio hadn't been initialized. However, when I tried this instead:
$("input[type='checkbox']").checkboxradio();
It made the checkboxes appear correctly every time. I'm still fumbling in the dark with JQuery Mobile and can't say exactly what happens where and why (I think I'm initializing the checkboxes?), but I thought I would share for the next time someone like me googles their way to this thread.
You can add some javascript to re-initialize the jQuery Mobile markup for your checkbox on each page load. Something like this:
<script type="text/javascript">
$(function() {
$('[data-role=page]').live('pageshow',function(){
$('#fieldform').find('input').checkboxradio();
});
});
</script>
I would suspect this code
{{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
<input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
<label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
{{/each}}
is being called again when you transition back to the page. I would suggest pulling the infomation/tags/etc.. before the page displays (on the first load) and display it statically. So when transitioning back it shows the same data.
of you could use one of the live events and restyle it before the page shows, example:
$('.zipcodecheckbox').live('pagebeforeshow',function(event, ui){
$("input[type='checkbox']").checkboxradio("refresh");
// or
$(".zipcodecheckbox").checkboxradio("refresh");
});