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!

Recommended Answers

All 2 Replies

I would have most probably hit the ESC key before all this collateral code is loaded

<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>

Just looking at it makes me go click on the x sign of the tab immediately.

Alright. Not sure that helped terribly much, Troy III, since my site depends on that script (except I did forget to delete the 1.2.18.custom...js). Anyway, I figured it out. The only thing that was causing the problem was the steps in the sliders. Decreasing those solved the issue.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.