I'm trying to filter output for emials autocomplete suggestions as I need to add data attributes to them using ajax.suggestions-post hook but I'm not able to locate code responsible for rendering an output for
$this->Plugins()->RunHook('ajax.suggestions-post', array(&$aResult, $sQuery, $oAccount, $iLimit));
if ($iLimit < \count($aResult))
{
$aResult = \array_slice($aResult, 0, $iLimit);
}
return $this->DefaultResponse(__FUNCTION__, $aResult);
It is a part of DoSuggestions() function which uses autocomplete from jQuery UI but I'm missing part where is functionality to get $aResult bits and split them between "Full Name" bit and <email> bit for a suggestions which output looks like:
<div id="ui-id-X" tabindex="-1" class="ui-menu-item-wrapper">"Full Name" <myemail#test.com></div>
Any tips how $aResult array can be passed to jQuery UI autocomplete?
It came up is not done via jQuery but RainLoop's JavaScript oEmailItem.toLine function (app.js file).
Related
I am using Grails 4. My book domain has a date field called publishDate. I use <f:all bean="book"/> in my edit view to display the input fields. The Fields plugin displays 3 dropdown boxes with the day, month, and year in the html for the date field in the book.
Would you teach me how to replace the Grails Datepicker with the jQuery UI datepicker please?
Thanks!
If the old community plugins were still up, you could search through their code for your solution. Since Grails no longer supports its community, you can try looking through github for an older plugin. This would be your quickest solution.
In case this is helpful to you or anyone else who comes across this issue: what we have done is create our own tag to accomplish this. You'll have to adjust it a bit to make it work for you, and include the necessary assets from jquery ui, but the tag is something like:
/*
* Render an input field that includes a calendar popup.
*/
def dateField = { attrs ->
if (!attrs.id) {
out << "'id' is a required attribute."
return
}
def additionalKeys = attrs.keySet() - ['id','name','value','className']
def passthroughAttrs =""
additionalKeys.each{key->
passthroughAttrs += "${key}='${attrs[key]}' "
}
out << "<input type='text' class='calendarField ${attrs.className ?: ''}' id='${attrs.id}' name='${attrs.name ?: attrs.id}' value='${attrs.value ?: ''}' autocomplete='off' "
out << "onfocus=\"jQuery(this).datepicker().datepicker('show');\" "
out << "$passthroughAttrs/>"
out << "<img id='cal_${attrs.id}' class='calendarIcon' alt='Show Calendar' title='Show Calendar' src='${assetPath(src: 'calendar.png')}' "
out << "onclick=\"jQuery('#${attrs.id}').focus();\"/>"
}
Usage is something like:
<ns:dateField id="someUniqueID" name="fieldName" />
As stated by Daniel you can write you own tag and that is something that I have done as well. I would also like to note that the html input tag has a date type.
<input type="date" id="some-id">
That has worked for me instead of doing all the work of creating a new tag.
The downside (in my opinion) to the html input is that some of the functions do not have complete browser support (min, max). At least they were not working for me. Also if you use the jQuery ui in some spots and the html in others, the data is submitted differently on the post request.
The input tag would give you something like yyyy-mm-dd
while the jQuery gives you something like mm-dd-yyyy.
I'm using Rails 5. I want to create a message that flashes on my page after I submit an AJAX form and an error comes back. I'm not using twitter bootstrap and would only consider using that if it doesn't screw up any of the other styling I already have. Anyway, on my view I have this
<div id="error_explanation" class="alert alert-success"></div>
and in my controller I have this
displayError('#{error_msg}')
which invokes this coffee script ...
#displayError = (msg) ->
...
$("#error_explanation").text(msg)
As you guess, right now, the message just displays in plain text . I would like it to flash and then disappear. How do I do that?
If you just need the message to fade out after a set amount of time, then change that last line of CoffeeScript to:
$("#error_explanation").text(msg).delay(3000).fadeOut()
If you need something a bit more complex (e.g. don't fade out if hovered, stacked notifications, dismiss button etc), or ready-styled - then you might want to investigate using a JS library such as toastr.
this should help get you started:
show_ajax_message = (msg, type) ->
$("#flash-message").html "<div id='flash-#{type}'>#{msg}</div>"
$("#flash-#{type}").delay(5000).slideUp 'slow'
$(document).ajaxComplete (event, request) ->
msg = request.getResponseHeader("X-Message")
type = request.getResponseHeader("X-Message-Type")
show_ajax_message msg, type
https://www.google.com/search?q=flash+messages+session+rails+ajax
Based on nothing but your coffee script, here's how:
Not familiar with CoffeeScript and its syntax, so here's plain JS code.
setTimeout(function() {
$('#visitLink').hide()
}, 2000);
That'll make the message disappear after 2 seconds.
I have been scouring the web for a clear answer on how to query for an element generated by a dom-repeat element from Dart code.
sample.html
<dom-module id="so-sample>
<style>...</style>
<template>
<template is="dom-repeat" items="[[cars]] as="car>
...
<paper-button on-click="buttonClicked">Button</paper-button>
<paper-dialog id="dialog">
<h2>Title</h2>
</paper-dialog>
</template>
</template>
sample.dart
I'll omit the boilerplate code here, such as imports or the query to my database to fill the cars property ; everything works fine.
...
#reflectable
void buttonClicked(e, [_])
{
PaperDialog infos = this.shadowRoot.querySelector("#dialog");
infos.open();
}
This generates the following error :
Uncaught TypeError: Cannot read property 'querySelector' of undefined
I have tried several 'solutions', which are not, since nothing works.
The only thing I saw on quite a lot of threads is to use Timer.run() and write my code in the callback, but that seems like a hack. Why would I need a timer ?
I understand my problem may be that the content of the dom-repeat is generated lazily, and I query the items 'before' they are added to the local DOM.
Another advice I didn't follow is to use Mutation Observers. I read in the polymer API documentation that the observeNodes method should be used instead, as it internally uses MO to handle indexing the elements, but it again seems a bit complicated just to open a dialog.
My final objective is to bind the button of each generated model to a dedicated paper-dialog to display additional information on the item.
Has anyone ever done that ? (I should hope so :p)
Thanks for your time !
Update 1:
After reading Gunter's advices, although none of them actually worked by themselves, the fact that the IDs aren't mangled inside a dom-repeat made me think and query paper-dialog instead of the id itself, and now my dialog pops up !
sample.dart:
PaperDialog infos = Polymer.dom(root).querySelector("paper-dialog");
infos.open();
I now hope that each button will call the associated dialog, since I'll bind data inside the dialog relative to the item I clicked ~
Update 2:
So, nope, the data binding didn't work as expected: All buttons were bound to the item at index 0, just as I feared. I tried several ways to query the correct paper-dialog but nothing worked. The only 'workaround' I found is to query all the paper-dialog into a list and then get the 'index-th' element from that list.
#reflectable
void buttonClicked(e, [_])
{
var model = new DomRepeatModel.fromEvent(e);
List<PaperDialog> dialogs = Polymer.dom(this.root).querySelectorAll("paper-dialog");
dialogs[model.index].open();
}
This code definitely works, but it feels kind of a waste of resources to get all the elements when you really only need one and you already know which one.
So yeah, my initial problem is solved, but I still wonder why I couldn't query the dialogs from their id:
...
<paper-dialog id="dialog-[[index]]">
...
</paper-dialog>
#reflectable
void buttonClicked(e, [_])
{
var model = new DomRepeatModel.fromEvent(e);
PaperDialog dialog = Polymer.dom(this.root).querySelector("dialog-${model.index}");
dialog.open();
}
With this code, dialog is always null, although I can find those dialogs, correctly id-ied, in the DOM tree.
You need to use Polymers DOM API with shady DOM (default). If you enable shadow DOM your code would probably work as well.
PaperDialog infos = new Polymer.dom(this).querySelector("#dialog")
I searched a lot on net but couldnt find any solution. I am making a webapp in which I want 2 textbox to get data input from user. I want autocomplete feature in this textbox. The list of tags for autocomplete is available locally. I tried listview but what I want is that after user select some option from autocomplete hints, the textbox should have the selected value, and through some object, i should get the value of textbox to be used by javascript/php. This is a very basic thing, but I'm not able to do. Please help me out
I tried this jsfiddle.net/ULXbb/48/ . But the problem in this is that both listview gets same value after I select something in 1 listview.
In order not to add the same value to both search input, you need to target them using .closest(), .next(), .prev() and .find(). jQuery-Mobile, enhances list-view with data filter in a different way.
Demo
<form>
<input>
</form>
<ul data-role="listview">
<li>
<a>text</a>
</li>
</ul>
The form where the input is located, is on the same level of the ul. To target the input box, you need to use .prev('form').find('input'). Check the demo and the new code below.
$("input[data-type='search']").keyup(function () {
if ($(this).val() === '') {
$(this).closest('form').next("[data-role=listview]").children().addClass('ui-screen-hidden');
}
});
$('a.ui-input-clear').click(function () {
$(this).closest('input').val('');
$(this).closest('input').trigger('keyup');
});
$("li").click(function () {
var text = $(this).find('.ui-link-inherit').text();
$(this).closest('[data-role=listview]').prev('form').find('input').val(text);
$(this).closest('[data-role=listview]').children().addClass('ui-screen-hidden');
});
Thanks #user714852 I have extended your answer just add this line in the script tag:
$("#mylist li" ).addClass('ui-screen-hidden');
It will do wonders.
A working example: Listview Autocomplete - Enhanced
I have a multi-page document and I'm binding to the pageshow event of page "myId":
$('#myId').live('pageshow', renderMyIdTempalates);
I'm applying my JSON templates with PURE like this
function renderMyIdTempalates(event) {
$.mobile.showPageLoadingMsg();
var $page = $("#myId");
// do ajax call
$page.children( ":jqmData(role=header)" ).directives(...).render(data);
$page.children( ":jqmData(role=content)" ).directives(...).render(data);
$.mobile.hidePageLoadingMsg();
}
Initially I was using
$('#myId').directives(...).render(data);
to apply my templates. This caused problems since the selector didn't include the jqm attributes. So I used the jqmData method to grab the header and content to apply my templates. This works fine, but how do I select the entire document that I'm working with? I would prefer to apply my templates to the entire document once.
I tried:
$(":jqmData(role=page)") // selects all pages
$(":jqmData(id=myId)") // no luck
Any ideas?
the selector
div:jqmData(id="myID")
should work. just remember that myID should not be the id of that div.That page div should have a parameter data-id="myID"