I have been playing around with VS Code hoping to switch over from the pricier Jet Brains option. However "you get what you pay for" may hold true here.
I have a rails project that uses haml templates and I have some inline javascript in these haml files. Like so:
- content_for :head do
:javascript
$(document).ready(function () {
initializeCurrencyFormattingOnAllCurrencyElements();
if (typeof table_manager === 'undefined') {
table_manager = new DatatableManager();
}
var sales = new AsyncDatatable('sales', '#sales', 100, {}, false, true, 1);
sales.handle_form_submit();
table_manager.add(sales);
table_manager.init_all();
table_manager.draw_all();
});
In the JetBrains IDE it was no problem ctrl/command hovering over these javascript definitions inside the haml file and I could use code navigation to go straight to the definition of things like "AsyncDatatable", "handle_form_submit()", etc. However I cannot get this to work in VS Code. I struggled for a while to get code navigation working for ruby as well (my installation came with a blank settings.json file for some reason) So I don't know whether I just don't have the right extensions, settings, or whether this just is asking too much from a free IDE.
Has anyone succeeded in doing this either with haml or erb? Any tips would be greatly appreciated even if the answer is that this isn't currently possible.
Personally i have been using VScode for a while and what i do is copy the phrase i want to find e.g. "AsyncDatatable" and then using search (shift+command+F for mac) that shows that phrase even if it appears multiple times inside your code.
Related
Earlier I posted this:
https://www.reddit.com/r/rails/comments/3r8n0f/how_to_get_keep_spaces_in_text/
I found that Ruby does save my spaces and line breaks so it worked great, but not I'm trying to use highlight.js and for some reason the text is going back to just being jumbled together and it's making it pink and I'm not sure why.
I'm using this as reference to install highlight.js( https://highlightjs.org/ ):
http://stackoverflow.com/questions/28574032/how-to-use-highlight-js-with-rails
I've tried several different high lighting solutions this one seems the closet but now it's jumbling it again when I use
<code></code>
or
<pre><code></code></pre>
tags and making every thing pink. Can someone please take a look and explain why this is happening? I know I've posted here twice today now and that's probably annoying but I'm really trying to do my own easy thing now >.>; I've worked through several tutorials already and none have done much javascript really but I'm just so tired of following them.
Here's the link to github if you guys need to see it:
https://github.com/ilovemysillybanana/pastie
Here is the output I'm seeing when I bring up the page:
http://imgur.com/fsCfwZa
EDIT:
using
<pre></pre>
tags on the code preserves my spaces and line breaks, I learned that now but using
<code></code>
takes that away...
EDIT:
If I do this:
hljs.configure({useBR: true});
$(document).ready(function() {
$('pre').each(function(i, block) {
hljs.highlightBlock(block);
});
});
It takes away the spaces, it seems like this thing only wants to make it pink and get rid of my spaces >.>
Switching the js part to this:
hljs.configure({useBR: true});
$(document).ready(function() {
$('pre').each(function(i, block) {
hljs.highlightBlock(block);
});
});
Seems to still work even if I only try to render the code like this:
<code>
<%= program.code %>
</code>
So I guess it doesn't need
<pre><code></code></pre>
tags, it only needs
<code></code>
, but for some reason it still jumbling together and making it pink.
What it says in the title. I have a simple app that needs the functionality, but can be otherwise written in plain clojurescript so it seems pretty wasteful to load jQuery and jQueryUI just for that.
The closest thing to jQueryUI's Sortable in the google closure library is goog.fx.DragListGroup. As far as I know there is no ClojureScript wrapper for that, but it should be fairly simple to code against it directly and since it's in the closure library it should optimize well too. The basic idea is that you instantiate a DragListGroup for each independent list that you want to be sortable, and then add the list element to that group using addDragList. You can also add multiple list elements to the same group if you want to be able to drag elements between lists.
Here is one way to get this working. You'll need to use an extern file so Google Closure can read the jQuery libraries. There is one for the main jQuery already published and I posted one that works well for jQuery-ui's sortable. The project.clj should have a reference to the extern, so include something like this:
:dependencies [[org.clojure/clojure "1.5.1"]
[org.clojure/clojurescript "0.0-1806"]
[jayq "2.3.0"]]
:plugins [[lein-cljsbuild "0.3.1"]]
:cljsbuild {
:builds [
{:source-paths ["src"]
:compiler
{:output-to "resources/public/js/out.js"
:optimizations :advanced
:pretty-print false
:externs ["resources/public/externs"]}}]})
Then write some cljs for the sortable function (jayq makes this easy):
(ns sortable.core
(:use [jayq.core :only [$]]))
(defn sortable [$elem]
(.sortable $elem))
(defn disable-selection [$elem]
(.disableSelection $elem))
(let [$sortable ($ :#sortable)]
(sortable $sortable)
(disable-selection $sortable))
And include an index.html file for the project like this.
There might be some way to compile the jQuery libraries directly with :foreign-libs in the project.clj but I'm not sure how to do that.
EDIT: Sorry this still uses the entire jQuery library so it doesn't really answer the question.
Because I have no clue about clojurescript I can't give you a proper solution in clojurescript but jQuery and jQuery UI shouldn't be that wasteful.
You could include the jQuery library by making use of the Google CDN. Lots of websites use this source and therefore the file gets cached and won't be downloaded again and again.
See this link.
//you can of course easily change the version you want to use, like 1.9.1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script
The same could be done for jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
But if you just want to use the sortable widget of jQuery UI you could simply use their Download Builder.
Just uncheck the "Toggle all" checkbox below "Components" and then check the sortable checkbox in "Interactions".
Download your customized jQuery UI version and all you need to include is the jquery-ui-1.10.3.custom.min.js file. The Download Builder downloads a CSS theme also but for the sortable widget I see no need to include it.
But in fact including jQuery UI from Google CDN is also a good choice. If you host the libraries locally your users must download it at least once. If you use Google most of the user won't need to download the files. (unless the version is different)
Just a suggestion if there's nothing in clojurescript which could help you out.
I have a dynamic MVC4, jQuery Mobile application that works for the most part quite well. I have an auto posting dropdown list that selects a list from the database via the following code.
<script type="text/javascript">
$(function () {
$("#TownID").live('change', function () {
//$("#TownID").change(function () {
var actionUrl = $('#TheForm1').attr('action') + '/' + $('#TownID').val();
$('#TheForm1').attr('action', actionUrl);
$('#TheForm1').submit();
});
});
</script>
<p>
#using (Html.BeginForm("SearchTown", "Home", FormMethod.Post, new { id = "TheForm1" }))
{
#Html.DropDownList("TownID", (SelectList)ViewBag.TownId, "Select a Town")
}
</p>
The problem is it only works properly the first time a search is performed unless I click refresh. I don’t think this has anything to do with MVC, I think the problem is with AJAX and jQuery Mobile.
Edit:
The first time I search www.mysite.com/Home/Search/2 yields a result and woks fine, but the second time something seems to be left behind in the DOM??? and it looks for:
www.mysite.com/Home/Search/2/2 also
I get 404 errors in my log and “Error Loading Page” but it still finds the results and displays the page correctly!
Then with a third search I get the error 404’s in my log and “Error Loading Page” but it has grown and now looks for:
www.mysite.com/Home/Search/2/2
www.mysite.com/Home/Search/2/2/2 also
This then continues to grow after every search until at some seemingly random point on each test, it seems to give up and I get error 505
Additional Edit:
The code works perfectly if I take jQuery Mobile out of the question
Can anyone tell me what might be going on here?
Get rid of: $(function () {
And replace it with: $(document).delegate('[data-role="page"]', 'pageinit', function () {
Please read the big yellow sections at the top of this page: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
You can't rely on document.ready or any other event that only fires once per page. Instead you have to get used to using jQuery Mobile's custom page events like pageinit so your code will work no-matter when the page is added to the DOM (which you don't know when this will happen in a jQuery Mobile website). There are a ton of events, so again, please read the documentation I linked-to above.
Firstly, dynamically generated html using a server side templating engine blows. I really don't understand what value people see in it.
My guess is that it used to make sense 10 years ago before AJAX became popular, and has just hung in there ever since because people have this feeling that it is "the right way to do it". It isn't. ESPECIALLY for mobile web apps.
Secondly, it looks like you are trying to do pretty simple search. All this MVC4 garbage makes it difficult for you to see what is really happening though. You don't need to append parameters to your URL for a simple form submission like this. In fact your TownId should already be part of the POST data when you submit, so you can just remove the URL modification bit.
Alternatively, don't use a form submission, but just a GET and AJAX. I don't know what your app is doing here, but I imagine you want to display the results on the page dynamically somehow, so a GET is more than enough.
Use your developer browser tools (F12) to see what exactly is getting submitted when you do the submit - it really helps. And for your next project, abandon MVC4! "Well established design patterns" my foot.
I have been bothered by this problem for a long time
There are same select element in the DOM I think so...
and I used $('.SelectCSS:last').val()
It seen work well.
I come from China , English is poor...
I guess this is one for the future, MVC and jQuery Mobile don't seem to blend completely right now. Maybe MS's response to the issue is Single Page Applications!
SPA may satisfy Danial also?
I'm trying to get the hang of the whole asset pipeline thing, and read the guide and several tutorials about them. But one thing that doesn't become quite clear is wether I should view my javascript asset files as a library or a place to put code that is actually run i.e. $(document).ready. Because by default all the javascript files are included, and it would be weird to have several $(document).ready's in there, not to mention that you don't want the $(document).ready function for every page to be run in the first place. What would be the way to go at this? Use my asset files as a library and put actual calls in my views (ugly)? Or is there a better way to do this?
I too ran into this issue. In a large project you can have somebody put code into document ready to, for example, add a click function to each li within a div with class container.
Now we could all argue that the above code would be too generic and of course may affect li tags in other parts of the application, but the bigger the project, the more likely it is that you will run into a conflict like this leading to unexpected behaviour.
I for one am uncomfortable with a whole bunch of document ready functions running for each and every page loaded. My solution is not necessarily the perfect one, but it's one that I have taken up and will share with you.
In the body tag of each page I add data elements signifying the controller and the action. I then have one document ready script that looks for a class named after the controller with the name Ready appended e.g. HomeReady. It will then call a method on this class (presuming it exists) named after the action. So in your asset coffee file you could write:
class #HomeReady
#index: ->
alert("Hello")
#show: ->
alert("Goodbye")
This allows control right down to the action level. When I came across your question I decided to package this solution into a gem as I have already used it in several projects. You can find it at: https://github.com/intrica/rails_document_ready
If you absolutely don't want a certain piece of initialization code to be run unless the current page is a specific controller/action, then you can try adding an empty element on the page with an id built from that info like "posts_index" using these two helpers:
"#{controller_name}_#{action_name}"
Then in your javascript you can wrap the code inside an if statement that checks for the existence of an element with the appropriate id.
edit: Here's an example of the js partial that I mentioned in the comments.
show.html.haml
= render 'map'
map.html.erb (I normally use haml but it's easier to write js in erb)
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
...
</script>
It's probably not as clean as it could be and it doesn't get the benefits of being part of the asset pipeline but I don't mind because it's only something that gets included on a specific page.
I have searched the forum, and google for this topic. Most of the articles are talking about using JSON to call the controller/action on the server and do ajax effect on the result.
I am trying to use some very basic JQuery features, like the JQuery UI/Tabs, and JQuery UI/Block for a dialog window. I cannot get these simple samples to work in my MVC project. Any ideas how I should modify these samples? I only need these basic feature now and I can go from here.
Thanks!
Actually I just got it working. The problem is that I need to modify the path to an absolute path to the view page because the relative path doesn't work with the MVC routes {controller}/{action}/{id}.
Thanks!
For info, re the relative path issue - I discussed this here (the same concept applies to any page, not just master pages). The approach I used is like so:
1: declare an extension method for adding scripts:
public static string Script(this HtmlHelper html, string path)
{
var filePath = VirtualPathUtility.ToAbsolute(path);
return "<script type=\"text/javascript\" src=\"" + filePath + "\"></script>";
}
2: when needed (for example in the <head>...</head>) use this method:
<%=Html.Script("~/Scripts/jquery-1.2.6.js")%>
The advantage of this is that it will work even if the web app is hosted in a virtual directory (i.e. you can't use "/Scripts" because you aren't necessarily at the site root) - yet it is a lot clearer (and less messy) than the full script with munged src, i.e.
<script ... src="<%=Url.Foo(...)%>"></script>
I just implemented the jquery autocomplete textbox in one of my asp.net project. I only had to import the js file and drop some code into my aspx page. Could you be more detailled about what sample you are trying to run?
This is quick response!!
I am trying to run this "Simple Tabs" on this page:
http://stilbuero.de/jquery/tabs/
I think it is the same with this one: http://docs.jquery.com/UI/Tabs
I just copied and pasted the whole thing into my MVC view page, with corrected path to the jquery.js and .css files, but the content in the tabs all show up together (two of them are supposed to be hidden). My understanding is that this simple jquery plugin just show and hide content.
I had the exact same problem with the jquery thickbox plugin, that the item marked as "hidden" (the dialog box) will always show up in my MVC view page.
I can understand some of the MVC+Jquery+json articles, but I don't understand why the hide/show doesn't work.
Thanks!
I just made a walkthrough on how to do this:
http://blogs.msdn.com/joecar/archive/2009/01/08/autocomplete-with-asp-net-mvc-and-jquery.aspx