gmaps4rails 1.4.8, infobox plugin 1.9, rails 3.2.2 - ruby-on-rails-3

I had the gmaps4rails gem version 1.4.5 working nicely on my Rails 3.2.2 app. I just grabbed the example infobox setup that was described in the 1.4.5 documentation at the time. Looked beautiful!
So I finally get around to checking it on IE8, and the infobox's background is absent, on Safari and Firefox I get a nice yellow with %75 opacity, on IE8 I get NO background at all.
After futzing around with the CSS, I gave up, and decided to grab the latest version of gmaps4rails 1.4.8. I notice it now supports the google infobox.js plugin. So I track it down, and find there are multiple versions, not knowing which version works with gmaps4rails 1.4.8, I choose infobox.js 1.9, the latest.
So I stick it in the app/assets/googlemaps.js manifest like so:
//= require infobox.js
//= require ./gmaps4rails.base.js.coffee
//= require ./gmaps4rails.googlemaps.js.coffee
I've tried several different permutations of when the infobox.js get's included.
I fire the whole thing off like so in usamap.html.erb:
<%= javascript_include_tag "lbrokers" %>
<%= gmaps("markers" => {"data" => #json, "options" => {"custom_infowindow_class" => "infobox", "auto_adjust"=>false}}) %>
With the lbrokers.js manifest looking like:
//= require gmaps4rails/googlemaps.js
When I hit that page, I get this:
google is not defined
http://localhost:3000/assets/infobox.js?body=1
Line 128
It was several months between the time I initially set up gmaps4rails, and now. Even though I installed the 1.4.8 Gem, what I REALLY did was just grab the gmaps4rails.base.js.coffee and gmaps4rails.googlemaps.js.coffee from gmaps4rails 1.4.8 on Github and pasted their contents into the previous files in app/assets/javascripst/gmaps4rails. This is the layout file rendered prior to calling usamap.html.erb:
<% content_for :html_foot do %>
<%= yield :scripts %>
<script type="text/javascript">
$(document).ready(function() {
var centerpoint = new google.maps.LatLng(38, -97);
gMap = new google.maps.Map(document.getElementById('map'));
gMap.setCenter(centerpoint);
});
Gmaps.map.infobox = function(boxText) {
return {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/examples/tipbox.gif') no-repeat"
,opacity: 0.75
,width: "380px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
}};
</script>
<% end %>
That's the same infobox setup that worked fine on gmaps4rails 1.4.5. Now that I'm using the infobox.js plugin, noworky!
I have gone way wrong somewhere, either infobox.js 1.9 was the wrong choice.
Or I screwed up by just copying the two gmaps4rails coffee scripts and pasting them in app/assets/javascripts/gmaps4rails.
Or ?????
Anybody?

I have solved this for now by putting
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
In the view's layout, and removing the
//= require infobox.js
From the manifest that was being used in the view where the map is shown. I was copying and pasting the various versions of infobox.js into my local copy and serving via the assets pipeline.
The background is still absent on IE8, but I'm using infobox 1.1.9, and there are later versions, hopefully they will fix the missing background.
I first noticed that the previously working gmaps4rails 1.4.5 setup stopped working when I upgraded from 1.4.5 to 1.4.6. So I put 1.4.5 back and carried on. When I noticed the IE8 missing infowindow background, gmaps4rails was by then at 1.4.8, and it acted the same as the attempted 1.4.6 upgrade. I can only assume that something changed between 1.4.5 and 1.4.6, requiring that you load the infobox.js plugin.
One other minor point, in 1.4.5 clustering was on by default, in 1.4.8 it's off by default, you have to turn it on by passing the option "do_clustering"=>true to the "markers" option hash.

Found the reason there was no background on IE8, I don't know when, probably years ago, I added this to my
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Have no friggin idea when I did it, or why, but removing it fixed the missing background on IE8.

Related

Using best_in_place with rich-text editor like TinyMCE

I'm using the best_in_place gem to do in-place editing in a Rails application. However, I need (X)HTML editing on some of the text areas, so I need a rich-text editor. TinyMCE is being used elsewhere on the site.
However, it's not trivial to add an editor to best_in_place. To grossly oversimplify, the gem uses jQuery to insert the textarea tag on the fly, and TinyMCE initializes at page load, replacing available textareas with an editor, so when best_in_place puts in its textarea, TinyMCE has already come and gone. I've tried re-initializing TinyMCE after best_in_place inserts its textarea, but I don't think I've found the correct place(s) in the code to do that, because so far it hasn't worked.
There's a rumor that this integration is possible, but no documentation was visible in my web searches, so pointers are welcome. (Likewise this answer is unhelpful, pointing to two broken links.) I think my preferred order of solutions would be something like
Here's how to integrate TinyMCE with best_in_place
It can't be done with TinyMCE but here's how to do it with another rich-text editor
It can't be done with best_in_place but here's another rich-text edit-in-place solution for Rails 3.2.x.
I gave up trying to do this with best_in_place, so this question as written is still open to a better answer. However, for those who might find this question later and wonder what I eventually came up with, here's what I did in the end:
Junked best_in_place.
Forked the jeditable-rails plugin to
get Jeditable as an in-place editor.
Adapted the plugin to provide Jeditable, jWYSIWYG, and the Jeditable-jWYSIWYG custom input as assets for the Rails asset pipeline (along with related CSS and images for jWYSIWYG).
Profit! (Not really.)
Anyway, if you're trying to do rich-text in-place editing in Rails 3.2, try the jeditable-wysiwyg-rails plugin. It's providing the assets for the markItUp editor as well, although because I'm not using it I'm not sure they're all there and/or arranged properly.

Paperclip/MediaElement.js Player gem not working

I'm trying to setup an app where I can upload .mp3 samples and play them back. Paul Irish recommends MediaElementPlayer, so I've started futzing around with it. I happily see that there is a gem available (Thank you Axel K.), but I just can't seem to get it working.
I've included the gem, and the asset pipeline seems to be loading everything, but when the page loads, there is a player for each song, but it shows 0:00 on each end and when I press play, nothing happens. The path to the songs are all correct as well.
Here is the code from my view:
<% #songs.each do |song| %>
<%= song.id %>: <%= song.title %><br/>
<audio id="player<%= song.id %>" src="<%= song.tune.path %>" type="<%= song.tune_content_type %>" controls="controls">
</audio>
<% end %>
<script>
$('audio').mediaelementplayer();
</script>
I copied the format and the audio tags directly from the MediaElementPlayer site example (which could be the problem, but I'm not seeing how...)
Also potentially of import, I'm using Paperclip to upload the .mp3s.
**UPDATE:
I just dropped a song into a public folder of my app and setup and audio tag for it, and it works. This makes me think there is something wrong with the way that songs are being uploaded. But all the info seems to be correct (path, content-type, etc...)...
So, I went through and just configured Amazon S3 (which is what I'll be using in production), and everything works without a hitch. There has to be something with where the file is stored locally, or how it's stored, or, heck, I don't know. But setting up S3 and storing the clips there works like a dream.

In Rails 3, using Formtastic 2, how can I replace the built in ordered list with div's?

In my Rails 3 application I'm using Twitter Bootstrap as a frame work for developing an in house project management system. I'm using Formtastic to help me with forms since it save a lot of time and code. My problem is getting the Formtastic code to output the forms in a way that correspond with Bootstrap's conventions. I've read a few items I found on Google suggesting that I should monkey patch Formtastic, but I haven't been able to do this successfully.
How can I customize Formtastic's output to use div's around each field so I can use Bootstrap with it?
Thank you for looking.
Well, today I tried forking formtastic and making it compatible with bootstrap... The markup is incredibly tightly coupled to the code, so I gave up and switched to simple_form instead. Works fine with the advice in Rails: Using simple_form and integrating Twitter Bootstrap
You can use the formtastic-bootstrap gem. You should be able to drop this in and it will generate HTML that will work naturally with Twitter Bootstrap.
If you use the SCSS files from the one of the scss-twitter-bootstrap projects, you can simply comment out or remove the include for the forms part of the CSS.
Simply copy them in to app/stylesheets (Rails 3.0) or app/assets/stylesheets and comment out:
// #import "forms.scss";
Don't forget to add the formtastic CSS back in:
<%= stylesheet_link_tag 'formtastic', 'formtastic_changes' %>

Rails3 UJS response not evaluated

It gives me the creeps,i'm done, i need some help here, i reverted multiple times back but i can't find the error.
Simple controller (customers),a simple form for adding a customer via :remote => true and the controller does respond_to do |format| { format.js } . Works fine, renders my create.js.rjs template.
I work for a few hours without making any javascript changes or changes to my controllers or authorization etc.. and when i try it again it's not working anymore.
What i mean with not working: Controller gets called, record saved, all partials rendered. But no javascript evaluated, not even a simple alert(1) at the beginning of the file.
I tried with different prototype.js versions and different rails.js versions, but nothing helped. I hope someone has a clue about this or already experienced this.
It's not that i don't want to post code. But it won't help. Its basic code that works and, after some changes where i don't know what i really changed (some locales here, some css there, html templates from a completely different controller a bit..)..
Currently developing with: ruby 1.9.2, rails 3.0.3, prototype 1.7 RC3, rails.js from github.
SOLVED
How stupid, I missed the part where the template naming changed. My application templace was named "application.rhtml". It worked until now. As it stopped to work, I changed it to "application.html.erb" and now it's working.

Could not load 'dijit.Menu'

I want to run Dojo/Dijit with the Google CDN:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js">
</script>
I've tried 1.3.2, 1.3, 1.2 and all give this same problem.
If what I've read is true, I only need to include the dojo.xd.js - then the requires will properly find dijit somehow relative to dojo.
In Firebug I see the following:
http://ajax.googleapis.com/ajax/libs/dojo/1.2/dijit/Menu.js
200 OK
I'm confused by this, because I if http status=200 is okay - then why is this line showing up in red?
The next line says
could not load 'dijit.Menu'; last
tried '../dijit/Menu.js'
I had this working with all the Dojo/Dijit source code local - but I'm determined to get it running with the CDN.
I did some searches, and the best I could find was that Menu.js was included in certain releases, but I think they were talking 1.2 or before.
Same error occurs in the Chrome browser.
Thanks for helping.
Neal Walters
More Info Added:
Thanks for the example. I took it and got a simple menu working:
http://3wcloud-com-provisioning-qa.appspot.com/testDijitMenuOnly
Here's the "beast" that I'm trying to get working.
http://3wcloud-com-provisioning-qa.appspot.com/testDijit
This was originally a copy of the Dojo Theme demo - and it was working when I was running with Dojo local. It does a delayed/manual parse.
Like I said above, I tried 1.2, 1.3, 1.3.2 and so on, so it was just a matter of timing when I copyied/pasted into my question.
And OOPS - I didn't have djconfig - so I added that - but similar problem - just more explicit paths.
Thanks again - I'm going to love Dojo when I over these little humps.
This is the page I'm trying to reproduce:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html?theme=soria
Do you have something strange in your djConfig? The fact that it's spitting out "../dijit/Menu.js" makes it seem like you have a path setting in there.
I set up a simple demo page that uses the Google CDN and does:
dojo.require('dijit.Menu')
without problem.
Also, the script tag has 1.3.2 but it's loading menu from 1.2 which is strange.
Post a the full source code of what isn't working and that'll help track down the problem.
EDIT AFTER POSTING LINK
Remove these lines from your testDijit page:
<script type="text/javascript" src="/dijit/dijit.js"></script>
<script type="text/javascript" src="/dijit/dijit-all.js" charset="utf-8"></script>
YET ANOTHER EDIT
Call me crazy (since you don't seem to approve or upvote answers on SO making this a kind of no-op for me) but I got it working with the CDN here.. It still has problems because the CDN doesn't have all the test files on it (dijitTest.css and countries.json for example). You can download it and do a diff on your ow file to see what I changed. I mostly added a bunch of missing requires and changed paths to CSS and images. You also have a script tag referencing /dojo.js in your file.
I'm curious why you are so driven on getting the dijit tester running on your app since it seems like it'd be more fun/productive to learn dojo solving problems within your application.