Error in using Stimulsoft reports.js in react project - javascript

I use react.
for add stimulsoft reports.js, first add necessary link to css and javascript files in my Index.html file :
<link href="Css/stimulsoft.viewer.office2013.whiteblue.css" rel="stylesheet" />
<script src="Scripts/stimulsoft.reports.js"></script>
<script src="Scripts/stimulsoft.reports.maps.js"></script>
<script src="Scripts/stimulsoft.viewer.js"></script>
After that i create a Component with this code :
import React from 'react';
class Viewer extends React.Component {
render() {
return <div id="viewerContent"></div>;
}
componentWillMount() {
var report = new window.Stimulsoft.Report.StiReport();
//create error
report.loadFile("MyReportFile.mrt");
var options = new window.Stimulsoft.Viewer.StiViewerOptions();
this.viewer = new window.Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
this.viewer.report = report;
}
componentDidMount() {
this.viewer.renderHtml("viewerContent");
}
}
export default Viewer;
and loadFile method caused below error in console :
stimulsoft.reports.js:73 [Deprecation] Synchronous XMLHttpRequest on the main thread is
deprecated because of its detrimental effects to the end user's experience. For more help, check
https://xhr.spec.whatwg.org/.
Unexpected token < in JSON at position 0
Uncaught TypeError: Cannot read property 'isDashboard' of undefined
at stimulsoft.viewer.js:11
How to fix this error?

I reached the Stimulsoft report in reactjs by this two steps :
First step - Add Stimulsoft report Js files in HTML file in the public folder :
Index.html
<!DOCTYPE HTML>
<html lang="fa" dir="rtl">
<head>
<!-- Title -->
<!-- Favicon & Manifest -->
<link href="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.viewer.office2013.whiteblue.css"
rel="stylesheet"
/>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.engine.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.export.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.import.xlsx.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.chart.js" type="text/javascript"></script>
<!-- <script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.dashboards.js" type="text/javascript"></script> -->
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.blockly.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.viewer.js" type="text/javascript"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Second step - create jsx component and copy this code to the component :
Viewer.jsx:
import React, { useEffect } from "react";
export default (props) => {
useEffect(() => {
if (props.show == true) {
var options = new window.Stimulsoft.Viewer.StiViewerOptions();
// options.appearance.fullScreenMode = true;
// options.height = "100%";
// options.appearance.scrollbarsMode = true;
// options.toolbar.showDesignButton = true;
var viewer = new window.Stimulsoft.Viewer.StiViewer(
options,
"StiViewer",
false
);
var report = new window.Stimulsoft.Report.StiReport();
report.licenseKey = "licenseKey ";
report.loadFile(props.templateFile);
var dataSet = new window.Stimulsoft.System.Data.DataSet("Demo");
dataSet.readJson(props.dataSet);
report.dictionary.databases.clear();
report.regData("Demo", "Demo", dataSet);
viewer.report = report;
viewer.renderHtml("viewer");
}
}),
[];
return (
<>
<div id="viewer"></div>
</>
);
};

Related

importing a class returns error and breaks my existing function

