Develop Reference

Can't update daterangepicker value

I have a date range picker on my page and it works all right except that once I pick the range the value doesn't update.
I'd say that this might be because once the date range is picked up it automatically does the search for the records, so I tried to update the value based on the
request.args.get("start_date") and request.args.get("last_date")
using js
document.getElementById('').value = '';
but it doesn't work.
Does anybody have any idea why I am not able to update the value?
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
autoUpdateInput: true
}, function(start, end) {
window.location.search = 'start_date=' + start.format("DD/MM/YYYY") + "&last_date=" + end.format("DD/MM/YYYY");
document.getElementById('daterange').value = start.format("DD/MM/YYYY") + " - " + end.format("DD/MM/YYYY");
});
});
</script>
<div class="col-md-12 center-block" style="padding-bottom: 2rem">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="daterange" name="daterange" value=""/>
</div>
</div>

Form data not showing after post in AngularJS

I am trying to post a form data but the content are not updated on the UI.
The following code is working it does post the data but the tags are not updated in the {{tag.Title}}.
$scope.saveTag = function (data,TagTypeId) {
var result = employeeCvService.addTag(data, TagTypeId, $scope.consultantCv.Id).success(function(data){
var new1 = data;
$scope.consultantCv.TagsbyTypes[0].Tags.push(newtag);
});
// $scope.consultantCv.TagsbyTypes[0].Tags.push(newtag); //this code is not updating the binding in the UI
};
<div class="row" data-ng-repeat="tagsByType in consultantCv.TagsbyTypes" ng-init="init('tag',2000)">
<div class="col-md-12">
<hr />
<h2>
<i class="icons8-{{tagsByType.CssClass}}" aria-hidden="true"></i>{{tagsByType.Title}}
</h2>
<div class="tags">
<div class="input-group" ng-controller="consultantController">
<div ng-repeat="tag in tagsByType.Tags" class="tag label label-success">
{{tag.Title}}
<a class="close" href ng-click="removeTag(tag)">×</a>
</div>
<form ng-submit="saveTag(Title,tagsByType.Id)" role="form">
<input type="text" ng-model="Title" class="form-control" placeholder="add a tag..." ng-options="suggestion.Title for suggestion in suggestion" uib-typeahead="suggestion.Title for suggestion in loadTags($viewValue,tagsByType.Id)" typeahead-loading="loadingTags" typeahead-no-results="noResults">
<span class="input-group-btn"><input type="submit" class="btn btn-default" value="Add"></span>
</form>
</div>
</div>
</div>
</div>

Push your data as object with same property name.
$scope.saveTag = function (data,TagTypeId) {
var result = employeeCvService.addTag(data, TagTypeId, $scope.consultantCv.Id).success(function(data){
var newData = {
Title : data,
}
$scope.consultantCv.TagsbyTypes[0].Tags.push(newData);
});
// $scope.consultantCv.TagsbyTypes[0].Tags.push(newtag); //this code is not updating the binding in the UI
};

Found the issue was that tagsType was not passed to the controller.
Fixed it by the following code
$scope.saveTag = function (data,TagTypeId) {
var result = employeeCvService.addTag(data, TagTypeId, $scope.consultantCv.Id).success(function(result){
TagTypeId.Tags.push(result);
$scope.consultantCv.TagsbyTypes.Tags.push(newData);
//$scope.consultantCv.TagsbyTypes[0].Tags.push(new1);
});
// $scope.consultantCv.TagsbyTypes[0].Tags.push(newtag);
};
<form ng-submit="saveTag(tag.Title,tagsByType)" role="form">
<input type="text" ng-model="tag.Title" class="form-control" placeholder="add a tag..." ng-options="suggestion.Title for suggestion in suggestion" uib-typeahead="suggestion.Title for suggestion in loadTags($viewValue,tagsByType.Id)" typeahead-loading="loadingTags" typeahead-no-results="noResults">
<span class="input-group-btn"><input type="submit" class="btn btn-default" value="Add"></span>
</form>

How not to overwrite your variables

