[jQuery] Re: checking if jquery loaded
I ended up solving this problem by using the lazy load method
described here:
http://www.squidoo.com/load-jQuery-dynamically
I think the loadPlugins() function was being called before jQuery had
a chance to fully load, thus causing the errors.
On Jan 15, 12:08 pm, Nalum mallon.l...@gmail.com wrote:
Hello zendog74,
In your script above you have script.onload = loadPlugins();, the
onload event is only usable in the body tag or the frameset tag.
Other than that I think your script is ok.
On Jan 15, 4:44 pm, zendog74 n8cs...@gmail.com wrote:
These just give me undefined errors, as jQuery is not defined if it is
not loaded.
Again, what I need to do is load jQuery if it is not already loaded
and then load all of the required plug-ins once it is loaded.
On Jan 14, 4:39 pm, waseem sabjee waseemsab...@gmail.com wrote:
if(jQuery) {
// jquery is loaded}
if($) {
// jquery is loaded
}
or
if (jQuery != null) {
// jquery is loaded}
if ($ != null) {
// jquery is loaded
}
On Thu, Jan 14, 2010 at 11:30 PM, zendog74 n8cs...@gmail.com wrote:
I am trying to only load jquery and jqueryui if they do not already
exist. If they do exist, then I load a bunch of plug-ins used by the
app. However, the below is not working and I have no idea why. Can
anyone provide some insight?
if (typeof jQuery == 'undefined') {
console.log(loading local jquery files);
var head = document.getElementsByTagName(head)[0];
var script = document.createElement(script);
script.type = text/javascript;
script.src = /cml/js/jquery.min.js;
script.onload = loadPlugins();
head.appendChild(script);
var script2 = document.createElement(script);
script2.type = text/javascript;
script2.src = /cml/js/jquery-ui.min.js;
head.appendChild(script2);
}
function loadPlugins(){
if(typeof jQuery != 'undefined'){
console.log(jquery is defined);
jQuery.noConflict();
//load the plugins
if(!jQuery().maxlength){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.maxlength-min.js)%/
scr' + 'ipt');
console.log(loaded maxlength plugin);
}
if(!jQuery().address){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.address-1.1.min.js)%/
scr' + 'ipt');
console.log(loaded address plugin);
}
if(!jQuery().delay){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.delay.js)%/scr' +
'ipt');
console.log(loaded delay plugin);
}
if(!jQuery().ajaxSubmit){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.form.js)%/scr' +
'ipt');
console.log(loaded form plugin);
}
Thanks everyone.
[jQuery] Re: checking if jquery loaded
These just give me undefined errors, as jQuery is not defined if it is
not loaded.
Again, what I need to do is load jQuery if it is not already loaded
and then load all of the required plug-ins once it is loaded.
On Jan 14, 4:39 pm, waseem sabjee waseemsab...@gmail.com wrote:
if(jQuery) {
// jquery is loaded}
if($) {
// jquery is loaded
}
or
if (jQuery != null) {
// jquery is loaded}
if ($ != null) {
// jquery is loaded
}
On Thu, Jan 14, 2010 at 11:30 PM, zendog74 n8cs...@gmail.com wrote:
I am trying to only load jquery and jqueryui if they do not already
exist. If they do exist, then I load a bunch of plug-ins used by the
app. However, the below is not working and I have no idea why. Can
anyone provide some insight?
if (typeof jQuery == 'undefined') {
console.log(loading local jquery files);
var head = document.getElementsByTagName(head)[0];
var script = document.createElement(script);
script.type = text/javascript;
script.src = /cml/js/jquery.min.js;
script.onload = loadPlugins();
head.appendChild(script);
var script2 = document.createElement(script);
script2.type = text/javascript;
script2.src = /cml/js/jquery-ui.min.js;
head.appendChild(script2);
}
function loadPlugins(){
if(typeof jQuery != 'undefined'){
console.log(jquery is defined);
jQuery.noConflict();
//load the plugins
if(!jQuery().maxlength){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.maxlength-min.js)%/
scr' + 'ipt');
console.log(loaded maxlength plugin);
}
if(!jQuery().address){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.address-1.1.min.js)%/
scr' + 'ipt');
console.log(loaded address plugin);
}
if(!jQuery().delay){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.delay.js)%/scr' +
'ipt');
console.log(loaded delay plugin);
}
if(!jQuery().ajaxSubmit){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.form.js)%/scr' +
'ipt');
console.log(loaded form plugin);
}
Thanks everyone.
[jQuery] checking if jquery loaded
I am trying to only load jquery and jqueryui if they do not already
exist. If they do exist, then I load a bunch of plug-ins used by the
app. However, the below is not working and I have no idea why. Can
anyone provide some insight?
if (typeof jQuery == 'undefined') {
console.log(loading local jquery files);
var head = document.getElementsByTagName(head)[0];
var script = document.createElement(script);
script.type = text/javascript;
script.src = /cml/js/jquery.min.js;
script.onload = loadPlugins();
head.appendChild(script);
var script2 = document.createElement(script);
script2.type = text/javascript;
script2.src = /cml/js/jquery-ui.min.js;
head.appendChild(script2);
}
function loadPlugins(){
if(typeof jQuery != 'undefined'){
console.log(jquery is defined);
jQuery.noConflict();
//load the plugins
if(!jQuery().maxlength){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.maxlength-min.js)%/
scr' + 'ipt');
console.log(loaded maxlength plugin);
}
if(!jQuery().address){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.address-1.1.min.js)%/
scr' + 'ipt');
console.log(loaded address plugin);
}
if(!jQuery().delay){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.delay.js)%/scr' +
'ipt');
console.log(loaded delay plugin);
}
if(!jQuery().ajaxSubmit){
jQuery(head).append('scr' + 'ipt
type=text/javascript src=
%=response.encodeURL(cntxPath + /js/jquery.form.js)%/scr' +
'ipt');
console.log(loaded form plugin);
}
Thanks everyone.
[jQuery] Address plug-in issues
I am using the jQuery Address plug-in (http://www.asual.com/jquery/
address/) to enable bookmarking and back and forward buttons in a
document search portlet. I have things working well when there is only
one search portlet on the page. However, when I put two search
portlets on the page, events are being fired twice for some reason.
The portlets and JS code are all namespaced properly, so I am not sure
why this is happening.
Below is some of the relevant code. Any ideas? I am close to tearing
my hair out of this one!
div id=V_2e0bae46a2d47944ddcac6101ad46f14_cmlSearch_container
div id=V_2e0bae46a2d47944ddcac6101ad46f14_cmlSearch_msg
class=alert style=display: none;/div
form action=/ice/site/nshaw/template.RAW/cml_home/?
javax.portlet.tpst=2e0bae46a2d47944ddcac6101ad46f14_ws_RWjavax.portlet.begCacheTok=com.vignette.cachetokenjavax.portlet.endCacheTok=com.vignette.cachetoken
name=V_2e0bae46a2d47944ddcac6101ad46f14_cmlSearch_form
id=V_2e0bae46a2d47944ddcac6101ad46f14_cmlSearch_form method=post
input type=hidden name=searchType value=simplesearch
div
id=V_2e0bae46a2d47944ddcac6101ad46f14_cmlSearch_simpleKeyword:
input type=text name=keyword /nbsp; input
id=V_2e0bae46a2d47944ddcac6101ad46f14_cmlSearch_submitBtnTop
type=submit value=Search//div
/form
/div
jQuery(document).ready(function() {
bindSearchForm('V_2e0bae46a2d47944ddcac6101ad46f14');
});
function bindSearchForm(ns) {
var nsPrefix = #+ns+_;
jQuery(nsPrefix+cmlSearch_form).bind(submit, function() {
jQuery.address.value(searchresults/+ns+/+getUniqueId());
return false;
});
}
[jQuery] Form values disappearing
I am using the JQuery Address plug-in to bookmark state changes in an
application. The application allows a user to run a search of a
document set. When the user requests a search that has not been run
before, the search is performed and then the search form and search
results are cached using data(), so that they can be retrieved later
if the user presses the back button.
All of the above is working fine except that the form values in the
form that is being cached are being lost. If I use bind() instead of
livequery(), the form values are retained. However, as I am re-
populating the form div with the cached form later, I cannot used bind
() or the event bindings are lost.
Here is the relevant code. Anyone have any ideas as to why this is
happening and how to fix it?
HTML
div id=portlet:namespace/_cmlSearch_container
div id=portlet:namespace/_cmlSearch_msg class=alert
style=display: none;/div
form action=portlet:renderURL windowState=RAW/
name=portlet:namespace/_cmlSearch_form id=portlet:namespace/
_cmlSearch_form method=post
input type=hidden name=searchType value=simplesearch
div id=portlet:namespace/_cmlSearch_simpleKeyword: input
type=text id=keyword name=keyword /nbsp; input
id=cmlSearch_submitBtnTop type=submit value=Search//div
br /
a id=portlet:namespace/_cmlSearch_advancedSearchLink
href=javascript:void(0)img src=%=response.encodeURL
(request.getContextPath() + /images/icon_plus.gif)%
name=portlet:namespace/_cmlSearch_advancedSearchLinkIcon
id=portlet:namespace/_cmlSearch_advancedSearchLinkIcon border=0
alt=+ /nbsp;Advanced Search/a
div id=portlet:namespace/_cmlSearch_advanced style=display:
none;
table id=portlet:namespace/_cmlSearch_advancedSearchFields
class=cmlAdvancedFieldsTable
jsp:include page=cmlform.jsp/
/table
br /
input id=cmlSearch_submitBtnBottom type=submit value=Search/
nbsp;input id=cmlSearch_clearBtnBottom type=reset value=Clear/
/div
/form
div id=portlet:namespace/_cmlSearch_loading style=width: 300px;
margin-left: auto; margin-right: auto; text-align: center; display:
none;img src='/cml/images/ajaxLoader.gif'/div
div id=portlet:namespace/_cmlSearch_searchResults/div
/div
jQuery(document).ready(function() {
var nsPrefix = #portlet:namespace/_;
jQuery(nsPrefix+cmlSearch_form).livequery(submit, function(){
var uId = new Date().getTime();
var hash = searchresults/portlet:namespace//+uId;
jQuery.address.value(hash);
return false;
});
});
FROM jQuery.address.change(function(event){
var cachedContent = jQuery(nsPrefix+cmlSearch_container).data(uId);
//check the cache to see if this search was already run
if(cachedContent == undefined){
//if not, do the search and cache the search container
contents
var url2Call =
jQuery(nsPrefix+cmlSearch_form).attr(action);
var formData =
jQuery(nsPrefix+cmlSearch_form).serialize();
doSearch(url2Call, formData, ns, uId);
}else{
//if yes, re-populate the search container with cached
content
jQuery(nsPrefix+cmlSearch_container).html(cachedContent);
}
FROM doSearch(url2Call, formData, ns, uId){
complete: function(xhr, textStatus){
jQuery(nsPrefix+cmlSearch_loading).hide();
var content =
jQuery(nsPrefix+cmlSearch_container).html();
jQuery(nsPrefix+cmlSearch_container).data(uId,content);
}
[jQuery] Form Plugin Large File Upload Problem
I am using the JQuery Form Plugin on a form that is shown in a modal
window (nyroModal) to upload files. It is working like a charm as long
as the file is a reasonable size. However, if a user tries to upload a
large file (say 100MB or more), when response comes back (HTML
response), it re-loads the entire window, instead of re-writing the
contents of a div in the modal window, like it is supposed to do.
Does anyone have any idea as to what is going on? Seems like it may be
a timeout issue, but I am not sure why it is happening or at which
point it is timing out.
Here is a snippet of the code. Nothing special going on.
checkCmlUpdateForm is not shown, but it is a simple data validation
function.
jQuery(document).ready(function() {
var options = {
target: '#cmlCreateUpdate_formContainer',
iframe: true,
beforeSubmit: checkCmlUpdateForm,
success: handleResponse
};
// bind form using 'ajaxForm'
jQuery('#supportingDocs').MultiFile();
jQuery('#cmlCreateUpdate_form').ajaxForm(options);
jQuery('#cmlUpdate_cancelBtnBottom').bind('click',cancelUpdate);
jQuery(textarea[name='description']).maxlength({maxCharacters:
4000, statusText: characters left, notificationClass: bg_alert});
});
function handleResponse(responseText, statusText) {
// Re-run the search to update the results.
if(jQuery(#cmlSearch_form).length 0){
doSearch('portlet:renderURL windowState=RAW/');
}
}
[jQuery] select random div
I am using the periodic updater plug-in to make an Ajax call to grab
an HTML file that has many divs in it. I want to parse the returned
HTML and display a random div in a placeholder div on the page. I am
stuck on how to select out the random div from the returned HTML. Can
someone please lend a hand on this?
$(document).ready(function() {
$.PeriodicalUpdater({
url : '/common/inc/contentPieces.htm',
method: 'get',
minTimeout: 12000,
maxTimeout: 15000
},
function(data){
//select random div to show from returned data
var totalDivs = $(data).children('div').size();
var rand = Math.ceil(Math.random() *
totalDivs);
/* THIS IS WHAT I AM NOT SURE HOW TO DO
*/
$('#contentRefresher').html($(data).children(div:eq( +
rand + '));
$('#contentRefresher').show('slide', 'slow');
$('#contentRefresher').effect('highlight', {color:
'#fffacd'},
3000);
});
});
Returned HTML
div id=div1
h5Div 1/h5
pThis is div 1/p
/div
div id=div2
h5Div 2/h5
pThis is div 2/p
/div
div id=div3
h5Div 3/h5
pThis is div 3/p
/div
[jQuery] Re: clueTip access to xhr
Thanks Karl. So, does the latest version of clueTip support all of the
ajax options? I had to modify the plug-in previously to support
sending some custom headers.
Also, the xhr option looks like it may work for what I am trying to
do, but I am not sure exactly how to use it. I don't really want to
override the xhr object... I just need access to it to get the http
status code. The server component I am calling will return various
status codes for various problems with the call (authentication,
missing params, etc...), so I need to be able to pull it out and check
it.
On Apr 19, 2:05 pm, Karl Swedberg k...@englishrules.com wrote:
Since the plugin uses $.ajax(ajaxSettings) internally to retrieve the
file contents, you can pass any options you want into the ajaxSettings
option and they'll be used. So you should be able to do something like
this:
$('someelement').cluetip({
ajaxSettings: {
xhr: function() { }
}
});
Seehttp://docs.jquery.com/Ajax/jQuery.ajax#optionsfor a list of
$.ajax options. Also, make sure you use jQuery 1.3 or above and the
latest clueTip version on Github
(http://github.com/kswedberg/jquery-cluetip/tree/master
)
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Apr 16, 2009, at 2:52 PM, zendog74 wrote:
I am successfully using clueTip to make ajax requests that return
either xml or json and populate the tooltips. It is working great.
However, I am trying to make my code more sophisticated to handle
exceptions and I need access to the xhr to do that properly. I have
been unable to find a way to get access to the xhr using clueTip,
especially in the ajaxProcess function. Is there a way to do this?
Here is what I am trying to do:
ajaxProcess: function(xhr, data) {
return checkResponse(xhr.status, data);
}
//Pseudo-code
function checkHttpStatusCode(statusCode, data){
//Check the status code and send back the error message in the
returned xml packet if there is one.
}
[jQuery] clueTip access to xhr
I am successfully using clueTip to make ajax requests that return
either xml or json and populate the tooltips. It is working great.
However, I am trying to make my code more sophisticated to handle
exceptions and I need access to the xhr to do that properly. I have
been unable to find a way to get access to the xhr using clueTip,
especially in the ajaxProcess function. Is there a way to do this?
Here is what I am trying to do:
ajaxProcess: function(xhr, data) {
return checkResponse(xhr.status, data);
}
//Pseudo-code
function checkHttpStatusCode(statusCode, data){
//Check the status code and send back the error message in the
returned xml packet if there is one.
}
[jQuery] Time select/text boxes like Google Calendar
Does anyone know how to mimic the Google Calendar time select/text input using jQuery? I have autocomplete working on a different field in my form and thought that it may work for hour and minute selection on a text input, but I cannot get the values to show up unless the user clears the field entirely, which is not that intuitive. What I really want is for the available options to pop-up when the user focuses on the field regardless of whether their is a value in the field already or not. Then, the user can either choose one of the options or type in their own value. Thoughts? Ideas?
[jQuery] Re: autocomplete and json
FYI, I got this to work. Here is the code that I ended up with.
Perhaps it will help others who run across the same problem:
jQuery(#pocEmail).autocomplete(../screen/PersonLookup, {
width: 275,
minChars: 1,
cacheLength: 25,
selectFirst: false,
max: 50,
dataType: json,
extraParams: {field2Use:'email',output:'json'},
//formatMatch: formatPocMatch,
//formatResult: formatPocResult,
parse: parsePocJSON,
formatItem: formatPocItem
});
jQuery(#pocEmail).result(formatPocResult);
function parsePocJSON(data) {
var json = data.persons.person;
var parsed = [];
if(json != undefined) {
//There are some matches
if(json.length != undefined) {
//There are multiple records
for (var i=0; i json.length; i++) {
var row = json[i];
parsed.push({
data: row,
value: row[email__],
result: row[email__]
});
}
}else{
//There is a single record
parsed.push({
data: data.persons.person,
value: data.persons.person.email__,
result: data.persons.person.email__
});
}
}
return parsed;
}
function formatPocItem(row) {
return row[firstName__] + ' ' + row[lastName__] + ' [' +
row[email__] + ']';
}
function formatPocResult(event, row, formatted) {
jQuery(#pocEmail).val(row[email__]);
jQuery(#pocFname).val(row[firstName__]);
jQuery(#pocLname).val(row[lastName__]);
}
On Feb 5, 3:42 pm, zendog74 n8cs...@gmail.com wrote:
I managed to alias some of the classes to more simple names in my WS,
so myJSONnow looks like this.
{persons:
{person:[
{personId__:
6,firstName__:Jack,lastName__:Black,email__:jbl...@jackblack.com},
{personId__:
1,firstName__:Joe,lastName__:Blow,email__:jb...@hotmail.com},
{personId__:
4,firstName__:Jason,lastName__:Giambi,email__:jgia...@yahoo.com},
{personId__:
3,firstName__:Jim,lastName__:Jones,email__:jjo...@hotmail.com},
{personId__:
5,firstName__:Jill,lastName__:Robin,email__:jro...@gmail.com},
{personId__:
2,firstName__:Jason,lastName__:Smith,email__:jsm...@hq.nasa.gov}
]}
}
I am still working on getting it parsed properly by overriding the
parse function inautocomplete, but I don't have it working yet. Any
assistance is appreciated!
jQuery(#pocEmail).autocomplete(../screen/PersonLookup, {
width: 260,
minChars: 1,
cacheLength: 20,
selectFirst: false,
max: 25,
dataType: json,
extraParams: {field2Use:'email',output:'json'},
//formatResult: formatResult,
//formatItem: formatItem,
//formatMatch: formatMatch
parse: autocompleteJSON,
formatItem: function(row) {
return row[email__];
//return row.firstName__ + + row.lastName__ + [
+ row.email + ];
}
});
});
var autocompleteJSON = function(data) {
varjson= data.persons.person;
var parsed = [];
for (var i=0; i json.length; i++) {
var row =json[i];
parsed.push({
data: row,
value: row[firstName__] + ' ' + row[lastName__] +
' [' + row[email__] + ']',
result: row[email]
});
}
return parsed;
};
On Feb 5, 10:32 am, zendog74 n8cs...@gmail.com wrote:
What is the status of using remoteJSONwith jquery.autocomplete? I
saw a couple of threads in the group about it, but they are patchworky
and hard to follow. I did not see anything about usingJSONon the
autocompletejquery plugin site. Is using remoteJSONsupported or do
I have to modify source to make it work?
Here is what I am trying to do. I created a WS to return some user
data for anautocomplete. Here is theJSONthat is returned when I
type 'j' into myautocompleteform field.
{linked-list:{gov.nasa.hq.portal.calendar.to.PersonTO:
[{personId__:
6,firstName__:Jack,lastName__:Black,email__:jbl...@jackblack.com},
{personId__:
1,firstName__:Joe,lastName__:Blow,email__:jb...@hotmail.com},
{personId__:
4,firstName__:Jason,lastName__:Giambi,email__:jgia...@yahoo.com},
{personId__:
3,firstName__:Jim,lastName__:Jones,email__:jjo...@hotmail.com},
{personId__:
5,firstName__:Jill,lastName__:Robin,email__:jro...@gmail.com},
{personId__:
2,firstName__:Jason,lastName__:Smith,email__:jsm...@hq.nasa.gov}]}}
Here is my javascript:
document.observe
[jQuery] autocomplete and json
What is the status of using remote JSON with jquery.autocomplete? I
saw a couple of threads in the group about it, but they are patchworky
and hard to follow. I did not see anything about using JSON on the
autocomplete jquery plugin site. Is using remote JSON supported or do
I have to modify source to make it work?
Here is what I am trying to do. I created a WS to return some user
data for an autocomplete. Here is the JSON that is returned when I
type 'j' into my autocomplete form field.
{linked-list:{gov.nasa.hq.portal.calendar.to.PersonTO:
[{personId__:
6,firstName__:Jack,lastName__:Black,email__:jbl...@jackblack.com},
{personId__:
1,firstName__:Joe,lastName__:Blow,email__:jb...@hotmail.com},
{personId__:
4,firstName__:Jason,lastName__:Giambi,email__:jgia...@yahoo.com},
{personId__:
3,firstName__:Jim,lastName__:Jones,email__:jjo...@hotmail.com},
{personId__:
5,firstName__:Jill,lastName__:Robin,email__:jro...@gmail.com},
{personId__:
2,firstName__:Jason,lastName__:Smith,email__:jsm...@hq.nasa.gov}]}}
Here is my javascript:
document.observe(dom:loaded, function() {
jQuery(#pocEmail).autocomplete(../screen/PersonLookup, {
width: 260,
minChars: 1,
cacheLength: 20,
selectFirst: false,
max: 25,
extraParams: {field2Use:'email',output:'json'},
formatItem: function(row, i, max) {
alert(row);
return row;
//return row.firstName__ + + row.lastName__ + [
+ row.email + ];
}
});
});
The entire JSON is getting returned as a row, so I assume it is being
treated as a String and is seen as one row.
Can I make this work without too much hardship? The WS I created can
return XML as well if that is an option.
Thanks!
[jQuery] Re: autocomplete and json
I managed to alias some of the classes to more simple names in my WS,
so my JSON now looks like this.
{persons:
{person:[
{personId__:
6,firstName__:Jack,lastName__:Black,email__:jbl...@jackblack.com},
{personId__:
1,firstName__:Joe,lastName__:Blow,email__:jb...@hotmail.com},
{personId__:
4,firstName__:Jason,lastName__:Giambi,email__:jgia...@yahoo.com},
{personId__:
3,firstName__:Jim,lastName__:Jones,email__:jjo...@hotmail.com},
{personId__:
5,firstName__:Jill,lastName__:Robin,email__:jro...@gmail.com},
{personId__:
2,firstName__:Jason,lastName__:Smith,email__:jsm...@hq.nasa.gov}
]}
}
I am still working on getting it parsed properly by overriding the
parse function in autocomplete, but I don't have it working yet. Any
assistance is appreciated!
jQuery(#pocEmail).autocomplete(../screen/PersonLookup, {
width: 260,
minChars: 1,
cacheLength: 20,
selectFirst: false,
max: 25,
dataType: json,
extraParams: {field2Use:'email',output:'json'},
//formatResult: formatResult,
//formatItem: formatItem,
//formatMatch: formatMatch
parse: autocompleteJSON,
formatItem: function(row) {
return row[email__];
//return row.firstName__ + + row.lastName__ + [
+ row.email + ];
}
});
});
var autocompleteJSON = function(data) {
var json = data.persons.person;
var parsed = [];
for (var i=0; i json.length; i++) {
var row = json[i];
parsed.push({
data: row,
value: row[firstName__] + ' ' + row[lastName__] +
' [' + row[email__] + ']',
result: row[email]
});
}
return parsed;
};
On Feb 5, 10:32 am, zendog74 n8cs...@gmail.com wrote:
What is the status of using remote JSON with jquery.autocomplete? I
saw a couple of threads in the group about it, but they are patchworky
and hard to follow. I did not see anything about using JSON on the
autocomplete jquery plugin site. Is using remote JSON supported or do
I have to modify source to make it work?
Here is what I am trying to do. I created a WS to return some user
data for an autocomplete. Here is the JSON that is returned when I
type 'j' into my autocomplete form field.
{linked-list:{gov.nasa.hq.portal.calendar.to.PersonTO:
[{personId__:
6,firstName__:Jack,lastName__:Black,email__:jbl...@jackblack.com},
{personId__:
1,firstName__:Joe,lastName__:Blow,email__:jb...@hotmail.com},
{personId__:
4,firstName__:Jason,lastName__:Giambi,email__:jgia...@yahoo.com},
{personId__:
3,firstName__:Jim,lastName__:Jones,email__:jjo...@hotmail.com},
{personId__:
5,firstName__:Jill,lastName__:Robin,email__:jro...@gmail.com},
{personId__:
2,firstName__:Jason,lastName__:Smith,email__:jsm...@hq.nasa.gov}]}}
Here is my javascript:
document.observe(dom:loaded, function() {
jQuery(#pocEmail).autocomplete(../screen/PersonLookup, {
width: 260,
minChars: 1,
cacheLength: 20,
selectFirst: false,
max: 25,
extraParams: {field2Use:'email',output:'json'},
formatItem: function(row, i, max) {
alert(row);
return row;
//return row.firstName__ + + row.lastName__ + [
+ row.email + ];
}
});
});
The entire JSON is getting returned as a row, so I assume it is being
treated as a String and is seen as one row.
Can I make this work without too much hardship? The WS I created can
return XML as well if that is an option.
Thanks!
