Why JQuery .val() returns empty string?

Question

With script below, request to the server always sends empty string (even if value is not emtpty), where the data line is:

data: "{ 'folderName': '" + $(this).val() + "' }"

The html element under investigation is this:

<asp:TextBox id="searcher" runat="server" ClientIDMode="Static" CssClass="classificationFolder" />

Script is:

<script type="text/javascript">
$(document).ready(function () {
    $(".classificationFolder").each(function () {
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "Services/svcFolder.asmx/SearchFolders",
                    data: "{ 'folderName': '" + $(this).val() + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                value: item.Name,
                                label: item.Name + " " + item.Type
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    }
                });
            },
            minLength: 2,
        });
    })
});

The reason that I select elements by css class selector ($(".classificationFolder")) is that, this control is a user control and used in the same page more than once. That is why I'm not using $("#searcher").

I tested the code In IE8 and Chrome 8.0.552.28 beta. This issue is arising in both of the browsers.

On the other hand, request is sent to the server, client received response successfuly and response is processed on the client.

So anyone has any idea why $(this).val() always returns empty string?

Pekka · Accepted Answer · 2010-11-10 21:58:43Z

7

I think this is a scope/context issue: this doesn't refer to the input element any more, but to the autocomplete.

Try storing this as a temporary variable:

$(".classificationFolder").each(function () {
        var input_reference = this;
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "Services/svcFolder.asmx/SearchFolders",
                    data: "{ 'folderName': '" + $(input_reference).val() + "' }",
 ...

edited Nov 10, 2010 at 21:58

answered Nov 10, 2010 at 21:52

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stephen Over a year ago

+1 No need for conjecture, you are correct about Scope. But this in his case refers to the closest closure, probably the ajax options or the anonymous function inside the source parameter.

Pekka Over a year ago

@AnreKR I mean the object passed to the autocomplete function, but @Stephen is probably more correct with his assessment.

SLaks · Accepted Answer · 2010-11-10 21:53:27Z

1

The source callback is not executed in the context of the element.
this is not what you think it is.

You need to save a reference to this in the outer each callback.

answered Nov 10, 2010 at 21:53

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

AndreKR · Accepted Answer · 2010-11-10 21:54:51Z

0

Maybe this does not point to the input field. Isn't the request paramter of your callback function the value you are looking for?

answered Nov 10, 2010 at 21:54

AndreKR

34k21 gold badges120 silver badges181 bronze badges

Collectives™ on Stack Overflow

Why JQuery .val() returns empty string?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related