How can I get the response from an ajax call made with g:remoteLink, using jquery ?
I have tried using nSuccess="removeTask(e)" and getting the response with e.responseText or e.response, but nothing works.
When using Grails with the JQuery plug in and using the remote functions like remoteLink, the code that is generated for the remote function is something like this:
success: function(data, textStatus){ jQuery('#results').html(data); }
This is if for example you set the update parameter as "[success:'results']". As you can see the main function receives a data parameter which I think is what your looking for, so if you need to call another function that uses that value, you could do something like this:
<g:remoteLink controller="yourcontroller" action="youraction" update="[success: 'results']" onSuccess="yourFunction(data) ">Your link</g:remoteLink>
This will generate javascript code like this:
success:function(data,textStatus){ jQuery('#results').html(data); yourFunction(data); }
Hope this helps!!
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'))
});
after several rounds of research, I found there is no clear answer about the situation like below:
I have a js file called 'AAA.js', and there is simple code in side like this:
var AAA = {
listenForMenuLayer: function () {
console.log("menu initiated");
$('.nav-menu').on('click', function() { console.log("menu clicked")});
}
init: function(){
this.listenForMenuLayer();
}
};
And in the dart, I wrote like below (using 'dart:js'):
js.context['AAA'].callMethod('init');
Then, when I run it, everything looks fine, the "menu initiated" shows properly, which means the 'listenForMenuLayer' is initiated, but when click on the '.nav-menu', there is nothing happened. (I check many times, there is no spelling error or else)
My question is: Can Dart accept this kind of initiating of external JS event? or we should re-write those JS events at all, please advise, many thanks.
Updates:
I found that if we write the js code like above, the jquery will not be initiated properly, which means all the features begin with '$' will not be functional.
guys, I update it to using 'package:js/js.dart';
#JS('AAA.init')
external void aInit();
then some where, just simply call after including:
aInit();
I need to call at server side, an URL and work with the HTML content off the response. For this I'm using the HTTP library from Dart like this :
http.read('myUrl').then((contents) {
//contents to HTMLDocument format //Need to transform the String contents to HTML object
});
And I want to convert the response to a HTMLDocument (or other object I don't know) to be able to retrieve element in it by HTML tag or CSS class, like with JQuery for example.
Does anybody have an idea to perform this ?
You canuse html5lib package from pub. It allows to parse HTML and present it DOM like element tree on server side. The element tree will eventually "be compatible with dart:html, so the same code will work on the client and the server" in the future. See the readme for a getting started example.
"I need to call at server side"
Not sure exactly what you mean.
If you are running in the browser and calling the server you could try using a DocumentFragment. Something like this:
http.read(url).then((html) {
var fragment = new DocumentFragment(html);
var element = fragment.query('.foo');
// code here...
});
Otherwise if you're running server side, as the other answer mentions, html5lib is the way to go. Last time I looked the query() method in html5lib only supported tagname queries not classes, or ids.
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).
I have a select tag on my page, I have made via jQuery on domready a listener for the change event. In this listener I redirect the user to the same page with a parameter in the url.
When I test the functionality manual, it works very well.
When I run the test, it fails, the redirect doesn't work.
How I can make it work ?
#javascript
Scenario:
When I select "2010" from "year_select"
And I wait 5 seconds
Then "2010" should be selected for "year_select"
Then I should see "time_sheet?year=2010" with html
The test fails, I see time_sheet?year=2011 (the default value) in my html source, manual I see the correct value. It is not updated via Javascript, but according to te year variable passed in the url (after the redirect)
My jQuery code:
jQuery(document).ready(function(){
var yearSelect = jQuery("#year_select");
yearSelect.change(function(){
window.location = "/time_sheet_admin?year="+yearSelect.val();
});
});
What I make wrong ?
I think u have missed out _admin in the scenario. Use time_sheet_admin instead of time_sheet in the scenario. If my suggestions is useless sorry for that.
What I usually do for testing complex JS stuff is to put them in a function and then test if that function was called:
selectChanged = function() {
window.location = "/time_sheet_admin?year="+jQuery("#year_select").val();
}
*note no need for the variable assignment because you only called it once.
then in your feature:
Then I should see "time_sheet?year=2010" in the url
step definition:
When /Then I should see "time_sheet?year=2010" in the url/ do |seconds|
page.execute_script("selectChanged()")
end