Using NodeJS, javascript in head can not use parameter from server - javascript

I'm making a page that receive string parameter from server when it is rendered. the parameter is shown correctly at body. but it shows "Uncaught ReferenceError: newestname is not defined" at jacascript function in part. but in part, the parameter is processed correctly and show it's data.
I think I'm missing quite basic thing to code. But I couldn't find while browsing internet for almost 4 hour. Please help me.
My js file in serverside give parameter like this.
res.render('index', { title: 'Express', newestname:newestname });
newestname is string value.
and at ejs file, it is processed at two part.
<head>
<script type='text/javascript'>
$(function() {
$('#report').load(newestname);
});
</script>
</head>
<body>
<div>
<%= newestname %>
</div>
<body>
the parameter using bodypart works correctly. But parameter at head doesn't work. the error message is like below.
Uncaught ReferenceError: newestname is not defined
I've tried using $(document).ready(function() {} but it shows same error.
How can I make parameter at header works?

You have to define the 'newestname' or you can directly pass '<%= newestname %>' to load function.
Try this.
<head>
<script type='text/javascript'>
let newestname= "<%= newestname %>";
$(function() {
$('#report').load(newestname);
});
</script>
</head>

Related

TinyMCE Unable to get property 'setContent' of undefined or null reference

I know this topic has been covered many times here but no matter which approach I take I either get a error such as "Unable to get property 'setContent' of undefined or null reference" or the line executes but nothing happens.
Here's what I know.
tinymce initializes and is a valid object.
The html variable has the propper HTML which it get from a parent window.
jQuery is loaded and functional.
In addition to the code below I have also tried.
tinyMCE.activeEditor.setContent(html);
tinymce.editors[0].setContent(html);
$('textarea#XRMeditor').val(html); * Before initialization
I have tried all methods before and after tinymce intializes (just in case).
<!DOCTYPE html>
<html>
<head>
<script src="sage_jquery.min.js" type="text/javascript"></script>
<script src="tinymce_/tinymce.min.js" type="text/javascript"></script>
<script>
var html = window.parent.document.getElementById("descriptionIFrame").contentDocument.getElementsByTagName('body')[0].innerHTML;
debugger;
//$('textarea#XRMeditor').val(html);
tinymce.init({
selector: 'textarea#XRMeditor'
});
tinymce.get('XRMeditor').setContent(html);
</script>
</head>
<body>
<textarea id="XRMeditor">Easy (and free!) You should check out our premium features.</textarea>
</body>
</html>
I suspect this issue is that you are trying to talk to TinyMCE before its initialized on the page.
Your get() call is in the head of your page and I would doubt that when the browser processes your script that TinyMCE has initialized. You can use an "init" handler to delay when this call happens:
tinyMCE.init({
//your regular init parameters here...
setup: function(editor) {
editor.on('init', function() {
//load your content here!
tinymce.activeEditor.setContent(html);
//or
tinymce.editors[0].setContent(html);
});
}
});

Execute Javascript only on page load, not PostBack (SharePoint)

I'm trying to execute some JavaScript on page load on a custom page on a SharePoint site (it populates the people picker with the current user). The problem is that the code executes on postback too, which I don't want as it will reset any changes to the people picker.
I've tried using if(!IsPostBack) to no avail. Everything errors out at that point, giving
SCRIPT5009: 'IsPostBack' is undefined.
I can't find anything online to help with this. Any ideas? Thanks
You can create a function like this:
function IsPostBack() {
var ret = '<%= Page.IsPostBack%>' == 'True';
return ret;
}
IsPostBack is not a javascript variable, it's a .NET webforms variable that is only available on the server so the client will complain about it. So what to do then? I suggest this mish-mash in your control's html:
<% if(IsPostBack) { %> <!-- runs on server -->
<script type="text/javascript">
alert('will only be printed to html if not postback');
</script>
<% } %> <!-- ends server if-block -->
You may want to try the below. Use the JavaScript pageLoad method and use the isInAsyncPostBack Property of the PageRequestManager object to determine whether it's a postback. Refer the MSDN link here for more details.
<script type="text/javascript" language="javascript">
function pageLoad(sender, args) {
if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
// call you JavaScript function in here
}
}
</script>

Easy Pie Chart no effects

I recently used the plugin easy-pie-chart: rendro.github.io/easy-pie-chart/
On the page, I've included the js file
<script src="vendor/easy-pie-chart-master/src/easypiechart.js"></script>
I add this code
<div class="chart" data-percent="73" data-scale-color="red">73%</div>
and recalled the plugin
<script type="text/javascript">
$(function() {
$('.chart').easyPieChart({
//your configuration goes here
});
});
</script>
It does not appear, however, no result, belonging to the number written in the normal manner.
What is the reason?
The console gives me error like:
Uncaught TypeError: Object [object Object] has no method 'easyPieChart'
Some of you could help me: I thank you all in advance
I think easyPieChart.js path is not correct ,check the path or give
<script src="http://rendro.github.io/easy-pie-chart/javascripts/jquery.easy-pie-chart.js"></script>
Fiddle

Dojo function called in HTML

my html:
<html>
<head>
<script src="dojo/dojo.js"></script>
<script src="app/my.js"></script>
<script>
handleResult(<%server response data%>);
</script>
</head>
<body>
<div id="data"></div>
</body>
</html>
my js:
require(["dojo/_base/Array"],function(Array){
handleResult = function(data){
Array.forEach(data,function(item,index){
//Process the data
});
}
});
When the page loads call handleResult, I get an error:
Uncaught ReferenceError: test is not defined
But I can get this function in firebug
window.handleResult
please help me .thank.
Do NOT use onclick, please.
require(["dojo/on", "dojo/dom"],function(dom) {
var button = dom.byId("demo"));
on(button, "click", function(evnt) {
console.log(evnt);
})
});
The require function is asynchronous. You cannot define a global variable from inside a require callback and then try to immediately access it. You should also never define globals to begin with, this is one of the basic tenets of AMD. Your application architecture is wrong and will never work. You need to use an AJAX call to request the “server response data” once the application is loaded on the client, and not try to do what you are doing.

Load a .svg to display with javascript in rails

I'm trying to use kartograph.js to display a svg map located in /public in a rails application and cannot figure out how to load the map. Here's my .js.coffee.erb file:
$ ->
map = $K.map('#map')
# map.loadMap("#{Rails.root}/public/Blank_US_Map.svg", loaded) # attempt 1
map.loadMap("Blank_US_Map.svg", loaded) # attempt 2
loaded = () ->
map.addLayer('baseLayer')
The error thrown in the console is Uncaught TypeError: Cannot call method 'getAttribute' of undefined, though I believe the problem is that no file is being loaded.
The issue comes from the library you're using, Kartograph. It needs a SVG file with absolute coordinate, or you'll most likely get this error.
You can confirm that by trying a pure-HTML-and-js version, e.g. :
<html>
<head>
<script src="jquery.min.js"></script>
<script src="raphael-min.js"></script>
<script src="kartograph.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
$(document).ready(function() {
var map = kartograph.map('#map');
function callback(mymap) {
// Stuff
}
map.loadMap('Blank_US_Map.svg', callback);
})
</script>
And see if you get the same error.

Categories

Resources