I've been stuck on this problem without a clear way around it for a while now. https://jsfiddle.net/brendanjackson/4ajs7czo/3/
Here's the scenario. I have two functions that send one set of data to different areas of my page. So if you enter some text in the main field, hit submit, it sends that text to 'set1' and creates a button and select menu.
<body>
<div class="container-fluid">
<div class="start">
<form class="form-inline">
<h1><strong>Start</strong></h1>
<div class="row">
<div class="col-xs-4">
Task:<input type="text" class= "task form-control" id="input_text" >
</div>
</div>
<!--***********************************************************************************************************-->
<div class="row">
<div class="col-md-4">
Send to:
<select class="set1_menu">
<option value="set1table0">set1table0</option>
</select>
</div>
<div class="col-md-4">
<input type="button" id='submit_button' class="btn btn-primary" value="Submit!" />
</div>
</div>
</form>
</div>
<!--***********************************************************************************************************-->
<div>
<h1 class="label label-default">Set1</h1>
<div class="set1 row">
<div class="set1_table0 column ">
<h3>set1table0</h3>
<ul class="set1_text0"></ul>
</div>
</div>
<!--**********************************************************************************************************-->
<div>
<h1 class="label label-default set2">Set2</h1>
</div>
<!--*********************************************************************************************************-->
<div>
<div class="set2_table0 column">
<h3>set2table0</h3>
<ul class="set2_text0"></ul>
</div>
</div>
</div>
$('#submit_button').on("click",function() {
/*==========================================
variabes
===========================================*/
task = $(".task").val();
set1_menu = $(".set1_menu option:selected");
set1_index = set1_menu.index() //switch arg
set2_menu = '<select class="set2_menu"> <option value="set2_table0">set2table0</option> </select>';
set2_button = '<input type="button" class="set2_button" data-set1_data="'+set1_index+'" value="set2_button" />'
$('.set1_table0').append("<li>" + task + " " + set2_menu + " " + set2_button + "</li>" );
})
$("div.set1.row").on("click", "input.set2_button", function(){
/*==========================================
variabes
===========================================*/
var set2_index = $(this).closest('li').find('select.set2_menu option:selected').index();
var set1_data = $(this).data('set1_data');
var set2_data = $(this).data('set2_data');
/*=========================================
TEST
=========================================*/
console.log( "IT WORKS" + " " + set2_index );
switch(set2_index){
case 0:
$('.set2_table0').append("<li>" + task + " " + " (from Table " +set1_data+ " )" + " " /*+ datetimepicker + " "*/ + "</li>" );
break;
}
});
Problem:
If the user follows the data sent to set1 and sends it to set2 all is well and the jedi win!
However, if the user decides to go back to the start, enter new information, and send it to set1, the previous variable has of course been overwritten and can no longer be sent to set2. It will now send whatever the newest variable's information is.
Something was suggested to me like adding var i=0++, task and then adding i++ on my 1st function so it gives each variable its own easy to find # like task0, task1, task(n) as well as turning it into an array. Both of these solutions I'm just not understanding how to implement, maybe for the lack of how to express my problem to research it?
Question
How do I cleanly save each set of data that is submitted so that it can be sent from set1 to set2 whenever the user decides they're ready.

Datepicker getData Angular + Firebase

I have a problem with getting data from datepicker inputbox into database.
I have a form
<form name="myForm">
<div>
<input type="text" name="todoNameField" ng-model="todoName" placeholder="wat do" required ng-minlength="1" class="form-control"
ng-keyup="($event.keyCode == 13 && todoName.length > 0) ? addItem() : return" style="width: 50%; margin-bottom: 10px"/>
<h4>Deadline?</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<button ng-click="addItem()" ng-hide="myForm.todoNameField.$invalid" class="btn btn-primary" type="button">Save</button>
</div>
</form>
And a controller with a function that handles adding new items
$scope.addItem = function () {
// Create a unique ID
var timestamp = new Date().valueOf();
// Get the Firebase reference of the item
var itemRef = new Firebase(FIREBASE_URL + timestamp);
$firebase(itemRef).$set({
id: timestamp,
name : $scope.todoName,
dt : $scope.dt, // <<< date
completed: false
});
$scope.todoName = "";
$scope.dt = "";
}
If I remove dt : $scope.dt everything is stored nicely and there is no problem with using it later, however when I try to store the date it's not working. It's not even adding a dt: in a database.. not even empty.
Is there something I'm missing with adding a value from datepicker? I thought I can grab it like the input "todoName", but It doesn't seem to be working.

Populate dynamical form with json

