Dynamically add rows that have ddSlick image drop down

The AddRow will add new rows to the table, however only the first row that is added has the ddSlick custom select applied correctly.

If the AddRow link is clicked more than once, it will still add a new row, however there is is nothing for the ddSlick.

Here is the html, Please see attached screen shot.
Any suggestions?

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1"><title>
      Administration Area
</title><link rel="stylesheet" href="/Stylesheets/screen.css" type="text/css" media="screen" title="no title" charset="utf-8" /><link rel="stylesheet" href="/Stylesheets/plugin.css" type="text/css" media="screen" title="no title" charset="utf-8" /><link rel="stylesheet" href="/Stylesheets/custom.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <style type="text/css" media="screen">
       
    </style>
    <link href="/Stylesheets/smoothness/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />

   
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="/Scripts/slate/slate.js"></script>
    <script type="text/javascript" src="/Scripts/slate/slate.portlet.js"></script>
    <script type="text/javascript" src="/Scripts/plugin.js"></script>
    <script src="/Scripts/slate/slate.js" type="text/javascript"></script>
    <script src="/Scripts/jquery/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>    
    <script type="text/javascript" src="/Scripts/jquery.MultiFile.js"></script>
    <script src="/Scripts/jquery.ddslick.min.js" type="text/javascript"></script>

   
    <script type="text/javascript">
    $(document).ready(function () {
//        $('.AddRow').click(function () {
//            $('#tblProducts > tbody:last').append("<tr><td><div class='field'><select><option>Hello World</option></select></div></td><td><div class='field'><input type='text' /></div></td><td><div class='field'><input type='text' /></div></td><td><div class='field'><input type='text' /></div></td></tr>");            
//        });
    });
</script>


</head>
<body>

                <table cellpadding="0" cellspacing="0" border="0" class="display" id="tblProducts">
                    <thead>
                        <tr>
                            <th>
                                Product
                            </th>
                            <th>
                                Quantity
                            </th>
                            <th>
                                Price
                            </th>
                            <th>
                                Total
                            </th>
                            <th>
                                Shipped
                            </th>
                            <th>&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                       
                                <tr id="1">
                                <input name="linekey" type="hidden" value='441' class="delete-key" />  
                               <input type="hidden" name="ctl00$ContentPlaceHolder1$rpProducts$ctl00$hfSelectedProductID" id="ctl00_ContentPlaceHolder1_rpProducts_ctl00_hfSelectedProductID" value="5" />                              
                                    <td>
                                        <div class="field">
                                            <div id="productDropDown0"></div>                                                                                                                                    
                                        </div>
                                    </td>
                                    <td>
                                        <div class="field">
                                            <input name="ctl00$ContentPlaceHolder1$rpProducts$ctl00$txtQuantity" type="text" value="1" id="ctl00_ContentPlaceHolder1_rpProducts_ctl00_txtQuantity" />                                            
                                        </div>
                                    </td>
                                    <td>
                                        <div class="field">
                                            <input name="ctl00$ContentPlaceHolder1$rpProducts$ctl00$txtPrice" type="text" value="20.95" id="ctl00_ContentPlaceHolder1_rpProducts_ctl00_txtPrice" />                                          
                                        </div>
                                    </td>
                                    <td>
                                        <div class="field">
                                           <input name="ctl00$ContentPlaceHolder1$rpProducts$ctl00$txtLineTotal" type="text" value="20.95" readonly="readonly" id="ctl00_ContentPlaceHolder1_rpProducts_ctl00_txtLineTotal" />
                                        </div>
                                    </td>
                                    <td>
                                        <div class="field">
                                            <select name="ctl00$ContentPlaceHolder1$rpProducts$ctl00$ddlShipped" id="ctl00_ContentPlaceHolder1_rpProducts_ctl00_ddlShipped">
      <option value="1">Yes</option>
      <option selected="selected" value="0">No</option>

</select>                                                                                                                                    
                                        </div>
                                    </td>
                                    <td>
                                        <div class="field">
                                            <a class="AddRow">Add Row</a>
                                           
                                            <a class="DeleteRow">Delete Row</a>
                                        </div>
                                    </td>
                                </tr>
                           
 
                           
                    </tbody>
                </table>
 
   
