locked
onblur event Fill @Html.DisplayFor From Database RRS feed

  • Question

  • User-1641868886 posted

    I am using a Jquery onblur function to try to fill a "@Html.displayFor" from a database table row. Table has "Code" and "Description."

    1)  texbox is filled with the numeric "Code"

    2) onblur event attempts to get "Description" for the entered code and use it to fill the "DisplayFor".

    Here is the function:

    $("#Code").blur(function () {
                var CurrCode = $(this).val();
                $.ajax({
                    type: "post",
                    url: "/GrocBills/GetCodeDetails",
                    data: { Code: CurrCode },
                    dataType: "json",
                    success: function (response) {
                        $("#Description").empty();
                        $("#Description").append(response.data(function (r) {
                            return $("#Description").text(r.Description)[0];
                        }));
    
                    }
                });
            })

    I have a similar function used to populate the second dropdownlist in a cascading ddl, so I adapted that function. I believe in this case the bottom of the function is wrong...the "success...function." Have tried several iterations.

    Here is my controller action, just in case there is a problem:

    public JsonResult GetCodeDetails(string Code)
            {
                
                DynamicParameters param = new DynamicParameters();
                param.Add("@Code", Code);
    
                return Json(DataAccess.ReturnList<GrocBillsModel>("spCodes_ViewByCode", param).FirstOrDefault<GrocBillsModel>());
                
            }

    Thanks for any suggestions.

    RC

    Monday, March 4, 2019 10:11 PM

Answers

  • User1724605321 posted

    Hi ReidMelSam ,

    At runtime DisplayFor will out put just the value and no html like label. You might consider using a span with an id to wrap the Displayfor . For example :

    <span id="displaywrapper">
        @Html.DisplayFor(model => model.id)
    </span>

    And append value to span :

    success: function (response) {
                       $("#displaywrapper").append(response.id)
    
                    }

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 6, 2019 2:23 AM

All replies

  • User1724605321 posted

    Hi ReidMelSam ,

    believe in this case the bottom of the function is wrong...the "success...function.

    what do you mean by "the function is wrong " , what is the error message or what is the wrong scenario ? You can put a breakpoint at line :

    $("#Description").empty(); 

    And trace the value in response.data to get the correct data from response .

    Best Regards,

    Nan Yu

    Tuesday, March 5, 2019 5:34 AM
  • User-1641868886 posted
    Yes thanks...put a breakpoint there and the error msg is only “Response not defined.”
    Thanks for any suggestions.
    RC
    Tuesday, March 5, 2019 6:05 AM
  • User1724605321 posted

    Hi ReidMelSam ,

    It seems that you are returning type  GrocBillsModel to client side . I assume you have id property in GrocBillsModel , then you could get that value in client :

      $.ajax({
                type: "post",
                url: "/Home/GetCodeDetails",
                data: { Code: "1" },
                dataType: "json",
                success: function (response) {
                    
                    alert(response.id)
                    
                }
            });

    Another thing is you should not use response.data(function (r) , directly get the value and use append :

     $("#Description").append("YourValue")

    Best Regards,

    Nan Yu

    Tuesday, March 5, 2019 7:09 AM
  • User-1641868886 posted

    Okay, now with the revision included below, I am getting a response array that contains the wanted "Description" element. I am still having a problem isolating this element to fill the "Description" @Html.DisplayFor label. If anyone has a suggestion how I can correct, plz advise and thanks for any suggestions:

    $("#Code").blur(function () {
                var CurrCode = $(this).val();
                $.ajax({
                    type: "post",
                    url: "/GrocBills/GetCodeDetails",
                    data: { Code: CurrCode },
                    dataType: "json",
                    success: function (response) {
                        $("#Description").empty();
                        $("#Description").append(response).val("Description")[0];
    
                    }
                });
            })

    Tuesday, March 5, 2019 5:31 PM
  • User1724605321 posted

    Hi ReidMelSam ,

    At runtime DisplayFor will out put just the value and no html like label. You might consider using a span with an id to wrap the Displayfor . For example :

    <span id="displaywrapper">
        @Html.DisplayFor(model => model.id)
    </span>

    And append value to span :

    success: function (response) {
                       $("#displaywrapper").append(response.id)
    
                    }

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 6, 2019 2:23 AM
  • User-1641868886 posted

    Rather than "span" I changed the "@Html.DisplayFor" to a simple "asp:label" control with an Id of "Description" for the JQuery. 

    To summarize, I have a textbox for input of a numeric "Code". In the database, the second column is "Description" -- so if the user inputs "10109" the desired output from the "Description" column would be "Bag Fresh Lettuce". I am trying to use that element to fill a label ("#Description") with JQuery onblur event. I have tried something like 50-60 iterations of the "success" function. Here is the latest complete onblur event with "success" function:

    $("#Code").blur(function () {
                $("#Description").empty();
                var CurrCode = $(this).val();
                $.ajax({
                    type: "post",
                    url: "/GrocBills/GetCodeDetails",
                    data: { Code: CurrCode },
                    dataType: "json",
                    success: function (response) {
                      debugger  
                      $("#Description").text(response);
    
                    }
                });
            })
    
    (NOTE:  several iterations tried, i.e; "$("#Description").text(response)[0];", "$("#Description").text((response).val);", etc)

    On debugging, I see an array that is expected data on hovering over "response" on the final line of code "$("#Description").text(response);" but it seems like I do not have the correct syntax to fill the label as it appears on the screen simply as "[object Object]".

    If anyone can help me troubleshoot this javascript, I think I'm close but not getting the syntax to fill the label. Is there another problem I'm not seeing?

    Thanks for any suggestions.

    RC 

    Wednesday, March 6, 2019 6:16 PM
  • User-1641868886 posted

    A slight revision...am still learning Jquery. Since all I'm trying to do is to GET a value from the database and use it to fill a label, I should not have the type be Post but rather a Get:

    $("#Code").blur(function () {
                $("#Description").empty();
                var CurrCode = $(this).val();
                $.ajax({
                    type: "Get",
                    url: "/GrocBills/GetCodeDetails",
                    dataType: "json",
                    data: {Code: CurrCode},
                    success: function (response) {
                        $("#Description").text(response);
                    }
                });
            })

    Still not working, so I'm still concerned about the syntax where I'm trying to get the response array (has "Key=Description, value=Bag Fresh Lettuce") to fill the label ("#Description") with the value ("Bag Fresh Lettuce").

    ***Do I need something diff in the "data" field, rather than "{Code:  CurrCode}" ?

    Plz reply any suggestions.

    Thx.

    RC

    Wednesday, March 6, 2019 11:40 PM
  • User1724605321 posted

    Hi ReidMelSam ,

    What happened if you add below line for testing :

    alert(response['Description'])

    Best Regards,

    Nan Yu

    Friday, March 8, 2019 2:11 AM
  • User-1641868886 posted

    Thanks, Nan. It was solved on a separate thread.

     response[0].Value

    Problem is I am still in the process of learning Jquery and its interaction with MVC controller actions. There are a few "right" ways to code this, but as I found, literally hundreds of "wrong" ways.

    I am going to mark your reply with the "<span>" for the "DisplayFor" tag as answer because I used that on the main view.

    Thanks for all your help. Appreciate!

    RC

    Friday, March 8, 2019 3:56 PM