I have an html page, which has two fields From date and To date. On clicking the submit button I'm able to retrieve the information based on the dates and display it,in the same page but my From date and TO date fields become empty. So how do I hold the values so that they are retained in their respective fields even after the displaying the information.
HTML:
<ion-content ng-init=onViewloaded()>
From:
<input type="date" ng-model="fromDate">
To:
<input type="date" ng-model="toDate">
<button type="submit" ng-click="Save()">Submit</button><br>
Data:
{{receivedData.name}}
{{receivedData.information}}
</ion-content>
Controller:
$scope.receivedData;
$scope.onViewloaded=function()
{
bulkDateService.getData($scope.RetrievedData);
}
$scope.RetrievedData = function(data,error)
{
$scope.receivedData=data;
}
$scope.save=function()
{
var dataToSend={'from':$scope.fromDate, 'to':$scope.toDate};
bulkDateService.postData(dataToSend,error);
}
So what am I missing to do, in-order to display the From date and To date in their fields even after loading the data?
Since you are passing the objects by references in var dataToSend={'from':$scope.fromDate, 'to':$scope.toDate};, probably they are getting deleted or changed inside theis function bulkDateService.postData(dataToSend,error); (when you alter the field 'to' and 'from' of dataToSend.
To try this out, send a copy of the dates instead of the reference and see if that fixes your problem. Like this:
var dataToSend={'from':angular.copy($scope.fromDate), 'to':angular.copy($scope.toDate)};
And try to avoid ng-init directive, keep controller logic away from view whenever you can. For this you can simply call the function on the controller:
$scope.onViewloaded=function()
{
bulkDateService.getData($scope.RetrievedData);
}
$scope.onViewloaded();
Or even better, use ionic's view events: Ionic Docs
$scope.$on("$ionicView.beforeEnter", function(event, data){
$scope.onViewloaded();
});
Related
in my app I have ng-repeat loop, where I from another list select media and push it to array medias. But for every media, I can input custom duration (from media list in object I get predefined media duration, but if we want we can set our custom duration)
<div ng-controller="MyCtrl">
<div ng-repeat="media in medias">
<span>{{media.title}}</span><br>
<input ng-model="media.duration" /><br><br>
</div>
<button ng-click="getInputValue(media.title, media.duration)">Get</button>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.medias = [{
title: 'res1',
duration: 25.2
},
{
title: 'res2',
duration: 15.00
}
];
$scope.getInputValue = function(title, duration) {
alert(title); //undefined
alert(duration); //undefined
}
}
Here is jsfiddle
And, on submit I need to take all custom changed duration and send it to API.
The first problem is, in my GET button value is undefined.
This button needs to be outside from ng-repeat div because I have another data on the page for sending.
I try to put ng-init, but this fire on load and after nothing.
Also, I try ng-change, but I have the same name for ng-model (because it's dynamically) and with this, I don't know which item I changed.
Idea is, when user change duration for media he wants, on submit I get data and put them in an array like this:
//get passed data from ng-repeat
var mediaCustomDuration = [];
$scope.getInputValue = function(title, duration) {
mediaCustomDuration.push({
mediaID: title,
mediaDuration: duration
});
//do stuff ...
}
}
ng-click="getInputValue(media.title, media.duration)"
is out of repeat scope so this values (media.title and ...) are always undefined
So here it is two solutions:
On click you need to iterate over your medias ($scope.medias) and collected data you need. Ng-model insures that your custom duration will be set into the media object and you can pick it and send to server.
Another one
Make button type="submit"
Create directive on form ng-submit="submit($scope.medias)"
In $scope.submit take medias (they will be already changed) and post them to the remote.
That is all
Hope this helps.
I would like the user to select a date from a bootstrap datepicker component and store the selected value in local storage. When the user has completed their selection they can select the button whereupon an ajax call will use the local storage.
At this moment I'm having trouble getting the datepicker component to set a value in the local storage. The date picker component renders when the user selects is and the user's selection becomes the value of the input field.
Here is the mark up:
<form>
<div class="form-group">
<label for="edge-name" class"control-label">Start:</label>
<input type="text" class="form-control" id="filterStart">
</div>
</form>
And the javascript
$(document).ready(function(){
$('#filterStart').datepicker();
$('#filterStart').on('changeDate' function(){
var newValue = $('#filterStart').datepicker('getFormattedDate')
localStorage.setItem('filterStart',newValue);
});
I've inserted console.log in various places throughout the javascript but the code never writes to the console therefore I know that its not writing to the local storage. I know that the local storage is working because I'm using it other parts of the code.
Also, any suggestions on how to do this better would be greatly appreciated.
If you are using this bootstrap-datepicker you can take a look to the following jsfiddle:
$('#filterStart').datepicker();
$('#filterStart').on('changeDate', function (e) {
var newValue = $('#filterStart').datepicker('getFormattedDate')
localStorage.setItem('filterStart', newValue);
});
$('#btn').on('click', function(e) {
$('#logMsg').val('Value saved in local storage is: ' +
localStorage.getItem('filterStart'));
})
I can't find if method 'getFormattedDate' exists but there is a standard getDate method for that. By the way you miss a semicolon in definition line of newValue;
I think you might be instantiating a new datepicker in your changeDate event. You could try getting the formatted date from the .data:
var newValue = $('#filterStart').data('datepicker').getFormattedDate('yyyy-mm-dd');
I'm trying to use jQuery geocomplete along with Vue.js to populate a form with geo data.
My code contains this form:
<form>
<label for="get-offer-location">location: </label><input id="get-offer-location" v-model="newoffer.location" type="text"/>
<div style="visibility:hidden">
<input name="lat" type="text" value=""/>
<input name="lng" type="text" value=""/>
</div>
</form>
After I click on a suggested location from the get-offer-location input, it looks like the field is filled out -- but then when I start typing in another field, the location input field reverts to just the letters I typed in for the location search. Try it out here by clicking "post", then "news" or "offers":
https://jsfiddle.net/dvdgdnjsph/157w6tk8/
Can anyone tell me what's wrong?
The problem you are having is that v-model binds on input, since the geolocation dropdown is a plugin that changes the value programatically the input event is not fired, so v-model is not updated. As a case, try typing a space after selecting a location, you will see that it sticks.
Fortunately, v-model is nothing more than syntactic sugar for v-on:input, so you can use v-on to fire your event instead. Considering that you are going to need to unfocus to get out of the box, the blur event is likely to be your best option, so you can simply do:
v-on:blur="newarticle.location = $event.target.value"
Unfortunately, JSFiddle won't let me save or update your Fiddle, but I did get it working with the code above.
For completeness, in case you want to use this behavior extensively, and because the Vue docs are fairly limited in this regard, you may write a custom directive to encapsulate the code:
Vue.directive('model-blur', {
bind: function(el, binding, vnode) {
el.addEventListener('blur', function() {
vnode.context[binding.expression] = el.value;
});
}
});
Then you can use like so:
<input v-model-blur="myVar" />
Here's the JSFiddle: https://jsfiddle.net/4vp6Lvmc/
Can't tell for sure. But it looks like jQuery plugin just changes input#get-article-location value, but not the Vue model. So when you trigger model update (e.g. editing headline) it overwrites complete location with whatever you typed in.
I have something like this for catch the geocomplete event and try to set the vueJS value :
$("#get-article-location")
.geocomplete({details: ".details"})
.bind("geocode:result", function (event, result) {
vm.newoffer.location = result.formatted_address;
console.log('done');
});
But something still appears wrong, I think you should really change the name of your vueJS instance (var vm) it may be use by another script and make troubles.
This is because v-model, as two-way binding, on the receiving-user-input way, listens to the input event on the input element, while js plugins (like jquery-geocomplete) obviously set input values via js, which leads to the view model's data not changing as we discussed in other answers.
To fix this, just listen to the geocode:result event of the plugin and manually change the data with code (there seems to be something wrong with jsfiddle so I'm posting it here):
var vueVM = this;
$("#get-offer-location").geocomplete({ details: ".details" });
$("#get-article-location")
.geocomplete({ details: ".details" })
/***** highlight start *****/
.bind("geocode:result", function(event, result){
console.log(result);
//tried result.something but couldn't find the the same thing as `this.value`
vueVM.newarticle.location = this.value;
});
/***** highlight end *****/
extra knowledge: the mechanism of v-model stated above is usually used in making reusable components, by receiving a value prop from the parent, and emitting an input event with the user-input value when detecting change on the input element in the component. And then we can use <my-component v-model='parentData'></my-component> as the child behaves exactly like a simple input element from the parent's perspective. example
I am currently using bootstrap editable for the front end of my application.
See plugin: http://vitalets.github.io/x-editable/index.html
What I am doing is loading data onto a page via Ajax and allowing each item on the page to be editable. For example; I load a user onto a page and allows for his first name, last name and date of birth to be editable.
Because I am loading via Ajax, when a second user is loaded for example or third and i try to edit the first name etc, I keep getting the values of the first user loaded initially.
I am presuming it may be cache. I have tried setting display on the function and even auto-text.
Is there anyway I can reset or clear the editable form?
see sample code below:
function editable(obj) {
$('#title, #lastName, #firstName).editable('option', {
pk: obj.lId,
placement: 'bottom',
emptytext: 'Empty',
display: function(value) {
$(this).text(value);
},
validate: function(value) {
if ($.trim(value) === '') {
return 'This field is required';
}
}
});
}
Assuming that obj is your new user, and it contains the title, last name, and first name of the new user, all you have to do is set the values of the x-editable objects:
$('#title').editable('setValue', obj.title);
$('#lastName').editable('setValue', obj.lastName);
$('#firstName').editable('setValue', obj.firstName);
The reason why your example is not working is because x-editable separates the display from the actual value. Your display function is called whenever the user changes an x-editable value. By default, x-editable displays whatever the value is set to. But perhaps the internal value is different from a displayed value, that is what the display function is used for - it has no impact on the actual value, just the display of the value.
X-Editable has a lot of different methods you can take advantage of, you can find them on the 'Methods' tab here: http://vitalets.github.io/x-editable/docs.html#editable
I have no idea how can I solve my problem. I have Django template with two models. I put these models in inlineformset_factory.
Example
DhcpConfigFormSet = inlineformset_factory(Dhcp, IPRange, extra=1)
and I displayed this form in template like this pictures
form http://sphotos-h.ak.fbcdn.net/hphotos-ak-prn1/601592_10151469446139596_1335258068_n.jpg
I want implement event, when I click on plus stick (marked field on pictures), show one more row (ip initial field, ip final field and delete check box).
I tried to do it on this way :
$(document).ready(function() {
$(".plusthick-left").click( function() {
var tr= $(".sort-table").find("tbody tr:last").length;
$(".sort-table").find("tbody tr:last").after($(".sort- table").find("tbody tr:last").clone())
});
but I have problem, because I just made copy of last row and took same attributes values?
My question is : How can I make new row, and set all attributes with values of last row increased by one.
For example:
<input type="text" id="id_ip_initial_0_ip_range">
This is field that generated form in template, and I want make field with id value like this:
<input type="text" id="id_ip_initial_1_ip_range">
How can I do it? :)