We help IT Professionals succeed at work.

dynamic button not passing correct value to c# Web Method

Wayne Atherton
on
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
Comment
Watch Question

Most Valuable Expert 2013
Awarded 2012

Commented:
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
Wayne AthertonProduct Analyst Financial Messaging London

Author

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.
Wayne AthertonProduct Analyst Financial Messaging London

Author

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

Most Valuable Expert 2013
Awarded 2012
Commented:
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
Wayne AthertonProduct Analyst Financial Messaging London

Author

Commented:
Thanks Rainer - that's saved me a lot of reworking.