SharePoint Content Editor not displaying PnPJS Code - javascript

I want to be able to display my PnPJS code and make it show up within the Content Editor, but I am having trouble pulling the data in and displaying it.
Here is what I have so far:
1.)
I made a SharePoint list called O365RoadMap that automatically pulls new updates on Microsoft's Office 365 Roadmap and posts them
within the list using Microsoft Flow.
2.)
Here is the pnpJS code that pulls the data from the list and tried to display it within content editor.
<div class="roadMap" id="roadMap"></div>
<script src="/siteassets/bootstrap3/js/jquery-1.8.3.min.js"></script>
<script src="/publiccdnlib/PnP-JS-Core/pnp.min.js"></script>
<script type="text/javascript" src="/publiccdnlib/es6-Promise/es6-promise.auto.js"></script>
<script type="text/javascript" src="/publiccdnlib/fetch/fetch.min.js"></script>
<script src="/publiccdnlib/slick/slick.min.js"></script>
<script src="/publiccdnlib/CommonJS/CommonJS.js"></script>
<script src="/publiccdnlib/knockout/knockout.js"></script>
<script src="/publiccdnlib/knockout/knockout.simpleGrid.3.0.js"></script>
<script src="/publiccdnlib/toastr/toastr.min.js"></script>
<script src="/publiccdnlib/dialog/open-sp-dialog.js"></script>
<!--END Scripts for O365-->
<script>
$pnp.setup({
baseUrl: "/TrainingResourceCenter/O365Training"
});
<!--document.getElementById("roadMap").innerHTML = JSON.stringify(result, null, 2)-->
$pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(z){
console.log(z);
var result = z.results.map(a => ({
Title: `${a.Title}`,
Description: `${a.Description}`,
Link: `${a.Link}`
})
)
console.log(result);
})
</script>
3.)
My Results are pulling in nicely using the Console log:
4.)
But for some reason, it's not displaying within the content editor and it's linked to the correct .txt file location, is there something that I am missing? All help would be appreciated.

You could insert the code to content editor directly.

Related

How to set up some JavaScript into WordPress (API)

