How do you set up jQuery to work with rails. I specifically want to use the accordion feature. I have used this before with PHP but i cannot work out where everything needs to go in a rails application. I have imported jQuery into the javascript folder and included it in the application. My HTML is laid out correctly, but i don't understand where the following should go:
<script>
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
I have also tried installing jRails and using the scriptaculous Accordion, but neither of them worked either, so I think I am missing some vital link between javascript and rails.
I have looked all over for some explicit instructions on how to set it up, if anyone has a link or can walk me through it it would be appreciated.
After checking firebug I can see I am getting the following error:
$("#accordion").accordion is not a function
I call jQuery before I call application.js
You just need put this line in your view if you don't want UJS system.
Instead you can put it on your application.js and require it in your head node.
You also need to make sure that you commented out default javascript libraries, because out of the box, Rails applications come packaged with prototype which will conflict with your jQuery library.
It looks like this :
<%= javascript_include_tag :defaults %>
Are you hitting any javascript errors in firebug?
I downloaded the wrong jQuery library, the link on the website pointed to an incomplete .js file. Download what you need from: http://jqueryui.com/download don't just download the file from http://docs.jquery.com/Downloading_jQuery
Only call the javascript files you need directly in your standard layout, do not use the :defaults option.
If you are going to use a lot of fancy jQuery things on different pages add the document ready function to your view, else add it to your application.js
Ensure that you call the jQuery UI files before the application.js file or it will not find the functions in the right order.
Related
I have developed a custom Joomla template, and I need to add a piece of custom javascript to a Joomla core module (mod_articles_news), without a plugin, if possible (this should be so simple that I don't think I want to use a third party plugin for that). And async, if possible.
I have been searching thoroughly, but haven't found the perfect solution. Either they want me to install a plugin or the solution refers to a custom written module (suggesting to add JS before installation of module) while I am dealing with a core module (Articles Newsflash) that is already installed per definition. (The reason I need to use JS is to make a conditional design change, presently not possible with CSS).
I have been following the steps outlined here, but to no avail. Namely, I added the following code into the module's template folder (mod_articles_news/tmpl/my-template-name.php)
<?php
JHtml::script(Juri::base() . 'templates/my-template-name/js/myScript.js');
?>
(Of course, I have added the myScript.js file into the above location).
When checking it live, nothing happens, the browser is not loading my JavaScript at all (the script itself is tested and it works).
Please help me what I am missing here. Thank you in advance!
If you want to do customization you should use a Joomla! template for this. A template determines the basic HTML including the necessary CSS/JS for your site. In addition it can contain overrides for modules and components so you can do even more customization without touching any of the original code.
What you want to do sounds like a simple customization. Just add any CSS/JS which is necessary to achieve your task to the template.
You could try
<?php
JHTML::script('templates/my-template-name/js/myScript.js');
?>
alternatively, is there any reason you can't add it via your custom template, as suggested by Sven Bluege
i recently joined in a new company and found out they were using so many scripts in Layout.cshtml.as shown in fig
so in order to improve the performance,i used mvc bundling functions as shown
and referenced it on layout page with #Scripts.Render("~/bundles/jqueryval").but the problem is.many of the java scripts doesnt work any more especially jquery data table.what point im missing here?
I think in your scenario your js files are conflicting with each other ,solution for your problem is :
Use $.noConflict() to avoid conflicts between jquery's files :-
Follow this link :
http://api.jquery.com/jquery.noconflict/
if some js files are not working then just check the order of your js files also..
Try and check if the files are in the correct order.
If you are on local, you might have some setting to not load the .min file, happened to me once.
2 suggestions, add scripts after css and maybe start using requirejs, it will help you with the dependencies and async loading of the js
I'm trying to see if there is a way like Wordpress's enqueue script to properly include scripts onto the footer. I looked up the documentation, but all I could find was a way to do it for Widget Designers. I am looking for the ways to include the script properly and I'm using MVC.
I dug this up from the forums: http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity-/where-to-store-mvc-widget-css-and-javascript-and-how-to-link-it
You could also include the js reference in your master page, which I know isn't ideal if the widget isn't used on every page. You could always bundle and minify site wide scripts to reduce the overhead a bit.
You could also try using a the Sitefinity js widget on the page the widget is used, there is an option to refrence a file and include it before the closing body tag: http://www.sitefinity.com/documentation/documentationarticles/user-guide/widgets/scripts-and-styles-widgets-group/configuring-the-java-script-widget
I have some simple javascript to hide and show blocks of text on my webpage which used to work fine. I recently placed a new javascript library in assets/javascripts to create other visual effects on my site. It works fine, but now my simple javascript no longer works online, though it still works locally. The Chrome console displays an error message from the library ("Uncaught ReferenceError: Raphael is not defined").
Could this be preventing the rest of my javascript from working on the production server but not on my local development server? How do I prevent the library in assets from loading on other pages so it doesn't break things all over?
Yeah that could break the rest of your code. When you run rails in production, if you've used sprokets and required everything into application.js then it is all processed into a single file. If at any point in that file some javascript code fails, it will then break the rest of the file (which is pretty annoying)
You can conditionally include the raphael library which I assume you're already doing hence the error, but in your javascript code, you can also check to see if it is defined. What I'd do is around the code which makes use of Raphael, put something like :
if (typeof Raphael !== "undefined") {
... Raphael code goes here...
}
This way, if the library isn't loaded, it doesn't matter and your code won't break, and if it is loaded, then your Raphael specific code will run as normal :)
More info
I'd move the Raphael library into the vendor directory as well. It makes more sense, as this is specifically for assets that you haven't added/created yourself.
The reason rails is loading up Raphael automatically right now is most likely due to the default configuration of application.js. By default, rails sets this up with
//= require_tree .
This will include ALL JS files within the assets directory which is alright, but if you want to conditionally include files it's a little more awkward.
If you want it to be conditional on a per-page basis, you could alter your application.html layout to add a new JS include, which will include the raphael library only if it's been told to (via a variable or some other mechanism)
If you add something like :
<%= javascript_include_tag("raphael") if #raphael %>
Obviously changing raphael to whatever the name of the library file actually is, then it will only include if if the #raphael variable is true. This you can set anywhere, either in your controller, or the top of the view, or even in a view helper that you call from the view. Entirely up to you
I am confused about js file of jQuery which one i have downloaded just now.
downloaded a zipped folder contains a lot of folder and files inside it. How can i know which one js file exactly is for particular plugin?
Lets say, i have to downloaded for Dialog and i download from this page by selecting Model under Widget section. It downloads a zip folder and has many folder and files inside it.
When you've configured your download you just need to use the 2 folders: js and css.
You need to reference
jquery.js
jquery-ui-1.8.13.custom.min.js
jquery-ui-1.8.13.custom.css
I import this folder development-bundle\ui\i18n as well when I need the localized datetime-picker.
You have to look at the demos to see how they work and then go from there. This is like the Matrix. No one can tell you how jQuery UI works, you have to see if for yourself.
Also this is jQuery UI and not straight jQuery which is a single js file which you will find in the download.
Basically find out which stylesheets, js files you need, how to implement that (demos on the website will help with this) and then test it out on your own site.
As an alternative to download and host jQuery yourself, you can use googles cdn.
They serve a lot of different javascript frameworks, including jQuery and jQuery UI.
If you for example want to enable your site with jQuery all you structly have to do is include this in your html code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
You can find the different js frameworks that they host on this page: http://code.google.com/intl/no/apis/libraries/devguide.html
The thing that you have downloaded is JQUERYUI. Its a UI customisation and enhancement library based on the Jquery library. But you have specified in the question as JQUERY library. This can be downloaded here: jquery.com
this post does a pretty nice job:
jquery from cdn
They include a failsafe incase the CDN doesn't load properly...here's the code excerpt from the post
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>
this could be modified for various plugins too, like jqueryUI
(also referenced from http://html5boilerplate.com/ as noted in linked post)
Basically you have to include three things in the following order,
jquery API placed under js folder(something like jquery-1.5.1.min.js)
jquery UI library placed under js folder (something like jquery-ui-1.8.13.custom.min.js)
jquery ui css file placed under css\ui-lightness folder (something like jquery-ui-1.8.13.custom.css).
You can even refer the first two js files from any CDN.