How to find number of elements when adding and deleting elemnts dynamically using jQuery?

Question

Hi,

I'm working on a web application (with ASP.NET 2.0 (C#) and jQuery)

In my application we have an interface using which our employees are able to enter records of a comany. We provided the interface with basic fields, Company Name, Contact Person, phone, etc. Now as you know some companies have thier branches, some have few (1 to 10) and some have many (100-200) branches. We have also provided a dynamic interface using jQuery, which allows our employees to add branches depending on number of branches a particular company have.

For addition, we have used jQuery's append function as ..

$("#branches").append("branch html fields text liek a html input field with id 'Namebranch1' ");

Now, with adding we have also provided a button with evey branch field seprately for deleting that particular branch. For deleting I have used

$("#branch1").remove()

Let's say, I have added 5 branches, then before submitting, I feel that branch number 3 is not necessary to enter, So I have deleted that branch data. So the process of adding and removing is as follows, we have added

1,2,3,4,5

Then, We deleted 3rd branch and now we have

1,2,4,5

Now as we have 4 elements, so whenever my user is adding or deleting a branch I am adding 1 and substracting 1 from a javascript variable respectively. And then entering that variable in a hidden field, so that when user submit data then I'll have the correct number of count that how any branches are added by the user and on the basis of this count, I know that how many times I have to run the loop to catch up all branches data seprately.

But the problem is when user submit the form then I am running a loop 4 times, what it means, I'll get data of 1,2 and 4 branches but as loop will stop when it completed 4 cycles then, data of 5th branch which is actully 4 will be missing. Because elements which will be posted when user will sibmit form are as (branchName5, branchTitle5 etc.)

I hope you guys understand what I need? Please tell me some logical solution of this problem.

Thanks

Answer 1

maybe this is a clue? in submit do ....

$('#branches').each( function (i) { this.id = 'branch' + i } );

Answer 2

Get rid of the hidden counter variable, and just iterate through Request.Form.Keys looking for branch*. Then, you'll just process any form variables that start with branch.

class Branch { public string Name; public string Title; }

void OnLoad(EventArgs e) {
   base.OnLoad(e);

   var branches = new Dictionary<int, Branch>();
   foreach (string key in Request.Form.Keys) {
     if (!key.StartsWith("branch")) continue;

     int id;
     if (key.StartsWith("branchTitle")) {
       id = int.Parse(key.Substring("branchTitle".Length));
       branches.Ensure(i).Title = Request.Form[key];
     } else if (key.StartsWith("branchName")) {
       id = int.Parse(key.Substring("branchName".Length));
       branches.Ensure(i).Name = Request.Form[key];
     }            
   }
}

// Ensure extension method
T Ensure<K, T>(this Dictionary<K, T> d, K key) where T:new {
   if (!d.ContainsKey(key)) {
      d.Add(key, new T());
   }
   return d[key];
}