☰ ACDB  Log In
Busca
Anime Characters Database Forums

READ ONLY MODE IS ACTIVATED

Post Reply
ACDB Forums :: Anime Characters Database :: Site Discussion
Posted 7 year(s) ago RE: PDA Icon # 16976

Verael



1 Stars

Joined on 11-24-17
Posts 4
But given the choice between writing hundreds of lines of insanely complex AJAX code, or a simple function + iframe ... you can guess what solution won out. xD


function watching() {
var quickwatch = document.getElementById('quickwatch');
if(quickwatch.innerHTML == '') {
fetch('ajax_watching.php', {credentials: "same-origin"}
).then(function(response) {
return response.text();
}).then(function(text){
quickwatch.innerHTML = text;
});
} else {
quickwatch.innerHTML = '';
}
}

Maybe something like that? The Fetch API isn't supported by IE (Internet Explorer) tho.
credentials: same-origin is there so it sends the cookies.
Top PM Verael
Posted 7 year(s) ago Re: # 16977

Rei
ダメ人間

Rei Avatar
10 Stars
Head Admin
Joined on 05-24-07
Posts 2102
That's some pretty interesting code Verael ! Thanks for sharing.

What would happen when one interacted with the HTML it fetched ?
[Image]

私は日本語を少し読むと書くをできます。あなたも？

[Image]
Top PM Rei
Posted 7 year(s) ago Re: # 16982

Verael



1 Stars

Joined on 11-24-17
Posts 4
async function watching() {
var quickwatch = document.getElementById('quickwatch');
if(quickwatch.innerHTML == '') {
var response = await fetch('ajax_watching.php', {credentials: "same-origin"}
);
quickwatch.innerHTML = await response.text();
} else {
quickwatch.innerHTML = '';
}
}

It can be even shorter.
2017 syntax though, I don't think Edge supports await yet.

All this does it load the HTML from a specific URL and plops it inside quickwatch. After that, you can bind listeners and all that to it. Or use onclick, although I think people avoid onclick because it slows down page loads.

await waits for fetch to come back with a result from the server, and then it awaits again for it to wait for the HTML to arrive and be turned into a form you can interact with. The function's async, so other functions can run while it awaits.

I'll just look up the POST syntax...

function doSomething() {
var quickwatch = document.getElementById('quickwatch');
var episodeForm = document.getElementById("episodeForm");
console.log("episodeForm: ",episodeForm);
const data = new URLSearchParams();
for (const pair of new FormData(episodeForm)) {
data.append(pair[0], pair[1]);
}
console.log("data: ",data);
fetch('ajax_watching.php?pid=103898', {
credentials: "same-origin",
body: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
method: "post",
}).then(function(response) {
return response.text();
}).then(function(text){
console.log("text: ",text);
quickwatch.innerHTML = text;
});
}

It took... a bit.. of research... But! I managed to cobble this together, it was mainly the Fetch API which was driving me crazy, as it behaves really... oddly with forms. If you change the consts to vars, it breaks and I don't know why. URLSearchParams is just empty for some reason.

Calling doSomething AJAXically submits the form with the ID of episodeForm and swaps quickwatch's HTML for the returned result from the server. The headers part might not be necessary. Or the console.logs, that was for me to debug the thing.

In practice, you might want to put a data attribute with a unique number or something on the button, maybe use that as part of the form's ID, and then AJAXically submit the form? Dunno.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
≺form data-id="58"≻

For instance, that would be a data attribute which you could grab with .getAttribute("data-id") on the form's element. You can get the action the same way.
Top PM Verael
Post Reply