Autor Zpráva
Trax
Profil
Ahoj,

potřeboval bych pomoci vytvořit (nebo navézt správným směrem) následující myšlenku:

Mám tabulku v DB, kde jsou různé smyšlené kódy (něco jako čárkový kód) a na stránce mám jejich výpis. Potřeboval bych nad tento výpis umístit <input> pro vyhledávání, kde by se zadala hodnota a bez odesílání by to z výpisu vyčlenilo pouze pár řádku z DB na základě SELECT kod FROM tabulka WHERE .... (popř. LIKE).
Představa je asi taková, že před vyplněním výše zmíněného inputu, by se tabulka vypisovala celá... Po vyplnění, by se výpis zredukoval pouze na řádky, které by odpovídaly hodnotě v inputu.

Hledal jsem řešení na internetu a celkem jsem si to představil s:

<script type="text/javascript">
    $(document).ready(function(){
          $.get("hledani.php", { jmeno: "Petr", prijmeni: "Novak" } );
          $("#vypis").load('hledani.php');
        });
</script>


když si v souboru hledani.php vypíšu

<?php echo ($_POST["jmeno"]); ?>

tak je proměnná prázdná,


Jelikož si ale s JS příliš nerozumím, tak si nejsem jist, zda jdu vůbec správným směrem. Mohli by jste mi prosím poradit? :) Děkuji.
RastyAmateur
Profil
Trax:
Tímto kódem se to provede při načtení stránky - což jistě není tvůj cíl. Tvůj cíl je vyhledávání. Teď otázka - chceš to na tlačítko (uživateli, vyplň input a zmáčkni hledat) a nebo jakmile uživatel napíše něco do inputu automaticky se ten výpis redukuje. Ten princip je stejný.
$("button").click(function(){
  // Dotaz na databázi přes ajax
  });

$("input").keyup(function(){
  // Dotaz na DB
  });
Ještě by to šlo upravit na (více lidí mi to doporučovalo, avšak já v tom nevidím žádný zásadní rozdíl) $(document.body).on("click / keyup","button / input",function(){ /* ajax */});


Zapomněl jsem:
tak je proměnná prázdná,
Boděď by ne, když to pošíláš přes $.get();
Trax
Profil
RastyAmateur:
A jo, tady jsem to špatně uvedl - každopádně jsem zkoušel i $.get() i $.post(). Ono bude určitě problém v tom, že nevím, jak to přesně napsat.

$("input").keyup(function(){
  // Dotaz na DB
  });

Chápu, že je to po zmáčknutí klávesy. Ale co se týče dotazu na DB, stále nemám ponětí jak to zkonstruovat. Jak jsem již psal s JS nejsem zrovna kamarád. S PHP nebude problém myslím, jen přesně nevím, (doufám, že uvažuju alespoň správně...) jak z inputu dostat hodnotu do proměnné (jestli se nepletu, tak ta by měla být v javascriptu) tu potom dostat pomocí $.post() (nebo get?) na stránku hledani.php a tam ji vložit do SQL dotazu. Je to tak?
Keeehi
Profil
Ano, přemýšlíš celkem správně. Základ komunikace mezi javascriptem a PHP máš popsán na www.pehapko.cz/zakladni-kurz/15-php-a-javascript
Trax
Profil
Keeehi:
Děkuji za odkaz na článek. Na tento jsem ještě nenarazil, ovšem je mi jasné, že php odešle dotaz na server, který se pak zpracuje. :)

Takže když bude soubor index.php
<script type="text/javascript">
    
    $("#hledatko").keyup(function(){
          $.get("hledani.php", { hledany_vyraz: "hodnota_value" } ); 
          //tady nemám ponětí jak uložit proměnnou z parametru value z inputu do skriptu  // mohli byste mě tady trošičku pošťouchnout? :)
    });

    $(document).ready(function(){
          $("#vypis").load('vypis.php');
        });
</script>

<form>
  <input id="hledatko">
</form>

<div id="vypis">
    <!-- Zde bude vypsaný obsah souboru vypis.php -->
</div>


