when I am typing react.js code that is given in bucky's react.js tutorial series it is not getting executed but when pasting it from bucky's github repo. it is getting executed.....Can any one help me out please...and the code is.
<html>
<head>
<title>
creating component
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\react.min.js"></script>
<script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\react-dom.min.js"></script><script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\browser.min.js"></script>
</head>
<body>
<div id="container_new"></div>
<script type="text/babel" >
var mycomponent=React.createClass({
render: function(){
return(<p>this is new component </p>);
}
});
ReactDOM.render(<mycomponent />,document.getElementById('container_new'));
</script>
</body>
</html>
I don't believe you can include the JavaScript files in the context of the location on your hard drive "c:\". I think you need to be running them using a web server (IIS, Node, etc.) and then include them using relative or absolute web paths (http://localhost/mytest/src/js/react-dom.min.js).
Related
I've been having a lot of trouble using this code from codemyui.com, and I'm not completely sure what to do.
src: https://gist.github.com/CodeMyUI/0ba729244a906a978b20d836c6b5d268
I copied the code for the javascript, html, and css file exactly, so there's no problems there. The main thing I think I messed up on was referencing javascript and the links to cloudflare / jquery. Here are the exact things I put.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial=scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="syle.css">
<title>Experimental Website</title>
</head>
And then, at the end of the body, I put in this code.
<script type="text/javascript" src="script.js"></script>
I'm a bit new to coding so if anyone knows the answer thanks!
Zoho CRM has something called Widgets to extend it's functionality. Using the widgets feature, you can directly embed UI components in a CRM and use the data form a third-party application to perform actions as per requirement.
A widget is basically an HTML file which is loaded in a popup once a custom button is fired. To store/retrieve data from Zoho CRM you need to load jQuery and their JS SDK in the HTML file.
The most basic HTML file looks like this:
<!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">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://live.zwidgets.com/js-sdk/1.0.5/ZohoEmbededAppSDK.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
ZOHO.embeddedApp.on("PageLoad",function(data) {
console.log(data);
//Custom Business logic goes here
});
ZOHO.embeddedApp.init();
</script>
</body>
</html>
In this file console.log(data) will log information about the page on which the widget is fired. On for instants a Lead page, it will log information about that lead, like the id.
Functions to store/retrieve data need to be used where it says //Custom Business logic goes here.
The code for getting all Leads in this widget looks like:
<!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">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://live.zwidgets.com/js-sdk/1.0.5/ZohoEmbededAppSDK.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
ZOHO.embeddedApp.on("PageLoad",function(data) {
ZOHO.CRM.API.getAllRecords({Entity:"Leads"})
.then(function(data){
console.log(data)
})
});
ZOHO.embeddedApp.init();
</script>
</body>
</html>
Because I need to create multiple Zoho Widgets and use the same Vue Components on every Widget I thought of using NuxtJS. I successfully create the Vue Components, but I have no clue how to incorporate Zoho's JS SDK.
Is there anybody who can give me some suggestions how to make this work? Thanks!
why not having the SDK function in a external file from your html, where you invoke all the methods from the SDK api?
simply import your SDK to the header of the html.
hey i found this solution on the github issues page that actually worked. hopfully it will help you.
under data you can define your script as a string somthing like this:
<template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div v-html="scripts"></div>
</template>
<script>
export default {
data: () => ({
scripts: "<script src='https://www.google.com/recaptcha/api.js'><\/script>"
})
}
</script>
and then just add a div tag in your page with v-html="script"
i tried it and it worked fine. but i don't feel it's the best practice. hopfully this will help you.
the source and all the discussion on github: https://github.com/nuxt/nuxt.js/issues/2000
I am playing around with Laravel last version, trying to import and use JS files on the front-end. I have them stored in my folder 'public/js/'.
I have this Blade template you can see below, pizza.blade.php. If you inspect the page source, you can clearly see the JS files are existing, since their links, which are regularly working, are "http://localhost:8000/storage/...".
Nevertheless, they are not working inside the document and, inspecting the network tab, I can see they are not imported.
The image, pizza.png, located in 'public/storage' is displaying correctly.
What am i doing wrong?
Also, is there a better practice to use JS files, such as mix or npm? Thanks in advance.
<!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">
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
<script>src="{{ asset('/js/test.js') }}"</script>
<title>Document</title>
</head>
<body>
<h1 class="ciao">PIZZA LOGO</h1>
<div>
<img src="http://localhost:8000/storage/pizza.png" alt="">
</div>
</body>
<script>
$(document).ready(function () {
$(".ciao").css('display', 'none');
});
</script>
</html>
You have this error
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
this is just script with single javascript variable and string inside. You need this:
<script src="{{asset('/js/jquery-3.3.1.js')}}"></script>
this is html script tag with src attribute.
i want to build applications with extjs, i downloaded the GPL version from sencha.com, in me html file i have the code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="../lib/extjs/build/resources/ext-watermark/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test ExtJs version 6</title>
<script type="text/javascript" src="../lib/extjs/build/ext-all-debug.js"></script>
<script type="text/javascript" src="../lib/extjs/build/ext-all.js"></script>
<script type="text/javascript" src="testExtJsscript.js"></script>
</head>
<body>
<h2>Test ExtJs</h2>
</body>
</html>
and in me testExtJsscript.js i have the code:
function mess(){
Ext.MessageBox.alert('info','Extjs4 est pret');
}
Ext.onReady(mess);
but the result is just like in the photo
i think that the problem is i haven't the right css file, in all documents there is a ext-all.css file and i can not find it?
I tried to install the trial version of sencha extjs, but the extraction is not working, i reach 42 % and i have problems (CRS faild) with *.png files
thanks for your help
The problem is that you are missing the css file. But anyway, you should not write the html file with the inclusion of the css and js files yourself. You should use Sencha Cmd right from the start, as #Evan suggests. http://docs.sencha.com/extjs/6.2.0/guides/getting_started/getting_started.html
The minimal html should be like this:
<!DOCTYPE html>
<html>
<head>
<link href="/ext/6.0.0/build/classic/theme-triton/resources/theme-triton-all.css" rel="stylesheet" />
<script src="/ext/6.0.0/build/ext-all.js"></script>
<script src="/ext/6.0.0/build/classic/theme-triton/theme-triton.js"></script>
</head>
<body>
<script>
Ext.onReady(function() {
Ext.Msg.alert('Welcome', 'Hello, World!');
});
</script>
</body>
</html>
See my online demos here:
ExtJS 6 Hello World Application
ExtJS 6 Hello World Application Using Ext Loader
ExtJS 6 "Hello World" Application - Modern Toolkit
I am new to OPEN UI5, I have done the setup of importing Open UI5 in eclipse keepler version.
I can execute sample application inside my Javascript views but if I try using sap.ui.core library then I am unable to see the options/Classes inside it but I am able to see commons package and its content.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<!-- Bootstrap Script to load Open UI5 at Runtime (Including library and Themes)-->
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- Application Script (specific to the application ) -->
<script type="text/javascript">
sap.ui.localResources("TelephoneDirectory");
var view = sap.ui.view({id : "loginPage",
viewName : "TelephoneDirectory.LoginPage",
type : sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Am I missing some bootstrap files ?
I want that the sap.ui.core functions will be visible in eclipse when I press ctrl+space.