Solved

Adding multiple rows dynamically and persisting to database

Posted on 2013-02-06
12
301 Views
Last Modified: 2013-02-08
A product row can be added by clicking the Add Row link.
This will add a new row with the ddSlick select.

When a user adds new rows, I need to be able to persist the values to the database.
The onSelected event fires, and now I just have an alert
alert(data.selectedData.value)

I can use the onSelected event to set the value to a hidden field, but will that cause me issues if the user adds more than 1 row?

Am I going about this the wrong way?


http://jsfiddle.net/xarPG/4/
0
Comment
Question by:JRockFL
  • 6
  • 6
12 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38863911
I can use the onSelected event to set the value to a hidden field, but will that cause me issues if the user adds more than 1 row?

Open in new window


Create an array (add [] to each hidden field's name)

<input type="hidden" name="ddSlick[]" />
<input type="hidden" name="ddSlick[]" />
<input type="hidden" name="ddSlick[]" />

on the server side you get an array for the parameter ddSlick
0
 
LVL 8

Author Comment

by:JRockFL
ID: 38865708
Thank you for the reply.

When I try to access it on the server side
Request.Form("products") = null

Request.Form("products[]") = ","

Am I doing this right?

<input type='hidden' name='products[]' id='products[]' />

$('#products').val(data.selectedData.value);
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38865953
don't use this for ID, ID atribute value MUST BE unique in a document
hope you're talking about .Net :
http://stackoverflow.com/questions/2776711/passing-array-values-in-an-http-request-in-net
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 8

Author Comment

by:JRockFL
ID: 38866170
I have updated the way in which the hidden field's value is set. Yes. I'm using .net

$('input[name=products]').val(data.selectedData.value);

<input type='hidden' name='products' />

Open in new window

I added two rows with two different products. When I do it this way,  there are two values but they are both the same when it should be different.

Results:
?Split(Request.Form("products"), ",")
{Length=2}
    (0): "11"
    (1): "11"

When I use this name, no values are saved.
Results:

<input type='hidden' name='products[]' />

Open in new window


?Split(Request.Form("products"), ",")
{Length=1}
    (0): ""
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38866191
Not sure where, how you put this line
$('input[name=products]').val(data.selectedData.value);
So randomly I can propose :
$(this).closest("tr").find('input[name=products]').val(data.selectedData.value);
OR :
$(this).find('input[name=products]').val(data.selectedData.value);

Please update the jsfiddle IF YOU TRIED and it don't work, thanks
0
 
LVL 8

Author Comment

by:JRockFL
ID: 38866313
Still not working.

I have update jsfiddle
http://jsfiddle.net/xarPG/10/

1. Add a new row. (The value of the id will be set to the quantity textbox to easily see value)
2. Add a second row.
3. Change the value of the second row. The first value is also updated. This is the problem.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38866535
where did you put the code provided ID 38866191?
I can't locate it
0
 
LVL 8

Author Comment

by:JRockFL
ID: 38866570
I took it out, it was above updaterows
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38866579
please put it at the same position when you said it don't work.
0
 
LVL 8

Author Comment

by:JRockFL
ID: 38867613
I have updated fiddle, line 45.

I also changed the code to display the value in quantity textbox instead of hidden field so I could see results.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38867647
thank you
replace :
$(this).find('input[name=products]').val(data.selectedData.value);
by :
data.selectedItem.closest("tr").find('input[name=quantity]').val(data.selectedData.value);
0
 
LVL 8

Author Closing Comment

by:JRockFL
ID: 38867650
You are awesome!
That did it :)

Thank you so much for your dedicated help with this.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Weekend adv creator 3 38
Animated .jpg? 13 79
Jquery GMAP3 Hierarchy 1 28
tiny glitch in my main slider 3 24
I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question