Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have many separate JS files. When I was not using Mix I had them ordered such that dependancies between the files were maintained. Now I am using Mix and I am getting errors as the order has been lost. How can I ensure that functions available in file 1 are available in file 2? I am aware that in ES6 you can export functions are values, but these are click events which in turn call a function in another file, as below. When I use export{myAutocomplete} I just get errors.
$('#tableQuotation').on('click, keydown', 'input.product_name', function () {
$(this).css('background-color', 'rgb(250, 255, 189)');
myAutocomplete($(this));
})
Can you show you mix file and indicate which file is which? Normally you would either bind the function to the window, or import it into the file where you need it
Bind to window in file 1
window.myAutocomplete = myAutocomplete
Import in file 2
impprt {myAutocomplete} from './path/to/file1'
My Mix file. The second file, functions.js is used by all the other files. I have put common function in there. So, myAutocomplete() is inside functions.js. But it is called on click event. I am having particular trouble at this moment with quotations.js which has the click event which calls myAutocomplete
mix.js(['resources/js/app.js', 'resources/js/functions.js','resources/js/categories.js', 'resources/js/create_workorder.js','resources/js/hashtable.js','resources/js/invoice_additions.js','resources/js/jquery.tablesorter.min.js','resources/js/orders.js','resources/js/products.js','resources/js/project_quotes.js','resources/js/quotations.js','resources/js/tabs.js','resources/js/validation.js','resources/js/warehouse.js'], 'public/js')
.css('resources/css/app.css','public/css')
.sourceMaps();
@vincej the easiest would probably be to bind each function to the window then. Just after writing the function, you can bind it. If you are unsure how to do it, show a bit of the functions.js
@Sinnbeck Sure, agreed but the function myAutocomplete is not a stand alone function, it is called only by a click event inside quotations.js Here is some of the functions.js
/* VIEW PROJECT QUOTE USED ON TABLE 2 */
function myAutocomplete(input) {
$(input).autocomplete({
minLength: 2,
source: function (request, response, term) {
var param = request.term
var paramTrimed = param.trim();
$.ajax({
url: "/product_prices/" + paramTrimed,
dataType: 'json',
success: function (data) {
// Error checking delivers Bootstap error to the page //
if ((data.length == 0) || $.isEmptyObject(data) || (data == null)) {
$("#search_error").remove();
$("#supplier_search").addClass("alert alert-warning ").append("<div id='search_error' style='font-size: 16px'>'No Such Supplier Found' '<a href='#' class='close' data-hide='alert' aria-label='close' title='close'>×</a>'</div>").show(250).delay(2000).hide(250);
$("#product_search").addClass("alert alert-warning ").append("<div id='search_error' style='font-size: 16px'>Product Unavailable <!--'<a href='#' class='close' data-hide='alert' aria-label='close' title='close'>×</a>'--></div>").show(250).delay(2500).hide(500);
$(function () { // CLICK ON THE X AND YOU CLOSE THE ALERT
$("[data-hide]").on("click", function () {
$("." + $(this).attr("data-hide")).hide();
});
});
} // Error checking is irrelvant and hence hidden //
response($.map(data, function (object) {
return {
label: object.product_name,
value: object.product_id,
price: object.price
};
}));
}
});
},
select: function (event, ui) {
$(' .product_name ').val(ui.item.label);
$(' .price').val(ui.item.price);
$(' .product_id ').val(ui.item.value);
return false;
}
});
}
@vincej right after the function add
window.myAutocomplete = myAutocomplete
Ok, however this is how myAutoComplete gets called - as part of a click event, so how do I deal with that?
$('#tableQuotation').on('click, keydown', 'input.product_name', function () {
$(this).css('background-color', 'rgb(250, 255, 189)');
myAutocomplete($(this));
})
@vincej that should start working as the function is now globally available. Binding to window sets the function as globally available. That's what happens when you just add the files directly in public manually :)
Ok - so for clarity, I do this?
$('#tableQuotation').on('click, keydown', 'input.product_name', function () {
$(this).css('background-color', 'rgb(250, 255, 189)');
myAutocomplete($(this));
})
window.myAutocomplete = myAutocomplete
@vincej no the other way around. You bind it in functions.js
/* VIEW PROJECT QUOTE USED ON TABLE 2 */
function myAutocomplete(input) {
$(input).autocomplete({
minLength: 2,
source: function (request, response, term) {
var param = request.term
var paramTrimed = param.trim();
$.ajax({
url: "/product_prices/" + paramTrimed,
dataType: 'json',
success: function (data) {
// Error checking delivers Bootstap error to the page //
if ((data.length == 0) || $.isEmptyObject(data) || (data == null)) {
$("#search_error").remove();
$("#supplier_search").addClass("alert alert-warning ").append("<div id='search_error' style='font-size: 16px'>'No Such Supplier Found' '<a href='#' class='close' data-hide='alert' aria-label='close' title='close'>×</a>'</div>").show(250).delay(2000).hide(250);
$("#product_search").addClass("alert alert-warning ").append("<div id='search_error' style='font-size: 16px'>Product Unavailable <!--'<a href='#' class='close' data-hide='alert' aria-label='close' title='close'>×</a>'--></div>").show(250).delay(2500).hide(500);
$(function () { // CLICK ON THE X AND YOU CLOSE THE ALERT
$("[data-hide]").on("click", function () {
$("." + $(this).attr("data-hide")).hide();
});
});
} // Error checking is irrelvant and hence hidden //
response($.map(data, function (object) {
return {
label: object.product_name,
value: object.product_id,
price: object.price
};
}));
}
});
},
select: function (event, ui) {
$(' .product_name ').val(ui.item.label);
$(' .price').val(ui.item.price);
$(' .product_id ').val(ui.item.value);
return false;
}
});
}
window.myAutocomplete = myAutocomplete
@Sinnbeck OK - BRILLIANT! As always you are a rockstar!! Many Many thanks !!! It's late here so I'll let you know how successful I am in my morning ie your evening! Cheers !
@Sinnbeck It works! Brilliant! Thank You!
I was previously working through some of these answers on SO, like import, and export and fetch loading and what ever, and no where on the page was your answer offered. Nice and simple!
@vincej happy to help. Yes it's indeed a simple solution. 👍
Please or to participate in this conversation.