Rails, conditional including Javascript if not loaded? - javascript

I am trying to include a Javascript file in my Rails layout only if it hasn't been loaded from a CDN, for example in pure Javascript I would do the following;
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script>
window.Modernizr || document.write('<script src="assets/js/modernizr.2.6.2.min.js"><\/script>');
</script>
How would I go about this working using the Rails asset pipeline?
I tried this out,
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script>
window.Modernizr || document.write('<%= javascript_include_tag "modernizr-2.6.2" %>');
</script>
But this is written out as,
<script>
window.Modernizr || document.write('<script src="/assets/modernizr-2.6.2.js?body=1"></script>
Which then somehow gets into my body HTML and leaves, "');" in my body tag. So the tag isn't closed properly.
Anyone know how to get this to work?

To achieve your desired output use the escape_javascript helper.
To use your example:
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script>
window.Modernizr || document.write('<%= j(javascript_include_tag("modernizr-2.6.2")) %>');
</script>
j() is an alias of escape_javascript() and looks neater.
Hope this helps.

Related

How to write fall back logic in ext js?

In Java script we write
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
window.jQuery || document.write('<script
src="/Scripts/Plugins/JQuery/jquery.min.js"><\/script>')
</script>
Can any one explain how to write for ext.js?
Why use a CDN if you use ExtJs? Off course it is possible to do so, but you want to build your own app.js which contains everything (and only) what you need. Besides that you don't want to edit your index.html after building your apps with Sencha Cmd.
<script type="text/javascript" src="//url/to/the/extjs/framework/ext.js"></script>
<script>
window.Ext || document.write('<script
src="/path/to/your/framework/ext.js"><\/script>')
</script>

Using ResolveClientUrl() in external JavaScript files

I found that ResolveClientUrl() works as expected when JavaScript is embedded in ASPX page, however it doesn't resolve anything when external script is referenced in ASPX like this:
<script src="../Javascript/sessionManagement.js" type="text/javascript"></script>
Is there a way to make ResolveClientUrl() work in external JS files? I was expected that it would because this file IS included in ASPX page but this is not the case.
I found a rather ugly workaround - to include external JS file in ASPX page like this:
<script type="text/javascript" language="jscript">
<!--#include file="../Javascript/sessionManagement.js"-->
</script>
It works (ResolveClientUrl() actually resolves path) but I've never seen external JS files referenced like that and am not sure this is the way to go.
<script type="text/javascript">
var myUrl = '<%= ResolveClientUrl("MyURL") %>';
</script>
<script type="text/javascript" src="../JavaScript/sssionManagement.js"></script>
and in your sessionManagement.js, you can simply use the myUrl variable above

jquery not recognised.How to make to work the Jquery?

my code is
<script src="~/Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("hello");
});
</script>
How to make to work the Jquery. Thanks.
update: "Hello" msg is not shown. Thanks.
The ~ symbol can represent the root of the website only when it is executed in the server. Use the following to replace the script include:
<script src="#Url.Content("~/Scripts/jquery-1.8.0.min.js")"></script>
Hope this would help you!
I'd be checking the path you have. The ~/ is parsed on ASP.NET server side controls, but not on normal HTML tags entered into a page. I think you want something like the following.
Traditional ASP.NET
<script src="<%=ResolveUrl("~/Scripts/jquery-1.8.0.min.js")%>"></script>
ASP.NET MVC Razor
<script src="#Url.Content("~/Scripts/jquery-1.8.0.min.js")"></script>
Try using jquery script from CDN
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Otherwise your code is okay
working demo
Try this may this work for you
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

MVC partial views and Unobtrusive jQuery/Javascript

I'm struggling to work out how I should be authoring my partial views which use jQuery.
For example, in the partial view below, I am displaying a text box which is hooked up to the jquery autocomplete plugin.
Eventually I want the results to be shown with an "X" next to them which the user can then remove, but for the purpose of this example the selected text is simply appended to the sibling div.
Is my jQuery code OK sitting here in the partial view, or should I be putting it in an external file? If an external file is used, then another developer using the partial view will need to be aware that the external js file should be included - is that OK?
I suppose my question really is that, although I'm kind of OK with jQuery (finding elements in the DOM, calling actions asynchronously etc..), I need some sort of guidance on where to put all this code that will stop me getting in a mess.
Does any of what I have just typed make sense????
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".acEmployee").autocomplete({
source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
select: function(event, ui) {
$(this).siblings().append(ui.item.value);
}
});
});
</script>
<div><div></div><input class="acEmployee" /></div>
If the JavaScript is "hookup" code then I don't mind it being in with the partial - as after all, everything it relates to is there.
If the JavaScript is "framework" code and can be reused all over the place, and isn't dependant on anything in the partial then I put it in its own file.
That's just what I do, but I'd be interested in hearing other peoples methods too.
If possible, keep all your js code in an external js files. That way you can put your jquery includes at the bottom of the page.
for .net mvc try something like:
<!--try fetching jquery from CDN, if CDN is down, fallback to local-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='<%:Url.Content("~/Scripts/jquery-1.5.1.min.js")%>' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" language="javascript">
var MVC_baseurl = "<%:Url.Content("~/") %>";
</script>
<script type="text/javascript" language="javascript" src="<%:Url.Content("~/Scripts/jquery-ui-1.8.10.custom.min.js")%>"></script>
<script type="text/javascript" language="javascript" src="<%:Url.Content("~/Scripts/plugins.js")%>"></script>
<asp:ContentPlaceHolder ID="BottomJavascript" runat="server">
</asp:ContentPlaceHolder>
You can then put your page-specific stuff in the content placeholders. , your master page specific plugins in plugins.js, and you can use
var path = MVC_baseurl + "Controller/Action"
and use that in your ajax calls etc...

Javascript files not mapping correctly in ASP.NET MVC?

I am having an issue with my javascript files in a master page ... I have the following:
<script src="Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="Scripts/Plugins/jquery-corners.js" type="text/javascript"></script>
This works ... until I start to go deeper into the routes ... for example, http://localhost/mywebsite works, but http://localhost/mywebsite/action does not work - I lose all my javascript imports.
I have use Url.Content for my images ... but it doesn't look like I can do anything for my javascript. It can't be that difficult ... I must be missing something! Any help would be appreciated!
Update
I found the following Using scripts in a master page with ASP.NET MVC ... but I can't get this to work if I put it between the tags ... where I need it. If I do try putting it there I get the following error:
The Controls collection cannot be
modified because the control contains
code blocks (i.e. <% ... %>).
Figured it out with the help of other posts here on stackoverflow. Here is what finally worked:
<script src="<%= Url.Content("~/Scripts/CreativeLogic.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-1.2.6.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/Plugins/jquery-corners.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.part').corner("15px");
});
</script>
Check out UrlHelper.Content (can't find MSDN docs, sorry)

Categories