I have a problem in ionic when I want to open the contacts.
The funny thing is that contacts only open when before clicking to get_contacts() I tab into/activate the textarea. After that the function get_contacts() is working fine - contacts popup as it should.
But only clicking the button (I added two in my container) does not open the contacts - nothing happens. Why????
Here is my code of the container:
<div ng-repeat="message in messages" class="message-wrapper rlt"
on-hold="onMessageHold($event, $index, message)">
....
</div>
<form name="sendMessageForm" ng-submit="sendMessage(sendMessageForm)" style="background-color: black;" novalidate>
<ion-footer-bar class="bar-stable message-footer" style="background-color: black;" keyboard-attach>
<div class="footer-btn-wrap">
<button class="button button-icon icon ion-android-attach" ng-click="choosePhoto()"></button>
</div>
<label class="item-input-wrapper">
<textarea ng-model="input.message" value="" placeholder="Leave a message..."
required minlength="1" maxlength="1500" msd-elastic autofocus></textarea>
</label>
<div class="footer-btn-wrap">
<button class="button button-icon icon ion-android-send footer-btn" type="submit"
ng-disabled="!input.message || input.message === ''">
</button>
<button class="button button-icon icon ion-ios-search-strong" ng-click="get_contacts()">
</button>
</div>
</ion-footer-bar>
</form>
And this is my js......
document.addEventListener('deviceready', function () {
$scope.get_contacts = function (){
navigator.contacts.pickContact(function(contact){
console.log('The following contact has been selected:' + JSON.stringify(contact));
var mobilenr = " no mobile nr ";
var jsonObj = JSON.parse(JSON.stringify(contact));
for (i = 0; i < jsonObj.phoneNumbers.length; i++) {
var phoneNumber = contact.phoneNumbers[i];
if (phoneNumber.type == 'mobile')
{
mobilenr = phoneNumber.value;
}
}
$scope.itemsList.push({"name":contact.name.formatted, "room":mobilenr});
localStorage.setItem("phonecounter",+localStorage.getItem("phonecounter")+1);
},function(err){
console.log('Error: ' + err);
});
}
}, false)
I'm not able to get this thing working, googled and tried almost everything.
Does anybody have a hint?
I tested on iOS - but this should work in any environment, as I understand. Or not?
Thank you in advance - very much
Related
I have looked extensively on ways to fix this issue and I have tried many suggestions, but have yet to solve the problem. I have an Ionic 1 (1.7.16) app, which has a login page that has input fields. When the user taps on the input field the content on the page gets pushed out of view. Then when the keyboard is closed, the content aligns it self correctly.
I have installed the ionic keyboard and implemented cordova.plugins.keyboard.disablescroll(true) and this does not work.
Here is an example of my function that runs when ionic is ready
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
cordova.plugins.keyboard.disablescroll(true)
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
Here is the login page:
<ion-view view-title="Login" align-title="left">
<ion-content class="loginBackground">
<div class="hero no-header flat">
<div class="content">
<div class="app-icon"></div>
<h1>TEST</h1>
</div>
</div>
<div class="padding">
<button class="button button-block icon-left ion-social-facebook button-positive" ng-click="facebookSignIn()">Login with Facebook</button>
</div>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.name">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<div class="padding">
<button class="button button-block button-positive" ng-click="login()">Login</button>
</div>
<!--Register Now button-->
<div class="register">
<button class="button button-block button-clear hide-on-keyboard-open" ng-click="register()">Not signed up? Register now!</button>
</div>
<!--END Register Now button-->
</ion-content>
Any ideas?
Trying to finally change over to the 4.0 version of select2 and running into a problem.
All of this works perfectly fine on 3.5. On button click I open a bootstrap modal and load a remote page into it. I have tested all everything on a normal page (not in a modal) and it works correctly. When loaded in a modal as below the modal opens and everything like it always had for 3.5, but select2 is returning an error. I believe the issue here is the select2 is being loaded from a remote page... thing is this same remote loading method always worked flawlessly with 3.5.
TypeError: $(...).select2(...).select2(...) is undefined
js:
// show edit modal
$('#datatable2').on('click', '.dtEdit', function () {
var data = {
'filter_id': $(this).parents('tr').attr('id').replace('dtrow_', '')
};
$('#modal-ajax').load(
'/modals/m_filtering_applications_filters.php',
data,
function() {
$(this).modal('show');
changeSettings();
hourSelection();
}
);
});
// change filter modal confirmation
var changeSettings = function() {
// get the default filter
var default_filter = $("#filter_default").val();
//app list
$("#vedit-filter").select2({
placeholder: {
id: default_filter, // or whatever the placeholder value is
text: default_filter // the text to display as the placeholder
},
allowClear: true,
multiple: false,
tags: true,
createTag: function (query) {
return {
id: query.term,
text: query.term,
tag: true
}
},
ajax: {
dataType: 'json',
delay: 500,
type: 'post',
url: '/process/get_application_list.php',
data: function (params) {
return {
term: params.term, // search term
page: params.page, //page number
page_limit: 25, // page size
};
},
results: function (data, page) {
var more = (page * 25) < data.total; // whether or not there are more results available
return {
results: data.results,
more: more
};
}
}
}).select2('val', [default_filter]).on('change', function() {
$(this).valid();
});
}
m_filtering_applications_filters.php :
Just the contents of the modal which is loaded in :
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 class="modal-title">Change these settings?</h3>
</div>
<form id="application-filters-edit">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 margin-bottom-30 form-group">
<div class="input-modal-group">
<label for="vedit-filter" class="f-14"><b>Application to filter :</b></label>
<select id="vedit-filter" name="settings[filter]" class="form-control select2">
<option value="<?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?>" selected=""><?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?></option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="settings[users][]" value="<?php echo $result['user_id']; ?>"/>
<input id="filter_default" type="hidden" name="settings[original]" value="<?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?>"/>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<?php
if (!$result)
{
//disable the button
echo '<button type="button" class="btn btn-primary disabled" data-dismiss="modal"><i class="fa fa-check-circle"></i> Save Settings</button>';
}
else
{
// show the button
echo '<button class="btn btn-primary" type="submit"><i class="fa fa-check-circle"></i> Save Settings</button>';
}
?>
</div>
</form>
</div>
</div>
UPDATE:
Okay, the error is coming from :
}).select2('val', [default_filter]).on('change', function() {
$(this).valid();
});
attached to the end... this is for using the jquery validation script (I did not include this in the jS here), and again, worked fine in 3.5. Can you not add on to the select2() anymore with 4.0 or something?
When removing this line the error goes away, but the display of the select2 is very small in width and I cannot gain focus on the search box to enter any values so it is still unusable within the modal.
UPDATE2:
Realized the events changed with 4.0 so this seems to work :
}).on("change", function (e) {
$(this).valid();
});
Still cannot enter anything into the search box though. Also, I notice if I click on anything other than the arrow in the input box to show the dropdown it acts as if the mouse is being held down - it highlights all the text/content within the modal.
Solution : All the issues I was having with the select2 in my bs3 modal were solved by adding the following in my js :
$.fn.modal.Constructor.prototype.enforceFocus = $.noop;
The highlighting of content/text is gone. The focus on the search box is gone. For now everything seems to work great. I do not have any information as to what this line actually does at the moment, but will be researching this to find out and will add it back here for future reference for anyone.
I’m pretty new to Angular, Firebase and AngularFire, so it's probable I'm going about this the wrong way.
Basically I have a form in a modal(UI Bootstrap) and I want to update some previously stored values, but AngularFire ‘$update’ doesn’t update them in Firebase. Creating and deleting items outside the modal is working fine.
This is within my service:
updateItem: function (id, item) {
var item_ref = new Firebase(FIREBASE_URL + ‘/items/‘ + user_id + '/' + id);
var item = $firebase(item_ref);
item.$update({
name: item.name,
notes: item.notes
});
}
This is within my controller:
$scope.edit = function(id) {
$modal.open({
templateUrl: 'views/item.html',
backdrop: 'static',
keyboard: false,
resolve: {
data: function() {
return {
title: 'Edit item',
item: Items.getItem(id)
};
}
},
controller: 'EditItemCtrl'
})
.result.then(function(item) {
Items.updateItem(item.$id, item);
});
};
This is my modal controller:
app.controller('EditItemCtrl', function ($scope, $modalInstance, data) {
$scope.data = data;
$scope.ok = function(item) {
$modalInstance.close(item);
};
$scope.cancel = function() {
$modalInstance.dismiss();
};
});
This is my modal template:
<div class="modal-content">
<div class="modal-header">
<button class="close" style="margin-top: -10px;" type="button" ng-click="cancel()">×</button>
<h3>{{data.title}}</h3>
</div>
<div class="modal-body">
<form name="editItem" role="form" novalidate>
<div class="form-group">
<label class="sr-only" for="itemName">Item name</label>
<input name="name" type="text" class="form-control" placeholder="Item name" value="{{data.item.name}}" ng-model="data.item.name">
</div>
<div class="form-group">
<label class="sr-only" for="itemNotes">Item notes</label>
<textarea name="notes" class="form-control" rows="2" id="itemNotes" placeholder="Notes" ng-model="data.item.notes" ng-maxlength="500">{{data.item.notes}}</textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" type="button" ng-click="ok(editItem.data.item)">OK</button>
</div>
</div>
Stepping through everything shows that the item to be updated and new values are being passed through to the service, but they're not making their way into Firebase.
I'm guessing that I'm probably going about this the wrong way though - any guidance would be much appreciated.
I want to show modal(encouragementModal) only when user clicks on Encourage button.
Configuration
GSP View _encourage.gsp is :
<div ng-controller="EncouragementController">
<g:if test="${notEncouraged}">
<button class="btn" ng-click="openEncouragementModal()">Encourage</button>
<div modal="encouragementModal" close="closeEncouragementModal()" options="opts">
<div class="modal-header">
<h3>Encourage!</h3>
</div>
<div class="modal-body">
You are about to encourage with {{amount}}.
</div>
<div class="modal-footer">
<button class="btn btn-info cancel" ng-click="encourage()">Confirm</button>
<button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
</div>
</div>
</g:if>
<g:else>
Thank you for encouraging.
</g:else>
The EncouragementController.js is
function EncouragementController($scope, $http) {
/**
* open payment dialog
*/
$scope.openEncouragementModal = function (amount) {
$scope.encouragementModal = true;
};
$scope.closeEncouragementModal = function () {
$scope.closeMsg = 'You canceled the encouragement’;
$scope.encouragementModal = false;
};
$scope.opts = {
backdropFade: true,
dialogFade:true
};
}
EncouragementController.$inject = [ '$scope', '$http'];
Question
Only the Encourage button should have been visible for the first time, but what I see is button along with the encouragementModal and it's buttons.
So, how do I do that?
References I followed
[1] Modal (ui.bootstrap.modal)
[2] Simple Grails + AngularJS Example
You need to hide it at first and only display it when scope.encouragementModal value is true.
<div modal="encouragementModal" ng-show="encouragementModal" options="opts">
I'm trying to create a tab set using jQuery UI that has some permanent tabs as well as some special purpose tabs. The special tabs are added temporarily: when the form they contain is submitted, the tabs are removed.
I've got this working except for one thing: after a tab is removed, if it is re-added later its content isn't shown, and I can't figure out why. I've distilled it down to this jsFiddle example, code also reposted below.
HTML:
<div id="tabs">
<ul>
<li>Foo</li>
</ul>
<div id="foo">
<h2>Foo Tab</h2>
</div>
<div id="bar" class="transient" style="display: none">
<h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Bar Tab</h2>
</div>
<div id="baz" class="transient" style="display: none">
<h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Baz Tab</h2>
</div>
</div>
<hr>
<button onClick="openTransientTab('bar', 'Bar')">Add Bar Tab</button>
<button onClick="openTransientTab('baz', 'Baz')">Add Baz Tab</button>
JavaScript:
$('#tabs').find('div.transient').find(".close").live('click', function() {
var footer_tabs = $('#tabs');
var tab_id = $(this).closest("div.transient").attr("id");
var index = footer_tabs.tabs("option", "selected");
footer_tabs.tabs("select", -1);
footer_tabs.tabs("remove", index);
});
function openTransientTab(id, title) {
var footer_tabs = $("#tabs");
footer_tabs.tabs("select", -1);
footer_tabs.tabs("select", "#" + id);
var selected = footer_tabs.tabs("option", "selected");
if (selected < 0) {
footer_tabs.tabs("add", "#" + id, title);
footer_tabs.tabs("select", "#" + id);
}
$("#" + id).css("display", "block");
}
$(function() {
var footer_tabs = $("#tabs");
footer_tabs.tabs({
collapsible: true,
selected: -1
});
});
When you load the page, the bar and baz tabs are created, but in their style, display is set to none which is why they are not visible originally. Inside the tab, when you hit the X, it actually removes the div for bar and baz completely. When you re-click to add the bar or baz tab after it closes, it recreates the div, but you are not putting anything within it. Add something like the following to once you create the tab.
document.getElementById("bar").innerHtml = whatever you want within it here
Before:
<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2>Foo Tab</h2>
</div>
<div id="baz" class="transient" style="display: none">
<h2>
<button class="close" style="float: right" type="button">
<span class="ui-icon ui-icon-closethick">close</span>
</button>
Baz Tab
</h2>
</div>
<div id="bar" class="transient ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;">
<h2>
<button class="close" style="float: right" type="button">
<span class="ui-icon ui-icon-closethick">close</span>
</button>
Bar Tab
</h2>
</div>
After opening and closing both
<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2>Foo Tab</h2>
</div>
<div id="bar" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" style="display: block;"></div>
<div id="baz" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;"></div>
After Collecter provided the key insight about what wasn't working, I found a nicer way to preserve the tab content for reuse. I changed my close function to the following:
$('#tabs').find('div.transient').find(".close").live('click', function() {
var footer_tabs = $('#tabs');
var tab = $(this).closest("div.transient");
var index = footer_tabs.tabs("option", "selected");
footer_tabs.tabs("select", -1);
footer_tabs.tabs("remove", index);
footer_tabs.append(tab);
});