I am using the no configuration option and have taken the following steps:
put the js files into root/public/javascripts
put the image files into root/public/images
put the demo css files into root/public/stylesheets
put css call in the head section of my layout file
<%= stylesheet_link_tag "demo_table", :media => "all" %>
put the initialization script in the head section of my layout file:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script >
first line of my table layout is:
<table width="100%" style="border-collapse:collapse; " id="example">
I restarted my server. Nothing happens. What am i missing?
The zero config relies on having a properly formatted table, which your example isn't showing. It must also have <thead> and <tbody> elements to render properly. Ensure that's properly setup first.
Second, open the page in Chrome or Firefox, view source. Click on the links to the Datatables.js and Datatables.css files as well as Jquery.js (or whatever each of these files is named) Do they open? If not, there's your problem.
Javascript is essentially platform independent. Sure, you get information TO the script in different manners in Rails, PHP, .net, etc, but there's no reason that this doesn't work in any of the major scripting language.
I have been using the RailsDatatables plugin in my rails apps without any problem. Maybe give that a try?
Related
So vue-cli 3 will automatically inject all the links to asset files in the HTML file. It includes the assets with the preload and prefetch attributes as well.
I want to use my own HTML template and insert these same assets into it with the preload and prefetch attributes.
I have done this in the past by using something like this example, but it doesn't include the preload and prefetch attributes.
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="{% static '<%= htmlWebpackPlugin.files.chunks[chunk].entry %>' %}"></script>
<% } %>
I've looked at all the info available inside the htmlWebpackPlugin object but I don't see anything in there that I can use to determine if the asset should use prefetch or preload and with the as=script.
How can I do this? Obviously vue-cli 3 is doing it, but I'm not sure how.
I understand you want to use your own template, tho I'd advise against it. 'Rabbit Hole' doesn't begin to describe messing with it. Rather, I'd customize the plugins to get the correct resources rendered how you like. Customization to preload/prefetch has been discussed at length here on the Vue CLI GitHub page
Using vue.config.js you should be able to chainWebpack to add specific options to to the PreloadPlugin (this plugin is used to manage both preload and prefetch tag injection in index.html) More info and examples on how to chain webpack is here.
Hi I am new to elm and would like to know if it would be possible to set up elm such that it manages only one section of a website. the rest of the site would be in plain javascript, html, css.
but i would like to load up the compiled elm app in a separate script tag and it should manage only a particular section
let us say that the website is divided into 10 divs vertically of height 300px. i would want only the 3rd div to be an elm app.
is such a thing possible? if so how can i get this working
You can use Html packages embed function for this. I once did this just to try it out, but unfortunately cannot recall any details of it. I did found some source code though.
The html page would be something like this
<html>
<head>
</head>
<body>
<div id="personnel"></div>
</body>
<script src="elm.js"></script>
<script>
Elm.Person.embed(document.getElementById('personnel'));
</script>
</html>
By including elm.js, you'll get the Elm runtime. Here Person is my compiled Elm module. Something like
module Person exposing (..)
-- Module details here...
main =
Html.beginnerProgram { model = init, view = view, update = update }
Elm code is compiled to JavaScript with command
elm-make Person.elm --output elm.js
My knowledge on this is quite limited, but I did investigate it enough to be certain that with by doing this, one can add multiple components made with Elm to an html page / existing application.
Addendum: I found the source of my information
In addition to previous answer perhps you would like to take a look on:
https://ellie-app.com/h7vqHrPdWa1/0
I'm looking for a way to inject a custom script into the _Layout.cshtml purely from code. _Layout.cshtml cannot know anything about it. Just like Browser Link does it.
You simple write this:
app.UseBrowserLink();
And this gets injected into the body at runtime.
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
</script>
<script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
There is no sign of it in _Layout.cshtml.
Unfortunately Browser Link isn't open source so I can't see how they have implemented it. Browser Link source now available
So I was wondering how it was done?
It's not open source, but you can easily decompile it to see how it works.
From a comment in the source code:
This stream implementation is a passthrough filter. It's job is to add links to the Browser Link connection scripts at the end of HTML content. It does this using a connection to the host, where the actual filtering work is done. If anything goes wrong with the host connection, or if the content being written is not actually HTML, then the filter goes into passthrough mode and returns all content to the output stream unchanged.
The entire thing seems pretty involved, but doesn't seem to use anything not available out of the box, so I guess it can be possible to code a similar thing.
Razor allows you to do this quite easily - you can even use a flag.
Example:
In your controller:
ViewData["RegisterCustomCode"] = "true";
In your View (.cshtml):
#if (ViewData["RegisterCustomCode"] == "true")
{
<text>
<script src="..."></script>
</text>
}
I want to use getclicky to monitor my websites statistics.
Here is the following code snipet:
<a title="Google Analytics Alternative" href="http://getclicky.com/66457219"><img alt="Google Analytics Alternative" src="//static.getclicky.com/media/links/badge.gif" border="0" /></a>
<script src="//static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">try{ clicky.init(66490659); }catch(e){}</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66490659ns.gif" /></p></noscript>
Does it go in the head of the layout or the body of the layout or do I have to put it on each page?
From the getclicky FAQ:
The tracking code needs to go on every page that you want us to track. Most sites have what's called a "footer" file, that's automatically included at the bottom of every page. If your site has one of these (and if it doesn't, it should!), all you need to do is place the code in this one file and the code will then be included at the bottom of every page on your site automatically.
Create a _footer.html.haml (or .erb depending on your app) file in app/views/layouts and include it in every layout at the bottom. like so:
= render :partial => 'layouts/footer'
I've setup my Rails 3 app with only
<%= yield %>
in the application.html.erb and pages.html.erb layout files (Pages is my controller), and I have a view with only the following:
<!DOCTYPE html>
<html>
<title>My Title</title>
<body>
<iframe src="http://myiframesource.com" seamless="seamless" width="100%" height="1949px"></iframe>
</body>
</html>
But the iframe still has a border around it and does not completely fill the page when I look at it in my browser (I tried several). According to W3Schools http://www.w3schools.com/html5/att_iframe_seamless.asp
the seamless attribute should have no borders nor scrollbars and " should look like it is part of the parent document."
I'd also like to not have to tell the iframe what width/height to be, and just have it take up as much space as it needs.
Why does the seamless attribute seem to not be working right?
That's probably because your browser doesn't support seamless iframes. As far as I know it doesn't work in either Firefox 4 or Google Chromium 11, you'll have to wait until someone actually implements it. As for the iframe taking as much space as it needs I don't think that there is currently a way to do this without JavaScript. For a JavaScript solution just search the web, there are several tutorials about this.