javascript

Question

865 votes

2 answers

javascript - Using js array in laravel blade foreach

In a laravel blade page I have a controller sendingplanTypes and stored like this:

arr = [];
var planTypes = @json($planTypes);
$('#multiselect').change(function (e) {
    var plan_id = $(this).val();
    arr.push(plan_id);
});

What it does? For any change in a dropdown listing all planTypes I capture the unique id and store it in a js array (arr)

The user has the possibility to add multiple planTypes in the same page without the need to refresh and that is why thechange js function

Whenever I render the new dropdown, I would like to only display the remaining unused planTypes and I try to do it like this:

var item=
            +'            <select id="multiselect" name="planTypes[0][]" class="selectpicker form-control type">'
            +'                <option value="">--</option>'
                            @foreach($planTypes as $planType)
                                if(!arr[{{ $planType->id }}]) {
            +'                    <option value="{{ $planType->id }}">{{ $planType->name }}</option>'
                                }
                            @endforeach

But for some strange reasons, I cannot make it work like that, combining blade @foreach and javascript if

Could someone point me to the correct approach?

Thank you! +' '

Undefined asked

2022-11-14

Source

Share

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Similar questions

Find the answer in similar questions on our website.

635 php - Symfony/Doctrine: Doctrine not persisting data using Types::JSON migrating from Types::ARRAY

755 php - org.json.JSONException : Value Rlz @ Rf uiobX - Z_ ^ eg_bf vCb of type java.lang.String cannot be converted . to JSONObject

802 php - How do I dynamically call a component multiple times using Javascript in Laravel 9?

109 php - Laravel ->put() issue - Mixed content (JSON vs. not JSON)

639 PHP CURL Req. Json Format And Using Variables

433 javascript - Slideshow in modal in a foreach statement

678 php - Make multiple user types access the same Route using Laravel 9 middleware

978 php - How to validate JSON in Laravel API regardless of parameters order?

335 "Notice: Undefined variable", "Notice: Undefined index", "Warning: Undefined array key", and "Notice: Undefined offset" using PHP

950 laravel - NgInx container is not loading css and js file when it call php-fpm container

Undefined answered · Answer 1 · 2022-11-14

Answer

Solution:

Try something like this:

<script>
  const planTypes = {!! json_encode($planTypes) !!};
  
  // use this HTML however you want
  let html = `
     <select id="multiselect" name="planTypes[0][]" class="selectpicker form-control type">'
        <option value="">--</option>
        ${planTypes.map(planType => `<option value="${planType.id}">${planType.name}</option>`)}
     </select>
  `;

Undefined answered · Answer 2 · 2022-11-14

Answer

Solution:

<script>
    var planTypes = {!! json_encode($planTypes) !!};
    var filter_planTypes = planTypes;
    $(document).on('change', '#multiselect', function () {
        var plan_id = $(this).val();
        filter_planTypes = filter_planTypes.filter(function(val) {
            return val.id != plan_id;
        });
        var options = '<option value="">Select</option>';
        $.each(filter_planTypes, function (key, value) {
            options += '<option value="'+ value.id +'">'+ value.name +'</option>';
        });
        $('#multiselect').html(options);
        $('#multiselect').trigger("change");
    });
</script>

OR if you want to use multiselect the better option is to user select2 js library

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />



<select id="multiselect" name="planTypes[]" class="selectpicker form-control type" multiple="multiple">
    <option value="">--</option>
    @foreach($planTypes as $planType)
        <option value="{{ $planType->id }}">{{ $planType->name }}</option>               
    @endforeach
</select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        // Select2 Multiple
        $('#multiselect').select2({
            placeholder: "Select",
            allowClear: true
        });
    });
</script>

Popular technologies

Latest questions:

javascript - Using js array in laravel blade foreach

Answer

Solution:

Answer

Solution:

Share

Didn't find the answer?

Similar questions

Write quick answer

About the technologies asked in this question

Laravel

JQuery

CSS

Bootstrap

HTML

Welcome to webdevask.com

Get answers to specific questions

Help Others Solve Their Issues