/    Sign up×
Community /Pin to ProfileBookmark

Javascript on content loaded via fetch

Copy linkTweet thisAlerts:
Aug 13.2020

Should I be able to run Javascript code on content loaded via fetch?

index.php (I have JS scripts I want to run when a form is submitted, the form is loaded via fetch)
form.php (loaded by fetch from index.php)

My JS doesn’t seem to work? Why?

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumAug 13.2020 — Javascript in fetched content is always a potential reason for trouble. If you maintain the fetched content yourself I recommend to place the JS in your index.php and execute it in the callback of your fetch request.
Copy linkTweet thisAlerts:
@kiwisauthorAug 13.2020 — @Sempervivum#1622076

Can you explain what you mean?
Copy linkTweet thisAlerts:
@SempervivumAug 13.2020 — I mean something like this:
<i>
</i> // Place code into a function
function doIt() {
document.getElementById('id-of-your-form').addEventListener('submit', event =&gt; {
// do anything you require
});
}
fetch('your-form.php').then(response =&gt; {
return response.text();
}).then(response =&gt; {
document.getElementById('your-container').innerHTML = response;
// Execute function defined above
doIt();
});
Copy linkTweet thisAlerts:
@EmirShah741Aug 13.2020 — Please refer to the website [custom WordPress development services](https://maxenius.com/services/website-developement/wordpress/)
Copy linkTweet thisAlerts:
@daveyerwinAug 13.2020 — @kiwis80#1622070

check this out

https://unitedriverside.com/fetch/

this fetches a form with a style element

and a script element

it does not use innerHTML to add content

because we all know innerHTML is fine for reading content

but really no good for adding content

check out this thread ...

https://www.webdeveloper.com/d/390997-javascript-is-going-crazy

it reveals an unexpected and hard to debug problem

that was overcome by replacing innerHTML with

an alternative approach
Copy linkTweet thisAlerts:
@VITSUSAAug 17.2020 — @kiwis80#1622070 I agree with Sempervivum, This is good advice to recommend to place the JS in your index.php.
Copy linkTweet thisAlerts:
@daveyerwinAug 17.2020 — @VITSUSA#1622200 said ...

This is good advice to recommend to place the JS in your index.php.
- - - - - - -

If you put JavaScript in your index.php then just include

code to hide and show the form, no need to "Fetch" the form.

if you have a good reason to fetch the form then, probably,

you have also a good reason to Not write the necessary JavaScript

in the index.php.

here is an HTML page, no PHP needed, that fetches a form element

along with a style element And a script element

https://unitedriverside.com/fetch/
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...