Responsive Binding Problem Assistance Please

TomHall

I am really baffled on something and would appreciate some help.

I have been able to get a table working beautifully with the Responsive plugin. I have 10 columns. On a cell phone, columns 0, 1 are visible, 2 - 9 are hidden.

I have this code that is an event handler when the icon (before) element is clicked.

            $("tr").on('click', 'td.myClient', function () {
                setTimeout(helloWorld($(this).attr("data-id")),2000);
            })

When the before element is clicked, I get a child row that has 3 inputs. What I am attempting to do is this:

function helloWorld(btnID){

console.log(btnID);

$('#ro'+btnID).val('hello');

}

The parameter btnID is logged to the console.

The input w/ the id #ro192 should get a value of 'hello' but I get nothing.

Why is that???

TomHall

Maybe the better way to ask this question is this.

Given a table of 10 columns, the last four of which are 3 input fields, and 1 submit button.

On a mobile phone those last four columns are hidden. When someone clicks to expand the hidden columns, the four columns become visible.

At that time are those 4 elements, 3 input, 1 button, part of the DOM? I don't think they are as I have an AJAX call for onclick on the button that returns empty input fields that are not empty.

When I open on a desktop with all columns visible, the script works as it should. It is only with the columns being hidden first, that I can not pass the values of the inputs to my ajax script.

Thanks for any help and patience.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

TomHall

Colin,

Thank you so much. Your product and support is superb. My apology for not being better prepared and doing what is necessary to assist you. As you will see below I have gone the extra mile to help you help me.

Here is a link to a YouTube video I put together spelling out my project & current issue:

https://www.youtube.com/watch?v=znH3FtsUAVk&feature=youtu.be

I created a copy of my project and as I request support I will name my support requests with /example1/, /example2/, etc. etc. I will leave these and the videos up for others to benefit from.

All that said, I reached out to a good friend, former my JS instructor in college. He looked at the code and found my problem.

Go to my page on a desktop, fill in the input elements for a row an hit submit. The input borders should turn green and in console you will see Data: (your amt) / Success

Now do so on a mobile. You will see Data: 0 / Success

My friend said either my code (or yours) is creating a second element in the DOM with the same ID, so when the form submits, the value for the first element(s) are submitted, and the second copy of each input is not.

When the button is clicked, this should happen. But in mobile, after the responsive is implemented, there are 2 of each input element in the DOM

            $(".leadSubmit").click(function(){
                var leadID = $(this).attr("data-id");
                $.post("https://dt.1stautorepair.com/includes/lead-estimate-update.asp",
                {
                ro: $("#ro"+$(this).attr("data-id")).val(),
                invoice: $("#invoice"+$(this).attr("data-id")).val(),
                amount: $("#amt"+$(this).attr("data-id")).val(),                
                leadID: $(this).attr("data-id")
                },
                function(data,status){
                console.log("Data: " + data + "\nStatus: " + status)
                $("#ro"+leadID).css('border', '2px solid green');
                $("#amt"+leadID).css('border', '2px solid green');
                $("#invoice"+leadID).css('border', '2px solid green');
                });
            });

Is this my code or yours? Again, thank you and love your product. Going to help me make a lot of money and help a lot of people!

Here is my page [https://dt.1stautorepair.com/leads/]

TomHall

I found a link to this forum thread. I tried to add the code as seen in attached screen shot. But upon opening the hidden elements, I still get a length of 2 for the element(s) when I only want one.

https://datatables.net/forums/discussion/56319/react-component-in-columndefs-render-function-responsive

TomHall

Thank you all for your help and patience, I was able to get it to work with

        responsive: {
            details: {
                renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes()
            }
        }

colin

Glad all sorted,

Colin