|
samflex wrote: However, when I click the ADD button, it adds just one textbox.
Because you're only adding one textbox:
samflex wrote:
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.setAttribute('id','sourcename1'+NumOfRow);
newTextBox.setAttribute('id','sourceaddress1'+NumOfRow);
newTextBox.setAttribute('id','income1'+NumOfRow);
...
newDiv.appendChild(newTextBox);
Setting the id attribute on the one element three times doesn't magically turn it into three elements. 
This looks like the sort of thing where AngularJS[^] or Handlebars.js[^] would probably help.
For example, using Handlebars:
<script id="row-template" type="text/x-handlebars-template">
<div>
<div class="form-group">
<label for="sourcename{{rowNumber}}">Name</label><br>
<input type="text" style="width:250px;" class="form-control" name="sourcename{{rowNumber}}" id="sourcename{{rowNumber}}" placeholder="Name of income source...">
</div>
<div class="form-group">
<label for="sourceaddress{{rowNumber}}">Address</label><br>
<input type="text" style="width:250px;" class="form-control" name="sourceaddress{{rowNumber}}" id="sourceaddress{{rowNumber}}" placeholder="Address of income source">
</div>
<div class="form-group">
<label for="income{{rowNumber}}">Income</label><br>
<input type="text" style="width:250px;" class="form-control" name="income{{rowNumber}}" id="income{{rowNumber}}" placeholder="income...">
</div>
<input id="Button{{rowNumber}}" type="button" rel="remove-row" value="Remove" />
</div>
</script>
<div id="addrow">
<div>
<div class="form-group">
<label for="sourcename1">Name</label><br>
<input type="text" style="width:250px;" class="form-control" name="sourcename1" id="sourcename1" placeholder="Name of income source...">
</div>
<div class="form-group">
<label for="sourceaddress1">Address</label><br>
<input type="text" style="width:250px;" class="form-control" name="sourceaddress1" id="sourceaddress1" placeholder="Address of income source">
</div>
<div class="form-group">
<label for="income1">Income</label><br>
<input type="text" style="width:250px;" class="form-control" name="income1" id="income1" placeholder="income...">
</div>
</div>
</div>
<input type="button" value="Add More" rel="add-row" />
$(function(){
var rowCount = 1;
var rowSource = $("#row-template").html();
var rowTemplate = Handlebars.compile(rowSource);
$("form").on("click", "input[rel='add-row']", function(){
rowCount++;
var context = { rowNumber: rowCount };
var html = rowTemplate(context);
$("#addrow").append(html);
});
$("form").on("click", "input[rel='remove-row']", function(){
var addrow = document.getElementById('addrow');
addrow.removeChild(this.parentNode);
});
});
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi Richard,
You explain it so well. Thank you so much.
Now, I have not used AngularJS before. So, if I have to use your code as is, do I need to install or import any libraries or is it just plug and play?
Also, I went ahead and added name attribute as well like below:
newTextBox.type = 'text';
newTextBox.setAttribute('id','name','sourcename1'+NumOfRow);
newTextBox.setAttribute('id','name','sourceaddress1'+NumOfRow);
newTextBox.setAttribute('id','name','income1'+NumOfRow);
Will my php be able to tell that I have say, sourcename1,sourcename2, etc by just adding the name attribute?
I can come up with the php code to grab all the values and insert into the database.
Many thanks,
|
|
|
|
|
The example I posted was using Handlebars.js[^] - you just need to add a reference to the script file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js" integrity="sha256-1O3BtOwnPyyRzOszK6P+gqaRoXHV6JXj8HkjZmPYhCI=" crossorigin="anonymous"></script>
In the template, I've given the fields sequential names, so you'll get sourcename1, sourcename2, etc. Obviously, if the user removes a row, you could get a gap in the sequence. You might want to add a hidden field within each row's <div> with a fixed name, which would then give you the list of IDs to look for in your PHP code:
<script id="row-template" type="text/x-handlebars-template">
<div>
<input type="hidden" name="rowIDs" value="{{rowNumber}}" />
...
</div>
</script>
<div id="addrow">
<div>
<input type="hidden" name="rowIDs" value="1" />
...
</div>
</div>
$rowIDs = $_POST['rowIDs'];
foreach ($rowIDs as $id) {
$sourcename = $_POST['sourcename' . $id];
$sourceaddress = $_POST['sourceaddress' . $id];
$income = $_POST['income' . $id];
...
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
You are just so awesome.
I did however, add a reference before this response:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
but when I click on the Add More, nothing happens.
I really like this AngularJS because looking at the code, it will ensure that similar textbox styles are maintained but it is not working so far.
The original javascript is adding the three boxes but the styles are completely off.
|
|
|
|
|
You've added a reference to AngularJS. As I said, the example I posted was using Handlebars.
You'll need to remove the Angular reference and add the Handlebars one. If you haven't already included it, you'll also need a reference for jQuery.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Oh I see.
Thanks so much sir.
|
|
|
|
|
WOW!!!
This is so awesome. Textbox size and styling are maintained. WOW.
Just one last question please sir?
I need to use same Add More to the rest.
In other words, rather than add rest of the control to the AngularJS script, I need to add the Add More button to a few more of the controls within their respective DIV.
For instance, we have added this button to the with ID of addrow.
Assume that I have another with ID of addrow1, do just add another handlebars with a separate unique and wrap it around the DIV I need to add the button to?
For instance, this becomes:
<script id="row-template1" type="text/x-handlebars-template">
etc
|
|
|
|
|
samflex wrote: AngularJS
Handlebars.
samflex wrote: Assume that I have another <div> with ID of addrow1, do just add another handlebars with a separate unique and wrap it around the DIV I need to add the button to?
Effectively, yes.
You'll need some way to know which Handlebars template to use, and which <div> to append it to, based on the button that was clicked.
Something like this should work:
<script id="row-template" type="text/x-handlebars-template">
<div>
<input type="hidden" name="rowIDs" value="{{rowNumber}}" />
...
<input id="Button{{rowNumber}}" type="button" rel="remove-row" value="Remove" />
</div>
</script>
<div id="addrow" data-row-count="1" data-template-id="row-template">
<div>
<input type="hidden" name="rowIDs" value="1" />
...
</div>
</div>
<input type="button" value="Add More" rel="add-row" data-target="addrow" />
...
<script id="row-template-2" type="text/x-handlebars-template">
<div>
<input type="hidden" name="row2IDs" value="{{rowNumber}}" />
...
<input id="Button{{rowNumber}}" type="button" rel="remove-row" value="Remove" />
</div>
</script>
<div id="addrow2" data-row-count="1" data-template-id="row-template-2">
<div>
<input type="hidden" name="row2IDs" value="1" />
...
</div>
</div>
<input type="button" value="Add More" rel="add-row" data-target="addrow2" />
$(function(){
var templates = {
"row-template": Handlebars.compile($("#row-template").html()),
"row-template-2": Handlebars.compile($("#row-template-2").html())
};
$("form").on("click", "input[rel='add-row']", function(){
var containerId = $(this).data("target");
var container = $("#" + containerId);
var templateId = container.data("templateId");
var template = templates[templateId];
var rowCount = container.data("rowCount");
rowCount++;
var context = { rowNumber: rowCount };
var html = template(context);
container.append(html);
container.data("rowCount", rowCount);
});
$("form").on("click", "input[rel='remove-row']", function(){
var row = this.parentNode;
var container = row.parentNode;
container.removeChild(row);
});
});
Here's a quick demo: Edit fiddle - JSFiddle[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I did it differently yesterday which worked but I will adapt this solution.
It is cleaner and more efficient.
You have been incredibly generous and patient. Thanks so much sir.
It is just not the code you provide but you explain it so well.
Many thanks.
|
|
|
|
|
I have a Web user control with its Javascript code in a JS file. Here is the code in the JS File.
function CtrlColor() {}
CtrlColor.prototype = {
Change: function() {
if (Category == '1') {
this.pnlSearchClientID.style.backGroundColor = 'Red';
} else {
this.pnlSearchClientID.style.backGroundColor = 'Blue';
}
}
};
The User Control has a Panel whose color i want to change from a Page. Here is the User Control:
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="CtrlName.ascx.vb" Inherits="MultiInstanceControl.CtrlName" %>
<asp:Panel ID="pnlSearch" runat="server" Style="background-color: yellow;width: 30px;height: 30px;"></asp:Panel>
<script type="text/javascript" src="CtrlNameJS.js"></script>
<script type="text/javascript">
function CtrlName <%= me.ClientID %> () {
this.pnlSearchClientID = <%= pnlSearch.ClientID %> ;
}
CtrlName <%= me.ClientID %> = CtrlColor.prototype;
</script>
Category is a Server Side property of the Web Control, which I set in the Markup of the page.
In the Page I have 2 Instances of the above Web user Control.
<form id="form1" runat="server">
<div> 1. First Instance
<uc1:CtrlName ID="CtrlName1" IsMultipleFile="false" Category="1" runat="server" />
<asp:Button runat="server" ID="btnTest1" Text="Get Value" OnClientClick="return btnTest_ClientClick('1');" />
<br /> 2. Second Instance
<uc1:CtrlName ID="CtrlName2" IsMultipleFile="false" Category="2" runat="server" />
<asp:Button runat="server" ID="Button2" Text="Get Value" OnClientClick="return btnTest_ClientClick('2');" />
</div>
<script type="text/javascript">
var inst1 = null;
var inst2 = null;
inst1 = new CtrlName<%= CtrlName1.ClientID %> ();
inst2 = new CtrlName<%= CtrlName2.ClientID %> ();
function btnTest_ClientClick(strVal) {
if (strVal == '1') {
inst1.Change();
} else {
inst2.Change();
}
return false;
}
</script>
</form>
When I execute this, it throws an error:
CtrlNameCtrlName1 is not a constructor
at this line
inst1 = new CtrlName<%=CtrlName1.ClientID %>();
Any suggestion where I am going wrong?
|
|
|
|
|
HemeshSoni wrote: function CtrlName <%= me.ClientID %> ()
Have you really got the space in there, or was that a typo in your question?
HemeshSoni wrote: CtrlName <%= me.ClientID %> = CtrlColor.prototype;
Again with the space. And shouldn't you be assigning the prototype, rather than overwriting the function?
CtrlName<%= me.ClientID %>.prototype = CtrlColor.prototype;
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Yes it was a typing mistake, there is no space between the
CtrlName<%= me.ClientID %>
|
|
|
|
|
Thank you Richard, it worked.
|
|
|
|
|
Hy,
I am one of those who have problems with url. I have mvc app with angular. It works on VS and on IIS on 5577 port, but on 80 port doesn`t. Why?
I got 404 in console that url based on adress/control/function is not found. Isn`t this problem with url routing? I still cant get out of it. I did aspnetregiis command, which was succesfull and inserted
runAllManagedModulesForAllRequests="true"
in config file.
Still not working. any ideas? There is static file handler in IIS. Should it be removed?
|
|
|
|
|
Are you using OWIN?
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
As far as I see, OWIN is only in my config file where it was automaticaly created. I don`t use it directly anywhere.
|
|
|
|
|
It works on a different port, so that wouldn't have mattered. I blame Monday-morning brain and apologize.
It sounds like you have this problem:
iis 7 - ASP.NET Web API application gives 404 when deployed at IIS 7 - Stack Overflow
There are a number of possible solutions in there, though I've always preferred the specific handler vs the runAll... method.
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
|
Created a loop to loop through an array based on the values from the dice roll. Trying to get all the possible scores for a yahtzee game. so far I have it working to that it does add the scores based on the roll example1
I also have it working so that it does not continue to add the score if the a certain die is selected
However my issue is that it keeps increasing the score instead of starting over on subsequent rolls example2
<pre>$(document).ready(function(){
var die1=$('.die1');
var die2=$('.die2');
var die3=$('.die3');
var die4=$('.die4');
var die5=$('.die5');
var turns=3;
var dice;
var dice_value = new Array(5);
var ones=0;
var twos=0;
var threes=0;
var fours=0;
var fives=0;
var sixes=0;
var die;
function roll(die,i){
rando = Math.floor(Math.random()*6)+1;
die.html("<img src=images/die"+rando+".png>");
die.find('img').attr('class', rando);
dice_value[i]=rando;
$('img').height(50);
};
$('.die').click(function(){
$(this).toggleClass('selected');
});
$('.button').click(function(){
for(i=0; i<=turns; turns--){
if(turns>0){
dice =[die1,die2,die3,die4,die5];
for(i=0; i<dice.length;i++){
if (!dice[i].hasClass('selected')){
roll(dice[i],i);
die= dice[i].find('img').attr('class');
}
}
}
else{
$('.warning').html('Pick a category!');
}
}
for(var i=0; i< dice_value.length;i++){
if(!dice[i].hasClass('selected') && turns > 0){
if( dice_value[i] == 1){
ones= ones+1;
$('.aceScore').html(ones);
}
if( dice_value[i] == 2){
twos= twos+2;
$('.twoScore').html(twos);
}
if( dice_value[i] == 3){
threes= threes+3;
$('.threeScore').html(threes);
}
if( dice_value[i] == 4){
fours= fours+4;
$('.fourScore').html(fours);
}
if( dice_value[i] == 5){
fives= fives+5;
$('.fiveScore').html(fives);
}
if( dice_value[i] == 6){
sixes= sixes+6;
$('.sixScore').html(sixes);
}
}
}
});
console.log(ones);
console.log(twos);
console.log(threes);
console.log(fours);
console.log(fives);
console.log(sixes);
});
<pre lang="HTML"><pre><table border="1" height='200' >
<tr>
<th colspan="3">Upper Section</th>
</tr>
<tr>
<td>Aces</td>
<td>Sum of all the ones</td>
<td class="score aceScore"></td>
</tr>
<tr>
<td>Twos</td>
<td>Sum of all the twos</td>
<td class="score twoScore"></td>
</tr>
<tr>
<td>Threes</td>
<td>Sum of all the threes</td>
<td class="score threeScore"></td>
</tr>
<tr>
<td>Fours</td>
<td>Sum of all the fours</td>
<td class="score fourScore"></td>
</tr>
<tr>
<td>Fives</td>
<td>Sum of all the fives</td>
<td class="score fiveScore"></td>
</tr>
<tr>
<td>Sixes</td>
<td>Sum of all the sixes</td>
<td class="score sixScore"></td>
</tr>
<tr>
<td colspan ='2'>Total</td>
<td class="totalScore"></td>
</tr>
<tr>
<td>Bonus</td>
<td>Score 35 </td>
<td class="bonus"></td>
</tr>
<tr>
<td colspan ='2'>Upper Total</td>
<td class="upperScore"></td>
</tr>
<tr>
<th colspan="3">Lower Section</th>
</tr>
<tr>
<td>3 of a Kind</td>
<td>SUm of all dice</td>
<td class="three_of_kind"></td>
</tr>
<tr>
<td>4 of a kind</td>
<td>Sum of all dice</td>
<td class="four_of_kind"></td>
</tr>
<tr>
<td>Full House</td>
<td>Score 35</td>
<td class="fullhouse"></td>
</tr>
<tr>
<td>sm. straight</td>
<td>Score 30</td>
<td class="sm"></td>
</tr>
<tr>
<td>lg. Straight</td>
<td>score 40</td>
<td class="lg"></td>
</tr>
<tr>
<td>Yahtzee</td>
<td>Score yatzee</td>
<td class="yatzee"></td>
</tr>
<tr>
<td>Chance</td>
<td>sum of all dice</td>
<td class="chance"></td>
</tr>
<tr>
<td colspan ='2'>Lower Total</td>
<td class="lowerScore"></td>
</tr>
<tr>
<td colspan ='2'>Upper Total</td>
<td class="UpperScore"></td>
</tr>
<tr>
<td colspan ='2'>Combined Total</td>
<td class="combinedScore"></td>
</tr>
<section class="dice">
<div class="die die1"></div>
<div class="die die2"></div>
<div class="die die3"></div>
<div class="die die4"></div>
<div class="die die5"></div>
</section>
<button class="button">ROll</button>
</table>
</div> <!-- board div -->
</body>
</html>
|
|
|
|
|
You just need to reset all the counters to zero before each throw.
|
|
|
|
|
when i do that i doesnt add the score to the dice that I have selected to keep.
|
|
|
|
|
Then you need to keep those scores separately also. Think about how you actually play Yahtzee, and what you need to do before and after each throw.
|
|
|
|
|
$(document).ready(function () {
debugger;
if (window.location.href.toLowerCase = "https: Pages/HomePage.aspx") {
test.makeSharePointReady1();
}
I am trying to redirect to another site (say www.google.com) from a SharePoint site.
|
|
|
|
|
A very simple and quick fix will be to change the = operator, to == operator.
if (window.location.href.toLowerCase == "https: Pages/HomePage.aspx") {
"=" is used to assign the value, and "==" is used to test equality. Also, once converted to lowerCase, there is no sense in having "Page/HomePage" in caps, they will also be in lower format. Anyways, just see if that works otherwise, change them to lower case as well.
The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~
|
|
|
|
|
toLowerCase is also a method so you need (). Also, lowercase your text that you are comparing to.
if (window.location.href.toLowerCase() == "https://pages/homepage.aspx") {
There are two kinds of people in the world: those who can extrapolate from incomplete data.
There are only 10 types of people in the world, those who understand binary and those who don't.
modified 10-Feb-17 11:05am.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
