The src value is relative to the current URL, make it absolute:
<script src="/js/parse_json.js"></script>
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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.
The src value is relative to the current URL, make it absolute:
<script src="/js/parse_json.js"></script>
@tykus You're right, the pathing was wrong, the issue persists though. I'm now using
<script src="/js/parse_json.js"></script>
@DigitalSolutions where is the function used compared with its definition (and how is it defined)?
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.
@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?
It is loading, the response code is 200 and it looks good. it is simply defined with
function parseFactSheet(country){
...
}
no, it isn't inside any other function, simply within the parse_json.js file.
Please or to participate in this conversation.