I am developing a web with Angular, Ninja, HTML5 and Javascript. My problem is the following: I have a Ninja controller (ProjectController) where I render a list of projects to the HTML. I would like to show this list with the names of the projects with Angular. All the examples I have seeing about this, they made the list manually like this:
(function() {
var app = angular.module('projectStore', []);
app.controller('ProjectController', function(){
this.projects = gems ;
});
var gems = [
{ name: 'Azurite' },
{ name: 'Bloodstone' },
{ name: 'Zircon'}
];
})();
This is my code:
ProjectController.java
public Result getList(final FlashScope flashScope, final Session rawSession, final ProjectData registerRequest) {
log.info("getting project List");
List<Record1<String>> list = jCtx.jooq().select(PROJECT.PROJECT_NAME).from(PROJECT).fetch();
return Results.html().template("/views/ProjectController/projects.ftl.html").render("projects", list.toString());
}
rendered HTML projects.ftl.html
<#import "../layout/defaultLayout.ftl.html" as layout>
<#layout.myLayout "Home page">
<form name ="test" action="/projects" method="post" ng-app="projectStore">
<table id = "table_projects_header">
<tr>
<td>Projects</td>
<td style="padding-right:10px; padding-left:40px"> <input type="button" value=" + " onclick="addRow('table_projects')" /> </td>
<td> <input type="button" value=" - " /> </td>
</tr>
<tr id = "table_projects_list">
</tr>
</table>
<input type="submit" value="Add Project"/>
<div ng-controller="ProjectController as controller">
<div class="project row" ng-repeat="project in controller.projects">
<h3>
{{project}}
</h3>
</div>
</div>
</form>
</#layout.myLayout>
And I would like to do something like this:
app.js
(function() {
var app = angular.module('projectStore', []);
app.controller('ProjectController',function(){
this.projects = **get projects from rendered html** ;
});
})();
Is that possible??Thank you in advance!
HTML
<form name ="test" action="/projects" method="post" ng-app="projectStore">
<table id = "table_projects_header">
<tr>
<td>Projects</td>
<td style="padding-right:10px; padding-left:40px"> <input type="button" value=" + " onclick="addRow('table_projects')" /> </td>
<td> <input type="button" value=" - " /> </td>
</tr>
<tr id = "table_projects_list" class="renderValues">
</tr>
</table>
<input type="submit" value="Add Project"/>
<div ng-controller="ProjectController as controller">
<div class="project row" ng-repeat="project in controller.projects">
<h3>
{{project}}
</h3>
</div>
</div>
</form>
You can do like is:
(function() {
var app = angular.module('projectStore', []);
app.controller('ProjectController',function(){
this.projects=[];
//javascript way
var elements = document.getElementsByClassName('renderValues');
for (var index in elements)
{
var element = elements[index];
this.projects.push(element.innerHTML);
}
//jQuery way
/* var elements = document.getElementsByClassName('');
$('.renderValues').each(function(){
this.projects.push($(this).text());
});*/
});
})();
Related
I am trying to make a cost splitter app for my roommates. I am explaining the app with an example. Suppose we are 4 members, there is a cost of 300, and 3 members (m1, m3, m4) participated in the expenditure (all have an equal share). Among them 2 members have paid the amount as follows: m3 paid 180 and m4 paid 120. Now the balance sheet will look like this:
m1(-100), m2(0), m3(+80), m4(+20)
I am not able to get all the form values properly and make the balance sheet.
<div>
<table id="dashboard">
<tr>
<th>TOTAL</th>
<th>member1</th>
<th>member2</th>
<th>member3</th>
<th>member4</th>
</tr>
<tr>
<td id="total"></td>
<td id="bmem1">0</td>
<td id="bmem2">0</td>
<td id="bmem3">0</td>
<td id="bmem4">0</td>
</tr>
</table>
</div>
<div id="newCostButton">
<button id="showForm" href="#">Add New Cost</button>
</div>
<form id="elForm">
<label>Cost:</label>
<input type="text" id="cost" placeholder="Add new cost">
<br>
<label><b>Participants:</b></label><br>
<span>member1</span>
<input type="checkbox" name="Participant" value="member1">
<span>member2</span>
<input type="checkbox" name="Participant" value="member2">
<span>member3</span>
<input type="checkbox" name="Participant" value="member3">
<span>member4</span>
<input type="checkbox" name="Participant" value="member4">
<br>
<b>contributors:</b><br>
member1
<input class= "contributors" type="text" name="member1">
member2
<input class= "contributors" type="text" name="member2">
member3
<input class= "contributors" type="text" name="member3">
member4
<input class= "contributors" type="text" name="member4">
<input type="submit" id="cal" value="calculate">
</form>
<div id="doc"></div>
<script>
$(function(){
var $newCostButton = $('#newCostButton');
var $elForm = $('#elForm');
var $cost = $('#cost');
$newCostButton.show();
$elForm.hide();
$newCostButton.on('click', function(){
$newCostButton.hide();
$elForm.show();
});
$('input:text').focus(function(){
$(this).val("");
});
function cal(){
var c = $cost.val();
var part = $('input:checked');
pCount = part.length;
var d= parseInt(c/pCount);
var contributors = $('.contributor');
var mem = [];
contributors.each(function(){
mem.push(parseInt($(this).val()));
});
console.log(mem);
for(var i=0;i<pCount;i++){
var r = mem[i]-d;
console.log(r);
}
}
$elForm.on('submit', function(e){
e.preventDefault();
cal();
});
</script>
I don't see where you import jquery
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
why don't you use excel or google sheets?
I think this does something similar to what you are asking for. I simplified a few things like .hide() and .show(), but they're easy enough to add back. Hopefully something in here helps. If not, it was still a fun hour code challenge.
html:
<div>
<table class="dashboard">
<tr>
<th>TOTAL</th>
<th>member1</th><th>member2</th><th>member3</th<th>member4</th>
</tr>
<tr>
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
</tr>
</table>
</div>
<div class="newCost">
<span>Cost:</span><input type="text" placeholder="Add New Cost">
<button>Add New Cost</button>
</div>
<div class="participants">
<p>Participants:</p>
<span>member1</span><input type="checkbox">
<span>member2</span><input type="checkbox">
<span>member3</span><input type="checkbox">
<span>member4</span><input type="checkbox">
</div>
<div class="contributors">
<p>Contributors:</p>
member1 <input type="text">
member2 <input type="text">
member3 <input type="text">
member4 <input type="text">
</div>
<button class="calculate">calculate</button>
javascript:
String.prototype.toInt = function() { return parseInt(this, 10); };
$('.newCost button').on('click', function() {
let newCost = $('.newCost input').val().toInt();
$('.dashboard td')
.each(function(index, td) {
td.textContent = td.textContent.toInt() + (index ? newCost / 4 : newCost);
});
});
$('button.calculate').on('click', function() {
$('.participants input').each(function(index){
if (this.checked) {
this.checked = false;
let currentOwed = $(`.dashboard td:eq(${index + 1})`).text().toInt();
let contributed = $(`.contributors input:eq(${index})`).val().toInt();
let total = $('.dashboard td:eq(0)').text().toInt();
$('.dashboard td:eq(0)').text(total -= contributed);
$(`.dashboard td:eq(${index + 1})`).text(currentOwed -= contributed);
}
});
});
$('button').click(()=> { $('input[type=text]').val(''); });
https://jsfiddle.net/wn7bbxjk/
How to hide the last index of an array as I want to hide the label and show the input when user clicks on add button . Couldn't find help . Here is my code:-
<tr ng-repeat="personalDetail in personalDetails">
<td>
<label ng-show="lab[$index]=true" for="settings" > {{personalDetail.Sname}}</label>
<input ng-show="lab[$index]=false" type="text" ng-model="personalDetail.Sname" />
</td>
<input type="button" class="btn btn-primary addnew pull-right btn-space" ng-click="addNew($index)" value=" Add New">
And my angular code :
$scope.addNew = function(val) {
$scope.personalDetails.push({
'Sname': "",
'Settings': "",
});
var ind = $scope.personalDetails.length - 1;
$("label[data-val='" + ind + "']").hide();
$("input[data-val='" + ind + "']").show();
$scope.PD = {};
};
try this
<tr ng-repeat="personalDetail in personalDetails">
<td>
<label ng-hide="$last" for="settings" > {{personalDetail.Sname}}</label>
<input ng-show="$last" type="text" ng-model="personalDetail.Sname" />
</td>
<tr>
Reference: ngRepeat
Just check for $last,
<td>
<label ng-show="lab[$index]==true" for="settings"> {{personalDetail.Sname}}</label>
<input ng-show="lab[$index]==false" type="text" ng-model="personalDetail.Sname" />
</td>
I'm working on a list app where initially the user is presented with an input and button. In the input the user enters the name of a new list, and after the button is clicked, an empty list appears ready for input of items. Adding a new list works, as does adding/removing list items. But the name of the list doesn't print on the page. Currently without any advanced CSS, it's expected for the lists' names to all appear at the top of the page rather than directly above their respective lists.
https://codepen.io/anon/pen/RVmeLe
HTML:
<div ng-app="notepadApp">
<div ng-controller="notepadController as notepadCtrl">
<header ng-repeat="list in notepadCtrl.lists">
<form name="removeListForm" ng-submit="notepadCtrl.removeList($index)">
<input type="submit" value="Remove list">
</form>
<h1>{{list.name}}</h1>
</header>
<div ng-repeat="list in notepadCtrl.lists" class="shoppingList" ng-controller="ItemController as itemCtrl">
<ul>
<li ng-repeat="item in list.items">
<label>
<input type="checkbox" ng-model="item.checked">
<span class="item-name-wrapper">{{item.name}}</span>
</label>
<form name="itemForm" ng-submit="itemCtrl.removeItem(list, $index)">
<input type="submit" value="remove">
</form>
</li>
</ul>
<form name="itemForm" ng-submit="itemCtrl.addItem(list)">
<input type="text" ng-model="itemCtrl.item.name">
<input type="submit" value="Add item">
</form>
</div>
<form name="addListForm" ng-submit="notepadCtrl.addList(newListName)">
<input type="text" ng-model="notepadCtrl.list.name">
<input type="submit" value="Add list">
</form>
</div>
</div>
Javascript:
(function(){
var app = angular.module('notepadApp', []);
var shoppingLists = [
];
app.controller('notepadController', function(){
var notepadCtrl = this;
notepadCtrl.lists = shoppingLists;
notepadCtrl.addList = function(newListName) {
var newList = {
name: newListName,
items:[]
};
shoppingLists.push(newList);
};
notepadCtrl.removeList = function(index) {
shoppingLists.splice(index, 1);
};
});
app.controller('ItemController', function(){
this.item = {};
this.addItem = function(list){
list.items.push(this.item);
this.item = {};
};
this.removeItem = function(list, index) {
list.items.splice(index, 1);
};
});
})();
You just want to replace:
ng-submit="notepadCtrl.addList(newListName)"
with:
ng-submit="notepadCtrl.addList(notepadCtrl.list.name)"
I have created a webpage that have some big divs in it.
I have a button on that page. On the click of that button I want the current div to change and bring the next div up.
I have written some code but unfortunately it's not working :(
HTML:
<div class="tutorial">
<p class="heading">Tell us about yourself</p>
<div class="body">
<table>
<tr>
<td>
<label for="full_name">What's your full name?</label>
</td>
</tr>
<tr>
<td>
<input type="text" name="full_name" id="full_name" placeholder="Full Name" />
</td>
</tr>
<tr>
<td>
<br/>
</td>
</tr>
<tr>
<td>
<label for="about">Describe yourself:</label>
</td>
</tr>
<tr>
<td>
<textarea id="about" name="about" rows="5" cols="40" placeholder="Share you hobbies, interests and more about yourself"></textarea>
</td>
</tr>
<tr>
<td width="900px" height="60px"></td>
<td>
<button id="next" class="btn">Next</button>
</td>
</tr>
</table>
</div>
</div>
<div class="tutorial hidden">
<p class="heading">Tell us about yourself!</p>
<div class="body">Body</div>
</div>
<div class="tutorial hidden">
<p class="heading">Tell us about yourself!</p>
<div class="body">Body</div>
</div>
<div class="tutorial hidden">
<p class="heading">Tell us about yourself!</p>
<div class="body">Body</div>
</div>
<div class="tutorial hidden">
<p class="heading">Tell us about yourself!</p>
<div class="body">Body</div>
</div>
JS:
$(function () {
var tutorials = $("div.tutorial");
var idNumber = 1;
tutorials.each(function () {
$(this).attr("id", idNumber);
idNumber++;
});
var nextButton = $("#next");
$(nextButton).on('click', function () {
var currentTutorial = $("div.tutorial").not(".hidden");
var currentTutorialId = currentTutorial.prop("id");
currentTutorial.addClass("hidden");
var nextTutorialId = currentTutorialId++;
var nextDiv = null;
if ($("div.tutorial").is("#" + nextTutorialId)) {
var nextDiv = $("div.tutorial");
}
nextDiv.removeClass("hidden");
});
});
Removed CSS to shorten the question's length. :)
What I want:
I want the next button to hide the current div and bring up the very next div after it.
What I have done:
var currentTutorial = $("div.tutorial").not(".hidden");
var currentTutorialId = currentTutorial.prop("id");
currentTutorial.addClass("hidden");
var nextTutorialId = currentTutorialId++;
var nextDiv = null;
if ($("div.tutorial").is("#" + nextTutorialId)) {
var nextDiv = $("div.tutorial");
}
nextDiv.removeClass("hidden");
You are trying to select by id, however I don't see any id for the .tutorial divs. However, you could simply use the next jQuery function to get the nextSibling of the current div. You also have to make sure that there's at least one div without the .hidden class initially.
E.g.
$('div.tutorial:not(.hidden)').addClass('hidden').next().removeClass('hidden');
You need to remove the id from your buttons and instead use a class and change your selector for the click binding. As sugessted by #koala_dev.
You can use prev() and next() functions like
$(nextButton).on('click', function () {
var currentTutorial = $("div.tutorial").not(".hidden");
var currentTutorialId = currentTutorial.prop("id");
currentTutorial.addClass("hidden");
currentTutorial.next('div').show();
nextDiv.removeClass("hidden");
});
I have some code I am using that works well cloning the contents of a div as many times as needed.
The original code would rename the name/id of each form field. so the first clone the name would be "name1" second clone "name2" etc...
The problem is when I put the form fields within a div or a table for design purposes.
The code doesn't rename the form fields anymore as it seems to refer to the top elment which is the table or div (depending which I used)
Here is a cut down version of the code that contains everything needed for this example (can be copied into an editor and will work as is. You will see the field id's are not being renamed):
www.jsbin.com/oyavez/1/edit
<script type="text/javascript">
var formCounter = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
}
function moreFields() {
formCounter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + formCounter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields;
</script>
<title>Add Orders IO TOC</title>
</head>
<body>
<!-- Template -->
<div id="readroot" style="display: none">
<table>
<tr><td colspan="2"><h3>Order <script>document.write(formCounter);</script></h2></td></tr>
<tr><td>Order ID: </td><td><input type="text" id="OrderID name="OrderID[]" ></input></td>
<td>Order Name: </td><td><input type="text" id="OrderName" name="OrderName[]" ></input></td>
</table>
<br /><br /><input type="button" value="Remove Above Order" style="width:200px;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<!-- ROW -->
</div>
<!-- END Template -->
<!-- Start of form -->
<form method="get" action="form.php">
<table>
<tr><td align="center" colspan="2"><h2>Contract</h2></td></tr>
<!-- Static part of the form not to be cloned -->
<tr><td>Contract: </td><td><input type="text" id="Contract" name="Contract" ></input></td>
<td>Signed Date: </td><td><input type="text" id="datepicker0" name="SignedDate" ></input></td>
<tr><td align="center" colspan="2"><h2>Orders</h2></td></tr>
</table>
<!-- ROW -->
<!-- Cloned parts of the form appear here -->
<span id="writeroot"></span>
<table>
<tr><td align="center" > <input type="button" style="width:200px;" value="Add another order below" onclick="moreFields()" /></td>
<td align="center" ><input type="submit" value="Submit IO and all Orders" style="width:200px;" ></td></tr>
</table>
</form>
Anyone know how to get to the child of the table it would seem?
Thanks!