laravel with jquery ajax populate select option with value

Question

I have two questions

( 1. how to automatically select the current level_id and populate it to the select box

2. how do i can i fix this issue in modal when closing and re-open another modal the select option keeps on adding the previous data)

controller:

 $stream = Stream::with('level')->findOrFail($uuid);
        $levels =Level::all();
        return response()->json(['stream'=>$stream,'levels'=>$levels,'status'=>true]);

Ajax Jquery

 jQuery('body').on('click', '.open-modal', function() {
        var stream_id = $(this).val();
        $.get('streams/' + stream_id + '/edit', function(data) {
            if (data.status == true) {
                $.each(data.levels, function(i, level) {
                    $('#sel_level').append($('<option>', {
                        value: level.id,
                        text: level.name
                    }));
                });
            }
            jQuery('#stream_id').val(data.stream.id);
            jQuery('#stream_name').val(data.stream.name);
            jQuery('#stream_code').val(data.stream.code);
            jQuery('#btn-save').val("update");
            jQuery('#streamEditorModal').modal('show');

        })

    });

Question 2 image

Json response;

levels: Array(2)
0: {id: 3, name: "Level 1", code: "LVL1", uuid: "U7iHTp2pyM843HwfJ3CEB66rrD2vKAJvBHcrRYSGgXvmSaWh6IN3dGu1vZl29CwKTlULAdzduTglYyRFmn6MdY9S2xLhWZkvhSz0", created_at: "2020-06-25T07:59:14.000000Z", …}
1: {id: 4, name: "Level 2", code: "LVL2", uuid: "HZMe0wtyHfJrInriw4bA1ujOyZwZ7SkrSt37ZK2hCOHqSyki2b1Ysx2GBs8AU7oDemub2KmDNHBBiQhVaTkxyDAv7EXnUZ7O6DDi", created_at: "2020-06-25T07:59:25.000000Z", …}
length: 2
__proto__: Array(0)
status: true
stream:
code: "CLB3"
created_at: "2020-06-25T06:28:12.000000Z"
id: 17
level: {id: 3, name: "Level 1", code: "LVL1", uuid: "U7iHTp2pyM843HwfJ3CEB66rrD2vKAJvBHcrRYSGgXvmSaWh6IN3dGu1vZl29CwKTlULAdzduTglYyRFmn6MdY9S2xLhWZkvhSz0", created_at: "2020-06-25T07:59:14.000000Z", …}
level_id: 3
name: "Class B"
updated_at: "2020-07-02T07:58:39.000000Z"
uuid: "cq44VJZSOjRk4bB3S1Oz7UGX4yTPVHLnMvKYX648yVz1etQjj7obvzNuI9ExYfMCivMkuwNSSokmy82xvFPEAalhpmM2kFIhNPra"
_

I don't understand the first question but for the second one to stop repeating the options every time you open the modal, just add $('#sel_level').html('') before the $.each loop — Hassan Azzam
– Hassan Azzam, Commented Jul 3, 2020 at 2:52
question one auto populate the current level which refers to stream.level_id — Grace
– Grace, Commented Jul 3, 2020 at 2:54
Where is the current level ? do you mean the text field with the label 'Level' once you select a level value from the select box ? — Hassan Azzam
– Hassan Azzam, Commented Jul 3, 2020 at 2:56
stream: code: "CL1A" created_at: "2020-06-25T06:02:48.000000Z" id: 12 level: null level_id: null <<this the current level_id is nullable and it is related to levels: Array(2) 0: {id: as forenkey — Grace
– Grace, Commented Jul 3, 2020 at 3:00
each stream has level and using the level_id as foreign key now select box will auto target the current level_id of stream then if null it will show please select level — Grace
– Grace, Commented Jul 3, 2020 at 3:03

Hassan Azzam · Accepted Answer · 2020-07-03 03:51:23Z

how to automatically select the current level_id and populate it to the select box To fix this issue you will need to reset the select element html content before appending new children like so: before the jQuery $.each loop just add

$('#sel_level').html('');

how do i can i fix this issue in modal when closing and re-open another modal the select option keeps on adding the previous data)

To automatically select the current level you can check if the stream.level_id in the response match the current level id inside the loop like so:

$.each(data.levels, function(i, level) {
    $('#sel_level').append($('<option>', {
        value: level.id,
        text: level.name,
        selected: level.id == data.stream.level_id
     }));
});

Fina code

jQuery('body').on('click', '.open-modal', function() {
    var stream_id = $(this).val();
    $.get('streams/' + stream_id + '/edit', function(data) {
        if (data.status == true) {
            $('#sel_level').html('');
            $.each(data.levels, function(i, level) {
                $('#sel_level').append($('<option>', {
                    value: level.id,
                    text: level.name,
                    selected: level.id == data.stream.level_id
                }));
            });
        }
        jQuery('#stream_id').val(data.stream.id);
        jQuery('#stream_name').val(data.stream.name);
        jQuery('#stream_code').val(data.stream.code);
        jQuery('#btn-save').val("update");
        jQuery('#streamEditorModal').modal('show');

    })

});

Collectives™ on Stack Overflow

laravel with jquery ajax populate select option with value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related