Each marker on my map has an infowindow.
If I use the Infobox plugin to build the infowindow, remote links inside it process action as "HTML" instead of "JS".
I should precise that everything work well (I mean, action processed as "JS") when I remove the infoboxBuilder.
My code :
var handler = Gmaps.build('Google', {builders: { Marker: InfoBoxBuilder} });
# In the Infowindow : <%= link_to "More", voir_infos_path(t), :remote => true %>
# Log : Started GET "/voir_infos/545e1dd382cd47db98000bb9" for 127.0.0.1 at 2014-12-04 23:10:56 +0100
Processing by ObjetsController#voir_infos as HTML
But when I remove the InfoBoxBuilder :
var handler = Gmaps.build('Google');
# Same code in Infowindow : <%= link_to "More", voir_infos_path(t), :remote => true %>
# Log : Started GET "/voir_infos/545e23ae82cd47e5ac000542" for 127.0.0.1 at 2014-12-04 23:13:53 +0100
Processing by ObjetsController#voir_infos as JS
Here the infoboxbuilder.js.coffee I found on stackoverflow :
class #InfoBoxBuilder extends Gmaps.Google.Builders.Marker # inherit from base builder
# override method
create_infowindow: ->
return null unless _.isString #args.infowindow
boxText = document.createElement("div")
boxText.setAttribute("class", 'yellow') #to customize
boxText.innerHTML = #args.infowindow
#infowindow = new InfoBox(#infobox(boxText))
#bind_infowindow()
infobox: (boxText)->
content: boxText
boxClass: "infoBox box-shadow"
pixelOffset: new google.maps.Size(-140, -380)
closeBoxURL: ""
boxStyle:
width: "280px"
How could I make it work ?
Thanks
EDIT
I have this link in each Infowindow : <%= link_to "More", voir_infos_path(t), :remote => true %> which should process ObjetsController#voir_infos as "JS", isn't it ?
When I use the Infobox plugin to display the infowindow (with this part of code : builders: { Marker: InfoBoxBuilder} and click on "More", :remote => true doesn't work, and ObjetsController#voir_infos is processed as "HTML" instead as "JS".
When I remove builders: { Marker: InfoBoxBuilder}, everything work well, and when I click on "More", ObjetsController#voir_infos is processed as "JS".
EDIT 2 :
The HTML generated for the Infowindow :
<div class="infoBox box-shadow" style="width: 280px; position: absolute; visibility: visible; left: 132.270229334012px; top: 72.179231562186px; cursor: default;"><div class="yellow"><div class="row iw-content">
<div>
<img src="/covers/max_creer/missing.png">
</div>
<div class="small-12 columns">
<div class="row">
<div class="small-12 columns">
<h6> Maison Bloc </h6>
</div>
</div>
<div class="row">
<div class="small-12 columns">
More
</div>
</div>
</div>
Related
I have a rails 5 application that is using vue.js. I have a input form that collecting basic information in addition to having a stripe element in it. The stripeV3 element loads with no problem, the client console does not display any javascript errors.When I fill out the form and submit it the expect stripeToken parameter that should come back from stripe is omitted. I not remotely sure why.
checkout.html.erb
<section class="hero">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-8 mx-auto">
<div class="card border-none">
<div class="card-body">
<p class="mt-4 lead text-center">
Shipping Address
</p>
<div class="mt-4 clearfix">
<%= form_for :customer_order, html: {id: 'payment-form'}, url: { action: "process_order" } do |f| %>
<div class="form-group">
<%= f.text_field :full_name, :class=>"form-control", :placeholder=>"Full Name" %>
</div>
<%if !current_user%>
<div class="form-group">
<%= f.text_field :guest_email, :class=>"form-control", :placeholder=>'Email' %>
</div>
<%end%>
<div class="form-group">
<%= f.text_field :street_address1, :class=>"form-control", :placeholder=>"Street and number, P.O. box" %>
</div>
<div class="form-group">
<%= f.text_field :street_address2, :class=>"form-control", :placeholder=>"Apartment, suite, unit, building, floor, etc" %>
</div>
<div class="form-group">
<%= f.text_field :city, :class=>"form-control", :placeholder=>"City" %>
</div>
<div class="form-group">
<%= f.select(:state, options_for_select(['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'])) %>
</div>
<div class="form-group">
<%= f.text_field :zip_code, :class=>"form-control", :placeholder=>"Zip code" %>
</div>
<div class="form-group">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<br><br>
<%= f.submit 'Continue Checkout', :class=>"btn btn-primary float-right" %>
<% end %>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</section>
<% content_for :javascript_section do %>
<script type="text/javascript">
var stripe = Stripe('pk_test_a_valid_test_token');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '18px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
</script>
<% end %>
application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require bootstrap
//= require turbolinks
//= require rails-ujs
//= require popper
//= require_tree .
//= require_self
//= require vue.min.js
//= require vue-carousel.js
//= require_directory ./components
Vue.use(VueCarousel);
const Carousel = VueCarousel.Carousel;
const Slide = VueCarousel.Slide;
$(document).on('turbolinks:load', function() {
new Vue({
el: '#app',
components: {
Carousel,
Slide,
Slider,
}
});
});
I have model with date time field after render new view and submit it all fields of model saved to database except date time field even I am using date time picker
Can any body help me to solve this problem
This is the code I am working on:
Interview controller
def new
#interview = Interview.new(:batch_id => #batch.id)
end
def create
#interview = Interview.new(interview_params)
# Save the object
if #interview.save
# If save succeeds, redirect to the index action
flash[:notice]= "تم إنشاء المقابلة بنجاح."
redirect_to(interviews_path(:batch_id => #batch.id))
else
# If save fails, redisplay the form so user can fix problems
render('new')
end
end
Interview new view code
<% #page_title = "إنشاء مقابلة" %>
<div id="content-header">
<div class='header-icon hr-icon'></div>
<h1>المقابلات</h1>
<div class='header-sep'>|</div>
<div class='sub-header'>إنشاء مقابلة</div>
<div id="inner-tab-menu">
<ul>
<li class='themed_bg themed-dark-hover-background'><%= link_to("<< العودة للجدول", interviews_path(:batch_id => #batch.id)) %></li>
</ul>
</div>
</div>
<div id="page-yield">
<div class="iterviews new">
<%= form_for(#interview, :url =>interviews_path(:batch_id => #batch.id)) do |f| %>
<%= render(:partial => 'form', :locals => {:f => f}) %>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
locale: 'ar-sa'
});
</script>
<div><%= f.submit("إنشاء مقابلة", :class => 'submit_button') %></div>
<% end %>
</div>
</div>
form code
<div class="label-field-pair">
<div class="right-column">
<label for="student_grade">رقم المقابلة<span class="necessary-field">*</span> </label>
<div class="text-input-bg"><%= f.text_field(:code, style: "width: 240px;") %></div>
</div>
</div>
<div class="label-field-pair">
<div class="right-column">
<label for="student_grade">تاريخ المقابلة<span class="necessary-field">*</span></label>
<div class="text-input-bg" style="direction: ltr; margin: 0 10px 0 0;">
<div class='input-group date' id='datetimepicker1'>
<%= f.datetime_field(:interview_date , class: "form-control", style: "width: 200px;margin: 0;") %>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<%= f.hidden_field(:batch_id, value: #batch.id) %>
I could find out the solution for this problem, of course the reason was that datetimepicker doesn't understand the values in my fields so what I did is the following:
1- change the numbers in moment-with-locales.js in the 'ar-sa' section from Indian numbers to Arabic numbers.
2- set the format: option to datetimepicker to match model attribute data type format in case it is date type or datetime type
and that's solve my problem
I am using Dojo 1.8.3
I want to develop a Customizable Form using dnd. I have a list of form elements in the left dojo/dnd/Source and the container in the right dojo/dnd/Target which is supposed to generate dijits when I drop on it.
<div class="normal" style="width: 99%; height: 99%;" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'sidebar', gutters: true, liveSplitters: true">
<div data-dojo-type="dijit/layout/ContentPane" class="normal" style="width: 30%; height: 80%;"
data-dojo-props="splitter: true, region: 'left'">
<div data-dojo-type="dojo/dnd/Source" data-dojo-id="form_tools" id="form_tools" data-dojo-props="copyOnly: true"
class="container" style="width:99%;">
<div class="dojoDndItem" dndtype="heading">Heading</div>
<div class="dojoDndItem" dndtype="textbox">Text Box</div>
...
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" class="normal" id="form_container"
style="width: 68%; height: 80%;" data-dojo-props="splitter: true, region: 'center'">
<div data-dojo-type="dojo/dnd/Target" data-dojo-id="form_items" id="form_items" class="container" style="height: 80%;" accept="heading,textbox">
<script type="dojo/on" event="DndDrop"> form.transform_item(arguments[0], arguments[1], arguments[2], arguments[3]);//source, nodes, copy, target </script> </div>
</div>
</div>
In my js function transform_item, I am doing this:
this.transform_item = function(){
var dragged_items = arguments[3].selection;
form_items.forInSelectedItems(function(item, id, map){
var dnditem = dojo.byId(id);
switch(item.type[0]){
case "textbox":
var textbox = new dijit.form.TextBox({
name: "textbox",
value: "This is a TextBox"
}, "textbox_text");
// HERE IS WHERE I SHOULD INSERT THE CODE FOR GENERATING A TEXTBOX
require(['dojo/parser'], function(parser){
parser.parse('textbox_text');
});
break;
}
});
}
At this point I'm getting an error when I drop over the Target :
dojo/parser::parse() error
TypeError: root is null
var node = root.firstChild;
How can I make Dojo generate, for example a dijit.form.TextBox when I drag an "textbox" dndtype?
Solved: I have just inserted the textbox in the wrong parent, textbox_text does not exist.So No need of parse();
My project is using twitter bootstrap tabs and in each tab there is collection of Rails Model Object.
i need to use kaminari pagination for the collection in each tab.
As, in every tab there will be a pagination for the content of this tab from the model object presented.
Thanks.
I ran across this same problem yesterday and though I would post the solution I found here. (Works in bootstrap 3x)
I too wanted to use Kaminari to paginate across multiple tables within tabs in bootstrap. the problem is, every time you advance the page, it refreshes and sends you back to the first tab.
The first step required for solving this problem is find out how to direct your page to a specific tab when it loads. With some searching, I figured out that I could do this by appending the hash linking to tab to the url of the tab. (I can’t remember where I found this.)
// Example
#tab1, #tab2, #tab3
Coffeescript
$ ->
hash = window.location.hash
hash and $("ul.nav a[href=\"" + hash + "\"]").tab("show")
$(".nav-tabs a").click (e) ->
$(this).tab "show"
scrollmem = $("body").scrollTop()
window.location.hash = #hash
$("html,body").scrollTop scrollmem
return
return
Javascript
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});
Then, all need is to pass the correct anchor to Kaminari.
= paginate #foo, :param_name => "page_method", :params => { :anchor => 'tab4' }
Cheers
Here is a snippet of a solution that works within a view using bootstrap 2.3. If a 'tab' param is provided in the calling URL, that tab will be displayed; otherwise, the first tab will be displayed.
<ul class="nav nav-tabs" id="my_tabs">
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
<div class="tab-content">
<div id="one" class="tab-pane">
<%= paginate #stuff, :params => {:tab => "one"}, :theme => 'twitter-bootstrap', :pagination_class => "pagination-large" %>
</div>
<div id="two" class="tab-pane">
<%= paginate #stuff, :params => {:tab => "two"}, :theme => 'twitter-bootstrap', :pagination_class => "pagination-large" %>
</div>
<div id="three" class="tab-pane">
<%= paginate #stuff, :params => {:tab => "three"}, :theme => 'twitter-bootstrap', :pagination_class => "pagination-large" %>
</div>
</div>
<% #tab_id = params[:tab] ? "#my_tabs a[href=" + %Q(##{params[:tab]}) + "]" : "#my_tabs a:first" %>
<% content_for :footer do %>
<script>
$(function () {
$('#<%= #tab_id %>').tab('show');
})
</script>
<% end %>
If you use jQuery.tabs() then this way can help you.
You should add kaminari themes for all tabs.
$> rails g kaminari:views default
$> cd app/views/kaminari
$> mkdir one
$> cp *_.html.* one/
Then you should edit files in kaminari/first_tab. You should replace variable url to "#{url}"#one everywhere in directory.
Like this:
app/views/kaminari/one/_first_page.html.erb
<%= link_to 'prev', "#{url}#one", class: 'first', page: '1' %>
then you should add theme name:
<script>
$(document).ready(function () {
$("#my_tabs").tabs();
});
</script>
<ul class="nav nav-tabs" id="my_tabs">
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
<div class="tab-content">
<div id="one" class="tab-pane">
<%= paginate #stuff, theme: 'one' %>
</div>
<div id="two" class="tab-pane">
<%= paginate #stuff, theme: 'two' %>
</div>
</div>
I'm using Rails and jQuery UI to implement tabs in each user's profile. I've got it working without ajax - with ajax, things go south. I'm new to Rails and jQuery and am hoping someone can help me identify what's going wrong.
<div id="tabs-1"> is the first tab and it is associated with ProfilesController by default. That works by using an <a href>.
<div id="tabs-2"> would access MessagesController and load a partial show_messages that loads #user.messages.
What happens instead is that when I click "Messages" I get an ActionController::Routing error in Profiles#show.
No route matches {:action=>"show", :controller=>"messages", :id=>[#<Message id: 3, user_id: 2,...>, #<Message id: 4, user_id: 2,...">]}
My code is below:
application.js:
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
My profile show.html.erb:
<div id="tabs">
<ul id="infoContainer">
<li></li>
<li><%= link_to "Messages", message_path(#user.messages) %></a></li>
<ul>
<div id="tabs-1">
</div>
</div>
My _show_messages partial in MessagesController:
<div id="tabs-2">
<% for 'message' in #user.messages %>
<div class="message">
</div>
<% end %>
</div>
in show.html.erb message_path(#users.messages) is wrong. Try messages_path which should point to the index action of the messages controllr. Here I am assuming you are using the standard Rails convection for messages routes.