I'm working through a Coveo Atomic tutorial here: https://levelup.coveo.com/learn/courses/atomic/lessons/lesson-0-setup-and-initializing-the-search-interface In their example they show setting up the initialization code in your index.html file like the following:
<!DOCTYPE html>
<html>
<head>
<script
type="module"
src="https://static.cloud.coveo.com/atomic/v2/atomic.esm.js"
></script>
<link
rel="stylesheet"
href="https://static.cloud.coveo.com/atomic/v2/themes/coveo.css"
/>
<link
rel="stylesheet"
href="style.css"
/>
<script>
(async () => {
await customElements.whenDefined("atomic-search-interface");
const searchInterface = document.querySelector("#search");
await searchInterface.initialize({
accessToken: "xx29e62e9b-f739-4886-b433-c9326cc1b492",
organizationId: "docsdemoslhkhaxyy",
});
searchInterface.executeFirstSearch();
})();
</script>
</head>
<body>
<atomic-search-interface id="search">
<atomic-search-layout>
<!-- all Atomic components will go in here -->
</atomic-search-layout>
</atomic-search-interface>
</body>
</html>
For the code that goes in the head element, should i put that in the head element of the index.js file in the pages directory? For the code that goes into the body element, where should i put that, in the Docusaurus files? Is there an overall best practices when implementing something like this in Docusaurus? This is the first time I've tried this so I apologize up front for even more newbie questions than usual.
I would have thought that putting this code in the index.js file would be correct?
Related
At the bottom of several of my website, I have a list of javascript/css reference files, such as
<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<script src="http://domain.co.uk/jquery-3.2.1.min.js"></script>
<script src="http://domain.co.uk/jquery-ui.min.js"></script>
<script src="http://domain.co.uk/helpers.js"></script>
They all point to another website I have. This works as I only need to update the content of the files and since they all point to the same file location updates are easy.
The problem I have is, if I want to add a new file (javascript or css) then I have to add a new <script... or <link... to every website which has this list.
What I'd love to do is move that list into an external file, and reference it there.
EG
Website1
<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>
Website2
<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>
And as such, the content of myCssFiles.cs could be
<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<link rel="stylesheet" href="http://domain.co.uk/general2.css" />
<link rel="stylesheet" href="http://domain.co.uk/general3.css" />
and likewise for the javascript.
How can I achieve this?
Please note, I control these websites and CORS isn't an issue.
Hope this helps,
You can have common.js to include all your js file
common.js
var scripts = {
"http://domain.co.uk/jquery-3.2.1.min.js",
"http://domain.co.uk/jquery-ui.min.js"
}
scripts.forEach(function(data) {
var x = document.createElement('script');
x.src = data;
document.getElementsByTagName("body")[0].appendChild(x);
});
You can have a single common.js file and add links as u needed to the scripts array. You just have to include the common.js in your websites.
I've founded this article but I don't know where to add this code:
$(document).ready(function(){
$(".showDescriptionTextbox").val($(".Product").val());//to initialize
$(".showDescriptionDiv").text($(".Product").val());//to initialize
$(".Product").change(function(){
$(".showDescriptionTextbox").val($(".Product").val());
$(".showDescriptionDiv").text($(".Product").val());
});
});
I've file jquery-1.11.3.min.js, jquery-1.10.2.min.js.
Should I edit one of both file with above code? Please give me a hint.
I want to execute query SQL by clicking the select option that I know it's just possible using jquery/ajax/js, but I'm still newbie.
I've file jquery-1.11.3.min.js, jquery-1.10.2.min.js. Both are jquery library file with different version. Only one should be included.
In your case the code snippet which you have shared can be included in a separate js file. Like this
nameOfYourJSFile.js
$(document).ready(function(){
$(".showDescriptionTextbox").val($(".Product").val());//to initialize
$(".showDescriptionDiv").text($(".Product").val());//to initialize
$(".Product").change(function(){
$(".showDescriptionTextbox").val($(".Product").val());
$(".showDescriptionDiv").text($(".Product").val());
});
});
Include the file in your main html file. Add the scripts near the bottom of the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello Plunker!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="nameOfYourJSScript.js"></script>
</body>
</html>
DEMO
If the file is included in the bottom , there is no need to use document.ready function
Add your code BELOW the <script src="jquery-1.11.3.min.js"></script>
So, JQuery will be loaded and can be used
So, I know node.js, but I'm learning how to socket.io and express.js, (just started express/socket a few hours ago).
This isn't a huge issue, but I like my code to be clean, and I'm trying to factor out my client side code so it's just in a script tag as a src. For example, on my index.html page I have the following:
..
<head>
<title>Example Title</title>
<link href="./styles/index.css" rel="stylesheet" type="text/css" />
<script src="./scripts/index.js" type="text/javascript"></script>
<script src="/socket.io/socket.io.js" type="text/javascript"></script>
</head>
Where ./scripts/index.js is the javascript code for index.html. It looks like
var socket = io.connect("http://localhost:8000");
document.getElementById("sendBox").submit = function() {
var msg = document.getElementById("m");socket.emit("chat message", msg.value);
msg.value = "";
return false;
};
All the routing is working, but now the problem is that I'm getting the error "ReferenceError: io is not defined" when I try to use the code. On socket.io's website, their example always just has a script tag with all of their page specific code embedded within it. I think that's ugly and means I have to edit an html page to edit my js for a page. This is especially annoying when the highlighting and autocorrects in my editor align to html on an html file, not js. It's not a catastrophic thing, I COULD embed my code like socket.io shows in their examples, but I'd prefer not to.
for those confused by what i mean, Socket.io's beginner example code:
<head>
<title>Socket.IO Chat</title>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script> // This is the code i want to look more like ^
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
</script> // End of the code I'd like to factor out.
To sum up, how can i make the variable "io" available to my index.js script?
Thanks
try swapping the js script tags
<head>
<title>Example Title</title>
<link href="./styles/index.css" rel="stylesheet" type="text/css" />
<script src="/socket.io/socket.io.js" type="text/javascript"></script>
<script src="./scripts/index.js" type="text/javascript"></script>
</head>
the way you had it, it would try to run io before it was loaded
I am trying to update an old cometd javascript wrapper and test client (was 1.3.x) that I have to the newer comet 2.5.1 javascript implementation. I have all of the dependencies and the browser can find them all, yet I am getting errors in Firebug's console (see below)
The head of my HTML is as below:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>
All of these are found by the browser. Looking at Cometd.js I see the following:
org.cometd.Cometd = function(name)
{
....
}
So is that not defining org? Note that none of the errors in the Console are from Cometd.js. Otherwise I see no other definition of "org.cometd". I would really appreciate it if anyone can help me out. I am using Tomcat 7 and below is the dir structure:
Thanks.
UPDATE - Further testing
I reduced the header to:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
</head>
And removed ALL JS from the index.html. The only JS now included is the Cometd.js from the comet.org. There is still the same error... coming from the very first line in that script:
org.cometd.Cometd = function(name)
Not sure what I have missed here.
EDIT - Add jquery.cometd-reload.js
This is the contents of the file. It looks like it is "re-binding" functionality from the cometd library to use the jquery one instead (?). I'm not up to speed enough in JS to debug this (I'm a C++ dev really).
(function($)
{
function bind(org_cometd, cookie, ReloadExtension, cometd)
{
// Remap cometd COOKIE functions to jquery cookie functions
// Avoid to set to undefined if the jquery cookie plugin is not present
if (cookie)
{
org_cometd.COOKIE.set = cookie;
org_cometd.COOKIE.get = cookie;
}
var result = new ReloadExtension();
cometd.registerExtension('reload', result);
return result;
}
if (typeof define === 'function' && define.amd)
{
define(['org/cometd', 'jquery.cookie', 'org/cometd/ReloadExtension', 'jquery.cometd'], bind);
}
else
{
bind(org.cometd, $.cookie, org.cometd.ReloadExtension, $.cometd);
}
})(jQuery);
So the problem was that I misunderstood the project layout from the Comet.org site. I should have followed the direction posted at cometd primer for non-maven setups a lot more closely. Basically when you are setting up the project you download the distribution, and then you need to take the code from the war files bundled inside the tarball.
SO, once you have extracted the tarball...
Take the org folder from cometd-javascript-common-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\jquery\target) or cometd-javascript-jquery-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\common\target)
Take the jquery folder from cometd-javascript-jquery-2.5.1.war
The org namespace definition was in the file org/cometd.js which I did not have before, as I wrongly assumed that it had been replace by the org/cometd/Cometd.js file. The namespaces org and comet are defined as below starting on line 17 of that file:
// Namespaces for the cometd implementation
this.org = this.org || {};
org.cometd = {};
org.cometd.JSON = {};
The functions are working correctly now.
Try loading jQuery before any of the other JavaScript files -
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script> <!-- load first -->
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>
I am trying out the new razor view engine from MVC 3. The issue that I am having is that I have Javascript that is page specific. I normally have all my Javascript code before the tag closes. I was thinking of putting a section just before I close the body tag on my master layout. Some thing to the effect of:
<script type="text/javascript">
#RenderSection("JavaScript")
</script>
But VS2010 underlines it in green. So which ever pages uses this master layout can have it's Javascript injected Here. How would you guys do it? The reason why I want to do it like this is because then I can add JavaScript from the master layout also in here, other I will have to define a separate script tag just below the #RenderSection.
When I do the following then VS gives me a warning (I don't like warnings):
Validation (HTML 4.01): Element 'link' cannot be nested within element 'link'.
Here is my code for the above warning:
#section HeadSection
{
<link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css">
<link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css">
}
How can I get these warnings away?
Here's what I'd do, according to the best practices you should place your scripts at the bottom of the page.
_Layout.cshtml
<html>
<head>
#* ... *#
</head>
<body>
#* ... *#
#RenderSection("Scripts", false)
</body>
</html>
MyView.cshtml
#section Scripts
{
<script src="#Url.Content("~/Scripts/myScript.js")"
type="text/javascript"></script>
}
I would use #RenderSection("head", false) in my _layout page. Then you can inject whatever you want in the head of the page (including script)...and by using false you make it optional on all of your view pages.
You can turn off or modify VS's XHTML validation checking:
http://weblogs.asp.net/scottgu/archive/2005/11/23/431350.aspx
You need to close the link tags.
Like this:
#section HeadSection
{
<link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css" />
<link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css" />
}
And then follow Ryan's answer.