I have this code, and I cant get it to work in my WordPress, I have used the addons Insert Headers & Footers and also WP Coder... but I am not sure why it will not work, the page is just blank.
How can I get this to work? What should I place where in the WordPress site - plugins etc.?
I have tried to place this in the "WP CODER" under "HTML code":
But it does not work, the page is blank.
1) Add the following code to the <head> section of your website:
<link rel="stylesheet" type="text/css"href=”https://zellr.com/integration/kirpparikalle.css” />
2) Add the following code to the section of your page. Place it inside the element where you wish to see the login and registration forms.
<h1 id="kirpparikalle_title"></h1>
<br/>
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" ```src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" ```src=”https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
});
</script>
It should show some booking module on the page.
Try to copy this exact code and paste it where you want it to appear, you have odd characters in the code you've applied on your website. Also the js code might produce an error to made a little change to the wrapper
<link rel="stylesheet" type="text/css" href="https://zellr.com/integration/kirpparikalle.css" />
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" src="https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
})( jQuery );
</script>
Are you using block editor (gutenberg) or the classic editor?
In classic editor. Paste your codes inside text editor
Same concept in gutenberg tho.

Import data from Google Spreadsheet cell to WordPress

I'm trying to get a cell text from a Google Spreadsheet and insert into a post on WordPress using this code, but I'm pretty bad on JavaScript that I don't even know how to get the text without the alert.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
</head>
<body>
<script>
$.ajax("https://docs.google.com/spreadsheets/d/e/2PACX-1vQhp9yFq8eXagN03gn-mCN3_KPWRc2EIpswDFpHJLflFOG-XU2OMktqj03gxvUBZMAp8gYwWO5Q3MVJ/pub?gid=942917560&single=true&range=d3&output=csv").done(function(result){
alert(result);
});
</script>
</body>
In your Wordpress post, go to Text mode and add a div
<div id='spreadsheet'></div>
Now in your script do this to set the contents:
jQuery.ajax("https://docs.google.com/spreadsheets/d/e/2PACX-1vQhp9yFq8eXagN03gn-mCN3_KPWRc2EIpswDFpHJLflFOG-XU2OMktqj03gxvUBZMAp8gYwWO5Q3MVJ/pub?gid=942917560&single=true&range=d3&output=csv").done(function(result){
jQuery("#spreadsheet").text(result);
})
WordPress usually comes with jQuery, you don't need to add it yourself. You need to replace $ with jQuery though.
You can also do this:
jQuery(function($) {
$.ajax("https://docs.google.com/spreadsheets/d/e/2PACX-1vQhp9yFq8eXagN03gn-mCN3_KPWRc2EIpswDFpHJLflFOG-XU2OMktqj03gxvUBZMAp8gYwWO5Q3MVJ/pub?gid=942917560&single=true&range=d3&output=csv").done(function(result) {
$("#spreadsheet").text(result);
})
});
This will a) only run the function after the document is loaded and b) allow you to keep using $ in your code.

This page requires AC_RunActiveContent_QueryString.js

I have updated my wordpress site to Wordpress 4.6.1 version, after that my site is showing following pop up message.
"This page requires AC_RunActiveContent_QueryString.js."
Can somebody let me know how can I fix this?
Just looking at the same problem and found your post - so in case the problem isn't fixed?
At the site I looked at there was a link set up to a non-existent JavaScript file at easyfundraising.org.uk in one of the side column text widgets:
<script src="http://www.easyfundraising.org.uk/js/AC_RunActiveContent_QueryString.js" language="javascript"></script>
... and below this (in a another widget) some JavaScript
<!-- START BANNER -->
<script language="javascript">AC_FL_RunContent_QueryString = 0;</script>
<script src="http://www.easyfundraising.org.uk/js/AC_RunActiveContent_QueryString.js" language="javascript"></script>
<script language="javascript">
if (AC_FL_RunContent_QueryString == 0) {
alert("This page requires AC_RunActiveContent_QueryString.js.");
} else {
Deleting both Text widgets removed the popup.

jquery/ajax script not working under bootstrap

I have a working bootstrap template (an as of yet unmodified dashboard).
I have a separate html file that uses AJAX/jQuery to grab data from a PHP page in a system health monitoring capacity. The html/PHP pair work fine.
When I try to incorporate the health monitoring portion to the working boot strap page nothing is displayed.
here is the html/ajax/jquery that works fine
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#health_monitor').load('health.php').fadeIn("fast");
}, 1000); // refresh every 1000 milliseconds
</script>
</head>
<body>
<div id="health_monitor"> </div>
</body>
</html>
I add the head portion to the head of bootstrap, and have tried putting the
portion in many different places within the body of the bootstrap template, and it doesnt show anything (no error, nor a 1, or a 0)
any suggestions?

safari displays javascript source instead of executing

i have a web application that has javscript interspersed through the page. What happens is that safari will dump the source of the javascript code instead of executing it. I can reproduce this consistently.
The page is a mashup of different forms of content:
it loads flash videos using osflv and is generated via a php script on the server side. In addition the page also contains calls to Google Map's API to display a map. The content is placed in separate tabs using javascript to provide tab interaction.
I am also using mootools, and not sure if that is potentially causing issues.
Here are the javascript includes:
<script type="text/javascript" src="/js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" src="/js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/js/sifr.js"></script>
<script type="text/javascript" src="/js/sifr-debug.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/alerts.js"></script>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/autocompleter.js"></script>
<script type="text/javascript" src="/js/observer.js"></script>
<script charset='ISO-8859-1' src='/js/rac.js' language='javascript'></script>
rac.js comes from osflv, common.js and alerts.js are custom javascript code that includes custom classes and functions used to either display or manipulate data in the page.
This block of code executes in the page just fine:
<script type="text/javascript">
var whitney = { src: '/flash/whitney.swf'};
sIFR.activate(whitney);
sIFR.replace(whitney, { selector: 'h6#propertyHeadline', wmode:'transparent',css: {'.sIFR-root': {'color': '#1ca9b9' }}});
</script>
This code also executes just fine:
<script language='javascript'>
var src = '/player';
if(!DetectFlashVer(9, 0, 0) && DetectFlashVer(8, 0, 0))
src = 'player8';
AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', 520, 'height', 440, 'src', src, 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'id', 'flvPlayer', 'allowFullScreen', 'true', 'movie', src, 'FlashVars','movie=media/orig/4b845109d99d0.flv&fgcolor=0x1CA9B9&bgcolor=0x000000&autoload=off&volume=70');
</script>
This is the final snippet of code that is embedded in the html towards the bottom of the page before the end of the body tag, Safari will randomly spit out the src code in the browser at any point beyond the good maps script include:
<script src="http://maps.google.com/maps?file=api&v=2&key=googlemapsapikeyblockedout" type="text/javascript"></script>
<script type="application/javascript">
function InitPropertyDashboardTabs(){
mytabs = new TabPanel('DashboardTabPanel');
initializeGallery();
initializeSiteplan();
initializeMap('address blocked out');
}
var map = null;
var geocoder = null;
function initializeSiteplan()
{
var flashvars = {PropertyId:1,BasePath:'/',wmode:'transparent'};
var params = {wmode: 'transparent'};
var attributes = {id: 'SWFSitePlan',name: 'SWFSitePlan'};
swfobject.embedSWF("/flash/FloorplanViewer/FloorplanViewer.swf", "SiteplanFlash", "915", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
}
function initializeGallery()
{
var params = {wmode: 'transparent'};..... (more code)
This is what the page with the js dump
(source: oxid8.com)
this is what the page should look like:
(source: oxid8.com)
First, you shouldn't use the language attribute, it's deprecated.
The only thing I can see is that you use application/javascript instead of text/javascript in your HTML (there's a difference between what you specify in your HTML and the MIME-type servers use when sending a Javascript file), but I cannot reproduce any errors on Chromium/Linux with a simple test case like
<!DOCTYPE html>
<html>
<head>
<title>dkdkd</title>
</head>
<body>
<script type="application/javascript">
var i=0;
</script>
</body>
</html>
(Perhaps you can try this, too.)
Just in case: is the script element closed properly? Is all Javascript correct, i.e. does it pass JSLint?
Perhaps you can paste the full source of the HTML page (preferably on something like Pastebin), so we can have a closer look.
I guess I'll give this a shot. I was having a similar problem on some pages that used TinyMCE (javascript or even parts of my html were being displayed on the page)
MY solution was to upgrade the version of TinyMCE that I was using. v3.3 has an overhauled Webkit handler.
The issue so far as I can tell was that TinyMCE was injecting (poorly) additional blocks of javascript into the page.
This (and a handful of similar blocks) is always injected into <head>
<script type="text/javasript" src="http://www.example.com/javascript/rte/langs/en.js" onload="tinemce.dom.ScriptLoader._onLoad(this,'http://www.example.com/javascript/rte/langs/en.js', 0);">
Which, when onload fired, injected the following block into a random location in the DOM, mangling whatever it was placed on top of.
<script type="javascript" src="http://www.example.com/javascript/rte/langs/en.js">
The result of that, as seen in the Webkit Developer Tools was to turn
<td class="tab" nowrap="">
into:
<td class="ta<script stype="text=""javascript"" src="http://www.example.com/javascript/rte/langs/en.js"> "b" nowrap=>"
Since that's clearly not valid markup the resulting garbage was output.
Upgrading my install of TinyMCE from the previous stable to v3.3rc1 fixed the issue.TinyMCE Changelog references a total Webkit overhaul.
edit: By random I really mean random. It inserts the script tag in a different location each time, sometimes breaking content, sometimes not.

Categories

Resources