1.11M Members

jquery slider dynamic search using ajax

 
0
 

I've got a form which searches my database dynamically using ajax every time someone makes a change to it. Problem is, it doesn't perform when I change the slider... only when I change like a checkbox or something. Should be pretty simple to solve, but I'm just not seeing it. Here's my code for the applicable part of the form:

<form id="boogie">
<div id='magazine' style="font-size:24px;">
	<div style="background-image:url(pages/08.jpg);">
	  <label for="amount2" style="margin-left:43px;">Students:</label>
	  <input type="text" id="amount2" style="background:transparent; border:0; font-weight:bold;" />
      <input id="minStudents" value="0" name="minStudents" type="hidden" />
      <input id="maxStudents" value="70000" name="maxStudents" type="hidden" />
	  <div id="slider-range2" style="height:300px; margin-left:43px;"></div>
      <div style="height:100px;"></div>
      <input type="checkbox" value="FALSE" id="REGION_SCH1"> Northeast<br />
	  <input type="checkbox" value="FALSE" id="REGION_SCH2" checked="checked"> Midwest<br />
	  <input type="checkbox" value="FALSE" id="REGION_SCH3" checked="checked"> South<br />
	  <input type="checkbox" value="FALSE" id="REGION_SCH4" checked="checked"> West<br />
	  <input type="checkbox" value="FALSE" id="REGION_SCH5" checked="checked"> Outlying Areas (like Hawaii and Alaska)<br />
    </div>
	<div style="background-image:url(pages/09.jpg);"></div>
	<div style="background-image:url(pages/10.jpg);">
      <div style="height:625px;"></div>
      <div style="margin-left:150px;">
      <input type="checkbox" value="FALSE" id="CTRL_SCH2" checked="checked"><br />
      <input type="checkbox" value="FALSE" id="CTRL_SCH1" checked="checked"><br />
      </div>
    </div>
	<div style="background-image:url(pages/11.jpg);"></div>
	<div style="background-image:url(pages/12.jpg);"></div>
	<div style="background-image:url(pages/13.jpg);">
      <div style="height:610px;"></div>
      <div style="margin-left:295px;">
      <input type="checkbox" value="FALSE" id="DURA_SCH1" checked="checked"><br />
      <input type="checkbox" value="FALSE" id="DURA_SCH2" checked="checked"><br />
	  </div>
    </div>
	<div style="background-image:url(pages/14.jpg);">
      <div style="height:495px;"></div>
	  <div class="demo">
      <input type="text" id="amount" name="amount" style="background:transparent; border:0; margin-bottom:20px; font-weight:bold; margin-left:250px;" />
      <input id="minCharge" value="0" name="minCharge" type="hidden" />
      <input id="maxCharge" value="100000" name="maxCharge" type="hidden" />
      <div id="slider-range" style="width:270px; margin-left:140px;"></div>
      </div>    
    </div>
</div>
</form>
<script type="text/javascript" src="js/search.js"></script>

Here's my code for one of the sliders:

<script>
	$(function() {
		$( "#slider-range2" ).slider({
			orientation: "vertical",
			range: true,
			min: 0,
			max: 70000,
			values: [ 0, 70000 ],
			step: [1000],
			slide: function( event, ui ) {
				$( "#amount2" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
       			$("#minStudents").val(ui.values[ 0 ]);
				$("#maxStudents").val(ui.values[ 1 ]);

			}
		});
		$( "#amount2" ).val( "" + $( "#slider-range2" ).slider( "values", 0 ) +
			" - " + $( "#slider-range2" ).slider( "values", 1 ) );
	});
	</script>

Here's my search code:

$(function() {
	$('#boogie').change(function(){
	
	var form = $('#boogie');
	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";
    }	
	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";
    }	
	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";
    }
	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";
    }
	var minStudents = $('#minStudents').val();
	var maxStudents = $('#maxStudents').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();
	
    $.ajax ({
        url: "searchit.php",
        type: 'POST',
        data: ({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, minchg : minCharge, maxchg : maxCharge, minsatv : minSATverbal, maxsatv : maxSATverbal, minsatm : minSATmath, maxsatm : maxSATmath, minsatw : minSATwriting, maxsatw : maxSATwriting}),
        dataType: 'text',
        success: function(d) {
            $('#result').html(d);// an element that should contain your results. process.php generates html this adds that html to your DOM
        }
    });
});
});

BTW, I know it's messy. Clean it up at your own risk :icon_lol: ! Important thing is just getting that search to work.

 
0
 

solved it! Sorry :-(

Question Self-Answered as of 2 Years Ago
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article