I am trying to call a function once a selection is made in the drop down menu. Here is my code for the drop down menu in my list.gsp for the 'Code' domain class:
<td><g:select name="data" from="${codeInstance.datas.language}"
onchange="${remoteFunction(action: 'translationById')}"/>
</td>
And here is the function I am trying to call. This is in my CodeController:
def translationById = {
println "Fine"
//println params;
}
I am just trying to print out "Fine" so I know that the function was called, but "Fine" never gets printed. Why is the function not getting called?
Instead of using a closure, use a method, like:
def translationById() {
println "Fine"
//println params;
}
Also, use some browser debugger like firebug or similar to see if error message is being displayed.
What happens if you put an alert inside the onchange event instead of a remoteFunction? If the alert is displayed, then I think your problem is with the prototype library. Add the prototype library to your header. Like <g:javascript library="prototype" />.
The syntax looks fine to me. Try to make sure that your 'codeInstance' and 'datas' are not null. Also, try and pass in the controller name like this:
remoteFunction(action: 'translationById', controller: 'code')
The new norm in grails is to use methods instead of closures:
def translationById(){
println "fine"
}
Related
I'm using Foundation 6 and Filterrific gem in a Rails project. I'd like to trigger the following:
$(document).on('changed.zf.slider', Filterrific.submitFilterForm);
'changed.zf.slider' is the event that Foundation emits. Filterrific.submitFilterForm is the function I'd like to call. However, it doesn't work even if I bind to the event like this:
$(document).on('changed.zf.slider', function() { Filterrific.submitFilterForm() });
The code above is defined AFTER Filterrific code is loaded in the browser.
Is this an issue with Filterrific jquery code or should I use a different method for binding to event?
It works fine if I simply copy the original Filterrific.submitFilterForm method body to my binding like
$(document).on('changed.zf.slider', function() {
var form = $("#filterrific_filter"),
url = form.attr("action");
$.ajax({...
... but it feels like it's not the way to go right? ;)
The tricky thing here is that Filterrific.submitFilterForm depends on this context passed to it and looks for the parent <form> element.
So you need to call the function with a right context, e.g.:
$(document).on('changed.zf.slider', function() {
Filterrific.submitFilterForm.call($('#filterrific_filter .slider'))
});
According to the documentation (http://jquerymobile.com/demos/1.2.0/docs/api/events.html), the pageinit event should be called after all the widgets and plugins for a jQuery mobile page have been executed. So, I believe I should be able to interact with elements on that page with impunity in the event callback. However, I listen for the page to initialize and then try to interact with a button on the page, and I get the following error:
cannot call methods on button prior to initialization; attempted to
call method 'disabled'
I've put together a codepen, to show you:
http://codepen.io/mattsnider/pen/mvcbD
What gives? Does the pageinit not work as documented or is this a bug?
There's nothing wrong with your pageinit event. The wrong lies in the <a> tag.
To remove the error you're getting, you'll have to make two changes to your code :
Its not disabled, its disable
before your call the disable method, you have to call button() method. Thus, you would've initialized the button element.
This is how the code will look like now :
$('#ageNext').button().button('disable');
But, if you do this, you'll get an error like this :
Uncaught TypeError: Cannot call method 'addClass' of undefined
The culprit lies in the code which invokes the disable method
disable: function() {
this.element.attr( "disabled", true );
this.button.addClass( "ui-disabled" ).attr( "aria-disabled", true );
//^^ Uncaught TypeError: Cannot call method 'addClass' of undefined
return this._setOption( "disabled", true );
}
You see the this.button there? This will become undefined if the element is not a real button.
So that said, I've got the disable to work only on input[type=button] and <button/> type of elements. For some reason, this doesn't work as expected on <a/> impersonating buttons. I've got this to work by manually adding ui-disabled class to the element, like this :
$(document).on('pageinit', '#age', function (e) {
$('#ageNext').addClass('ui-disabled');
});
Demo : http://jsfiddle.net/hungerpain/gzAHT/
This may also happen if you have unmatched HTML tags, especially troubling is </div> without a previously declared <div>.
First thing to check might be that your HTML is well formed.
I've loaded an ASP.NET MVC viewModel into KnockoutJS using ko.mapping.fromJS(Model).
My viewModel looks something like this:
public IEnumerable<FunkyThing>funkyThings;
public FunkyThing selectedFunkyThing;
Each FunkyThing has a string property funkyThingName.
The mapping worked fine and I can see all the funky things in the table with their names.
I want to add a quick refresh button. So I've created a simple button and then data bound the buttons click to a knockout function refresh which looks something like this:
model.refresh= function () {
var url = '#Url.Action(MVC.FunkyThings.RefreshJSON())';
$.getJSON(url, function (returnedData) {
ko.mapping.fromJS(returnedData, {}, model.funkyThings);
});
The refresh function is succesfully called which in turn calls the RefreshJSON method on the server. The server passes back JSON data - an updated array of funkyThings, which I can see within chrome when I hover over returnedData in chrome's debugger.
However unfortunately after the mapping function has been called the bindings break:
Uncaught Error: Unable to parse bindings.
Message: ReferenceError: funkyThingName is not defined;
Bindings value: text: funkyThingName
And I'm not sure why...?
Is model.funkyThings an observable? If it is, then you can try passing it into the mapping method as a function:
ko.mapping.fromJS(returnedData, {}, model.funkyThings());
Failing that, are you sure that the structure of the JSON returned by the refresh method is correct?
Ah, if you're getting a JSON string back, so you need to call the fromJSON method of the mapping plugin:
ko.mapping.fromJSON(returnedData, {}, model.funkyThings);
You might need the parenthesis on funkyThings here too, but try it without first.
If the returned object is in the correct format and also the binding is well done you
just need to do:
model.FunkyThings(returnedData).
How do you invoke a bean method from Javascript in PrimeFaces?
I have the following menuItem:
<p:menuitem id="toggleAlarms" icon="ui-icon-cancel" rendered="#{navigationBean.admin}" value="Cancel Alert" update=":alarmMessages" action="#{alarmsBean.toggleAlertOff()}"/>
When I click on that item in the UI the method gets called.
But when I have this element:
<p:messages id="alarmMessages">
<script>
jQuery('#alarmMessages').effect("pulsate", {times:5}, 1000 );
jQuery('#alarmMessages').show();
$('#alarmMessages').click(function() {
jQuery('#toggleAlarms').click();
alert('fool');
})
</script>
</p:messages>
If I click on the messages object on the UI, I can see the alert message with fool in it.
However, I never see the toggleAlarms.click() method invoke the alarmsBean.toggleAlertOff() call.
Am I doing something wrong?
any chance that #{navigationBean.admin} returns false ?
cause if so you wont be able to find it in the DOM... (maybe better use style=display:none)
also , your selector might be wrong if the menuitem is inside form try jQuery('#someFormID\\:toggleAlarms').click(); do view source on your web page to see the right id of the menuitem
finally try the same with commandButton instead (not sure that menuitem will respond as expected to .click())
Update
in order to check if your jquery selector is right use alert($('#toggleAlarms').length) instead of alert('fool');
I'm trying to migrate from using inline event triggers to using event listeners using Prototype's Event.observe function. There are a few inline commands that I don't know how to handle using the function call.
I want to move from:
<form id='formFoo' action='whatever.php' onsubmit="return Foo.verify(this);">
To an event call:
Event.observe('formFoo', 'submit', Foo.verify);
This of course will not work, as I need a return value from the function I call to determine whether the form gets submitted or not.
How do I do this using event handlers?
The easiest way to do this is probably Event.Stop from prototype. This works for me (put this in any script block):
Foo = { verify: function(){ return false } };
Event.observe(window, 'load', function() {
Event.observe('formFoo', 'submit', function(e){
if(! Foo.verify($('formFoo'))){
e.stop();
}
});
});
It stops every form submission; you will just have to change Foo.verify to do what you wanted.
Explanation: When the submit event is triggered, prototype passes the handler a prototype Event object representing the event, and the stop method on that object prevents the submit. The rest is just setting up the event.
Minor note: Among other things, passing Foo.verify directly as a handler will cause verify to be called as a function, not a method (this will be the global object within the call, rather than Foo). That situation might be okay - if verify doesn't use this, you're fine. Be aware of the difference, though.