A soubor vypis.php
<?php
    $hledany_vyraz_escape = mysqli_real_escape_string($spojeni, $_GET["hledany_vyraz"]);
  
    $vysledek = mysqli_query($spojeni, "SELECT `kod` FROM `tabulka` WHERE `kod` LIKE '".$hledany_vyraz_escape ."'");
    while ($radek = mysqli_fetch_array($vysledek ))
      {
          $kod = $radek["kod"];
          
          echo ($kod);
      }
?>


Problém je také, že stále jsem nepřišel na to, proč $.get() nepředává hodnoty na stránku vypis.php $_GET["hledany_vyraz"] ... Děkuji za rady i připomínky.
RastyAmateur
Profil
Trax:
Já osobně get() a post() nepoužívám, takže jestli to opravdu chceš pomocí těchto funkcí, nepomohu. Jen tedy upravím ten tvůj script:
<script type="text/javascript">        
    $(document).ready(function(){
          $("#hledatko").keyup(function(){
            var hledat = $("#hledatko").val();
            $.ajax({
              method: "post",
              url: "hledani.php",
              data: {hledany_vyraz: hledat},
              success: function(vysledek){
                $("div").html(vysledek); // Vyhledej si na googlu JSON, bude se ti to hodit
                }
              });
            });
        });
</script>
Ten JSON je dobrý, když chceš vypsat z toho PHP souboru nějaké pole a nadále ho nějakým způsobem vypsat...

Ten vypis.php ti nefunguje pravděpodobně z jednoho důvodu - nedefinováno $spojeni.

Celkově mi jQuery.ajax() přijde lepší.

Netestováno
Chamurappi
Profil
Reaguji na Traxe:
ovšem je mi jasné, že php odešle dotaz na server, který se pak zpracuje
Ale není ti jasné, že musíš něčím v JS zase zpracovat tu odpověď. Místo toho chceš posílat další dotazy na server…

proč $.get() nepředává hodnoty na stránku vypis.php
Proč by mělo? Je $.get() a $("něco").load() jsou navzájem nezávislé funkce.
Pokud dobře čtu, v dokumentaci se píše, že jako třetí argument v $.get() se má dát funkce, která se vyvolá při přijetí odpovědi.


Reaguji na RastyAmateura:
Já osobně get() a post() nepoužívám, takže jestli to opravdu chceš pomocí těchto funkcí, nepomohu.
Já je také nepoužívám, ale dokážu si k nim přečíst dokumentaci.

Celkově mi jQuery.ajax() přijde lepší.
V čem přesně? V tom, že jiné postupy neznáš?
Trax
Profil
RastyAmateur:
Díky, použil jsem tvé řešení a funguje to. Jaký je rozdíl v ajax() oproti get() atd? Jen ze zvědavosti.

EDIT: Když tento příklad použiji na svém projektu, tak mi to zase hlásí Undefined index: hledany_vyraz

čučím na to už hodinu a nemůžu přijít na to, kde jsem udělal chybu.
Trax
Profil
Resp. tvořím dvojjazyčnou stránku a na includované stránce mám onen script:

<script language="javascript" type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript">        
            $(document).ready(function(){
                  $("#hledatko").keyup(function(){
                    var hledat = $("#hledatko").val();
                    $.ajax({
                      method: "post",
                      url: "/stranky/vypis.php",
                      data: {hledany_vyraz: hledat},
                      success: function(vysledek){
                          $("#vypis").html(vysledek);
                        }
                      });
                    });
                });
        </script
        
        
        <form style="margin-top: 5px !important;"><input id="hledatko"></form>
        
        <div id="vypis" style="overflow:hidden;"></div>

a na stránce výpis.php

