jquery ui dialog appears bottom of page - ruby-on-rails-3

quite random behavior, I'm calling on a modal dialog to show a partial inside.
I'm working with simple_form + bootstrap and jquery-ui.
the button that calls the function has this code in the view:
<p><%= link_to 'New Boots', new_boot_path, :class => 'btn btn-primary pull-right', :remote => true, :id => 'new_boot_link' %></p>
in my views/boots/new the code is this:
<div id="content">
<%= render :partial => 'form' %>
</div>
and in views/boots/_form the following
<%= simple_form_for(#boot, :html => { :class => 'form-vertical' }, :remote => true) do |f| %>
<fieldset>
<%= f.input :number %>
<%= f.input :size, :collection => boot_size_options %>
<%= f.input :condition, :collection => boot_condition_options %>
<%= f.input :brand , :collection => boot_brand_options %>
</fieldset>
<div class="form-actions">
<%= f.button :submit, :class => 'btn btn-primary' %>
<%= submit_tag 'Reset', :type => :reset, :class => "btn btn-danger" %>
</div>
<% end %>
In application.js i have the following:
$(document).ready(function() {
$('#new_boot_link').click(function(e) {
var url = $(this).attr('href');
$('#modal').dialog({
title: "New Boots",
draggable: true,
resizable: false,
modal: true,
width:'auto',
open: function() {
return $(this).load(url + ' #content');}
});
});
});
So the modal works as it should, but it appears at the bottom of the screen, however if i close it and click on the button again, it shows right in the middle as it should have done in the first place.
Is it css? I think maybe not, as otherwise it would continue showing up constantly in the same place... so i dont know if is the way I'm calling the function?
Suggestions are welcome, this is quite an annoying glitch!

Sorry about previous mistakes.
Unfortunately I can't reproduce your problem in person. I suspect that this would help because it will convert the DIV and on call fill and display.
$(document).ready(function(){
var modal=$('#modal');
$('#new_boot_link').click(function(e) {
var url = $(this).attr('href');
modal.load(url + ' #content',function(){
modal.dialog("open");
});
});
modal.dialog({ autoOpen: false, title: "New Boots", draggable: true,
resizable: false, modal: true, width:'auto'});
});

Include: jQuery Center
Change to:
$(document).ready(function() {
$('#new_boot_link').click(function(e) {
var url = $(this).attr('href');
$('#modal').dialog({
title: "New Boots",
draggable: true,
resizable: false,
modal: true,
width:'auto',
open: function() {
return $(this).load(url + ' #content');}
});
}).center(false);
});
This set your dialog on middle-center of page.
If you have specific place you want show dialog force:
..}).css({position:"relative"}).css("left",null).css("top",null);
// Last too remove value of left and top. Trick with {left:null,top:null} does not work!

Related

Rails link_to and audio_tag

