Issues like this usually occur when there is a conflict either with the theme currently active on your website, or another plugin you have installed. Please check for any errors in the console?
Can you please change the theme and see if the issue is resolved? If not, then please deactivate all other plugins except for our plugin, refresh the page where the issue is, and see if it is resolved (it should be). If it is, then start activating other plugins one by one, and after each activation refresh the page to see if the issue reoccurred. Once it does reoccur, you will have found the plugin causing the issue.
I think the problem occur because my logo is an SVG file and in Amelia, there is some javascript code that does something with all SVG elements contained in the current page. I can confirm this because if I change my SVG logo file for a PNG file, this behavior does not occur, but I must use an SVG file as my main logo, not PNG neither JPG.
I actually disabled all the plugins one by one. If I disable my theme (Be-Theme, by the way), it works, however, I cannot do this because all my website is developed and configured in order to work using Betheme.
I saw this messages in the console when this error happens (you can check it for yourself on my live website).
Uncaught TypeError: Cannot read properties of null (reading 'replaceChild') at XMLHttpRequest.s.onload (amelia-booking-booking-b4477d5b64a5624fad8d.js:1) s.onload @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1 load (asincrónica) (anónimo) @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1 s @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1 i.init @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1 inlineSVG @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1 mounted @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1 Re @ amelia-booking.js?ver=4.2:1 tn @ amelia-booking.js?ver=4.2:1 insert @ amelia-booking.js?ver=4.2:1 S @ amelia-booking.js?ver=4.2:1 (anónimo) @ amelia-booking.js?ver=4.2:1 e._update @ amelia-booking.js?ver=4.2:1 pn.before @ amelia-booking.js?ver=4.2:1 pn.get @ amelia-booking.js?ver=4.2:1 pn.run @ amelia-booking.js?ver=4.2:1 hn @ amelia-booking.js?ver=4.2:1 (anónimo) @ amelia-booking.js?ver=4.2:1 Je @ amelia-booking.js?ver=4.2:1 Promise.then (asincrónica) Ue @ amelia-booking.js?ver=4.2:1 tt @ amelia-booking.js?ver=4.2:1 (anónimo) @ amelia-booking.js?ver=4.2:1 pn.update @ amelia-booking.js?ver=4.2:1 de.notify @ amelia-booking.js?ver=4.2:1 set @ amelia-booking.js?ver=4.2:1 mn.set @ amelia-booking.js?ver=4.2:1 refreshCalendar @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1 showNextScreen @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1 Re @ amelia-booking.js?ver=4.2:1 n @ amelia-booking.js?ver=4.2:1 Re @ amelia-booking.js?ver=4.2:1 e.$emit @ amelia-booking.js?ver=4.2:1 showNextScreen @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1 Re @ amelia-booking.js?ver=4.2:1 n @ amelia-booking.js?ver=4.2:1 Re @ amelia-booking.js?ver=4.2:1 e.$emit @ amelia-booking.js?ver=4.2:1 handleClick @ amelia-booking.js?ver=4.2:1 Re @ amelia-booking.js?ver=4.2:1 n @ amelia-booking.js?ver=4.2:1 Zi.a._wrapper @ amelia-booking.js?ver=4.2:1
It seems the error has to be with the SVG selection, I think your code is assuming no other SVG element will be placed in the site but the SVG contained inside Amelia:
The line causing the problem is the following, as I assumed, your considering no other SVG element will be placed in the site but the Amelia's forms SVG elements. So this has to be changed for some selection using an specific class name or an ID (better).
if (s.status >= 200 && s.status < 400) { var i = (new DOMParser).parseFromString(s.responseText, "text/xml").getElementsByTagName("svg")[0]
Actually, before that line, the root of the problem is with this line:
svgSelector: "img.svg" var i = document.querySelectorAll(t.svgSelector)
You have to use another svgSelector in order to make Amelia compatible with any other SVG used in the page where the Event plugin is being used, otherwise, you will be forcing the developer to not use any SVG element on their pages.
You're totally right about this, and it will be fixed for the 2nd update (one update will be released today, so the fix will be included in the one after that).
Until then, please add this custom CSS to Amelia's pages:
/* New Top bar | Logo */
#Top_bar #logo svg{vertical-align:middle; max-height:100%}
#Top_bar #logo svg.logo-sticky,#Top_bar #logo svg.logo-mobile,#Top_bar #logo svg.logo-mobile-sticky{display:none}
#Top_bar .logo .custom-logo-link svg{vertical-align:middle;max-height:100%;width:auto!important}
/* Top bar | Logo | Advanced */
.logo-valign-top #Top_bar #logo svg{vertical-align:top}
.logo-valign-bottom #Top_bar #logo svg{vertical-align:bottom}
.logo-no-sticky-padding #Top_bar.is-sticky #logo svg.logo-sticky{max-height:60px}
.logo-overflow #Top_bar #logo svg{max-height:none;z-index:200}
@media only screen and (min-width: 1240px) { #Top_bar.is-sticky #logo svg.logo-sticky { display: inline; max-height: 35px; } #Top_bar.is-sticky #logo svg.logo-main { display: none; }
}
That should resolve the issue. Please let me know.
Hi:
Every time user reaches the third step of the service registration, my website's main logo (which is an SVG) suddenly appears 4 times.
Please watch the attached video for a better understanding of this behavior.
25.10.2021_13.24.52_REC (screenrec.com)
You can check this behaviour directly on my website https://brisiancontreras.com/asesorias-online/
Hi Quauhtli
Thank you for reaching out to us.
Issues like this usually occur when there is a conflict either with the theme currently active on your website, or another plugin you have installed. Please check for any errors in the console?
Can you please change the theme and see if the issue is resolved? If not, then please deactivate all other plugins except for our plugin, refresh the page where the issue is, and see if it is resolved (it should be). If it is, then start activating other plugins one by one, and after each activation refresh the page to see if the issue reoccurred. Once it does reoccur, you will have found the plugin causing the issue.
Hi:
I think the problem occur because my logo is an SVG file and in Amelia, there is some javascript code that does something with all SVG elements contained in the current page. I can confirm this because if I change my SVG logo file for a PNG file, this behavior does not occur, but I must use an SVG file as my main logo, not PNG neither JPG.
I actually disabled all the plugins one by one. If I disable my theme (Be-Theme, by the way), it works, however, I cannot do this because all my website is developed and configured in order to work using Betheme.
I saw this messages in the console when this error happens (you can check it for yourself on my live website).
Uncaught TypeError: Cannot read properties of null (reading 'replaceChild')
at XMLHttpRequest.s.onload (amelia-booking-booking-b4477d5b64a5624fad8d.js:1)
s.onload @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
load (asincrónica)
(anónimo) @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
s @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
i.init @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
inlineSVG @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
mounted @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
Re @ amelia-booking.js?ver=4.2:1
tn @ amelia-booking.js?ver=4.2:1
insert @ amelia-booking.js?ver=4.2:1
S @ amelia-booking.js?ver=4.2:1
(anónimo) @ amelia-booking.js?ver=4.2:1
e._update @ amelia-booking.js?ver=4.2:1
pn.before @ amelia-booking.js?ver=4.2:1
pn.get @ amelia-booking.js?ver=4.2:1
pn.run @ amelia-booking.js?ver=4.2:1
hn @ amelia-booking.js?ver=4.2:1
(anónimo) @ amelia-booking.js?ver=4.2:1
Je @ amelia-booking.js?ver=4.2:1
Promise.then (asincrónica)
Ue @ amelia-booking.js?ver=4.2:1
tt @ amelia-booking.js?ver=4.2:1
(anónimo) @ amelia-booking.js?ver=4.2:1
pn.update @ amelia-booking.js?ver=4.2:1
de.notify @ amelia-booking.js?ver=4.2:1
set @ amelia-booking.js?ver=4.2:1
mn.set @ amelia-booking.js?ver=4.2:1
refreshCalendar @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
showNextScreen @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
Re @ amelia-booking.js?ver=4.2:1
n @ amelia-booking.js?ver=4.2:1
Re @ amelia-booking.js?ver=4.2:1
e.$emit @ amelia-booking.js?ver=4.2:1
showNextScreen @ amelia-booking-booking-b4477d5b64a5624fad8d.js:1
Re @ amelia-booking.js?ver=4.2:1
n @ amelia-booking.js?ver=4.2:1
Re @ amelia-booking.js?ver=4.2:1
e.$emit @ amelia-booking.js?ver=4.2:1
handleClick @ amelia-booking.js?ver=4.2:1
Re @ amelia-booking.js?ver=4.2:1
n @ amelia-booking.js?ver=4.2:1
Zi.a._wrapper @ amelia-booking.js?ver=4.2:1
It seems the error has to be with the SVG selection, I think your code is assuming no other SVG element will be placed in the site but the SVG contained inside Amelia:
The line causing the problem is the following, as I assumed, your considering no other SVG element will be placed in the site but the Amelia's forms SVG elements. So this has to be changed for some selection using an specific class name or an ID (better).
if (s.status >= 200 && s.status < 400) {
var i = (new DOMParser).parseFromString(s.responseText, "text/xml").getElementsByTagName("svg")[0]
Actually, before that line, the root of the problem is with this line:
svgSelector: "img.svg"
var i = document.querySelectorAll(t.svgSelector)
You have to use another svgSelector in order to make Amelia compatible with any other SVG used in the page where the Event plugin is being used, otherwise, you will be forcing the developer to not use any SVG element on their pages.
What other selector can I use?
Thanks!
Please check my message previous to this one.
Hello Quauhtli,
Sorry for the late response.
You're totally right about this, and it will be fixed for the 2nd update (one update will be released today, so the fix will be included in the one after that).
Until then, please add this custom CSS to Amelia's pages:
/* New Top bar | Logo */ #Top_bar #logo svg{vertical-align:middle; max-height:100%} #Top_bar #logo svg.logo-sticky,#Top_bar #logo svg.logo-mobile,#Top_bar #logo svg.logo-mobile-sticky{display:none} #Top_bar .logo .custom-logo-link svg{vertical-align:middle;max-height:100%;width:auto!important} /* Top bar | Logo | Advanced */ .logo-valign-top #Top_bar #logo svg{vertical-align:top} .logo-valign-bottom #Top_bar #logo svg{vertical-align:bottom} .logo-no-sticky-padding #Top_bar.is-sticky #logo svg.logo-sticky{max-height:60px} .logo-overflow #Top_bar #logo svg{max-height:none;z-index:200} @media only screen and (min-width: 1240px) { #Top_bar.is-sticky #logo svg.logo-sticky { display: inline; max-height: 35px; } #Top_bar.is-sticky #logo svg.logo-main { display: none; } }That should resolve the issue. Please let me know.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thank you! The workaround worked. I will be waiting for the next release.
You are most welcome on behalf of the entire team
If there is anything else we can assist you with please don't hesitate to open a new ticket.
Have a wonderful day!