<?php
    if (file_exists("../nastaveni/nastaveni_pripojeni_localhost.php"))
      {require '../nastaveni/nastaveni_pripojeni_localhost.php';}
    else
      {require '../nastaveni/nastaveni_pripojeni.php';} Keeehi
    
    $jazyk = @$_GET["j"];
    if ($jazyk == "")
      {$jazyk = "nevybrano";}
    if ($jazyk == "unselected"){$jazyk = "nevybrano";}
    
    $aktualni_stranka = @$_GET["as"];
    if ($aktualni_stranka == "")
      {$aktualni_stranka = "domu";}

    require '../nastaveni/nastaveni_jazyk_url.php';  
    require '../nastaveni/nastaveni_jazyk_index.php';
    require '../nastaveni/nastaveni_jazyk_administrace.php';
    require '../nastaveni/nastaveni_prepis_ceskych_url_adres.php';
                    
    $hledany_vyraz_escape = mysqli_real_escape_string($spojeni, $_POST["hledany_vyraz"]); //Tady píše Undefined index: hledany_vyraz
?>


Jelikož mám na stránce vypis.php u každého vypsaného řádku odkaz na editace daného záznamu, potřebuji zde uvést i proměnnou $jazyk - je nějaká možnost posílat to s daným výrazem? Třeba ve skrytém inputu? Děkuji za trpělivost i odpovědi. :)
Keeehi
Profil
$jazyk = @$_GET["j"];
Ale fuj! isset (případně empty) neznáš?

$hledany_vyraz_escape = mysqli_real_escape_string($spojeni, $_POST["hledany_vyraz"]);
A co $_GET["hledany_vyraz"]?
RastyAmateur
Profil
Trax:
Script ti pravděpodobně nefunguje díky syntax chybě. Na řádce 5 máš {require '../nastaveni/nastaveni_pripojeni.php';}. Ovšem nevím tedy, proč to píše undefined index... (Uplně na konci máš jen ? namísto ?>).

Chamurappi:
V čem přesně? V tom, že jiné postupy neznáš?
O jiných postupech vím, ale nepoužívám. Největší důvod k tomu asi je, že můj první script komunikující se serverem (resp. PHP soubory) jsem se snažil udělat přes get(), avšak nešlo mi to. Přeš ajax() mi to šlo bez problémů. Nevím, kde jsem dělal chybu. A na druhou stranu, převážná většina scriptů, co jsem viděl, používala ajax().

Keeehi:
Odesílá to pomocí metody POST. Nerozumím pouze těm ostatním proměnným.
Trax
Profil
Keeehi:
Znám, nicméně tam bylo vícero chyb, co jsem musel spravit, tak jsem si zatím některé schoval na později. :)
Proč GET když je to odesíláno přes POST?

RastyAmateur:
V tom to není, to byla chyba jen při kopírování. Krom toho by to napsalo jinou chybu, kdyby byl problém tady.
Keeehi
Profil
Trax:
Proč GET když je to odesíláno přes POST?
Protože jsem si toho nevšiml a ostatní berete z getu. Post může být samozřejmě správně.

V javascript byste měl mít u dat uvozovky
data: {hledany_vyraz: "hledat"}
A jestli tam může být to podtržítko, to nevím.
Trax
Profil
Keeehi:
Ptal jsem se, jelikož mě to v tu chvíli zmátlo. :)

Stále nemohu najít chybu. Všiml jsem si ale, že když něco napíšu do inputu, zobrazí se ona chyba undefined index hledany_vyraz (zkoušel jsem dát i na Vás a odstranit podtržítko a přidat uvozovky a nic.

Spíše mi vrtá hlavou, zda jsem nezadal špatně cestu k onomu souboru nebo jquery.js ... Ale jelikož se mi po napsání nějaké hodnoty zobrazí ona chyba, tak by to tím tedy býti nemělo, ne?

přepisuji totiž URL pomocí .htaccess
Trax
Profil
Tak nakonec mi to funguje s:
<script type="text/javascript">        
          $(document).ready(function(){
                $("#hledatko").keyup(function(){
                    var hledat = $("#hledatko").val();
                    var jazyk = $("#vybrany_jazyk").val();
                
                    $.post( "/stranky/vypis.php", { hledany_vyraz: hledat, predany_jazyk: jazyk  },function(data) {
                      $('#vypis').html(data);
                    });
                });
          });
        </script>


nevím kde u ajax() byla chyba, že mi to nepředávalo hodnotu proměnné. Přidal jsem si také proměnnou jazyk, a její hodnotu jsem pak posílal ve skrytém inputu. Děkuji všem za dobré rady. :)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: