Repository navigation
Javascript not saving in page? #8169
Answered
by
NGPixel
exproject
asked this question in
3.x - Help / Questions
|
I am trying to embed a Plotly map into a page so that it can be interactive and not just a screenshot, but I am having trouble getting it to save. At first I was putting it in the page body, but it would not actually render after saving, only in the editing renderer. Trolling through the discussions, I found that Javascript is actually supposed to be saved in the page properties, however if I put a script into "Javascript - On Load", it does not seem to save. As soon as I save the page, if I return to the page properties, that section is now empty. Here is an example of what I am trying to embed, though at this point I've pieced this code together several times and Javascript is not my forte. However, even if this script is malformed for the job, I still seem to be unable to test to get to the right version cause even simple one line scripts do not save. |
Answered by
NGPixel
Oct 30, 2026
Replies: 1 comment 1 reply
|
Fixed in 3.0.0-beta.721. There was a bug where scripts and styles were not saving if you didn't have You'll need to put this line in Admin > Theme > Head HTML Injection: <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.32.0/plotly.min.js"></script>while this block goes in the page Javascript - On Load: (function(){
var d = {"traces":[{"type":"scatter3d","mode":"markers+text","x":[0,3.03,-3.06,7.78,-6.28],"y":[0,-0.09,-0.32,3.13,5.66],"z":[0,3.16,5.75,6.16,1.94],"text":["A","B","C","D","E"],"textposition":"top center","textfont":{"color":"#ece6da","size":15},"marker":{"size":6,"color":"#ff8c1a","line":{"color":"#0a0908","width":1}},"hovertemplate":"%{text}\u003cbr>X: %{x:.2f} Y: %{y:.2f} Z: %{z:.2f}\u003cextra>\u003c/extra>","showlegend":false},{"type":"scatter3d","mode":"lines","x":[0,3.03],"y":[0,-0.09],"z":[0,3.16],"line":{"color":"#4fbf7a","width":5},"hoverinfo":"skip","showlegend":false,"opacity":0.9},{"type":"scatter3d","mode":"lines","x":[0,-3.06],"y":[0,-0.32],"z":[0,5.75],"line":{"color":"#4fbf7a","width":5},"hoverinfo":"skip","showlegend":false,"opacity":0.9},{"type":"scatter3d","mode":"lines","x":[0,7.78],"y":[0,3.13],"z":[0,6.16],"line":{"color":"#4fbf7a","width":5},"hoverinfo":"skip","showlegend":false,"opacity":0.9},{"type":"scatter3d","mode":"lines","x":[0,-6.28],"y":[0,5.66],"z":[0,1.94],"line":{"color":"#4fbf7a","width":5},"hoverinfo":"skip","showlegend":false,"opacity":0.9},{"type":"scatter3d","mode":"lines","x":[3.03,-3.06],"y":[-0.09,-0.32],"z":[3.16,5.75],"line":{"color":"#4fbf7a","width":5},"hoverinfo":"skip","showlegend":false,"opacity":0.9},{"type":"scatter3d","mode":"lines","x":[3.03,7.78],"y":[-0.09,3.13],"z":[3.16,6.16],"line":{"color":"#4fbf7a","width":5},"hoverinfo":"skip","showlegend":false,"opacity":0.9},{"type":"scatter3d","mode":"lines","x":[3.03,-6.28],"y":[-0.09,5.66],"z":[3.16,1.94],"line":{"color":"#4fbf7a","width":5},"hoverinfo":"skip","showlegend":false,"opacity":0.9},{"type":"scatter3d","mode":"lines","x":[-3.06,7.78],"y":[-0.32,3.13],"z":[5.75,6.16],"line":{"color":"#4fbf7a","width":5},"hoverinfo":"skip","showlegend":false,"opacity":0.9},{"type":"scatter3d","mode":"lines","x":[-3.06,-6.28],"y":[-0.32,5.66],"z":[5.75,1.94],"line":{"color":"#4fbf7a","width":5},"hoverinfo":"skip","showlegend":false,"opacity":0.9},{"type":"scatter3d","mode":"lines","x":[7.78,-6.28],"y":[3.13,5.66],"z":[6.16,1.94],"line":{"color":"#4fbf7a","width":5},"hoverinfo":"skip","showlegend":false,"opacity":0.9}],"layout":{"paper_bgcolor":"rgba(0, 0, 0, 0)","plot_bgcolor":"rgba(0, 0, 0, 0)","margin":{"l":0,"r":0,"t":10,"b":0},"scene":{"xaxis":{"title":{"text":"X (ly)"},"color":"#8c8375","gridcolor":"#2a2318","backgroundcolor":"rgba(0, 0, 0, 0)","zerolinecolor":"#3a3128","type":"linear"},"yaxis":{"title":{"text":"Y (ly)"},"color":"#8c8375","gridcolor":"#2a2318","backgroundcolor":"rgba(0, 0, 0, 0)","zerolinecolor":"#3a3128","type":"linear"},"zaxis":{"title":{"text":"Z (ly)"},"color":"#8c8375","gridcolor":"#2a2318","backgroundcolor":"rgba(0, 0, 0, 0)","zerolinecolor":"#3a3128","type":"linear"},"aspectratio":{"x":1.750771957225187,"y":0.7446384284641975,"z":0.7670522942039225},"aspectmode":"auto","camera":{"up":{"x":0,"y":0,"z":1},"center":{"x":0,"y":0,"z":0},"eye":{"x":1.25,"y":1.25,"z":1.25},"projection":{"type":"perspective"}}},"font":{"color":"#ece6da"}}};
Plotly.newPlot('pp-map', d.traces, d.layout, { displayModeBar: false, responsive: true });
})();and the rest goes in your page contents: <div style="background:#0a0908;">
<div id="pp-map" style="width:100%;height:600px;"></div>
<div style="font:12px system-ui,sans-serif;color:#8c8375;padding:8px 4px;background:#0a0908;"><span style="color:#4fbf7a">■</span> Green link <span style="color:#ff8c1a">■</span> Orange link <span style="color:#3a3128">■</span> Out of range</div>
</div> |
1 reply
|
Appreciate the quick reply, this works. (tested by having an Administrator user save the script) |
Answer selected by
NGPixel
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Fixed in 3.0.0-beta.721. There was a bug where scripts and styles were not saving if you didn't have
manage:systempermissions.You'll need to put this line in Admin > Theme > Head HTML Injection:
while this block goes in the page Javascript - On Load: