Koronavirus.eu - 242 000 návštěv za 18 dní
Zobrazují se odpovědi 1 až 2 z 2

Úprava JavaScriptu + zakomponování AJAXu

  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.

  2. Co se právě děje na Webtrhu?
  3. Ak chces, po 17:00 ti to urobim. Napis mi do spravy.

Spolupracujeme: Jooble.org Hostujeme u Server powered by TELE3