I'm trying to import script.js into my app.js and it returns an error that says "Uncaught SyntaxError: import not found: script app.js:1:9" and also breaks getSelectedItems function and says that is also undefined. I included my HTML because I'm unsure if there could be an error there.
I'm trying to import this into app.js
export class script {
//Save movies into the local storage
saveIntoStorage(item) {
const items = this.checkStorage();
items.push(item);
// Add new array into the localStorage
localStorage.setItem("items", JSON.stringify(items));
}
// return movies from storage
checkStorage() {
let items;
// Check the localStorage
if (localStorage.getItem("items") === null) {
items = [];
} else {
items = JSON.parse(localStorage.getItem("items"));
}
return items;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
<main>
<h1>Welcome to My Website</h1>
</main>
<script src="app.js" type="module"></script>
<script src="script.js" type="module"></script>
</body>
</html>
This is from my app.js
import {
script
} from "./script.js";
// Store the user input from dropdown menu into a new array
function getSelectedItems() {
const items = document.getElementsByClassName("selectVal");
myApp.results = [];
for (let i = 0; i < items.length; i++) {
const item = items[i];
const userInput = item.options[item.selectedIndex].value;
myApp.results.push(userInput);
}
}
Using type of module for the script tag fixed the error for me.
<script src="./app.js" type="module"></script>

How to import a Widget designed for JQuery in my React projet?

I'm trying to import this Widget designed for JQuery in my React projet :
<script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js">
</script>
This widget needs JQuery to work, so i also load JQuery using Google CDN:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
The documentation is written for JQuery, and shows this example to use the widget :
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>Mondial Relay Parcelshop Picker with Map</title>
<!-- JQuery required (>1.6.4) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Leaflet dependency is not required since it is loaded by the plugin -->
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css" />
<!-- JS plugin for the Parcelshop Picker Widget MR using JQuery -->
<script src="//widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>
</head>
<body>
<!-- HTML Element in which the Parcelshop Picker Widget is loaded -->
<div id="Zone_Widget"></div>
<!-- HTML element to display the parcelshop selected, for demo only. Should use hidden instead. -->
<input type="text" id="Target_Widget" />
</body>
</html>
JAVASCRIPT :
```
$(document).ready(function () {
$("#Zone_Widget").MR_ParcelShopPicker({
Target: "#Retour_Widget",
Brand: "BDTEST ",
Country: "FR",
EnableGmap: true
});
});
```
I really don't know how to do it. I've tried for 3 days but i'm still blocked.
Thank you a lot for your help and i'm very sorry for my bad english.
Thanks again.
(UPDATE)
My code is :
import React, { useEffect } from 'react';
const MondialRelay = () => {
useEffect(() => {
const jQuery = document.createElement('script');
jQuery.src = "//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
jQuery.async = "true";
document.body.appendChild(jQuery);
return () => {
document.body.removeChild(jQuery);
}
})
useEffect(() => {
const scriptMr = document.createElement('script');
scriptMr.src = "https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js";
scriptMr.async = "true";
document.body.appendChild(scriptMr);
return () => {
document.body.removeChild(scriptMr);
}
});
!function(){
// Parameterized the widget
$(document).ready(function () {
$("#Zone_Widget").MR_ParcelShopPicker({
Target: "#ParcelShopCode",
Brand: "BDTEST ",
Country: "FR"
});
});
}();
return(
<div>
<div id="Zone_Widget"></div>
</div>
)
};
export default MondialRelay;
And the error i encounter is "$ is not defined" but this is because i try to use JQuery syntax in React and $ is never defined in my code.
I dont know how to create this div with #Zone_Widget id.
There's a typo in your script tag, you missed https:
change the URL to https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js and it should work.
As a suggestion, since you're using nodejs/npm already, you can install jquery using npm as well.
npm install jquery

angularfire not working with me , I don't know why?

the html code - which call the required libraries
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/firebasejs/3.0.0/firebase.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script type="text/javascript" src="JS/app.js"></script>
</head>
<body ng-app="seworko">
<div ng-controller="users">
{{ 4+4 }}
</div>
</body>
</html>
the Javascript code
var app = angular.module("seworko", ["firebase"]);
var config = {
apiKey:"myKey",
authDomain:"myDomain.firebaseio.com",
databaseURL:"https://myUrl.firebaseio.com",
storageBucket:"myBucket.com"};
firebase.initializeApp(config);
app.controller("users", function($scope, $firebaseObject) {
try
{
const rootRef = firebase.database().ref().child('system');
const ref = rootRef.child('global');
this.global = $firebaseObject(ref);
}
catch(e)
{
alert(e);//type error a.ref is not a function
}
});
I am getting this error ->
type error a.ref is not a function !!
I don't know the reason for the error
I followed too many tutorials , and can't connect firebase with angularJS using angularfire

reactRedux is not defined

I am trying to learn Redux (with React).
I don't want to use Node to install dependencies, just doing it manually with script tags.
I am getting the error reactRedux is not defined. I thought by adding the react-redux.js file I would solve the issue.
Would appreciate any pointers on what I'm doing or understanding wrongly.
(I'm attempting to work through this tutorial https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutable-js/)
Here is the code snippet in question:
<head>
<meta charset="UTF-8">
<script src="public/js/lib/react.js"></script>
<script src="public/js/lib/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
</head>
<body>
<script type="text/babel">
const { Map, List } = Immutable;
const { createStore } = Redux;
const { Provider, connect } = reactRedux;
Line 7 from react-redux.js indicates that it should be ReactRedux not reactRedux.
exports["ReactRedux"] = factory(require("react"), require("redux"))
So it's just a typo in the tutorial - probably an older version of the library being used when it was written.
You need to capitalize the first r in reactRedux. Change:
const { Provider, connect } = reactRedux;
To
const { Provider, connect } = ReactRedux;

What's a good way to build a Backbone.js project?

We're currently kicking off our first Backbone.js project here at work. In fact it's our first major JavaScript project apart from the odd jQuery stuff.
Anyway, we struggle with the architecture for our stuff. What is the best way to sort stuff out?
We've started with having everything in separate files broken up in folders for; views, models, collections and routers and then we include everything in our index.html. The issue, though, is that this leaves us with having to check for the document ready event in every file. Is this the best way to do it?
Here's an example:
This is the file called PageModel, the first line seems wrong...
$(function(){
app.models.Page = Backbone.Model.extend({
//stuff
});
});
Then in our index.html we have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var app = app || {};
app.models = app.models || {};
app.collections = app.collections || {};
app.views = app.views || {};
app.routers = app.collections || {};
app.templates = app.templates || {};
app.models.griditems = app.models.griditems || {};
app.views.griditems = app.views.griditems || {};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/libs/json2.js" type="text/javascript"></script>
<script src="assets/js/libs/underscore-1.1.7.min.js" type="text/javascript"></script>
<script src="assets/js/libs/backbone-0.5.3.min.js" type="text/javascript"></script>
<script src="assets/js/models/GridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/GalleryGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/NewsGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/VideoGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/collections/GridCollection.js" type="text/javascript"></script>
<script src="assets/js/templates/Submenu.js" type="text/javascript"></script>
<script src="assets/js/templates/GalleryGridItemTemplate.js" type="text/javascript"></script>
<script src="assets/js/views/GridView.js" type="text/javascript"></script>
<script src="assets/js/views/GridItemView.js" type="text/javascript"></script>
<script src="assets/js/views/GalleryGridItemView.js" type="text/javascript"></script>
<script src="assets/js/views/VideoGridItemView.js" type="text/javascript"></script>
<script src="assets/js/routers/Router.js" type="text/javascript"></script>
<script src="assets/js/Application.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
This is structure we use in our Backbone projects
<!-- Libs Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery-1.5.2.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.validate.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.maskedinput-1.3.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.mousewheel.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.scrollpane.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/fileuploader.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/modernizr.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/json2.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/underscore-min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/backbone-min.js")"></script>
<!-- Libs Section -->
<!-- Core Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/config.js")"></script> <!-- Global configs -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/core.js")"></script> <!-- Core methods for easier working with views, models and collections + additional useful utils -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/app.js")"></script> <!-- Application object inherites core.js as prototype -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/renisans.js")"></script> <!-- Project Object. Creates Namespace and Extends it with project specific methods -->
<!-- Core Section -->
<!-- Routers Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/routers/workspace.js")"></script>
<!-- Routers Section -->
<!-- Models Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/models/profile.js")"></script>
...
<!-- Models Section -->
<!-- Collections Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/collections/messages.js")"></script>
...
<!-- Collections Section -->
<!-- Views Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/views/workspace.js")"></script>
...
<!-- Views Section -->
<!-- Localization Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/localizations/ru_RU.js")"></script>
<!-- Localization Section -->
<!-- Init Section -->
<script type="text/javascript">
$(function() {
Rens.container = $('.l-wrapper'); // Some parameters
Rens.init({
Localization: LocalizationStrings || {}, // Object with localization strings
Profile: {
// Bootstraping initial data to Profile model
}
});
});
</script>
<!-- Init Section -->
content of app.js
var App = function() {
this.Views = {};
this.Routers = {};
this.Models = {};
this.Collections = {};
this.User = {};
this.router = null;
this.view = null;
this.baseLocation = null;
this.beforeInit = function() {};
this.afterInit = function() {};
this.init = function(initData) {
if (typeof(this.beforeInit) === 'function') {
this.beforeInit.apply(this, arguments);
}
if (this.Views.Workspace) {
this.view = new this.Views.Workspace();
}
this.baseLocation = window.location.href.replace(/[?#].*/, '') == Config.web.host;
if (this.Routers.Workspace) {
this.router = new this.Routers.Workspace(initData);
}
this.view && this.view.setListeners && this.view.setListeners();
Backbone.history.start();
if (typeof(this.afterInit) === 'function') {
this.afterInit.apply(this, arguments);
}
}.bind(this);
};
App.prototype = Core;
and content of renisans.js
var Rens = new App();
$.extend(Rens, {
container: null,
Error: function(data) {
// Handling error
},
Localization: function(dictionary) {
return {
get: function(name) {
var argumentsList = Array.prototype.slice.call(arguments),
strings = argumentsList.slice(1),
text = this[name];
if (text && strings.length) {
$(strings).each(function(i, string) {
var reg = new RegExp('\\$' + i, 'go');
text = text.replace(reg, string);
});
}
return text || 'SLB.Localization.' + name + ' not found!';
}.bind(dictionary)
}
},
formatDate: function(rawDate) {
var timestamp = /\d+/.exec(rawDate)[0],
date = Rens.DateUTC(timestamp),
months = Rens.Localization.get('months');
return {
date: date,
fullDate: [date.dd, months[date.mm], date.hh].join(' '),
shortDate: [date.dd, date.MM, date.hh].join('.')
};
},
beforeInit: function(initData) {
this.Localization = new this.Localization(initData.Localization);
}
});
also simplified content of models/profile.js
Rens.Models.Profile = Backbone.Model.extend({
...
});
If you are creating an application of this shape, i strongly suggest to use dynamic loading of your assets, like javascript and more.
you have several options for this:
Require.js
LABjs
...
i myself have no experience with LABjs, but i've been using Require.js in smaller projects for myself. But have yet to use it in a major project.
the advantages of such a system:
you can work with dependancies, and your models or views will only be loaded when they are requested by another part of your code. not all at the beginning.
require.js also provides features for minifying and agregating your code based on the dependancies you specified.
require.js has a few small plugins for loading in text files (if you use a templating system this could be useful, or a plugin to define the order in which files need to be loaded.
and require.js also has a special version for working together with jquery and its modules. (but you are not required to use this one, you can load in jquery trough manually as well)
you will need to wrap your models / views / ... in modules so require.js can load them dynamically. I asked about this here on stack overflow last week... you can find the info on how to do that here
I suggest you read the 'getting started with require.js' and see if you feel like using it.
because working with all models / views / ... in separate files is quite handy in development fase, but is defenately not recommended when going into production. the fewer requests have to be sent by the browser to the server the better.

Categories

Resources