I'm doing my very first Visual Web Part in SharePoint 2010 Server, my question is easy i guess but couldn't find the right answer yet, I want to attach my resources files (JS and CSS) using the old way of web development
e.g.:
<script type="text/javascript" src="/_layouts/AnnouncementWebPart/js/jquery-1.6.1.min.js" />
I added my JS files to the Layout mapping folder
Layout-->MyWebPartName-->JSFolder
I did the same for the CSS and then I included them all in the ascx page but nothing really happened when I deployed it to the SharePoint Site!
Whats wrong? i dont want to use the SharePoint Tag for including SharePoint:ScriptLink, is there any chances to do that?
In my case it works both using the script tag or the SharePoint:ScriptLink tag.
You can try to explicitly close the script tag (self-closed can not be supported in some browsers):
<script type="text/javascript" src="/_layouts/AnnouncementWebPart/js/jquery-1.6.1.min.js" ></script>
or you can check from Visual Studio, in the properties of JS files, that the “Build Action” is “Content” and “Deployment Type” is “TemplateFile” (see at the end of this post).
when you set up your SharePoint VS.NET project, did you set it to deploy as Farm? From what I know, the stuff in the layouts folder will be available to all site collections if you deploy to the farm. It's an option when you're setting up where to deploy when you create your SP VS.NET project.
Related
I'm a beginner(self teaching, day 2) in web development, and so far I've learned how to use the console in Chrome for writing functions in Javascript. To further my understanding of how Javascript is implemented, I want to create a blank test environment that I can build from the ground up. I've tried looking at guides for starting a new Javascript project (I want to use Visual Studio Code's "Debugger for Chrome" extension), but every guide starts by saying "open up your project folder", and I don't have any projects yet! I've looked, but haven't found any documentation detailing "how to create a project folder". So my questions are:
What files(w/ appropriate extensions) do I need in a folder for a blank webpage?
Can I make these files by creating text files and just changing the extensions?
Do any of these files need any specific entries or formatting so that they work appropriately with my editor?
Thanks everyone.
Simple HTML page can be enough, but it is better to extract your JS code to separate file:
index.html
scripts.js
All of these are simple text files, so you can create them as text files first and just change the extension as you suggest.
In your index.html file you need to include that scripts.js file like this:
<!DOCTYPE html>
<html>
<head><title>Your playground</title></head>
<body>
<!--here you can have some HTML markup to play with-->
<div id="test">test div</div>
<script src="scripts.js"></script>
</body>
</html>
You should add the import at the end of the body so you do not need to wait until the DOM is parsed.
Then you can have something like this in your scripts.js:
var el = document.getElementById('test');
alert(el.innerText);
Sure you can also use stuff like https://jsfiddle.net/ or https://jsbin.com/.
Simply put, the easiest thing to do is find a folder in your computer hierarchy where you'll be comfortable doing your work. Maybe underneath your Documents folder you can create a sub folder called, "Websites." Within Websites you can create, "project_1" or something.
Inside of your project folder you can easily create an index.html file. You can create a blank Notepad.txt file, and then just rename it to index.html. This index.html should include the boiler plate HTML code (such as headers, a blank body, and a tag to a JavaScript file.) From there you could create the corresponding JavaScript file, called project_1.js (js for JavaScript.)
At that point you'll have a basic working directory where you can continue to learn and build your website.
I'm a newbie in web development in Google Apps Script and I'm having a hard time trying to run a simple webapp which is supposed to set up a menu example by using SlickNav jQuery Plugin. I successfully set it up as a GAS library (you can see the source code here). That plugin requires jQuery 1.7 onwards, so I've also set up jQuery (v2.1.0) as a GAS library (click here to see the code).
After importing both of them as libraries:
in my webapp, it works like a charm in dev. mode:
but in production mode, it throws
"ReferenceError: undefined "jQuery". (line 1, file "slicknav.js", project "slicknav")"
I've spent 3 days trying to make this example running. Am I missing something on this example? What could it be wrong? Can somebody here point me in the right direction?
Thanks in advance.
You cannot use JQuery inside of Apps Script as Apps Script since GAS does not have a DOM to manipulate.
If you wish to use JQuery, or any other JavaScript library inside your web app you need to add it with a <script> tag. Such as adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> inside your <head> or below your <body> tags.
Google even has a set of hosted libraries that you can include in your web app: https://developers.google.com/speed/libraries/
If you don't want to use a CDN service (like the google hosted libraries) you can copy/paste the source into a new GAS html file, and include that in your web app.
Example:
jquery.html
<script>
//Paste jquery.min.js here
</script>
index.html
<html>
<head>
<?!= HtmlService.createHtmlOutputFromFile('jquery').getContent(); ?>
</head>
</html>
After Clarification:
JQuery needs to be loaded before slicknav, since it requires it. It looks like you are, but that's the error it's throwing. I would start by simplifying your process and using script tags with CDN hosted libraries and see if that works. Then try including the files in your current project and see if that works...etc Try and isolate the problem in that manner.
It's also good to note than when deploying, you HAVE to update the version to apply and development changes.
I am new to javascript and programming in general. I have been working on a web app that solves simple algebraic equations. I am using two libraries, algebra.js and katex.js. How do I use both libraries in my script? I would like to keep this as a client-side application.
I have looked at node.js but my understanding is that node is for server-side development. I have looked at RequireJS but that doesn't seem to handle directories well. Recently I found Enderjs which seems to use npm and allow for client-side development and still make use of require().
What should I use to make a web app like this? Please let me know if there is anymore information that is needed.
The most basic way to do this is to include multiple script tags at the top of your html file. So:
<head>
<script src="path/to/library1.js"></script>
<script src="path/to/library2.js"></script>
<script src="path/to/my/javascript.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
This will load more than one onto the page. The order might matter - be wary of which dependencies your chosen libraries have. For example, some will depend on jQuery, so you should load jQuery first then those that depend on it. Order is top down.
In my example, if we pretend library2 depends on library1, then the example would work. However if library1 depended on library2, it would not.
The simplest way is to include the script tags directly in your html file like so (this assumes that you have the algebra.js file in the same folder as your html file):
<script src="algebra.js"></script>
If you are loading the library from the internet you have to use the full web path in the src attribute, for example loading the jQuery library from a cdn (content distribution network):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
i have been working with visual studio for variety of projects for quite a while now, bu t i recently needed to develop a simple html5 webpage that will use some embedded or a seperate file of javascript, now i know there are asp.net projects which support stuff like that but i wanted to know is there a template or project type or something using which i can work purely with html and js only without having to deal with hell of asp.net configs and pages and all that? just simple html5 and js dev with intellisense and maybe a designer mode for css. i looked over internet and am unable to find an exact answer.
Regards.
If you're starting from scratch you can go to File > New > Web Site and choose ASP.NET Empty Web Site. This will give you a very basic site, which has nothing but a Web.config file. You can then add all of your html, js, and css from there. You can also delete the Web.config file, but it is useful as it allows you to continue to use the debugger on your site.
Alternatively you can just start the project in windows explorer, setup the basic files and site directories, then you can go back into Visual Studio, and go to File > Open > Website and then locate the directory your site is in. This will just open the files and allow you to work on them like any other project.
These are the only ways I've seen so far, you may also be able to find project templates online but I haven't looked.
Also, if you're using Visual Studio in this way, then I recommend installing Web Essentials it adds a lot of useful features.
Hope that helps.
I want to add the CDN-hosted Firebase Javascript file to my application based on ng-boilerplate.
I tried just adding it to vendor_files in build.config.js, but it isn't included in the output index.html - maybe because it can't find the file locally?
The application works if I add it to the index.html template directly, but that's unclean and breaks the tests.
Is there a way to add external files to ng-boilerplate or modify the Gruntfile to add them?
According to the docs,
the vendor_files.js property holds files to be automatically
concatenated and minified with our project source files.
so that won't work. According to Kato's link, it's still under consideration for v0.4.
Have you looked into angularfire?
As for having the files hosted from firebase cdn, add the following right after (or before) the google plus script:
<script src="//cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>