add/remove row css

Question

I have added dynamic pull down search menu for my site. If you go to the link I provided, you will notice 2 links on the left for the javascript add/delete row in a table options which work ok until I add class="chzn-select" (dynamic search menu) to the pull down menu. What happens is that when class is added it doesn't add new rows anymore for some reason.

On the menu on the left you can click to see NoCSS table in the action, and problematic CSS table which has the class="chzn-select". I think the problem is that css for this menu is dynamic depending on which state the menu is in, but cant figure out where is the problem. Any help appreciated..

Link for the test: http://directa.sytes.net/test/ User: test1 Pass: test1

Add/remove script used: jsfiddle.net/frtrc

Thanks

I would paste css code here, but the site keeps saying that it contains code and doesn't let me post no matter how I format it.. :\

You should post your code here on the off-chance that those other links die one day. — jamesplease, Mar 18 '13 at 11:53
I would, but there is really a LOT of it, it would just clog the post, thats why I provided live website to see it in action. — targsx, Mar 18 '13 at 11:57

score 1 · Answer 1 · answered Mar 18 '13 at 14:31

The Problem comes when you use chosen.jquery.min.js and choose.css that generated dyanamically new div after select option, so that time javascript not work $tr.find("input,select").attr("name", function() because only two tag add input and select

I Suggest to add javascript line in

$(document).ready(function($)
    {
        $('#sif_roba1').next('div').attr("id","sif_roba1");//Chane Code
        $('#sif_roba1').next('div').attr("name","sif_roba1");
        // trigger event when button is clicked
        $("button.add").click(function()
        {
            // add new row to table using addTableRow function
            addTableRow($("table"));
            // prevent button redirecting to new page
            return false;

        });

        // function to add a new row to a table by cloning the last row and 
        // incrementing the name and id values by 1 to make them unique
        function addTableRow(table)
        {

            // clone the last row in the table
            var $tr = $(table).find("tbody tr:last").clone();


            // get the name attribute for the input and select fields


            $tr.find("input,select,div").attr("name", function()
            {
                // break the field name and it's number into two parts
                var parts = this.id.match(/(\D+)(\d+)$/);
                // create a unique name for the new field by incrementing
                // the number for the previous field by 1
                return parts[1] + ++parts[2];

            // repeat for id attributes
            }).attr("id", function(){
                var parts = this.id.match(/(\D+)(\d+)$/);
                return parts[1] + ++parts[2];
            });
            // append the new row to the table
            $(table).find("tbody tr:last").after($tr);
            $tr.hide().fadeIn('slow');

            // row count
            rowCount = 0;
            $("#table tr td:first-child").text(function() {
                return ++rowCount;
            });

            // remove rows
            $(".remove_button").on("click", function() {
                $(this).parents("tr").fadeOut('slow', function () { 
                    $(this).remove();
                    rowCount = 0;
                    $("#table tr td:first-child").text(function() {
                        return ++rowCount;
                    });
                });
           });

        };
    });

OK, Change on that Page nothing else...

score 0 · Answer 2 · edited May 23 '17 at 11:57

The problem comes from the plugin that creates the styled drop down with a search bar (for Choose Country).

It displays an input field that is used to filter the list of countries. The problem with this is that this input field does not have the id-attribute so when the following code is executed it does not have any id to split and the array will be empty.

$tr.find("input,select").attr("name", function()
{
    // break the field name and it's number into two parts
    var parts = this.id.match(/(\D+)(\d+)$/);
    // create a unique name for the new field by incrementing
    // the number for the previous field by 1
    return parts[1] + ++parts[2];
    // repeat for id attributes
}).attr("id", function(){
    var parts = this.id.match(/(\D+)(\d+)$/);
    return parts[1] + ++parts[2];
});

The solution is to first make sure that there is an id to split. More information about that here:

Select elements by attribute

Also, you the clickMe()-function does catching the onclick-event does not serve any purpose and generates an error.

Thanks for the pinpointing the issue, but Im not sure where to begin. Can you please give me some pointers what exactly needs to be done, in fact which part needs to be changed? — targsx, Mar 18 '13 at 13:11
Well, if you do want to restructure or change your solution a simple suggestiong would be to make sure that the textbox has an id. Try putting this in your ready-function: $(".chzn-search").find("input").attr("id", "searchbox1"); — ahdaniels, Mar 18 '13 at 13:32
I updated the link above, but still the same..any other suggestions? — targsx, Mar 18 '13 at 14:02

add/remove row css

2 Answers2