<script type="text/javascript">
$(document).ready(function () {
var ddData = [
    {
        text: "Facebook",
        value: 1,
        selected: false,
        description: "Description with Facebook",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
    },
    {
        text: "Twitter",
        value: 2,
        selected: false,
        description: "Description with Twitter",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
    },
    {
        text: "LinkedIn",
        value: 3,
        selected: true,
        description: "Description with LinkedIn",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
    },
    {
        text: "Foursquare",
        value: 4,
        selected: false,
        description: "Description with Foursquare",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
    }
];
$('.AddRow').click(function () { $('#tblProducts > tbody:last').append("<tr><td><div class='field'><div id='myDropdown'></div></div></td><td><div class='field'><input type='text' id='quantity' name='quantity' /></div></td><td><div class='field'><input id='price' type='text' name='price' /></div></td><td><div class='field'><input type='text' id='linetotal' name='linetotal' readonly='readonly' /></div></td><td><div class='field'><asp:DropDownList ID='ddlShipped' runat='server'><select id='shipped' name='shipped'><option value='1'>Yes</option><option selected='selected' value='0'>No</option></select></div></td><td><div class='field'><a class='DeleteRow'>Delete Row</a></div></td></tr> ");
$('#myDropdown').ddslick({ data: ddData, defaultSelectedIndex: 0, width: 400, selectText: "Select a product", imagePosition: "left", onSelected: function (data) {} });
updateRows();}); });
</script></form>
</body>
</html>
screenshot.jpg
LVL 8
JRockFLAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
this is totally useless in a browser : <asp:DropDownList
This tag is for server side running .net...

anyway check this test page : http://jsfiddle.net/xarPG/2/
using :
    $('.AddRow').click(function () {
        var newRow = $("<tr><td><div class='field'><div class='myDropdown'></div></div></td><td><div class='field'><input type='text' id='quantity' name='quantity' /></div></td><td><div class='field'><input id='price' type='text' name='price' /></div></td><td><div class='field'><input type='text' id='linetotal' name='linetotal' readonly='readonly' /></div></td><td><div class='field'><asp:DropDownList ID='ddlShipped' runat='server'><select id='shipped' name='shipped'><option value='1'>Yes</option><option selected='selected' value='0'>No</option></select></div></td><td><div class='field'><a class='DeleteRow'>Delete Row</a></div></td></tr>");
        $('#tblProducts > tbody:last').append(newRow);
        $('.myDropdown', newRow).ddslick({ data: ddData, defaultSelectedIndex: 0, width: 400, selectText: "Select a product", imagePosition: "left", onSelected: function (data) {} }); 
        updateRows();
    });

Open in new window

0
 
leakim971PluritechnicianCommented:
please put your code inside the code snippet (selet/surlign the whole code using the mouse and click on the lin code)
and what is updateRows function?
0
 
JRockFLAuthor Commented:
Is this what you mean?
I have included updateRows
<script type="text/javascript">
$(document).ready(function () {
var ddData = [
    {
        text: "Facebook",
        value: 1,
        selected: false,
        description: "Description with Facebook",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
    },
    {
        text: "Twitter",
        value: 2,
        selected: false,
        description: "Description with Twitter",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
    },
    {
        text: "LinkedIn",
        value: 3,
        selected: true,
        description: "Description with LinkedIn",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
    },
    {
        text: "Foursquare",
        value: 4,
        selected: false,
        description: "Description with Foursquare",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
    }
];
$('.AddRow').click(function () { $('#tblProducts > tbody:last').append("<tr><td><div class='field'><div id='myDropdown'></div></div></td><td><div class='field'><input type='text' id='quantity' name='quantity' /></div></td><td><div class='field'><input id='price' type='text' name='price' /></div></td><td><div class='field'><input type='text' id='linetotal' name='linetotal' readonly='readonly' /></div></td><td><div class='field'><asp:DropDownList ID='ddlShipped' runat='server'><select id='shipped' name='shipped'><option value='1'>Yes</option><option selected='selected' value='0'>No</option></select></div></td><td><div class='field'><a class='DeleteRow'>Delete Row</a></div></td></tr> ");
$('#myDropdown').ddslick({ data: ddData, defaultSelectedIndex: 0, width: 400, selectText: "Select a product", imagePosition: "left", onSelected: function (data) {} });
updateRows();}); });

    function updateRows() {
        $('table tr:even').addClass('even');
        $('table tr:odd').addClass('odd');
    }

</script>

Open in new window

0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
JRockFLAuthor Commented:
Yes, that is correct about the asp:dropdownlist, I overlooked that and just copied what was in the aspx page.

Your solution is working.
What did you do differently?
I see you created a variable called newRow and assigned the value.
Then you called the append method and pass in newRow.

Is there anything else that you did?
0
 
leakim971PluritechnicianCommented:
Use a class (.) instead an id (#)
0
 
JRockFLAuthor Commented:
Ahhh, got it. That makes sense now.
0
 
JRockFLAuthor Commented:
Are you still around? I'm going to post another question similar to this.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.