在一个刀片中组合 2 个不同的脚本后，脚本不起作用。php 文件（laravel）

Question

I wanted to combine 2 script from different sources into one blade.php file in laravel as some contents need to use different script respectively. The 2 scripts are like this:

1st script:

<script src="{{ asset('js/app.js') }}"></script>
        <script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
                <script>
                    CKEDITOR.replace( 'article-ckeditor' );
                </script>     

2nd script:

<script type="text/javascript">

                    $('.itemName').select2({
                    placeholder: 'Select state',
                    ajax: {
                        url: '/select2-autocomplete-ajax',
                        dataType: 'json',
                        delay: 250,
                        processResults: function (data) {
                        return {
                            results:  $.map(data, function (item) {
                                return {
                                    text: item.name,
                                    id: item.id
                                }
                            })
                        };
                        },
                        cache: true
                    }
                    });


                </script>

This is how I combined above scripts. Simply just copy the 2nd script at below of the first script:

<!-- Scripts -->
                <script src="{{ asset('js/app.js') }}"></script>
                <script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
                <script>
                    CKEDITOR.replace( 'article-ckeditor' );
                </script>

                <script type="text/javascript">

                    $('.itemName').select2({
                    placeholder: 'Select state',
                    ajax: {
                        url: '/select2-autocomplete-ajax',
                        dataType: 'json',
                        delay: 250,
                        processResults: function (data) {
                        return {
                            results:  $.map(data, function (item) {
                                return {
                                    text: item.name,
                                    id: item.id
                                }
                            })
                        };
                        },
                        cache: true
                    }
                    });


                </script>

However, when I compiled, it doesn't worked as I expected because one of the scripts doesn't function. How should I compile two scripts in one file?

Answer 1

Try it without type="text/javascript" on last script tag. I don't know the logic behind it, but in some cases it has worked for me.

<script >
    $('.itemName').select2({
        placeholder: 'Select state',
        ajax: {
            url: '/select2-autocomplete-ajax',
            dataType: 'json',
            delay: 250,
            processResults: function (data) {
                return {
                    results:  $.map(data, function (item) {
                        return {
                            text: item.name,
                            id: item.id
                        }
                    })
                };
            },
            cache: true
        }
    });
</script>