I've got a project I'm working on where people can search using checkboxes, sliders, and an input box. The search works, but I've got issues here, especially when using IE as the browser. Haven't even tried Safari and Opera. Even in Firefox, there are minor issues. First, the lagging of the sliders is terrible. Second, the loading.gif just comes up at the first page load. When I make a change to any of the variables, I want the loading.gif to show up while the results are being processed as well. I'm terribly new at this whole coding thing, and I hope that someone can help me b-smack my code into submission. I want to launch my site like last week, but the bugs are EVERYWHERE!!! Help... please?
Here's what I got in the head section for script:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="js/process.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.slider.js"></script>Obviously, it's not jQuery's issue, so it's gotta be my process.js there, which looks like this:
$(document).ready(function(){
function loading_show(){
$('#loading').html("<img src='images/loader.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
var inpval=$('#inp').val();
var ctrl_sch1 = $('#CTRL_SCH1').val();
if ($("#CTRL_SCH1").is(":checked")) {
ctrl_sch1 = "CTRL_SCH=1";
}
var ctrl_sch2 = $('#CTRL_SCH2').val();
if ($("#CTRL_SCH2").is(":checked")) {
ctrl_sch2 = "CTRL_SCH=2";
}
$("input[name='ctrl']").click(function(){
var numChkd = $(this).siblings(':checked').size();
if(!numChkd && !this.checked){
alert('Please choose one.');
$(this).attr('checked',true);
};
});
var dura_sch1 = $('#DURA_SCH1').val();
if ($("#DURA_SCH1").is(":checked")) {
dura_sch1 = "DURA_SCH=1";
}
var dura_sch2 = $('#DURA_SCH2').val();
if ($("#DURA_SCH2").is(":checked")) {
dura_sch2 = "DURA_SCH=2";
}
$("input[name='dura']").click(function(){
var numChkd = $(this).siblings(':checked').size();
if(!numChkd && !this.checked){
alert('Please choose one.');
$(this).attr('checked',true);
};
});
var ctrl_sch1 = $('#CTRL_SCH1').val();
if ($("#CTRL_SCH1").is(":checked")) {
ctrl_sch1 = "CTRL_SCH=1";
}
var ctrl_sch2 = $('#CTRL_SCH2').val();
if ($("#CTRL_SCH2").is(":checked")) {
ctrl_sch2 = "CTRL_SCH=2";
}
$("input[name='ctrl']").click(function(){
var numChkd = $(this).siblings(':checked').size();
if(!numChkd && !this.checked){
alert('Please choose one.');
$(this).attr('checked',true);
};
});
var popu_area_sch1 = $('#POPU_AREA_SCH1').val();
if ($("#POPU_AREA_SCH1").is(":checked")) {
popu_area_sch1 = "POPU_AREA_SCH=1";
}
var popu_area_sch2 = $('#POPU_AREA_SCH2').val();
if ($("#POPU_AREA_SCH2").is(":checked")) {
popu_area_sch2 = "POPU_AREA_SCH=2";
}
var popu_area_sch3 = $('#POPU_AREA_SCH3').val();
if ($("#POPU_AREA_SCH3").is(":checked")) {
popu_area_sch3 = "POPU_AREA_SCH=3";
}
var popu_area_sch4 = $('#POPU_AREA_SCH4').val();
if ($("#POPU_AREA_SCH4").is(":checked")) {
popu_area_sch4 = "POPU_AREA_SCH=4";
}
$("input[name='popu']").click(function(){
var numChkd = $(this).siblings(':checked').size();
if(!numChkd && !this.checked){
alert('Please choose one.');
$(this).attr('checked',true);
};
});
var region_sch1 = $('#REGION_SCH1').val();
if ($("#REGION_SCH1").is(":checked")) {
region_sch1 = "REGION_SCH=1";
}
var region_sch2 = $('#REGION_SCH2').val();
if ($("#REGION_SCH2").is(":checked")) {
region_sch2 = "REGION_SCH=2";
}
var region_sch3 = $('#REGION_SCH3').val();
if ($("#REGION_SCH3").is(":checked")) {
region_sch3 = "REGION_SCH=3";
}
var region_sch4 = $('#REGION_SCH4').val();
if ($("#REGION_SCH4").is(":checked")) {
region_sch4 = "REGION_SCH=4";
}
var region_sch5 = $('#REGION_SCH5').val();
if ($("#REGION_SCH5").is(":checked")) {
region_sch5 = "REGION_SCH=5";
}
$("input[name='reg']").click(function(){
var numChkd = $(this).siblings(':checked').size();
if(!numChkd && !this.checked){
alert('Please choose one.');
$(this).attr('checked',true);
};
});
var rank = $('#amountRank').val();
if ($("#rank-disable").is(":checked")) {
$('#Rank').slider('disable');
rank = "10000";
}else{
$('#Rank').slider('enable');
};
var minStudents = $('#minStudents').val();
var maxStudents = $('#maxStudents').val();
var minIntlSts = $('#minIntlSts').val();
var maxIntlSts = $('#maxIntlSts').val();
var minCharge = $('#minCharge').val();
var maxCharge = $('#maxCharge').val();
var minSATverbal = $('#minSATverbal').val();
var maxSATverbal = $('#maxSATverbal').val();
var minSATmath = $('#minSATmath').val();
var maxSATmath = $('#maxSATmath').val();
var minSATwriting = $('#minSATwriting').val();
var maxSATwriting = $('#maxSATwriting').val();
loading_show();
$.ajax
({
type: "POST",
url: "load_data.php",
data: {page : page, sp : inpval, rank : rank, c1 : ctrl_sch1, c2 : ctrl_sch2, d1 : dura_sch1, d2 : dura_sch2, p1 : popu_area_sch1, p2 : popu_area_sch2, p3 : popu_area_sch3, p4 : popu_area_sch4, r1 : region_sch1, r2 : region_sch2, r3 : region_sch3, r4 : region_sch4, r5 : region_sch5, minsts : minStudents, maxsts : maxStudents, minintlsts : minIntlSts, maxintlsts : maxIntlSts, minchg : minCharge, maxchg : maxCharge, minsatv : minSATverbal, maxsatv : maxSATverbal, minsatm : minSATmath, maxsatm : maxSATmath, minsatw : minSATwriting, maxsatw : maxSATwriting},
success: function(msg){
$("#container").ajaxComplete(function(event, request, settings){
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
$('#boogie').change(function(){
loadData(1);
});
$(function() {
$( "#Rank" ).slider({
range: "max",
min: 0,
max: 150,
value: [ 75 ],
slide: function( event, ui ) {
$( "#amountRank" ).val( 150 - ui.value );
},
stop: function(){
loadData(1);
}
});
$( "#amountRank" ).val( $( "#Rank" ).slider( "value" ) );
});
$(function() {$('#Rank').slider('disable');});
$( "#Chg" ).slider({
range: true,
min: 0,
max: 100000,
values: [ 0, 100000 ],
step: [5000],
slide: function( event, ui ) {
$( "#amountChg" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
$("#minCharge").val(ui.values[ 0 ]);
$("#maxCharge").val(ui.values[ 1 ]);
},
stop: function(){
loadData(1);
}
});
$( "#amountChg" ).val( "$" + $( "#Chg" ).slider( "values", 0 ) +
" - $" + $( "#Chg" ).slider( "values", 1 ) );
$( "#IntlSts" ).slider({
range: true,
min: 0,
max: 10000,
values: [ 0, 10000 ],
step: [1000],
slide: function( event, ui ) {
$( "#amountIntlSts" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$("#minIntlSts").val(ui.values[ 0 ]);
$("#maxIntlSts").val(ui.values[ 1 ]);
},
stop: function(){
loadData(1);
}
});
$( "#amountIntlSts" ).val( "" + $( "#IntlSts" ).slider( "values", 0 ) +
" - " + $( "#IntlSts" ).slider( "values", 1 ) );
$( "#Sts" ).slider({
range: true,
min: 0,
max: 70000,
values: [ 0, 70000 ],
step: [1000],
slide: function( event, ui ) {
$( "#amountSts" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$("#minStudents").val(ui.values[ 0 ]);
$("#maxStudents").val(ui.values[ 1 ]);
},
stop: function(){
loadData(1);
}
});
$( "#amountSts" ).val( "" + $( "#Sts" ).slider( "values", 0 ) +
" - " + $( "#Sts" ).slider( "values", 1 ) );
$( "#SATverbal" ).slider({
range: true,
min: 0,
max: 800,
values: [ 0, 800 ],
step: [10],
slide: function( event, ui ) {
$( "#amountSATverbal" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$("#minSATverbal").val(ui.values[ 0 ]);
$("#maxSATverbal").val(ui.values[ 1 ]);
},
stop: function(){
loadData(1);
}
});
$( "#amountSATverbal" ).val( "" + $( "#SATverbal" ).slider( "values", 0 ) +
" - " + $( "#SATverbal" ).slider( "values", 1 ) );
$( "#SATmath" ).slider({
range: true,
min: 0,
max: 800,
values: [ 0, 800 ],
step: [10],
slide: function( event, ui ) {
$( "#amountSATmath" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$("#minSATmath").val(ui.values[ 0 ]);
$("#maxSATmath").val(ui.values[ 1 ]);
},
stop: function(){
loadData(1);
}
});
$( "#amountSATmath" ).val( "" + $( "#SATmath" ).slider( "values", 0 ) +
" - " + $( "#SATmath" ).slider( "values", 1 ) );
$( "#SATwriting" ).slider({
range: true,
min: 0,
max: 800,
values: [ 0, 800 ],
step: [10],
slide: function( event, ui ) {
$( "#amountSATwriting" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$("#minSATwriting").val(ui.values[ 0 ]);
$("#maxSATwriting").val(ui.values[ 1 ]);
},
stop: function(){
loadData(1);
}
});
$( "#amountSATwriting" ).val( "" + $( "#SATwriting" ).slider( "values", 0 ) +
" - " + $( "#SATwriting" ).slider( "values", 1 ) );
$( "#GPA" ).slider({
range: true,
min: 0,
max: 800,
values: [ 0, 800 ],
step: [10],
slide: function( event, ui ) {
$( "#amountGPA" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$("#minGPA").val(ui.values[ 0 ]);
$("#maxGPA").val(ui.values[ 1 ]);
},
stop: function(){
loadData(1);
}
});
$( "#amountGPA" ).val( "" + $( "#GPA" ).slider( "values", 0 ) +
" - " + $( "#GPA" ).slider( "values", 1 ) );
$('#inp').keyup(function(){
loadData(1);
});
});BTW, you can insult all you want. I'm pretty proud of this rubbish for only studying it a few weeks. :-) Thanks for the help!