I am trying to populate an html form using js, and j query and i have encountered a problem.
The form is growing according to the user request, the user need to fill 4 different inputs and if he wants he can click on a button and add another 4 inputs.
here is the form:
<form action="#main" method="post" id="exercise-form">
<div data-role="header" class="header" data-theme="a" data-position="fixed">
<a class="ui-btn-right" data-icon="check" onclick="$('form#exercise-form').trigger('submit');
resetExerciseForm();" data-iconpos="notext"></a>
<h1 class="text">Add a Workout</h1>
<a href="#main" data-role="button" class="ui-btn-left" data-icon="home" data-iconpos="notext" onclick="$('form#exercise-form').trigger('reset');
resetExerciseForm();"></a>
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="date" class="text">Workout Date:</label>
<input type="date" name="date" value="" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset form-element serializable" style="color: white; font-family:'Ariel'; text-shadow:none;">
</div>
<br>
<div id="exercise-template" style="display: none;">
<!-- Exercise name -->
<div data-role="fieldcontain">
<label for="ex-name" class="text">Exercise Name:</label>
<input class="form-element serializable" type="text" name="ex-name-1" value="" style="color: white; font-family:'Ariel'; text-shadow:none;"/>
</div>
<div class="ui-grid-b">
<!-- Number of Sets -->
<div class="ui-block-c">
<div data-role="fieldcontain">
<label for="set-number" class="text">Sets:</label>
<input class="form-element serializable" type="number" name="set-number-1" value="" style="color: white; font-family:'Ariel'; text-shadow:none;"/>
</div>
</div>
<!-- Number of Repetitions -->
<div class="ui-block-c">
<div data-role="fieldcontain">
<label for="rpt-number" class="text">Repetitions:</label>
<input class="form-element serializable" type="number" name="rpt-number-1" value="" style="color: white; font-family:'Ariel'; text-shadow:none;"/>
</div>
</div>
<!-- Weight -->
<div class="ui-block-c">
<div data-role="fieldcontain">
<label for="weight" class="text">Weight:</label>
<input class="form-element serializable" type="number" name="weight-1" value="" style="color: white; font-family:'Ariel'; text-shadow:none;"/>
</div>
</div>
</div>
<br>
</div>
<label for="text-area" class="text">Json:</label>
<span id="text-area" style="color: white; font-family:'Ariel'; text-shadow:none;"></span>
</form>
When the user want to add one more exercise the next java script is running:
function addExerciseForm() {
var oldId = exerciseId;
var newId = ++exerciseId;
document.getElementsByName('ex-name' + oldId).name = 'ex-name' + newId;
document.getElementsByName('set-number' + oldId).name = 'set-number' + newId;
document.getElementsByName('rpt-number' + oldId).name = 'rpt-number' + newId;
document.getElementsByName('weight' + oldId).name = 'weight' + newId;
var clonable = document.getElementById('exercise-template');
var clone = clonable.cloneNode(true); //true for deep clone
clonable.id = "exercise" + newId;
clone.id = 'exercise-template';
clonable.style.display = 'initial';
// var addButton = document.getElementById('add-exercise-button');
clonable.parentNode.appendChild(clone);
clonable.removedNode();
clone.parentNode.appendChild(clonable);
}
As u can see the hole div with the id exercise-template is being cloned with different id that is increased by 1.
When i clone the div i am trying to change the name of so when i populate it from a json file i wont have more then one label with the same name.
The problem is that when i look at the DOM after cloning the div i can see that the name hasn't change while if i use chrome debug mode i can see that the line:
document.getElementsByName('ex-name' + oldId).name = 'ex-name' + newId;
actually giving me the wanted element. But the populate script cant find the name of the new element.
here is the populate script:
function populateExerciseForm() {
$.ajax({
dataType: 'json',
type: 'GET',
url: 'json/exercise.json',
xhrFields: {
withCredentials: true
},
success: function (response, status) {
console.log(response, status);
if (status === "success") {
// we expect a response in a JSON format
// response = JSON.parse(response);
$('#exercise-form').populate(response);
}
}
});
}
Anyone know what is the problem?
or for example how can i take the next json and let the first 4 values inside the first 4 inputs and so on..?
json example:
{
"ex-name-1": "abc",
"set-number-1": 2,
"rpt-number-1": 3,
"weight-1": 20,
"ex-name-1": "efg",
"set-number-1": 4,
"rpt-number-1": 4,
"weight-1": 123
}
I hope my problem is clear.
Thanks ahead!!