I am having trouble with openning calendar (Framework7) on mobile when testing.
It works fine on all browsers but not when using directly mobile phone.
On mobile (safari test for me), when the 'Select Date' is clicked nothing happens and no error on console. If I refresh the page and click another time, then it's working.
my-app.js :
> myApp.onPageInit('checkout', function (page) { var calendarDefault =
> myApp.calendar({
> input: '#shipping_calendar',
> multiple: true }); })
checkout.php :
<div class="contactform">
<h4 class="checkout_title">DATE DE LIVRAISON</h4><br>
Sélectionnez une ou plusieurs dates<br>
<input type="text" placeholder="Select range date for delivery" readonly id="shipping_calendar">
</div>
Hope someone can help
Thank you in advance
Usually this issue happen since you try to load calender var in pageInit, but this will not trigger all time...so that Try to remove calendar code from myApp.onPageInit and set it direct in you script:
var calendarDefault = myApp.calendar({input: '#shipping_calendar', multiple: true });}
Also you you can do this to make sure its open:
var $$ = Dom7;
$$('#shipping_calendar').on('click', function(){
if(!calendarDefault.opened)
calendarDefault.open();
});
Related
In my contrived chat app, I have a timestamp at the bottom that is supposed to tell when the page loaded. Adding chats should not change it, and I included a phx-update="ignore" attribute on the div containing the timestamp to prevent that:
<div id="date" phx-hook="Date" phx-update="ignore"></div>
However, the timestamp does get updated when chats are added. Here is the initial state:
Then I click New Chat and the dialog appears:
I inspected the DOM and I know that step did not change the timestamp. However, when I press the Save button, the timestamp does change:
How can I prevent that from happening?
The Save button in the dialog was triggering a redirect that caused the page to refresh, so I fixed that by replacing the dialog with some widgets with phx-hook fields, sending the chats to the server with pushEvent in app.js:
index.html.leex
<input id="usernameinput" placeholder="Your name" phx-update="ignore"/>
<input id="chatinput" placeholder="Say something"/>
<button id="newchatbtn" phx-hook="ChatSend">Send</button>
app.js:
Hooks.ChatSend = {
mounted() {
let viewHook = this
this.el.addEventListener("click", function() {
let uni = document.getElementById("usernameinput")
let ci = document.getElementById("chatinput")
viewHook.pushEvent("send-chat", {msg: ci.value, username: uni.value})
})
}
}
index.ex:
#impl true
def handle_event("send-chat", %{"msg" => msg, "username" => username}, socket) do
{:ok, c} = Chats.create_chat(%{username: username, body: msg})
cs = socket.assigns.chats
cs = cs ++ [c]
socket = assign(socket, :chats, cs)
{:noreply, socket}
end
Here is the commit.
I'm using this angularJS datepicker in my application and would like to know if there is a way to display only months and years in the calendar and remove the days?
This is how I'm using the datepicker:
<datepicker date-format="MM yy" button-prev-title="previous month" button-next-title="next month" button-prev="<i class='fa fa-arrow-left'></i>" button-next="<i class='fa fa-arrow-right'></i>" id="dtDate" name="dtDate" >
<input ng-model="dtDate" />
</datepicker>
I tried to add date-format="MM yy" but it only changes the selected date and not the datepicker itself.
I think you might be interested in using this git repository that I created.
https://github.com/morfsys/multiple-month-picker
This is how you can use it in your project:
HTML
<input type="text" multiple-month-picker />
JS
//Initiate your app by injecting 'mmp-morfsys'
var app = angular.module('app-name', ['mmp-morfsys'])
It helps you to select multiple months across multiple years. The best thing? It is on AngularJS.
I hope it helps you.
I have the same problem with angularjs-datepicker.
I used another datepicker: angularjs-material.
Here is how you can use it:
<md-datepicker ng-model="startDate" md-mode="month" md-placeholder="dd/MM/yyyy" md-date-locale="mylocale" md-open-on-focus></md-datepicker>
And then in your controller:
function pad(n) {return n < 10 ? "0"+n : n;}
$scope.mylocale = {
formatDate: function(date) {
var d=new Date(date);
if(isNaN(d.getTime())) {
return '';
} else {
return pad(d.getDate())+"/"+pad(d.getMonth()+1)+"/"+d.getFullYear();
}
},
parseDate: function(date) {
var ds = date.split('/');
var d=new Date(ds[2],ds[1]-1,ds[0]);
if(isNaN(d.getTime())&&d!=''){
return new Date(NaN);
} else {
return d;
}
} };
And it is working. Just make sure that you properly handle case when input is invalid (form.startDate.$invalid).
If someone has a solution for angularjs-datepicker, please let us know.
I am trying to toggle the medium editor option (disableEditing) on button click. On the click the value for the medium editor option is changed but the medium editor does not use 'updated' value.
AngularJS Controller
angular.module('myApp').controller('MyCtrl',
function MyCtrl($scope) {
$scope.isDisableEdit = false;
});
Html Template
<div ng-app='myApp' ng-controller="MyCtrl">
<span class='position-left' medium-editor ng-model='editModel' bind-options="{'disableEditing': isDisableEdit, 'placeholder': {'text': 'type here'}}"></span>
<button class='position-right' ng-click='isDisableEdit = !isDisableEdit'>
Click to Toggle Editing
</button>
<span class='position-right'>
toggle value - {{isDisableEdit}}
</span>
</div>
I have created a jsfiddle demo.
I think initialising medium editor on 'click' could solve the issue, but i am not sure how to do that either.
using thijsw angular medium editor and yabwe medium editor
For this specific use case, you could try just disabling/enabling the editor when the button is clicked:
var editor = new MediumEditor(iElement);
function onClick(event) {
if (editor.isActive) {
editor.destroy();
} else {
editor.setup();
}
}
In the above example, the onClick function is a handler for that toggle button you defined.
If you're just trying to enable/disable the user's ability to edit, I think those helpers should work for you.
MediumEditor does not currently support changing configuration options on an already existing instance. So, if you were actually trying to change a value for a MediumEditor option (ie disableEditing) you would need to .destroy() the previous instance, and create a new instance of the editor:
var editor = new MediumEditor(iElement),
editingAllowed = true;
function onClick(event) {
editor.destroy();
if (editingAllowed) {
editor = new MediumEditor(iElement, { disableEditing: true });
} else {
editor = new MediumEditor(iElement);
}
editingAllowed = !editingAllowed;
}
Once instantiated, you can use .setup() and .destroy() helper methods to tear-down and re-initialize the editor respectively. However, you cannot pass new options unless you create a new instance of the editor itself.
One last note, you were calling the init() method above. This method is not officially supported or documented and it may be going away in future releases, so I would definitely avoid calling that method if you can.
Or you could just use this dirty hack : duplicate the medium-editor element (one with disableEditing enabled, the other with disableEditing disabled), and show only one at a time with ng-show / ng-hide :)
<span ng-show='isDisableEdit' class='position-left' medium-editor ng-model='editModel' bind-options="{'disableEditing': true ,'disableReturn': isDisableEdit, 'placeholder': {'text': 'type here'}}"></span>
<span ng-hide='isDisableEdit' class='position-left' medium-editor ng-model='editModel' bind-options="{'disableEditing':false ,'disableReturn': isDisableEdit, 'placeholder': {'text': 'type here'}}"></span>
You can see jsfiddle.
AngularJS: Alert Popup
<div class="modal-header">
<h3>
<span class="firefinder-match" data-ng-show="dialog.stopOrService === 'STOP'" data-translate-values="{"days":"ALL_DAYS","time":"2015-06-20T08:39:46.654Z","stopOrService":"STOP","stopName":"Fairbairn Av after War Memorial Service [3473]","serviceList":[{"serviceNumber":"910","id":"6350571294206984726","name":"910 City via Majura Business Park(Net14NoAir"}],"selectedService":null,"receiveSituations":false,"processing":false}" data-translate="liveDepartures.alerts.addModal.stopHeader">Add a regular alert for upcoming buses at Fairbairn Av after War Memorial Service [3473]</span>
<span class="firefinder-match ng-hide" data-ng-show="dialog.stopOrService === 'SERVICE'" data-translate-values="{"days":"ALL_DAYS","time":"2015-06-20T08:39:46.654Z","stopOrService":"STOP","stopName":"Fairbairn Av after War Memorial Service [3473]","serviceList":[{"serviceNumber":"910","id":"6350571294206984726","name":"910 City via Majura Business Park(Net14NoAir"}],"selectedService":null,"receiveSituations":false,"processing":false}" data-translate="liveDepartures.alerts.addModal.serviceHeader">Add a regular alert for route </span>
</h3>
</div>
Assertion: Using getText()
var pageHeader = element(by.css('.modal-header > h3 > span'))
expect(pageHeader.getText()).toContain('Add a regular alert');
pageHeader.getText().then(function(text){
console.log("++++++++++++++++++++++++++++++++++++++" +text);
});
Problem: Not able to get text from element
I have tried a number of ways to identify the 'Text' on model header but could not succeed in getting the text from the element. The problem looks like the element is not getting identified. Can someone please help me to resolve this issue.
As the error confirms, your selector is returning both spans within the .modal-header. You could try catching them both and specifying one (Note: I've not tested these):
var pageHeader = $$('.modal-header > h3 > span');
expect(pageHeader.get(0).getText()).toContain('Add a regular alert');
Or try another approach on the selector. Maybe try :not to return only the visible span:
var pageHeader = $('.modal-header span:not(.ng-hide)');
As the warning says, you have multiple elements (an array) found by the locator, so get(n) will be needed. you can wait until the getText() promise to resolve, and finally go for assert/expect.
var spansInPageHeader = element.all(by.css('.modal-header > h3 > span'));
spansInPageHeader.get(1).getText().then(function(text){
expect(text).toContain('Add a regular alert');
});
I'm working on an app using AngularJS and Bootstrap UI. I've been fumbling my way through using the Typeahead control in Bootstrap UI.
Here's my Plunker
My challenge is I want the user to have the option of choosing an item, but not required to do so. For instance, right now, if you type Test in the text field and press "Enter", Test will be replaced with Alpha. However, I really want to use Test. The only time I want the text to be replaced is when someone chooses the item from the drop down list. My markup looks like the following:
<input type="text" class="form-control" placeholder="Search..."
ng-model="query"
typeahead="result as result.name for result in getResults($viewValue)"
typeahead-template-url="result.html" />
How do I give the user the option of choosing an item, but allow them to still enter their own text?
The issue is that both Enter and Tab confirm the selection of the currently highlighted item and Typeahead automatically selects an item as soon as you start to type.
If you want, you can click off the control to lose focus or hit Esc to exit out of typeahead, but those might be difficult to communicate to your users.
There's an open request in Bootstrap Ui to not auto select / highlight the first item
One solution is to populate the first item with the contents of the query thus far, so tabbing or entering will only confirm selection of the current query:
JavaScript:
angular.module('plunker', ['ui.bootstrap'])
.filter('concat', function() {
return function(input, viewValue) {
if (input && input.length) {
if (input.indexOf(viewValue) === -1) {
input.unshift(viewValue);
}
return input;
} else {
return [];
}};})
HTML:
<input type="text"
ng-model="selected"
typeahead="state for state in states | filter:$viewValue | limitTo:8 | concat:$viewValue"
class="form-control">
Demo in Plunker
I came across this same situation and found no good answers so I implemented it myself in ui-bootstrap Here is the relevant answer. This is probably not the best route to take, but it does get the job done. It makes the first result in the typeahead to be what you're currently typing, so if you tab or enter off of it, it's selected -- you must arrow-down or select another option to get it.
Here is the modified ui-bootstrap-tpls.js file
I added a mustMouseDownToMatch property/attribute to the directive, like:
<input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue" typeahead-arrow-down-to-match="true">
And the javascript:
var mustArrowDownToMatch = originalScope.$eval(attrs.typeaheadArrowDownToMatch) ? originalScope.$eval(attrs.typeaheadArrowDownToMatch) : false;
I also added this function which will put the current text into the first item of the typeahead list, and make it the selected item:
var setFirstResultToViewValue = function (inputValue) {
scope.matches.splice(0, 0, {
id: 0,
label: inputValue,
model: inputValue
});
}
And that is called in the getMatchesAsync call in the typeahead directive:
var getMatchesAsync = function(inputValue) {
// do stuff
$q.when(parserResult.source(originalScope, locals)).then(function(matches) {
// do stuff
if (matches.length > 0) {
// do stuff
}
if (mustArrowDownToMatch) {
setFirstResultToViewValue(inputValue);
scope.activeIdx = 0;
setTypeaheadPosition();
}
// do stuff
};