I am facing difficulties with handling unusual codes.
I am trying to add some query parameters using $.ajaxPrefilter in all jQuery ajax requests. I came across the following code snippet which seems to ensure synchronous loading order, but in my entry.js file, the js files are sometimes loaded in an unpredictable order - prefilter.js is loaded first at times while post_ajaxs.js is loaded first at other instances (I checked server POST messages and used Chrome devtools to analyze loading timings).
require(['prefilter'])
$(function(){
if($("#page_id").length > 0) {
require([
"src/common/post_ajax.js"
]);
}
});
What could be causing this issue? I initially thought that the require keyword was for synchronous loading. I have included a portion of webpack.config.js that might be relevant.
entry: {
/webroot/js/entry.js: __dirname+"/src/entry.js"
},
resolve: {
alias: {
"prefilter": __dirname + "/src/common/prefilter.js",
}
},
output: {
path: __dirname + "/webroot/js/",
filename: "[name].js",
chunkFilename: "[hash].[id].js?" + (+new Date()),
publicPath: "/js/"
},
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
d3: "d3"
})
]
I want to ensure that prefilter.js is always loaded before post_ajax. Any help or information will be greatly appreciated.
Edit: Here is a snippet from prefilter.js.
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
options.data = $.param($.extend(originalOptions.data, {'data[extra]':$("#some_id").val() }));
}
});