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

Jquery – html code updated but not rendering or not updating visually

I have Flask server and trying to implement cascading dropdowns i.e Based on first dropdown and value of other drop down changes.
I have multiselect drop downs

My index.html renders multiselect dropdowns correctly if I hard code them.
I am able to update first dropdown value , which is being send from flask server

First drop down successfully updates using below

@mod_app.route("/get_dropdown_data", methods=["POST","GET"])
def get_filters_data():
    # code to populate carbrands and works fine 

    return render_template('index.html', carbrands=carbrands)

index.html — it has datepicker before dropdowns as dropdowns data populates based on date selected. First I select dates and and click ‘Get dropdown data’ button.
This populates first dropdown correctly.

index.html snapshot

<div class="container  text-muted">  
    <form class="d_form" id="d_form" >     
            <body>
                    <select name="select1" multiple multiselect-search="true" id="search_category_id1">

                            {% for brand_nm  in carbrands %}
                            <option value='{{loop.index}}'>{{brand_nm}}</option>
                            {% endfor %}                        
                    </select> 
                    <select name="select2" multiple multiselect-search="true" id="sub_category_id2">
                            <option value = '10' >One zero</option>
                            <option value = '20' >Two zero</option>

                    </select> 
            </body>
    </form>

get dropdown values for second child filter

@app.route('/get_child_categories', methods=["POST","GET"])
def get_child_categories():

    # code to get sub_filter value based on first filter, this works fine as 
    # when I print values I see correct value 

    return json.dumps(sub_filter1)

update_dropdown.js
Below javascript runs fine as I see 200 status code in network tab of chrome browser. I see correct response in ‘Preview’ & ‘Response’ tab in the browser i.e. value ‘Personal’
This also gets called everytime I select or deselect a checkbox from first dropdown. I see correct value being return to the browser but actually showing visually.

update_dropdown.js

$(document).ready(function() {
    $('#search_category_id1').change(function(){
      console.log("inside ready fun")
           $.post("/get_child_categories", {
            //parent_id: $('#search_category_id1').val()
            parent_id: $('select#search_category_id1').val()
           }, function(response){ 
                  console.log("call get_child_categories")
                  console.log("response ",response)
                  $.each(JSON.parse(response), function (i, item) {
                    console.log("i ",i) ;
                    console.log("item.text ",item) ;
                    $('#sub_category_id2').append($('<option>', { 
  
                        value: i+30,
                        text : item
                    }));
                });
                   
           });
           return false;
       });
   });

Snapshot of index.html . I see correct values of dropdown populated i.e. ‘Personal’ when I inspect the element in browser but same is not rendered in the browser for user i.e. visually in the browser I see only One , Two in the dropdown and not ‘Personal’

response html snapshot

<select name="select2" multiple="" multiselect-search="true" id="sub_category_id2" style="display: none;">
                                <option value="10">One zero</option>
                                <option value="20">Two zero</option>
                                 
                                <option value="30">Personal</option></select>

I am NOT sure what is wrong as except the values DO NOT actually render on browser rest all places it is correct.
Any guidance on the issue will be greatly appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I needed to load part of page i.e. multiselect drop down only and not entire page. I did this using JavaScript. I also referred to documentation of multiselect dropdown.

    document.getElementById('sub_category_id2').loadOptions();enter code here

    @jagmitg comments helped me solve the issue.


  2. 0

    I had the same issue before, I solved it by calling(when page loaded) the function that has been triggered by the change.
    My problem was to load the second select when the page is first loaded.

    Also you may want to check the output of /get_child_categories by opening it on your browser.

    Update

    Once you set a function for change it won’t activate it at the first run because it has a default value. You will need to change the value in order to run that function. You can run the function on page load and also set it as onchange activity.

    Your code is in a onchange function inside of an onload function.

    //in vanilla js
function on_change(){
   //the task
}
on_change();
document.getElementById('search_category_id1').addEventListener('change',on_change);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search