Liz Banach Liz Banach - 2 months ago 6
Javascript Question

If/else Javascript statement not working properly with DataTables

I have the following Javascript code that initializes a DataTables chart on my website.

Basically, my intention with this script is to AJAX in different data based upon the URL the user is currently on. I have written an if/else statement that worked for other components on my page but is not working for my DataTables chart.

Why is this not working? Is there a better way to accomplish this?

var URL = window.location.href;

if (URL.indexOf("london") !== -1) {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects-london.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );

column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}
if (URL.indexOf("nw") !== -1) {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects-nw.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );

column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}
if (URL.indexOf("loupe") !== -1) {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects-loupe.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );

column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}
if (URL.indexOf("new-york") !== -1) {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects-new-york.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );

column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}
if (URL.indexOf("content") !== -1) {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects-content.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );

column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}
else {
// initialize datatables chart
$(document).ready( function () {
var table = $('#aging_projects').DataTable({
"processing": true,
"serverSide": false,
"ajax": "../financial-reports/aging-projects.php",
"destroy": true,
"resonsive": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );

column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
});
}

Answer

I can't see an error, but maybe if you change the code in this way, should be more easy to debug and find the error.

var URL = window.location.href;
var ajaxURL = '';

if (URL.indexOf("london") !== -1) {
  ajaxURL = 'aging-projects-london.php';
}else if (URL.indexOf("nw") !== -1) {
  ajaxURL = 'aging-projects-nw.php';
}else if (URL.indexOf("loupe") !== -1) {
  ajaxURL = 'aging-projects-loupe.php';
}else if (URL.indexOf("new-york") !== -1) {
    ajaxURL = 'aging-projects-new-york.php'; 
}else if (URL.indexOf("content") !== -1) {
    ajaxURL = 'aging-projects-content.php'; 
}else {
  ajaxURL = 'aging-projects.php'; 
}
$(document).ready( function () {
    var table = $('#aging_projects').DataTable({
        "processing": true,
        "serverSide": false,
        "ajax": "../financial-reports/" + ajaxURL,
        "destroy": true,
        "resonsive": true,
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select class="form-control"><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                        );

                    column
                    .search( val ? '^'+val+'$' : '', true, false )
                    .draw();
                } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    });
});
Comments