Ajax search Before Post (Freemarker)
Description
This example shows how to create a Freemarker component that makes an AJAX call to the Lithium REST API using JQuery to render a list of messages that match a search word after you'...
Forum Discussion
Doug, thanks for this example. We implemented it, but ran into some problems. We fixed them, and I want to share the modified code.
<#assign result_list_size = 3 />
<#assign subject_input_class = "lia-form-subject-input" />
<#assign results_label = text.format("custom.component.ajax_search_before_post.results_label") />
<@liaAddScript>
;(function($) {
if (typeof LITHIUM.CUSTOMER == "undefined") {
LITHIUM.CUSTOMER = {};
}
if (typeof LITHIUM.CUSTOMER.EXAMPLE == "undefined") {
LITHIUM.CUSTOMER.EXAMPLE = {};
}
LITHIUM.CUSTOMER.EXAMPLE.AjaxSearch = function() {
$(document).ready(function() {
$(".${subject_input_class}").each(function(index, subject_input) {
var subject_input = $(subject_input);
subject_input.parent().append("<div class='ajax-message-subject-search-results'></div>");
subject_input.blur(function() {
var subj_input = $(subject_input);
var subjectValue = subj_input.val();
if (subjectValue.length > 0) {
$.ajax({
type: "GET",
url: "/${community.id}/restapi/vc/search/messages",
data: ({
"q":subjectValue,
"page_size":"${result_list_size}",
"restapi.response_style":"view",
"xslt":"json.xsl"
}),
success: function(result) {
$(subj_input).parent().find(".ajax-message-subject-search-results").each(function(index, results_div) {
if (result.response.messages == null || result.response.messages.message.length < 1) {
$(results_div).empty();
} else {
var msgMarkup = "<div><span>${results_label}</span></div>";
msgMarkup += "<table class='lia-list-wide'>";
if (typeof result.response.messages.message.length === 'undefined') {
msgMarkup += "<tr><td><a href='" + result.response.messages.message.view_href + "'>" + result.response.messages.message.subject.$ + "</a></td></tr>";
} else {
$.each(result.response.messages.message, function(index, msg) {
msgMarkup += "<tr><td><a href='" + msg.view_href + "'>" + msg.subject.$ + "</a></td></tr>";
});
}
msgMarkup += "</table>";
$(results_div).empty().append(msgMarkup);
}
});
}
});
}
});
});
});
};
})(LITHIUM.jQuery);
LITHIUM.CUSTOMER.EXAMPLE.AjaxSearch();
</@liaAddScript>
The typeof conditional check is needed there because the json XSLT returns a single element as the object itself instead of a one-element array. I think the XSLT should be updated so that all results are returned as arrays. This will help avoid special casing like this.
At LiNC this year, it was asked how to enhance this version to support an idle time lookup instead of an onBlur lookup. We have done this in our Tech Zone implementation. Here are the mods to the version I posted last. This version will initiate a search after 750 ms of idle time (as well as on blur).
<#assign result_list_size = 3 />
<#assign subject_input_class = "lia-form-subject-input" />
<#assign results_label = text.format("custom.component.ajax_search_before_post.results_label") />
<@liaAddScript>
;(function($) {
if (typeof LITHIUM.CUSTOMER == "undefined") {
LITHIUM.CUSTOMER = {};
}
if (typeof LITHIUM.CUSTOMER.EXAMPLE == "undefined") {
LITHIUM.CUSTOMER.EXAMPLE = {};
}
LITHIUM.CUSTOMER.EXAMPLE.AjaxSearch = function() {
$(document).ready(function() {
$(".${subject_input_class}").each(function(index, subject_input) {
var subject_input = $(subject_input);
var idleTime = 0;
var searchable = false;
var last_search = "";
subject_input.parent().append("<div class='ajax-message-subject-search-results'></div>");
var idleInterval = setInterval(function() {
timerIncrement(subject_input);
}, 250);
$(subject_input).keyup(function(e) {
idleTime = 0;
searchable = true;
});
function incrementTimer() {
idleTime++;
if (idleTime > 2 && searchable && last_search != subject_input.val()) {
$(subject_input).trigger("myIdleEvent", [ subject_input ]);
}
}
subject_input.bind('blur myIdleEvent', function(e, field, value) {
var subj_input = $(subject_input);
var subjectValue = subj_input.val();
searchable = false;
if (subjectValue.length > 0) {
$.ajax({
type: "GET",
url: "/${community.id}/restapi/vc/search/messages",
data: ({
"q":subjectValue,
"page_size":"${result_list_size}",
"restapi.response_style":"view",
"xslt":"json.xsl"
}),
success: function(result) {
$(subj_input).parent().find(".ajax-message-subject-search-results").each(function(index, results_div) {
if (result.response.messages == null || result.response.messages.message.length < 1) {
$(results_div).empty();
} else {
var msgMarkup = "<div><span>${results_label}</span></div>";
msgMarkup += "<table class='lia-list-wide'>";
if (typeof result.response.messages.message.length === 'undefined') {
msgMarkup += "<tr><td><a href='" + result.response.messages.message.view_href + "'>" + result.response.messages.message.subject.$ + "</a></td></tr>";
} else {
$.each(result.response.messages.message, function(index, msg) {
msgMarkup += "<tr><td><a href='" + msg.view_href + "'>" + msg.subject.$ + "</a></td></tr>";
});
}
msgMarkup += "</table>";
$(results_div).empty().append(msgMarkup);
}
});
}
});
}
});
});
});
};
})(LITHIUM.jQuery);
LITHIUM.CUSTOMER.EXAMPLE.AjaxSearch();
</@liaAddScript>
xorrkaz Thanks for the awesome contributions. It's been 3 years, so before I start trying to implement your example, just wanted to see if you could think of a reason why it wouldn't work currently? Thanks!
and 2 more years later...
I tried the code, not working as it's.
Uncaught TypeError: Cannot read property 'contentWindow' of null
And the sample page is redirecting to Community home page..
Any updates on this?
I was hoping to look here to work on the task:
I'm trying to implement a custom component, pooling latest messages from a specific discussion board, lets' say every 2 min.
So it looks like livecast or messenger, messages just pops up at the top, one after another.
it could be even better, if it's possible to show it right after a user posts a new question.
Any ideas?
- Thanks so much for sharing this xorrkaz! You rock :)
