logo
20.02.2020 18:28
1
Ahoj všichni,

nejprve bych rád upřesnil pár drobností... V minulosti jsem již podobné věci dělal, ale jelikož si příliš netykám s JavaScriptem, bylo to trápení a strávil jsem nad tím spoustu času - ale podařilo se :) Takže bych se nejdříve zkusil rozpomenout, a to i díky vám, ale pokud bych nad takovouto drobnou věcí měl strávit více času než by bylo zdrávo, nebudu váhat to někomu nabídnout jako malou zakázku, popř. i další dílčí úkoly. Teď jen doufám, že jsem nikoho tímto malým úvodem nepohoršil.

Takže, mám malý formulář na vyhledávání v DB na základě 5 parametrů, což samo osobě není obtížné. Formulář obsahuje pouze tři posuvníky, které jsou ALE vytvořeny JavaScriptem...

1) Zvolil jsem tyto posuvníky: https://lokku.github.io/jquery-nstslider/

2) HTML kód:
Kód:
<div><span>Interest rate:</span> <span class="leftLabel"></span> to <span class="rightLabel"></span></div>
<div id="nstSlider_interest" class="nstSlider" data-range_min="0.3" data-range_max="10.99" data-cur_min="1" data-cur_max="4">
  <div class="bar nst-animating" style="left: 61px; width: 87px;"></div>            
  <div class="leftGrip gripHighlighted nst-animating" tabindex="0" style="left: 61px;"></div>
  <div class="rightGrip gripHighlighted nst-animating" tabindex="0" style="left: 128px;"></div>             
</div>			

<div><span>Deposit:</span> <span class="leftLabel_deposit"></span></div>
<div id="nstSlider_deposit" class="nstSlider" data-range_min="1" data-range_max="20000" data-cur_min="5000">
  <div class="leftGrip gripHighlighted nst-animating" tabindex="0" style="left: 61px;"></div>
</div>
			
<div><span>Interest term:</span> <span class="leftLabel_term"></span> to <span class="rightLabel_term"></span> months</div>
<div id="nstSlider_term" class="nstSlider" data-range_min="6" data-range_max="60" data-cur_min="12" data-cur_max="36">
  <div class="bar nst-animating" style="left: 61px; width: 87px;"></div>           
  <div class="leftGrip gripHighlighted nst-animating" tabindex="0" style="left: 61px;"></div>
  <div class="rightGrip gripHighlighted nst-animating" tabindex="0" style="left: 128px;"></div>                
</div>
       
<form method="post" action="search.php" enctype="multipart/form-data" id="search">
  <input type="submit" value="Send" >
  <input type="hidden" id="inp_rate_min" name="inp_rate_min" value=""><br>
  <input type="hidden" id="inp_rate_max" name="inp_rate_max" value=""><br>
  <input type="hidden" id="inp_deposit" name="inp_deposit" value=""><br>
  <input type="hidden" id="inp_term_min" name="inp_term_min" value=""><br>
  <input type="hidden" id="inp_term_max" name="inp_term_max" value=""><br>
</form>
3) JavaScript:
Kód:
<script>					
$('#nstSlider_interest').nstSlider({    
  "crossable_handles": false,
  "left_grip_selector": ".leftGrip",
  "right_grip_selector": ".rightGrip",
  "value_bar_selector": ".bar",
  "value_changed_callback": function(cause, leftValue, rightValue) {
    $('.leftLabel').text(leftValue);
    $('.rightLabel').text(rightValue);
    $('#inp_rate_min').val(leftValue); 
    $('#inp_rate_max').val(rightValue); 
  },
});
					
$('#nstSlider_deposit').nstSlider({
  "rounding": {
    "50": "1000",
    "100": "20000"
  },
  "left_grip_selector": ".leftGrip",
  "value_changed_callback": function(cause, leftValue, rightValue) {
    $(this).parent().find('.leftLabel_deposit').text(leftValue);
    $('#inp_deposit').val(leftValue); 
  },
});
					
				
$('#nstSlider_term').nstSlider({  
  "crossable_handles": false,
  "left_grip_selector": ".leftGrip",
  "right_grip_selector": ".rightGrip",
  "value_bar_selector": ".bar",
  "value_changed_callback": function(cause, leftValue, rightValue) {
    $('.leftLabel_term').text(leftValue);
    $('.rightLabel_term').text(rightValue);
    $('#inp_term_min').val(leftValue); 
    $('#inp_term_max').val(rightValue); 
  },
});		
</script>
K výše přiloženému textu a kódu mám tři otázky:
1) Vybraná data se ihned zobrazují u posuvníků a zároveň zapisují do skrytého formuláře, kterým je následně odesílám na výstupní stránku. Toto je asi tak maximum co s JS zvládnu :) Takže mě zajímá zda je toto řešení předávání dat do php rozumné a nebo za byste mi doporučili něco jiného.

2) Před odesláním formuláře bych rád pro efekt zobrazoval u formuláře počet nalezeným záznamů a to pomocí AJAXu. Zkoušel jsem to již na onChange event, ale bez úspěchu...

3) Lze jednoduše upravit JS tak by slider zobrazoval reálná čísla i s jedním desetinným místem? (tento to bod je asi v tento okamžik klíčový, aby pro mě mělo smysl s těmito posuvníky pokračovat dál a nebo raději zvolit jiné řešení.)

Děkuji za jakoukoliv radu či pomoc,
P.

Co se právě děje na Webtrhu?

21.02.2020 00:27
2
Ak chces, po 17:00 ti to urobim. Napis mi do spravy.