I'm using Gmap4Rails in the body of a form that is loaded via Ajax. There are custom fields in the form and some of them may be location pickers that I have working on a non-Ajax version of the form.
With the Ajax version of the form, I'm getting "Gmaps.my_map_id" undefined errors.
In the non-Ajax version of the form, I call Gmaps.loadMaps via JavaScript in the HTML page head for "window.onload" as is the normal practice with Gmaps4Rails.
However, this won't work in the context of Ajax, as the map(s) haven't been defined at window.onload time.
In my form, I also define a callback per Gmaps map object. This is what seems to be failing with the "undefined" error, even when I do a "Gmaps.loadMaps();" script directly before the first callback is defined in the code that is loaded by Ajax.
Basically it goes like this in code order:
in a loop, gmaps4rails partial is called to output each map custom field
after that loop finishes, Gmaps.loadMaps() is called once
in another loop, each Gmaps map object has the JS for its callback added
Any suggestions on how to get this working?
UPDATE: possibly only partly correct (i.e. I did have the problem that was outlined here, but calling Gmaps.loadMaps() still doesn't work).
2nd Update: I have had to alter the definition of the load_... to be on the Gmaps object and then alter Gmaps.loadMaps function accordingly. I've put in a pull request to the project at https://github.com/apneadiving/Google-Maps-for-Rails/pull/94.
The Gmaps.loadMaps() call wasn't the issue. So an alternative isn't necessary. The thing that was tripping me up is that in the partial enable_js was being called as false and the JavaScript that declares the new instance of the Gmaps4RailsGoogle and the function for loading it was not being called.
I have a custom version of the partial and in my case, even when enable_js (I interpret as "don't load javascript library files" for my app) is false, I still do the JavaScript that declares the new Gmaps4RailsGoogle instance and defines the load_... function.
That being said, the load_... function appears to be not working for me. It comes back with the following in my case:
TypeError: 'undefined' is not a function (evaluating 'window"load_" + key')
When I call the load_... function directly from the console (rather than the Gmaps.loadMaps call), I get a similar error:
"'undefined' is not a function (evaluating 'this.load_...()')"
Perhaps having to do with not having any markers declared? Any hints on that problem appreciated.
If I step through the steps in the load... function, the first bit that throws an error is .initialize(). Still investigating.
Related
When a rails form fails on the the front end, how is the javascript handled? e.g. a numericality error fails or a required: true option is not fulfilled.
I would like to add a callback function to this. Is there any way to execute some javascript on the failure?
There is no javascript involved on the rendering of the errors on a rails form. The way the errors are displayed are determined by a function called field_error_proc, specifically ActionView::Base.field_error_proc. You can check Ryan Bates' railcast about it
If you are submitting your form via AJAX, you can attach a listener for the ajax:success event. Otherwise the only (ugly) way I can imagine is to do something like:
$(document).on('app:form-has-errors', function() { //do what you have to do} and on the view
<script>$(document).trigger('app:form-has-errors');</script> if the object in the form has errors (#your_object.errors.any?).
I don't think it is possible in another way since the submit and re-render on errors are complete http requests that will clear any events you might bind to the document.
Rails built in validation doesn't operate on the front end (client-side), it is done on the server.
If you want to do javascript validation you will need to find a gem for this or use a jQuery library, or write the validation code yourself.
The normal way form validation is done when using vanilla Rails is like this
The invalid form content is submitted to the controller
The controller uses the content to make the ActiveRecord object
The controller tries to save the object to the Database, kicking off a set of steps that starts with checking the object's validity
The model's validators say it's not valid and "decorate" the object with error messages specifying in which ways it is not valid.
The controller sees that the save failed and renders the view that had the original form in it, providing that view with the object, now with error messages.
The view when it renders the form checks the object for error messages, if it sees any it helpfully displays them to the user. It also populates the fields with the data that the user had previously entered that it gets from the object.
I am working on grails. I have a controller it calls service to check the value and one more call to do some calculation, by the time i want user to know its processing the function. Since i am new to grails , i dont know how to implement this in my project. I tried few plugins but i didnt know how to approach this by using plugin(Step by step). I need easiest way to solve this problem even this my ajax or javascript. i searched online i didnt get one.
Please help me to solve this .
Thank you.
Grails by default allows you to call controller methods with Ajax by default, you simply need to use the remoteFunction tag (http://grails.org/doc/2.2.1/ref/Tags/remoteFunction.html).
You use this by specifying an element on your page which will be updated by the html that you controller function returns, usually a gsp template.
For example, you could have your controller call the service to check for progress, and then the controller passes this returned progress amount to your gsp template. You use this value to draw a percentage, and return that html to your original page (this is whatever the controller returns - the remoteFunction tag handles the updating for you).
I suggest having a look for some examples of the remoteFunction call and going from there.
Hope that helps.
In a Rails 3.2 app I have a jquery function that renders a chart on a DOM element
#assets/scripts.coffee.erb
$(document).ready ->
$("#chart_container").do_some_stuff
#view
<div id="chart_container"></div>
I'm in the process of ajaxifying this view to enable the user to switch the data that is presented on the chart. The problem is that the coffeescript is not triggered via the ajax response.
If I put the function within some tags on the view, everything works fine, but this is not a very 'nice' solution.
Alternatively I know that it is possible to call functions from the view.js.erb rendered by the ajax response. Something like
#view.js.erb
$('#chart_container')['myFunction']();
But my javascript knowledge is limited, and I'm having trouble working out how to name coffeescript function correctly.
I need the function to be triggered when the document is ready. But I also need to be able to call the function manually via the ajax response. How should I set this up?
(I suspect this is a very basic javascript question, and not very well asked, but I appreciate any guidance).
You can wrap the code to a function at first
#assets/scripts.coffee.erb
$(document).ready ->
$(document).chart_action()
$.fn.chart_action = ->
$("#chart_container").do_some_stuff
Then call this function at your ajax response template
#view.js.erb
$(document).chart_action()
Upate Version
Thanks for #muistooshort's suggestion, it's better to use a custom namespace instead of polluting jQuery's, even in small usage.
So, refactor the above
# Custom functions for this app
class App
chart_action: ->
$("#chart_container").do_some_stuff
# Normal code for initializing page
app = new App
$(document).ready ->
app.char_action()
# view.js.erb
app.chart_action()
In a Rails 3.2 app I have a javascript function that is triggered by the presence of a DOM element with class "trigger". (this function adds UI elements).
This works perfectly, except in partials that are rendered by ajax calls.
For example in an index view, when the page is initially rendered the function is correctly called and the UI elements rendered.
If the user then filters or paginates or otherwise interacts with the index via ajax, the function is not called and the UI elements are not applied when the partial is re-rendered via the ajax call.
So, how can I make javascript aware of elements that are rendered via ajax calls?
I think you should use jQuery.on() method.
eg
$("#content").on("click", "input[type='checkbox']", function(event){
// do some stuff
});
Seems this question has been asked before, but I was not using the correct search terms.
In case anyone else stumbles across this, the answer is...
Adding $('.switch')['bootstrapSwitch'](); to the end of your some_action.js.erb file should do the trick....
And the full question is
bootstrap-switch functionality does not load when I re-render a partial with "respond_do"
I've seen a lot of people with this issue, but for some reason I am unable to find a solution that works.
I'm getting this error:
Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh'
Here's the breakdown of what is happening.
I'm binding this event:
$('#person').bind('pagebeforeshow', function(e, data){
Person.getPersonData();
});
In the getPersonData() method, I'm using the underscore _.after function to render a template and refresh three listviews after all my ajax calls have been made. I'm using Knockout.js to apply some data bindings.
var tmplMarkup = $('#tmpl-person').html();
var compiledTmpl = _.template( tmplMarkup, {data: Person.data} );
$('#person-wrapper').html(compiledTmpl);
$('#person-info-wrapper').listview('refresh');
$('#person-related-wrapper').listview('refresh');
$('#person-groups-wrapper').listview('refresh');
$('#person-notes-wrapper').listview('refresh');
ko.applyBindings(Person.data, document.getElementById('person-notes-form'));
I'm not sure what I'm doing wrong here. I've tried binding to different page loading events, and no luck. I've even tried using setTimeOut to refresh the list views several seconds after the ajax calls are made, but that did not help either.
Thanks in advance.
This problem can be easily solved.
Use this:
$('#listview-id').listview().listview('refresh');
Where #listview-id is your listview id (or any other reference), first listview() will initialize it and a second one will refresh it.
If you want to find more about this problem you can find it in this ARTICLE, to be honest it is my personal blog article. Or find it HERE. Look for the chapter called: Markup enhancement problems
try as below
$('#person-info-wrapper ul').listview();
$('#person-related-wrapper ul').listview();
$('#person-groups-wrapper ul').listview();
$('#person-notes-wrapper ul').listview();