dynamic button not passing correct value to c# Web Method

I have a .js file that build a HTML table, within a carousel  - amongst other elements, is a <input> controlled, which displays text. The text can be altered by the end user, and derived from a read only element in the table.

So, for example, the  table  contains a field, called AcceptedText, the input control contains the value of this field, but allows the end user to add additional information.

Ok, so far so good. Now, what I need to do is add a submit button, to send the value of the input control to a C# WebMethod, And i've achieved this using the following code snippet:

 response +=  '<div class="pull-right">' +
    '<label>Accepted Text:</label><input type="text" id="acceptedText" value="' + tdata[i]['MatchedString'] + '"></input>' +
     '<button class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Add Text?" onclick=" addTextString(event, this, ' + tdata[i]['Id'] + '); " data-id="' + tdata[i]['Id'] + '" value="' + tdata[i]['MatchedString'] + '"></button>' +
                            '</div>' +

Open in new window


Now, every time the carousal changes, this input control changes value, but clicking on the button, always posted the first value. So, if there are four pages, then irrespective on where this button is clicked, I always get the value on page 1.

My WebMethod, looks like this:

function addTextString(event, element, id) {
    console.log($('#acceptedText').val());});

Open in new window


 
Not sure what i'm doing wrong, here, as the value in the input control is different, on each iteration of the carousel
LVL 1
Wayne AthertonProduct Analyst Financial Messaging LondonAsked:
Who is Participating?
 
Rainer JeschorCommented:
Hi,

could you please try this with the following two changes:

1. Add the ID value to the base input ID attribute
Change is in this line:
<input type="text" id="acceptedText' + tdata[i]['Id'] + '" value="' + tdata[i]['MatchedString'] + '"></input>'

Open in new window


Here the full part:
$.ajax({
            type: "POST",
            url: "Default.aspx/GetData",
            data: JSON.stringify({ "messageId": id }),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(result) {
                tdata = jQuery.parseJSON(result.d);
                // Clear out the carousel
                $('#homepageItems').empty();

                var response = '',
                    indicator = '';

                for (var i = 0; i < tdata.length; i++) {
                    response += '<div class="item">' +
                        '<div class="panel panel-default">' +
                        '<div class=panel-heading>Hit (' + tdata[i]['StartNumber'] + ') of (' + tdata[i]['EndNumber'] + ')'</div>' +
                        '<div class="panel panel-body">' +
                        '<table  class="table table-user-information" style="height: 300px;">' +
                        '<tbody>' +
                        '<tr>' +
                        '<td><label>Accepted Text:</span></td>' +
                        '<td><span id="acceptedText">' + tdata[i]['SearchedString'] + '</span>' +
                        '</tr>' +
						'<tr>' +
                        '<td><label>Matched String:</span></td>' +
                        '<td><span id="matchedString">' + tdata[i]['MatchedString'] + '</span>' +
                        '</tr>' +
                        '<tr>' +
                        '<td><label>Date Listed:</label></td>' +
                        '<td><span id="dateListed">' + tdata[i]['DateListed'] + '</span></td>' +
                        '</tr>'; +
                      
  					  switch (status) {
                        case "Completed":
                        response += '<div class="panel-footer clearfix"><div class="pull-right"></div>' +
                                '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                            break;
                        default:
                           response +=  '<div class="pull-right">' +
    '<label>Accepted Text:</label><input type="text" id="acceptedText' + tdata[i]['Id'] + '" value="' + tdata[i]['MatchedString'] + '"></input>' +
     '<button class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Add Text?" onclick=" addTextString(event, this, ' + tdata[i]['Id'] + '); " data-id="' + tdata[i]['Id'] + '" value="' + tdata[i]['MatchedString'] + '"></button>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    }
                   
                    indicator += '<li data-target="#hitCarousel" data-slide-to="' + tdata[i]['MessageId'] + '"></li>';

                }
                $('#homepageItems').append(response);
                $('#indicators').append(indicator);
                $('.item').first().addClass('active');
                $('.carousel-indicators > li').first().addClass('active');
                $("#Carousel").carousel();
                $('#showContent').show();
            }
        });
    }

Open in new window


2. Adjust your addTestString function

To get the dynamic part of the input ID:
function addTextString(event, element, id) {
	console.log($('#acceptedText' + id).val());
}

Open in new window


HTH
Rainer
0
 
Rainer JeschorCommented:
Hi,
without the complete generated HTML source code nor the logic, it is just a guess, but I assume that you generate this input box multiple times - but always with the same id - therefore you might get always just the value of the first input element.

HTH
Rainer
0
 
Wayne AthertonProduct Analyst Financial Messaging LondonAuthor Commented:
@HTH, you are so spot on. How did I miss that one. I'll set it as a class name, and see if this is correct.
0
 
Wayne AthertonProduct Analyst Financial Messaging LondonAuthor Commented:
Alas, removing the Id, and then creating it with a class name, still produces, the same output. I've included the full html output, which also shows, how I apply it to the carousel

$.ajax({
            type: "POST",
            url: "Default.aspx/GetData",
            data: JSON.stringify({ "messageId": id }),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(result) {
                tdata = jQuery.parseJSON(result.d);
                // Clear out the carousel
                $('#homepageItems').empty();

                var response = '',
                    indicator = '';

                for (var i = 0; i < tdata.length; i++) {
                    response += '<div class="item">' +
                        '<div class="panel panel-default">' +
                        '<div class=panel-heading>Hit (' + tdata[i]['StartNumber'] + ') of (' + tdata[i]['EndNumber'] + ')'</div>' +
                        '<div class="panel panel-body">' +
                        '<table  class="table table-user-information" style="height: 300px;">' +
                        '<tbody>' +
                        '<tr>' +
                        '<td><label>Accepted Text:</span></td>' +
                        '<td><span id="acceptedText">' + tdata[i]['SearchedString'] + '</span>' +
                        '</tr>' +
						'<tr>' +
                        '<td><label>Matched String:</span></td>' +
                        '<td><span id="matchedString">' + tdata[i]['MatchedString'] + '</span>' +
                        '</tr>' +
                        '<tr>' +
                        '<td><label>Date Listed:</label></td>' +
                        '<td><span id="dateListed">' + tdata[i]['DateListed'] + '</span></td>' +
                        '</tr>'; +
                      
  					  switch (status) {
                        case "Completed":
                        response += '<div class="panel-footer clearfix"><div class="pull-right"></div>' +
                                '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                            break;
                        default:
                           response +=  '<div class="pull-right">' +
    '<label>Accepted Text:</label><input type="text" id="acceptedText" value="' + tdata[i]['MatchedString'] + '"></input>' +
     '<button class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Add Text?" onclick=" addTextString(event, this, ' + tdata[i]['Id'] + '); " data-id="' + tdata[i]['Id'] + '" value="' + tdata[i]['MatchedString'] + '"></button>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    }
                   
                    indicator += '<li data-target="#hitCarousel" data-slide-to="' + tdata[i]['MessageId'] + '"></li>';

                }
                $('#homepageItems').append(response);
                $('#indicators').append(indicator);
                $('.item').first().addClass('active');
                $('.carousel-indicators > li').first().addClass('active');
                $("#Carousel").carousel();
                $('#showContent').show();
            }
        });
    }

Open in new window

0
 
Wayne AthertonProduct Analyst Financial Messaging LondonAuthor Commented:
Thanks Rainer - that's saved me a lot of reworking.
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.