There is few topics on the same subject, but non completely satisfied me!
I want to define the source of my autocomplete through a data attribute, like so:
<input data-behaviour='autocomplete' data-source='/path/to/source'>
I'm unable to get it programmatically through the source method:
$ ->
$('[data-behaviour~=autocomplete]').autocomplete
source: (req, resp) ->
return $(this).data('source')
Here is a non-working snippet to play with...
EDIT: a workaround I've found is to set it through the create method:
$ ->
$('[data-behaviour~=autocomplete]').autocomplete
create: (event, ui) ->
$(this).autocomplete( "option", "source", $(this).data('source') )
Check this snippet
But I don't really like this approach, I'm pretty sure better can be done
I'm not familiar with coffeescript; the jQuery UI automplete have a source option that allow you to make some custom stuff; in your case you can use the third option (function) using request and setting the response parameter.
Function: The third variation, a callback, provides the most
flexibility and can be used to connect any data source to
Autocomplete. The callback gets two arguments: A request object, with
a single term property, which refers to the value currently in the
text input. For example, if the user enters "new yo" in a city field,
the Autocomplete term will equal "new yo". A response callback, which
expects a single argument: the data to suggest to the user. This data
should be filtered based on the provided term, and can be in any of
the formats described above for simple local data. It's important when
providing a custom source callback to handle errors during the
request. You must always call the response callback even if you
encounter an error. This ensures that the widget always has the
correct state. When filtering data locally, you can make use of the
built-in $.ui.autocomplete.escapeRegex function. It'll take a single
string argument and escape all regex characters, making the result
safe to pass to new RegExp().
Ref: http://api.jqueryui.com/autocomplete/#option-source
Code:
$ ->
thisEl = $('[data-behaviour~=autocomplete]');
$('[data-behaviour~=autocomplete]').autocomplete
source: (req, resp) ->
resp(thisEl.data('source'));
Is only an example you have to implement the filtering pattern.
Demo: http://codepen.io/anon/pen/gjmHn
Related
I am trying to pull the results of another trigger (fields) to then be appended to the endpoint for another trigger. Basically trying to get the custom fields. I may also need to rule out any NULL fields. I have used bundle.inputdata before, but not sure if I need to use that or maybe something like bundle.outputData? The trigger is custom_fields.
Here is what I tried:
const options = {
url: 'https://edapi.zyx.com/v1/Subscribers?PageSize=2&Fields={bundle.outputData.custom_fields}',
method: 'GET',
headers: {
It sounds like you're looking to implement Custom/Dynamic Fields.
To accomplish this, you'll want to create a function that makes a request to your endpoint and returns an array of objects like -
[{"key":"field_1"},{"key":"field_2"}]
Add that function at the end of your inputfields array and once we're done listing the static fields, we'll call and load each returned array index as a custom field.
You should be able to parse out any null values in your function as well before returning.
You can get some additional information here -
https://github.com/zapier/zapier-platform/tree/master/packages/cli#customdynamic-fields
I'm trying to do muti-values autocomplete.
http://jqueryui.com/autocomplete/#multiple
I am trying to make sense of the code but I cannot figure out the response part. (I am new to javascript. I'm doing a project in Grails which I started to learn just a month ago... I'm a total newbie...)
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter // Please explain this part for me
(availableTags, extractLast( request.term ) ) );
Please explain response( $.ui.autocomplete.filter part for me. Also if I want to use JSON source from my Grails controller, how can I replace availableTags?
Thanks in advance.
FWIK code you posted is part of initialization of widget.
While initializing you need to mention the source for the dropdown.
Source can be one of following:
1) Array
2) String
3) Function( Object request, Function response( Object data )
To answer response part: It is a function which takes care of filtering the result for widget.
To answer JSON source part:
If Source is JSON then you need to specify the host who will be serving that JSON. Whenever user types in on widget there will be call to host with request parameter named as TERM. So you need to make sure to filter it from request and return the JSON for that request.
Read more about it here:
View source for function in autocomplete with Array as input.
http://jqueryui.com/autocomplete/#multiple
View the Source definition and API docs:
http://api.jqueryui.com/autocomplete/#option-source
Response under event on API documentation is different than response mentioned in posted code above.
For ui.autocomplete.filter method refer to source code of the JS that is being imported that might give you better understanding of the code. But as per my understanding response function being called in above code under source is a callback to delegate back to autocomplete after extracting last term from array.
ui.autocomplete.filter method will filter the desired elements from list being provided and callback the same function to extract more. As I read it does pull one element out at a time. (refer to extract and split functions in under view source above)
Sorry for the big answer but read the documentations and other posts, article about it that would give better idea about the code.
I have two Relay mutations that I'm nesting to first add an object then set its name. I believe what I'm passing to the second mutation is in fact data fetched by Relay, but it appears to disagree with me. The code in the React view is as follows:
Relay.Store.update(
new AddCampaignFeatureLabelMutation({
campaign: this.props.campaign
}),
{
onSuccess: (data) => {
Relay.Store.update(
new FeatureLabelNameMutation({
featureLabel: data.addCampaignFeatureLabel.featureLabelEdge.node,
name: this.addLabelInputField.value
})
);
},
onFailure: () => {}
}
);
This does work, but gives me a warning:
Warning: RelayMutation: Expected prop `featureLabel` supplied to `FeatureLabelNameMutation` to be data fetched by Relay. This is likely an error unless you are purposely passing in mock data that conforms to the shape of this mutation's fragment.
Why does Relay think the data isn't fetched? Do I maybe need to explicitly return the new featureLabel in the payload somehow?
I ran into the same problem and it took me some time to figure out what was going on, so this might help others:
As the warning says, you have to provide an entity to the mutation that was fetched by Relay. BUT what the warning does not say is that it has to be fetched with the mutation in mind.
So basically you have to add the mutation you are going to execute on it in the future in the initial query like this:
fragment on Person {
firstname,
lastname,
language,
${UpdatePersonMutation.getFragment('person')}
}
This will add the necessary pieces to the entity in the store which are needed by the mutation.
In you case what you have to do is to add the FeatureLabelNameMutation getFragment to your AddCampaignFeatureLabelMutation query. This will bring back your featureLabel entity with the necessary information for the FeatureLabelNameMutation to succeed without warning.
The Relay documentation is very very poor on this and many other areas.
Relay expects any fragments for your mutation to come from your props. Since you're using data coming from your callback and not something from your container props Relay raises that warning.
Take a look at the source: https://github.com/facebook/relay/blob/master/src/mutation/RelayMutation.js#L289-L307
I have an MVC application that is rendering rendering the following javascript on the client:
var rawData = [{"ID":5317,"Code":"12345","Description":"sometext \u003c/= 100"}];
The JSON data is a result of serializing an object using the JavaScriptSerializer and then running the result through the Html.Raw() helper.
This data is then used to load a knockout view model and display a popup on hover. In the popup, only the "sometext" portion of the "Description" property is being shown as the string gets converted to the unencoded version when setting the rawData variable (i.e. \u003c is converted to <).
Also, this data ends up being sent back to the server upon saving of data, and the ASP.NET validation kicks in and fails the request as it detects the "
I've worked around this, temporarily, by adding a computed property to my Knockout View Model like so:
self.DescriptionEncoded = ko.observable('');
self.Description = ko.computed({
read: function() {
return self.DescriptionEncoded ();
},
write: function(value) {
self.DescriptionEncoded($('<div/>').text(value).html());
}
});
In this way I can access the escaped property from my popup and the unescaped value is not sent back to the server when I serialize my viewmodel (using .toJSON()).
Is there a more global way to handle this rather than creating computed properties for every object that may have some text that appear to be a bad request while not compromising on security? I've considered an overload/helper to the serialization routine that would accept a list of properties to apply a Find/Replace I am thinking this will have to be handled on a case by case basis in a manner similar to what I've already done. As for sending the data back to the server, I could override the toJSON() method on my view model and delete the properties that don't need to be sent back, but that won't help me with my popup.
Thoughts?
You can encode using Ajax.JavaScriptStringEncode. You might also get the AntiXSS library and use it for the encoding.
I hope I understood your question well.
I have a web page with lots of small images on it. In a typical scenario user clicks on image and expects it to change with a new image.
Requirements:
When user clicks on image, it should be immediately known to a controller in an Ajax way.
Some strings should be passed to a controller when user clicks on image.
Controller does its job and returns another image (which replaces old one).
Along with image controller returns a couple of extra strings (such as completion status).
Web page updates old image with new one and also updates other parts with these new strings.
Number of images on a page varies but potentially it can be a couple of dozens.
Question: What Ajax technique should be used here? I'm quite new to Ajax and don't feel solid with patterns. Should it be Json or something else?
Any code example would be very very welcome and helpful.
Thank you.
Well it sounds like you need a Event observer on the image object. On that image object, you could have various custom attributes, such as imageid="2", etc. With the element being observed onclick, you'd read the attributes of the elements and pass them on to an AJAX call. I'm not sure if the image is known by the database or would it be available on the page itself. Maybe a back/previous button? In either case, the AJAX call could either return JavaScript directly which then gets parsed to update the DOM and replaces the image with the new image source, or it could return a JSON response which then needs to get read and parsed by the AJAX callback and then updates the DOM. Easiest being to return JS code which gets parsed, but I prefer to have all my JavaScript in one file and not have it all over the place mixed with server side code.
It really depends on what AJAX library you are using.
With jQuery, you might do something like this.
$("#buttonImage").click(function () {
var imageid = $(this).attr('imageid');
$.getJSON("/controller/get_image/" + imageid,
function(data){
$("#buttonImage").attr("src", data.imagesrc);
});
});
And your /controller/get_image/123 would return a JSON response like...
{ 'imagesrc' : '/my/image.jpg' }
As far as I known, the only browser-safe way to change an image is by assigning a new URL to it's src attribute. If you return an image to a request that pass some parameters, it might prevent client-side cashing of the images. For these reasons, I would treat separately the transfer of textual data and images.
The completion status can always be return as the HTTP status text but if more information is needed from the server, you can always return it in JSON or XML, the simplest being JSON.
The responsiveness could be improved by preloading images on the mouseover event.