0

I'm using Laravel in my application and have a question about jquery selection. In my case, I want to match an option.value with an ID and if it is matched then mark option as selected. Here is my code:

<select id="class" name="class" class="custom-select form-control" required>
        @foreach ($classes as $class)
        <option value="{{ $class->id }}"
                {{ old('class_id') ?? $subject->class_id == $class->id ? 'selected' : '' }}>
        {{ $class->name }}</option>

        @endforeach
</select>


<select id="section" name="section" class="custom-select form-control" required>
       <option value="">- -</option>
 </select>


and in my javascript, which is loading in the end of the page:

$(document).ready(function(){
    var class_id = $('#class option:selected').val();
    var section_id = $('#hidSectionID').val();
    fetchSections(class_id);
    setSection(section_id);
});

fetchSections(class_id) is my ajax function which is working fine and appending *select[name="section"] *options with this response.

<option value="1">Option 1</option><option value="2">Option 2</option>


But my second function which is for setting the section option as selected if it is matched with var section_id (which is coming from Laravel controller) is not working. I tried with different ways but it is not working:

function setSection(section_id){
    // Try # 1
    $("select#section option[value="+section_id+"]").prop("selected", true);

    // Try # 2
    $("#section").val(section_id);

    // Try # 3
    $("#section > option").each(function(){
        if($(this).val()===section_id){
            $(this).attr("selected","selected");
            return false;   
        }
    });

    // Try # 4
    $.each($("#section option"), function(){
        // alert($(this).text() + " - " + $(this).val());                    
    });
}


I hope, I've written enough code to understand this problem. Any help would be appreciated.

Maan56
  • 33
  • 6
  • `$("#section").val(section_id);` will work. If it's not working for you there's an underlying problem you need to fix first – Rory McCrossan Mar 18 '20 at 19:00
  • @RoryMcCrossan which kind of problem should I Check. I'm just a beginner so please help me to solve it. Thanks – Maan56 Mar 18 '20 at 19:09
  • No idea. Could be anything. Try checking the console for errors – Rory McCrossan Mar 18 '20 at 20:30
  • `fetchSections` "*is my ajax function*" - yet `setSection` is called directly after it - i.e. before the ajax function has completed, so your 2nd `select` does not yet have the values that you're trying to select. Liberally add some console.log() in your code to see exactly what's happening and *when*. – freedomn-m Mar 18 '20 at 21:38
  • Thank You very much @freedomn-m – Maan56 Mar 18 '20 at 22:05
  • Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – freedomn-m Mar 18 '20 at 22:38

1 Answers1

0

As @freedomn-m mentioned, I've called my setSection function right after calling an ajax fetchSection function. So I've now added jquery delay() function to my code.

$("#section").delay(1000).queue(function(){
    $(this).val(section_id); 
    $(this).dequeue();
});

And it works perfectly.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Maan56
  • 33
  • 6
  • FYI `delay` and `queue` are for animations. You really need to handle the ajax complete event correctly. This will work in some cases, but if the network is slow or the server going slow for any reason your 1second delay will not be enough. – freedomn-m Mar 18 '20 at 22:38
  • Thank you for reminding me about this. I've now added it to my ajax success method. – Maan56 Mar 19 '20 at 11:44