|
Below is the debug output as well as the errors.
This AngularJS dynamic code is so gorgeous and works great in terms of the markup but this has been an unbelievable nightmare for me.
Richard, sir, I am wondering if you can give me a hint on how to make the original code I posted look as pretty as this one you did.
What I mean is that the page once loaded looks nice and is nicely laid out but when you click to Add another row, the new row looks different.
Since I can't get this to work and I begged my manager for another, perhaps that might be easier to implement?
DEBUG POST DATA: Array
(
[employeename] =>
[ttitle] =>
[rowIDs] => 1
[sourcename1] => John Doe
[sourceaddress1] => 123 Doe street
[income1] => $36,000.00
[sourcename12] => Jane Doe
[sourceaddress12] => 23 Jane Way
[income12] => $67,000.00
[spousename] => Array
(
[0] =>
)
[spouseAddress] => Array
(
[0] =>
)
[spouseIncome] => Array
(
[0] =>
)
[email] =>
[submitted] => true
)
Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\disclosures\forms\preview.php on line 14
Notice: Undefined variable: sourcename1 in C:\xampp\htdocs\disclosures\forms\preview.php on line 28
"> Notice: Undefined variable: sourceaddress1 in C:\xampp\htdocs\disclosures\forms\preview.php on line 29
"> Notice: Undefined variable: income1 in C:\xampp\htdocs\disclosures\forms\preview.php on line 30
"> Notice: Undefined variable: spousename in C:\xampp\htdocs\disclosures\forms\preview.php on line 31
"> Notice: Undefined variable: spouseAddress in C:\xampp\htdocs\disclosures\forms\preview.php on line 32
"> Notice: Undefined variable: spouseIncome in C:\xampp\htdocs\disclosures\forms\preview.php on line 33
|
|
|
|
|
samflex wrote: [rowIDs] => 1
...
sourcename12
Why have you ignored my suggestion to remove the extra "1" from the field names in the template, and to add the [] suffix to the name of the rowIDs fields? 
If you'd followed my suggestions, the submitted data would look like:
[rowIDs] => Array
(
[0] => 1
[1] => 2
)
[sourcename1] => John Doe
[sourceaddress1] => 123 Doe street
[income1] => $36,000.00
[sourcename2] => Jane Doe
[sourceaddress2] => 23 Jane Way
[income2] => $67,000.00
NB: rowIDs is an array, and the fields from the row have sequential names - sourcename1, sourcename2, etc.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Why have you ignored my suggestion to remove the extra "1" from the field names in the template, and to add the [] suffix to the name of the rowIDs fields? Confused |
I didn't sir.
I thought the code you showed there was the correct code I should use.
I copied the code and that's the code I tested with and that's actually the code I am testing with now.
The only change I made now was to remove the "1" in the line below:
<input type="hidden" name="rowIDs[]" value="" /> and used it as you see it now.
The good news is that for the first time, I did not get the "ivalid'''
Here is what it looks like now and the current error. I also noticed that one fieldname says, sourcename and down the line, it says sourcename1. Same with sourceaddress and income.
Are they by design?
BUG POST DATA: Array
(
[employeename] => James Brown
[ttitle] => IT Manager
[rowIDs] => Array
(
[0] =>
)
[sourcename1] => Mary Tyler Moore
[sourceaddress1] => 123 Tyler Street
[income1] => $2000,000.00
[email] =>
[submitted] => true
)
James Brown
IT Manager
Notice: Undefined index: sourcename in C:\xampp\htdocs\disclosures\forms\preview.php on line 17
Notice: Undefined index: sourceaddress in C:\xampp\htdocs\disclosures\forms\preview.php on line 18
Notice: Undefined index: income in C:\xampp\htdocs\disclosures\forms\preview.php on line 19
Notice: Undefined variable: sourcename1 in C:\xampp\htdocs\disclosures\forms\preview.php on line 21
Name:
Notice: Undefined variable: sourceaddress1 in C:\xampp\htdocs\disclosures\forms\preview.php on line 22
Address:
Income:
|
|
|
|
|
samflex wrote: The only change I made now was to remove the "1" in the line below:
And by doing that, you've broken the code I posted in yet another way!
Put the value="1" back in on that line. You're looking for a POST data of:
[rowIDs] => Array
(
[0] => 1
)
Then the loop will find the first ID is "1", and on the first iteration, will look for "sourcename1".
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
YEA!!!!
IT IS WORKING!!!!!!
Oh gosh, I can't thank you enough for saving me yet again.
Your patience is incredible and will be emulated.
Thank you so much Richard.
You have tremendous and thank you for sharing.
You will be greatly rewarded for your generosity.
I got pulled into offsite work yesterday and I am just getting back to you
Many THANKS sir.
|
|
|
|
|
Glad to hear it! 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi 
I have one application that receives the images from bing, I am using the api of bing, but I want save the images for I use them without internet. How I can do this? Somebody can help me?
|
|
|
|
|
In javascript? No - you do not have access to the user's hard drive for security reasons. The only way to save them to the user HDD is to download them, and let the user decide to store them or not - but even then, your app has no access to them after that.
You almost certainly want to look at a server side solution here, not client side.
Bad command or file name. Bad, bad command! Sit! Stay! Staaaay...
|
|
|
|
|
Hi. Thanks for your answer. Maybe I didn't explain in detail the situation.
Now, I see the images in my application from bing, using bing API. But when I turn off internet I want that the retreived images stay visible, so How I can do this? Is it possible in JS? Or in another way?
|
|
|
|
|
Member 13014278 wrote: I have one application that receives the images from bing, I am using the api of bing,
Depends on how you're getting them. If you are getting them from the API, at that point you could save them to disk.
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.
|
|
|
|
|
I'm creating an chrome extension with angular-cli, I did the popup extension and it work fine, but I want to initiate the application (bootstrap) from another way, example when the browser call a options page of the extension, or when I want to run an another .html wich I have on extension.
The question is, how to configure the angular-cli to initiate the app from another .html file wich is no just index.html.
Danke
|
|
|
|
|
Im using this function to go through my values that are in an array to find if they equal a small straight ("1234" or "2345" or "3456");
I decided the way id get this to work is by using regular expression , which worked if I got for example "12345". However if i got duplicates of a value , example "12234" it would not work. I used the filter function to get rid of the duplicate values, which worked however when it comes to my regular expressions it keeps returning null even when my x value returns for example "1234". Im thinking there has something to do with the filter function since without it i get values returned but I need it in order to get rid of duplicate values. console[^]
function smstraight(){
var score=0;
var x=dice_value.sort();
x=x.filter(function(item,index,inputArray){
return x=inputArray.indexOf(item) ==index;
}).join("");
var r1= /\B(1234)/g;
var a= x.match(r1);
var r2=/\B(2345)/g;
var b= x.match(r2);
var r3=/\B(3456)/g;
var c= x.match(r3);
console.log(x);
if(b== "2345" || a== "1234"|| c=="3456" || x== "12345"||x=="23456"){
console.log("hey it works");
score+= 30;
$('.sm').html(score);
}
}
|
|
|
|
|
I don't think RegEx is the right tool for this. You'd be better served by iterating the array and evaluating for unique values and building a result in the same step:
function smstraight(){
var score=$('.sm').html(score);
var source=dice_value.sort();
var result = [source[0]];
for(var i=1; i < source.length, i++){
if(source[i] == source[i-1] + 1) {
result.push(source[i]);
}
}
if(result.length == 4)
{
console.log("hey it works");
$('.sm').html(score+30);
}
}
Please not I just wrote this in the post, so it's not exactly tested and should be treated as conceptual.
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
I wanted to take this code and change the image.src and make it into an ajax request or something like that to have the source for the photos be a user's flickr photos. I tried doing this on my own using the flickr api, but it wouldn't work. Does anyone know how I could do this? Thanks!
JavaScript code is pasted below from this person's code pen:
Infinite Scroll + Pagination[^]
function getPageId(n) {
return 'article-page-' + n;
}
function getDocumentHeight() {
const body = document.body;
const html = document.documentElement;
return Math.max(
body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight
);
};
function getScrollTop() {
return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
}
function getArticleImage() {
const hash = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
const image = new Image;
image.className = 'article-list__item__image article-list__item__image--loading';
image.src = 'http://api.adorable.io/avatars/250/' + hash;
image.onload = function() {
image.classList.remove('article-list__item__image--loading');
};
return image;
}
function getArticle() {
const articleImage = getArticleImage();
const article = document.createElement('article');
article.className = 'article-list__item';
article.appendChild(articleImage);
return article;
}
function getArticlePage(page, articlesPerPage = 16) {
const pageElement = document.createElement('div');
pageElement.id = getPageId(page);
pageElement.className = 'article-list__page';
while (articlesPerPage--) {
pageElement.appendChild(getArticle());
}
return pageElement;
}
function addPaginationPage(page) {
const pageLink = document.createElement('a');
pageLink.href = '#' + getPageId(page);
pageLink.innerHTML = page;
const listItem = document.createElement('li');
listItem.className = 'article-list__pagination__item';
listItem.appendChild(pageLink);
articleListPagination.appendChild(listItem);
if (page === 2) {
articleListPagination.classList.remove('article-list__pagination--inactive');
}
}
function fetchPage(page) {
articleList.appendChild(getArticlePage(page));
}
function addPage(page) {
fetchPage(page);
addPaginationPage(page);
}
const articleList = document.getElementById('article-list');
const articleListPagination = document.getElementById('article-list-pagination');
let page = 0;
addPage(++page);
window.onscroll = function() {
if (getScrollTop() < getDocumentHeight() - window.innerHeight) return;
addPage(++page);
};
|
|
|
|
|
Greetings mates.
This is really a jQuery question but since is integrated with classic asp, it could be deleted if I post it on jquery for asp.net forum, hence here.
I am building a questionnaire (sort of) form and some of responses might require additional textboxes.
As a result, we are trying to use jquery or just regular JavaScript to give participants the opportunity to add additional rows to each div should they wish to.
So far, the simple JavaScript I am using is not working.
For instance, I have a div with ID of "addrow". with an ADD button next to that div.
Our expectation is that if the participant clicks that ADD button, the textboxes inside that div should be cloned to as many rows as they wish.
However, when I click the ADD button, it adds just one textbox.
Can someone please help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Questionnaires</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.bs-example{
margin-left: 250px;
margin-top: 30px;
}
</style>
<script type="text/javascript">
var NumOfRow = 1;
function Button1_onclick(){
NumOfRow++;
var addrow = document.getElementById('addrow');
var newDiv = document.createElement('div');
newDiv.setAttribute('id','innerDiv'+NumOfRow);
var newSpan = document.createElement('span');
newSpan.innerHTML = "Complete the following";
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.setAttribute('id','sourcename1'+NumOfRow);
newTextBox.setAttribute('id','sourceaddress1'+NumOfRow);
newTextBox.setAttribute('id','income1'+NumOfRow);
var newButton = document.createElement('input');
newButton.type = 'button';
newButton.value = 'Remove';
newButton.id = 'btn'+NumOfRow;
newButton.onclick = function RemoveEntry() {
var addrow = document.getElementById('addrow');
addrow.removeChild(this.parentNode);
}
newDiv.appendChild(newSpan);
newDiv.appendChild(newTextBox);
newDiv.appendChild(newButton);
addrow.appendChild(newDiv);
}
</script>
</head>
<body>
<div class="bs-example">
<form class="form-inline" action="process.asp" role="form">
<div class="form-group">
<label for="employeename">Employee Name</label><br>
<input type="text" style="width:375px;" class="form-control" name="employeename" id="employeename" placeholder="Employee name...">
</div>
<div class="form-group">
<label for="ttitle">Title</label><br>
<input type="text" style="width:375px;" class="form-control" name="ttitle" id="ttitle" placeholder="Title...">
</div><br><br><br>
<div id="addrow">
<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><input id="Button1" type="button" value="Add More" onclick="Button1_onclick()" /> <br><br><br>
<div class="form-group">
<label for="spousename">Name</label><br>
<input type="text" style="width:250px;" class="form-control" name="spousename" id="spousename" placeholder="Spouse Name...">
</div>
<div class="form-group">
<label for="spouseAddress">Address</label><br>
<input type="text" style="width:250px;" class="form-control" name="spouseAddress" id="spouseAddress" placeholder="Address of income source...">
</div>
<div class="form-group">
<label for="spouseIncome">Income</label><br>
<input type="text" style="width:250px;" class="form-control" name="spouseIncome" id="spouseIncome" placeholder="Income...">
</div><br><br><br>
<div class="form-group">
<label for="dividentname">Name</label><br>
<input type="email" style="width:250px;" class="form-control" name="dividentname" id="dividentname" placeholder="Divident name...">
</div>
<div class="form-group">
<label for="dividentaddress">Address</label><br>
<input type="text" style="width:250px;" class="form-control" name="dividentaddress" id="dividentaddress" placeholder="Address of divident...">
</div>
<div class="form-group">
<label for="dividentAmt">Divident Amount</label><br>
<input type="text" style="width:250px;" class="form-control" name="reimbursmentName" id="reimbursmentName" placeholder="Divident amount...">
</div><br><br><br>
<div class="form-group">
<label for="reimbursmentName">Name</label><br>
<input type="text" style="width:250px;" class="form-control" name="reimbursmentName" id="reimbursmentName" placeholder="Reimbursement name...">
</div>
<div class="form-group">
<label for="reimburseAddr">Address of Reimbursement</label><br>
<input type="password" style="width:250px;" class="form-control" name="reimburseAddr" id="reimburseAddr" placeholder="Reimbursement Address...">
</div>
<div class="form-group">
<label for="remursementAmt">Reinbursement Amount</label><br>
<input type="text" style="width:250px;" class="form-control" name="remursementAmt" id="remursementAmt" placeholder="Remursement Amount">
</div><br><br><br>
<div class="form-group">
<label for="inputHonoraria">Honoraria</label><br>
<input type="text" style="width:250px;" class="form-control" name="inputHonoraria" id="inputHonoraria" placeholder="Honoraria from a single source...">
</div>
<div class="form-group">
<label for="giftname">Name</label><br>
<input type="text" style="width:250px;" class="form-control" name="giftname" id="giftname" placeholder="Gift name...">
</div>
<div class="form-group">
<label for="giftaddress">Gift Address</label><br>
<input type="text" style="width:250px;" class="form-control" name=giftaddress" id="giftaddress" placeholder="Address of gift...">
</div><br><br><br>
<div class="form-group">
<label for="giftamount">Gift Amount</label><br>
<input type="text" style="width:250px;" class="form-control" name=giftamount" id="giftamount" placeholder="Gift amount...">
</div>
<div class="form-group">
<label for="orgname">Name of Organization</label><br>
<input type="text" style="width:250px;" class="form-control" name="orgname" id="orgname" placeholder="Name of organization...">
</div>
<div class="form-group">
<label for="orgaddresss">Address of Organization</label><br>
<input type="text" style="width:250px;" class="form-control" name="orgaddresss" id="orgaddresss" placeholder="Address of organization...">
</div><br><br><br>
<div class="form-group">
<label for="creditorname">Name of Creditor</label><br>
<input type="text" style="width:250px;" class="form-control" name="creditorname" id="creditorname" placeholder="Name of creditor...">
</div>
<div class="form-group">
<label for="creditoraddress">Address of creditor</label><br>
<input type="text" style="width:250px;" class="form-control" name="creditoraddress" id="creditoraddress" placeholder="Address of creditor...">
</div>
<div class="form-group">
<label for="creditAmt">Credit Amount</label><br>
<input type="text" style="width:250px;" class="form-control" name="creditAmt" id="creditAmt" placeholder="Credit Amount...">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br>
</div>
</body>
</html>
Many thanks for your help.
modified 17-Feb-17 8:55am.
|
|
|
|
|
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?
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
