Přepis snippetu v jQuery AJAXu do vanilla JS

ForestCZE

Ahoj, v jQuery mám:

success: function(data){
  $("#snippet--examinations").html(data.snippets['snippet--examinations']);
}

Pořeboval bych to přepsat do JS.

document.getElementById("snippet--examinations").innerHTML = xhttp.responseText;

To mi vrátí celou stránku. Takže mám:

document.getElementById("snippet--examinations").innerHTML = xhttp.responseText.snippets['snippet--examinations'];

To mi píše, že to nezná vlastnost snippets. Jak to má být správně? Díky.

Editoval ForestCZE (24. 5. 2020 8:57)

CZechBoY

Nejspis protoze se vraci json :-)

Co pouzit aspon axios na ajax cally?

ForestCZE

CZechBoY napsal(a):

Nejspis protoze se vraci json :-)

Co pouzit aspon axios na ajax cally?

Nevím, o čem je řeč :-) Do včerejška jsem používal to řešení pomocí jQuery a nemusel to nijak zvlášť řešit. Takže bych byl rád za nějaké řešení/ukázku. Děkuji.

PS. Začal se mi líbit čistý JS, všechno už mám přepsané, ale s tím AJAXem nevím no :-)

EDIT: Nevrací se JSON.
EDIT2: Jo, ty jsi myslel, že v tom jQuery ajaxu se vrací JSON :-) To ano.

Editoval ForestCZE (24. 5. 2020 9:55)

ForestCZE

Nechápu, jak to může jQuery vracet jako JSON, když ta data nejsou v JSON formátu…

CZechBoY

Divny, mne to vzdy vraci jako json a v nem snippets a v nem list html.
Ses si jistej ze si poslal napr. hlavicku x-requested-with?

ForestCZE

var searchExamination = function(){
        var xhttp;
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function(){
            if(xhttp.readyState === 4 && xhttp.status === 200)
            {
                console.log(xhttp);
            }
        };

        xhttp.open("POST", window.location.href, true);
        xhttp.send();
    };

Output

MajklNajt

Vyzerá to tak, akoby si neinvalidoval snippety v komponente/presenteri

ForestCZE

MajklNajt napsal(a):

Vyzerá to tak, akoby si neinvalidoval snippety v komponente/presenteri

public function renderExaminations($search): void
   {
       $this->template->examinations = $this->hospital->getExaminations($search);

       if($this->isAjax())
           $this->redrawControl('examinations');
   }

MajklNajt

tak potom ako píše CZechBoY, doplň si do requestu hlavičku X-Requested-With: XMLHttpRequest, jQuery to tam pridáva automaticky, keď si robíš čistý JS, musíš ju poslať ručne

ForestCZE

MajklNajt napsal(a):

tak potom ako píše CZechBoY, doplň si do requestu hlavičku X-Requested-With: XMLHttpRequest, jQuery to tam pridáva automaticky, keď si robíš čistý JS, musíš ju poslať ručne

Poradíš prosím jak? V tomhle jsem newbie.

MajklNajt

myslel som, že sa do JS rozumieš, keď si sa rozhodol pre takýto refaktoring :) skús napr. takto

pre pochopenie si potom preštuduj, prečo ti to $this->isAjax() nevracalo true

ForestCZE

MajklNajt napsal(a):

myslel som, že sa do JS rozumieš, keď si sa rozhodol pre takýto refaktoring :) skús napr. takto

pre pochopenie si potom preštuduj, prečo ti to $this->isAjax() nevracalo true

Snažím se učit nové věci. isAjax vracel false, prtože to nezískalo ten Header :-)

Nicméně, nyní to vrací

{"state":{"emsid":"17ba0791499db908433b80f37c5fbc89b870084b"},"snippets":{"snippet--examinations":"        <table class=\"tab tab_h\">\n            <tr>\n                <th>Jméno</th>\n                <th>Narozen(a)</th>\n                <th>Druh</th>\n                <th>Výsledky</th>\n                <th>Zapsáno</th>\n                <th>Provedl(a)</th>\n                <th>Vyřešil(a)</th>\n            </tr>\n            \n        </table>\n"}}

Potřebuju získat snippet–examinations, tak předpokládám, že se to musí naparsovat

var json = JSON.parse(xhttp.response);

EDIT: Tak snad takto:

var json = JSON.parse(xhttp.response);
console.log(json["snippets"]["snippet--examinations"]);

Editoval ForestCZE (24. 5. 2020 18:27)

CZechBoY

Vazne bych ti doporucil aspon ten axios