Question 10929 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Sometimes HTML element doesn't display value – Jquery

I am using a $.get method to populate some data. If this data exists, then .show() the html element and populate them accordingly.

enter image description here

If there is no data, then the page should look as above.

enter image description here

If there IS data, then the page should display the html elements being populated as shown.

My issue is that sometimes, even if there IS data to be displayed, the elements show, but they aren’t being populated properly, as seen here:

enter image description here

The console shows that the data is being retrieved properly, seen here:

enter image description here

Even weirder is that, in the example where the data isn’t loaded properly, the price loads just fine. Don’t understand why price is ok, but disabled drop-down menus don’t display anything sometimes.

Here is the code I use to load the data:

Here's the code:
$.get('${pageContext.request.contextPath}/Servlet_Stock', {PRDCODE: sParam.PRDCODE, SFC: 'GET_PRD_DETAIL'}, function(data) {
                    var arrData = data.object1[0];
                    //console.log("arrData: ",arrData);
                    defUOM = arrData.stk_baseuomcode;
                    $('#modalCode').val(arrData.stk_stockcode);
                    $('#modalDesc').val(arrData.stk_desc);
                    
                    if (arrData.MinPriceBase.length !== 0) {
                        $("#priceAdd").hide();
                        //$('#minPriceActive').trigger('click');
                        $('#minPriceActive').prop('checked',true);
                        console.log(arrData.MinPrice, " + ", arrData.MinPriceBase, " + ", arrData.MinPriceUOM);

                        $("#minPriceActive").prop("disabled", true);
                        $("#minPrice").prop("disabled", true);
                        $("#ddlMinPrc").prop("disabled", true);
                        $("#ddlUOM").prop("disabled", true);
                        
                        $("#mbField").show();
                        $("#mbField2").show();
                        $('#minPrice').val(arrData.MinPrice);
                        $('#ddlMinPrc').val(arrData.MinPriceBase);
                        $('#ddlUOM').val(arrData.MinPriceUOM);
                    } else {
                        //$("#tblSearch").hide();
                        $("#minPriceActive").prop("disabled", true);
                        $("#priceAdd").hide();
                    }

Not sure what’s wrong with the code i’ve written..

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Alright, I found a workaround. Since drop down menus don't work properly, i've created a text box instead. So now the values display in a text box, rather than the disabled drop down list. Still don't understand why populating drop down menus dont work so well, but at least this method is more consistent.

    Here is the final look, if you're curious:

    enter image description here


  2. 0

    These look like custom select fields, not the ones provided natively by the browser. This is confirmed by an error in your console output indicating that JS parser encountered an error parsing the code. I would suggest first checking if select2.min.js file you’re loading is not corrupted.

    Not strictly related to question, but do note that such libraries usually work by hiding an original element and then generating it’s own HTML structure on top of it. Because of that, additional attention is required as to which elements you operate with. While things like options and select states are usually synchronized between the two, others, like hover events and optgroups, might be not.

    You can check if your code is running correctly by going through browser inspect and finding the original <select> and un-hiding it, or simply removing select2 from list of libraries loaded, to see if it behaves the way you expect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search