我正在为一个客户构建一个网络应用程序,现在我正处于系统初稿几乎完成的阶段,但是我遇到了一个最终问题,这让我走出了自己的舒适区。
该页面通过使用跨三个变量的 GET 请求以通过 SQL 查询过滤数据来运行,这些变量 s、p 和 g 在表单提交时传递到 URL 以执行搜索。除了每当我尝试切换滑块时,一切都正常,我的 ?s 参数从 URL 中删除,导致查询中断( s 由于某种原因没有被提交。)。关注的页面可以在这里看到
获取变量和查询 -
$pType = $_GET['s'];
$pVal = $_GET['p'];
$gVal = $_GET['g'];
$sql = "SELECT * FROM pumps
WHERE pump_type='$pType'
AND flow_psi <= '$pVal'
AND flow_gpm <= '$gVal'
AND high_psi <= '$pVal'
AND high_gpm <= '$gVal'";
形式 -
<form id="pumpSlider" action="<?php echo $_SERVER['PHP_SELF']; ?>?s=<?php echo $pType ?>&p=<?php echo $pVal ?>&g=<?php echo $gVal ?>" method="get" align="center">
<div class="btn-group" data-toggle="buttons-radio">
<button type="submit" class="<?php if( $pType == 'intermittent' ){ echo 'active '; } ?>btn btn-primary waitingUiBut" id="but1" name="s" value="intermittent">INTERMITTENT</button>
<button type="submit" class="<?php if( $pType == 'continuous' ){ echo 'active '; } ?>btn btn-primary waitingUiBut" id="but4" name="s" value="continuous">CONTINUOUS</button>
</div>
<div align="center" class="productSlider">
<p class="inlineLabel">PSI</p><div class="filterSlider" id="psiSlider"></div>
<p class="inlineLabel">GPM</p><div class="filterSlider" id="gpmSlider"></div>
<input id="pS" type="hidden" name="p" value="<?php echo $pVal ?>" />
<input id="gS" type="hidden" name="g" value="<?php echo $gVal ?>" />
</div>
</form>
最后,我使用了一些基本的 javascript 来处理表单的提交事件,以便在滑块值发生变化时进行处理。
$(document).ready(function() {
$("#psiSlider" ).slider({
// options
start: function (event, ui) {
// code
},
slide: function( event, ui ) {
var curValue = ui.value || initialValueA;
var target = ui.handle || $('.ui-slider-handle');
var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$(target).html(tooltip);
var valA = $('#psiSlider').slider("value");
document.getElementById('pS').value = valA;
var valB = $('#gpmSlider').slider("value");
document.getElementById('gS').value = valB;
},
change: function(event, ui) {
var val = $('#pS').slider("value");
var val = $('#gS').slider("value");
$('#pumpSlider').submit();
}
});
});
我完全被想法难住了,如果有人有任何意见,我将不胜感激,谢谢。