I'm trying to figure out the best way to play a wav file in the background (HTML5-like) when I use a link_to tag in Rails.
Here's a sample link_to from one of my views:
<%= link_to 'At Station', at_station_mdt_index_path, :class => 'btn btn-success btn-medium', :method => :put, :remote => true %>
I'd like to figure out how to use the audio_tag to trigger a sound when the button is pressed. I've tried combining the audio_tag in the link_to ERB but get all sort of syntax errors.
Any examples would be greatly appreciated.
Updated 01/04/14-10:18am CT: The sounds fire once and properly. However since adding the :id to the link_to the links no longer trigger the rails path to change the object, only plays the sound
View code:
<%= link_to 'En Route', en_route_mdt_index_path(:call_id => call.id), :class => 'btn btn-warning btn-medium', :method => :put, :remote => true, :id => "er" %>
<%= link_to 'On Scene', on_scene_mdt_index_path(:call_id => call.id), :id => 'to', :class => 'btn btn-primary btn-medium', :method => :put, :remote => true, :id => "os" %>
<%= link_to 'To Hospital', to_hospital_mdt_index_path(:call_id => call.id), :class => 'btn btn-warning btn-medium', :method => :put, :remote => true, :id => "to" %>
<audio id="en-route" class="audio_player" preload="true">
<source src="audios/en-route.wav" type="audio/wav">
</audio>
<audio id="on-scene" class="audio_player" preload="true">
<source src="audios/on-scene.wav" type="audio/wav">
</audio>
<audio id="to-hospital" class="audio_player" preload="true">
<source src="audios/to-hospital.wav" type="audio/wav">
</audio>
<script>
$('#er').click(function (e) {
e.preventDefault();
$('#en-route')[0].currentTime = 0;
$('#en-route')[0].play();
return true;
});
$('#os').click(function (e) {
e.preventDefault();
$('#on-scene')[0].currentTime = 0;
$('#on-scene')[0].play();
return true;
});
$('#to').click(function (e) {
e.preventDefault();
$('#to-hospital')[0].currentTime = 0;
$('#to-hospital')[0].play();
return true;
});
</script>
Here's a simple example for playing a wav file:
http://jsfiddle.net/84pav/
HTML:
At Station
<audio id="sound_effect" class="audio_player" preload="auto">
<source src="http://www.villagegeek.com/downloads/webwavs/alrighty.wav" type="audio/wav">
</audio>
JavaScript:
$('#playsound').click(function (e) {
$('#sound_effect')[0].currentTime = 0;
$('#sound_effect')[0].play();
return false;
});
I set currentTime = 0 before playing to make it always plays from the beginning.
It does not work on IE because IE does not support wav file.
I'm making a few assumptions in this answer:
You're using HTML5 markup
You want a styled link "button" to trigger a sound
You don't want to display the default HTML5 audio player
The sound files are stored in public/audios
The sound file is pre-loaded on the page
Unfortunately, the Rails 3.2 implementation of audio_tag is broken (https://github.com/rails/rails/issues/9373). So unless you're using Rails 4, you're better off using the actual HTML markup.
In this example, we're loading an mp3 file in the the default HTML5 audio player. The following snippet should be in your view file.
<audio id="sound_effect" class="audio_player" controls="false" preload="true">
<source src="/audios/TrainWhistle.mp3" type="audio/mpeg">
</audio>
Since the HTML5 audio player comes with "built-in" display chrome, you may want to position it off the page with css. In this example, you would add the following to your css file:
.audio_player {
position: absolute;
top: -999em;
{
Your link_to markup would look something like:
<%= link_to 'At Station', '#', class: 'btn btn-success btn-medium', id: 'playsound' %>
The javascript to actually play the sound will look similar to this jQuery example:
$('#playsound').on('click', function (e) {
e.preventDefault();
$('#sound_effect').currentTime = 0;
$('#sound_effect').play();
return false;
});
This example can easily be extended to support multiple files by small changes to the link_to tag and javascript.
How about something like this...
function playSound(soundfile) {
document.getElementById("playsound").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
$('#playsound').observe('click', function (event) {
playSound('URL to soundfile');
event.stop(); // Prevent link from following through to its given href
});
Then add the playsound id to your link.

Rails 3 Formtastic form not rendering

Here is my form view code:
<div class="row">
<%= semantic_form_for #new_athlete_sport, :remote => true, :html => { :class => "new_sport", :"data-type" => 'json', :id => '' } do |f| %>
<%= f.label "Sport" %>
<%= f.select :sport_id, Sport.all.collect { |sp| [sp.name, sp.id] }, {}, { class: "chosen", id: "" } %>
<br />
<%= f.submit %>
<% end %>
</div>
For some reason the <form> tag isn't showing up in the DOM, but every other fields show up..
Seems the syntax in form_for has some problem.
Try remove "id" and move "data-type" from this
<%= semantic_form_for #new_athlete_sport, :remote => true,
:html => { :class => "new_sport", :"data-type" => 'json', :id => '' } do |f| %>
to this
<%= semantic_form_for #new_athlete_sport, :remote => true, :data=> {:type=> 'json'}, :html => { :class => "new_sport"} do |f| %>

form_tag url_for with :method "delete", id and :remote => true

I have the following form_tag working:
<%= form_tag url_for(:controller => "profiles", :action => "remove_academic", :method => :delete), :id => "remove_major_goal", :remote => true do %>
However, the HTML produced shows that :method => "delete" isn't working. So I found a few answers here on form_tag and tried this:
<%= form_tag url_for({ :controller => "profiles", :action => "remove_academic", :method => "delete" }, { :id => "remove_major_goal", :remote => true }) do %>
However that kicks back an error. What am I doing wrong?
DELETE is not a valid value of the method attribute for a HTML form element. You would probably be better inserting a <input type="hidden" name="method" value="delete" /> inside the form (or use a helper method to do so).
Update:
Try one of these:
form_for url_for(:controller => "", :action => ""), :method => "delete", …
form_for { :controller => "", :action => "" }, { :method => "delete", … }
The second set of braces in the second form maybe unnecessary. Likewise, they might be needed in the first form.

How to retrieve data via ajax request and display the result into the next tag?

I using jQuery and have the following code, it's a partial and I want to know how could I retrieve a specific data on the onchange method and display the result into the next tag. (inside the span tag)
NOTE: this select field are generated on-the-fly, so, I can have N id's.
<p class="fields">
<%= f.collection_select(:part_id, #parts, :id, :title, { :prompt => true } , { :onchange => "?" } ) %>
<span class='part_price'> _ _ _ _ </span>
<%= f.hidden_field :_destroy %>
<%= link_to_remove_fields "remove", f %>
</p>
Also I've created the method for this action (I don't know if this is right):
def retrieve_part_price
#price = Part.find(params[:id])
respond_to do |format|
format.html { redirect_to(items_path)}
format.json { render #price }
end
end
And put that on the routes.rb:
resources :items do
member do
get :update_part_price
end
end
Solved.
my partial:
<p class="fields">
<%= f.collection_select(:part_id, #parts, :id, :title, { :prompt => true } , { :onchange => "load_part_price_select(this.id, this.options[this.selectedIndex].value);" } ) %>
<%= f.label(:part_id, "Price: ") %>
<span class="price"></span>
<%= f.hidden_field :_destroy %>
<%= link_to_remove_fields "remove", f %>
</p>
application.js
function load_part_price_select(id, value) {
$('#' + id ).live('change',function() {
$.ajax({
url: '/parts/' + value + '/price',
type: 'get',
context: this,
dataType: 'script',
success: function(responseData) {
$(this).nextAll("span.price:first").html(responseData);
}
});
});
};
controller:
def price
#price = Part.find(params[:id])
respond_to do |format|
format.js { render :text => #price.price }
end
end

Ruby on rails 3 link_to controller and action

I know this is probably a pretty simple concept. I am trying to create a link to a controller and action. For example I have a link in my layout file to update a record when a link is clicked, so I need to be able to link to the controller and action. How would I accomplish this?
link_to "Label", :controller => :my_controller, :action => :index
See url_for.
Also with CSS:
<%= link_to "Purchase", { :controller => :transactions, :action => :purchase }, { class: "btn btn-primary btn-lg", style: "width: 100%;" } %>
If you want to pass params too then do
<%= link_to student.name, controller: "users", action: "show", id: student.id, partial: "profile" %>