Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Digisol's avatar

Including script doesn't work but appending script tag to end does

I'm not sure exactly what I am doing wrong. I have a js file called parse_json.js. Whenever I include the file with

<script src="js/parse_json.js"></script>

I get a reference error stating that the function I am calling is not defined.

However when I place the entire contents of the code within a script tag within the blade file everything works as expected. Happy to provide more info if needed.

0 likes
10 replies
tykus's avatar

The src value is relative to the current URL, make it absolute:

<script src="/js/parse_json.js"></script>
Digisol's avatar

@tykus You're right, the pathing was wrong, the issue persists though. I'm now using

<script src="/js/parse_json.js"></script>
Digisol's avatar

This block of code is placed directly after the body:

    <script src="/js/parse_json.js"></script>
    
    {{-- AJAX CALLS --}}

    <script>
        
        //DISCARD CHANGES
        $('#discard').click(function(event) {
            event.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            Swal.fire({
                title: 'Are you sure?',
                text: "All changes will be lost!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                returnFocus: false,
                onAfterClose: () => window.scrollTo(0, 0)
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: 'GET',
                        url: "{{ route('ajax.retrieve') }}",
                        data: {
                            id: $('#list').val()
                        },
                        success: function(data) {
                            parseFactSheet(data);
                            Swal.fire({
                                title: 'Reverted',
                                text: 'Changes have been reverted',
                                icon: 'success',
                                returnFocus: false,
                                onAfterClose: () => window.scrollTo(0, 0)
                            })
                        },
                        error: function() {
                            Swal.fire({
                                title: 'Error!',
                                text: 'Something went wrong.',
                                icon: 'danger',
                                returnFocus: false,
                                onAfterClose: () => window.scrollTo(0, 0)
                            })
                        }

                    })
                }
            });
        });

        //DISPLAY INFO

        $('#list').on('change', function(e) {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'GET',
                url: "{{ route('ajax.retrieve') }}",
                data: {
                    id: $('#list').val()
                },
                success: function(data) {
                    parseFactSheet(data);
                }
            });
        });

        //SAVE CHANGES

        $('#save').click(function(event) {
            event.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            $.ajax({
                type: 'POST',
                url: "{{ route('ajax.store') }}",
                data: {
                    id: $('#countryList').val(),
                    official_title: $('#official_title').val(),
                },

                success: function(data) {
                    var url = "http://127.0.0.1:8000/view/" + data.success['id'];
                    var xmlHttp = new XMLHttpRequest();
                    xmlHttp.open("GET", url, false);
                    xmlHttp.send();

                    var html = xmlHttp.responseText;

                    let [pre, middle] = html.split('typeof="WebPageElement">');
                    let [content, post] = middle.split('</main>')

                    //Create a blob of the data
                    var fileToSave = new Blob([content], {
                        type: 'text/plain;charset=utf-16'
                    });

                    saveAs(fileToSave, data.success['name'] + '.txt');

                    Swal.fire({
                        title: 'Your changes have been saved!',
                        text: "Updated HTML has been downloaded",
                        icon: 'success',
                        showCancelButton: false,
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK',
                        returnFocus: false,
                        onAfterClose: () => window.scrollTo(0, 0)
                    });

                }

            });

        });
    </script>

The function (parseFactSheet) is first called within the Display info block.

tykus's avatar

@DigitalSolutions is the parse_json script actually loading - check the Network tab in the browser's dev tools. it should be a successful request, and the Response payload should be the script.

How is parseFactSheet function actually defined?

Digisol's avatar

It is loading, the response code is 200 and it looks good. it is simply defined with

function parseFactSheet(country){

...

}
tykus's avatar

@Digisol 🤔 and does parseFactSheet work if you using it directly in the console?

Digisol's avatar

@tykus Hmm, no, not accessible via the console. Again, undefined.

tykus's avatar

@Digisol how is that; is it scoped inside another function within that external file?

Digisol's avatar

no, it isn't inside any other function, simply within the parse_json.js file.

Please or to participate in this conversation.