React always returns index.html as response - javascript

I'm trying to set up a datatable in my react app and I'd like to do the following
Here's how the documentation for the datatable is doing it:
<script src="plugins/table/datatable/datatables.js"></script>
<script>
$('#dt').DataTable({
"stripeClasses": [],
"pageLength": 7
});
</script>
I tried doing it in react via
import ../plugins/table/datatable/datatables.js"
I also used the method, where you create a script element and append in to the document.body, but both methods seem to return the index.html of my app.
I've read that it's due to React's way of handling requests - I've done an API and I can successfully hit it, however I'm not familiar how to import local files sucessfully. I've also tried importing the files inside the index.html file, but the result is still the same.

Related

Read in JSON at runtime in React Webpack app

I have a small React/Webpack app where I import a JSON file at the top of the file. At buildtime, the contents of the JSON are read into the resulting bundle.js. If I then make changes the the JSON file I need to re-build the app for the React app to change.
Is there a way to get it so the React app will read in the JSON file at runtime?
One idea I had was to manually edit the output HTML to read mydata.js (in addition to bundle.js) and then mydata.js would just assign window.mydata to the data. Then the React app would read in from the window global object. But I think that's a hacky solution curious to see if there are better paths. Thanks!
You can move the json file in the public folder of your react app (so it's served as a static asset) and then use a fetch call to access it. Attention: this will be much slower at execution time (as the browser needs to execute an additional HTTP request).

Import and Use External Script in React

I am using a payment merchant in my React app which requires that I import their v1.js script and then use it to create an object.
First I tried to download the script and import it via import ./v1.js, but that left me with plenty of errors:
I've then imported the script in my index.html file instead via <script type="text/javascript" src="https://tpgw.trustpay.eu/js/v1.js"></script>.
This didn't incur any errors, however, the next step requires me to create an object referenced in the script using var trustPayApi = new TrustPayApi({secrets});.
When I run this code in my React app (substituting secrets for the correct value), I get an error saying
'TrustPayApi' is not defined
How can I correctly implement the script and use the TrustPayApi object defined within it?

How to pass/import server-side JSON to a vue app?

I'm building a webapp that requires a JSON file as data. The person using my app in their website should be able to pass in a JSON file hosted on their server so that my app can read it.
In development, I just used import mydata from "./mydata.json", but this won't work in production. I tried to have a computed property that returns require (this.publicPath + this.datapath) (where this.publicPath is process.env.BASE_URL, but it's not able to find the file (if it's relevant, I'm using vue-cli to build).
The structure of my app is that I have a wrapper App.vue and then the main component, main-component.vue (so that I can pass a prop containing data to the main component).
What's the best way to do this? I've tried using a <script> tag in index.html, but apparently that's not supported with JSON. I don't want to use other libraries like jQuery.
(I'm thinking that I could have the user just import their file with the ES6 syntax by creating a new Vue component/app, but I'm not sure how to do that in pure HTML).
As an extension of my comment: what you're looking for is to actually fetch the JSON from your server using an XMLHttpRequest. You can do this in a modern, ES6-manner using the Fetch API:
fetch('/path/to/your/json')
.then(resp => resp.json())
.then(data => {
// Access the parsed JSON as `data`
console.log(data);
});
If you can try using a .js file that migh work and you can structure the data the same way as in a .json file, afterall a json is just a js object, also i had this problem while doing the same thing.
DISCLAIMER: you might have to restructure your data to be in an exported variable if that is possible, like so:
export const myObj = {your json}

vuejs - google tag manager

I have a vuejs project with various pages:
study.vue
result.vue
My client want me to add in the Google Tag Manager code so that they can use google analytic to track. Where should I add the code in my .vue file? Or should I just add it in the index.html?
Update01
This is what I do so far:
I add the Google Tag Manager code to the index.html.
I installed vue-gtm.
I have app.js and bootstrap.js. basically, bootstrap.js will have all my other js frameworks added. Like lodash.js or 'jquery.js'. I add the sample code from vue-gtm into bootstrap.js:
window._ = require('lodash');
window.moment = require('moment');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import VueGtm from 'vue-gtm';
Vue.use(VueGtm, {
debug: true
})
In all the vue file, I add this code:
this.$ua.trackView('Sample', 'samplepath');
However I got error:
TypeError: Cannot read property 'trackView' of undefined
What seems to be the error?
I assume you are talking about the script that you get when you create an account?
There should be two scripts to include in your HTML, one that has comments around it that include (noscript) and one that doesn't. Both should probably go in your index.html file (whichever file has the <head> and <body> tags). The one that has the noscript should go immediately after the <body> tag, the one that doesn't have the noscript should go near the top of the <head> section.
If you are asking how to fire an event, such as when the user interacts with one of those Vue elements, then yes the code for firing the event should go in the Vue component.
UPDATE 1: I looked into it and setup my own Laravel installation to test (since that seems to be what you're using) and tested it. The problem is that $ua is part of the Vue Analytics, so if you want to use $ua you need to install the vue-ua module as well and add that to Vue. I don't know why the documentation for the Tag Manager module shows how to use the Analytics module without making reference to it, maybe you should file an issue on the Tag Manager GitHub to make the documentation more clear!
So in summary, you should replace $ua with $gtm instead. I tested it and $gtm has a trackView function so it will probably achieve what you want, but I don't know how to use Google Tag Manager so you'll have to test it out yourself.

Loading external data into a SproutCore app

I have a sample SproutCore app at https://github.com/ericgorr/myproject. The app is *sc_technique* inside of the project. This app is based upon the gist at https://gist.github.com/mauritslamers/5384031.
As best I understand the technique being described, the external data to be loaded is stored in the helper.js file. For example:
MyApp.statechart.sendEvent("loadData",[{ folder: "name": files: ["filename1.js"] }]);
It is then added to the document as a javascript script. The lines of the script are executed to generate events and the data is added to the app's SC.Store. After the script executes, it is removed.
When I attempt to implement this technique in my own app, I cannot get it to work. The error I am getting is:
Uncaught SyntaxError: Unexpected token : helper.js:1
It seems as if the app is trying to load the helper.js file before I tell it to do so. I get this error at the app first launches and before it executes the first line in main.js.
I know there are other problems in this app, but I cannot work on those until I can get past this problem.
as the browser is pointing out: there is a syntax error in the helper.js file:
the colon after "name" should be a comma.

Categories

Resources