[xwiki-devs] Autosuggest widget javascript
Hello everyone, I've created a form which needs to use autosuggest for fields. The form structure is basically a list of 10 things each of which has a supplier and a product. The supplier and product field are text input, and need to use autosuggest for pagenames from a specific space. I've been able to make the code from the Autosuggest widget work, which can be found here: http://platform.xwiki.org/xwiki/bin/view/DevGuide/AutoSuggestWidget I'm trying to translate the javascript offered there in the second codeblock on the page to a more generic function so I can say if the input is X, call suggestSupplier and if it is y call suggestProduct. All the supplier fields end in _Supplier in their name and all the product fields end in _SoftProd So far, I've been unsuccessful and I don't quite understand the structure of this javascript offered. Has someone already done this before and can they give me a pointer? Much appreciated, Menso
I think something like that would work (from memory without having verified this JS): ( function MySuggest(element) { if (!element.suggest) { element.suggest = new XWiki.widgets.Suggest(element, { script: '$xwiki.getURL("${doc.space}.WebHome", "view")?xpage=suggest&classname=XWiki.TagClass&fieldname=tags&secCol=-&', varname: "input", seps: " ,|", offsety: 13 }); } } document.observe('dom:loaded', function () { if($('myinput1')) Event.observe($('myinput1'), "focus", MySuggest); if($('myinput2')) Event.observe($('myinput2'), "focus", MySuggest); })(); Maybe some JS wizard can verify it Ludovic Le 10/12/10 14:42, Menso Heus a écrit :
Hello everyone,
I've created a form which needs to use autosuggest for fields. The form structure is basically a list of 10 things each of which has a supplier and a product. The supplier and product field are text input, and need to use autosuggest for pagenames from a specific space.
I've been able to make the code from the Autosuggest widget work, which can be found here: http://platform.xwiki.org/xwiki/bin/view/DevGuide/AutoSuggestWidget
I'm trying to translate the javascript offered there in the second codeblock on the page to a more generic function so I can say if the input is X, call suggestSupplier and if it is y call suggestProduct.
All the supplier fields end in _Supplier in their name and all the product fields end in _SoftProd
So far, I've been unsuccessful and I don't quite understand the structure of this javascript offered. Has someone already done this before and can they give me a pointer?
Much appreciated,
Menso _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Ludovic Dubost Blog: http://blog.ludovic.org/ XWiki: http://www.xwiki.com Skype: ldubost GTalk: ldubost
Thanks for your reply Ludovic, I think I'm almost where I want to be, but I have one final problem which seems to be that my variable doesn't get passed along: function mySuggest(element, space) { foo = "xpage=plain&spacename=" + space; if (!element.suggest) { element.suggest = new XWiki.widgets.Suggest(element, { script: "$xwiki.getURL("Sandbox.AutoSuggest", "view", foo)&", varname: "input", seps: " ,|", offsety: 13, minchars: 1 }); } } The space variable gets nicely passed along down to the function mySuggest but when I try to stick it down to the script: part, it appears to be empty. I've tried doing some stuff with this.foo etc but unfortunately with no results. If anyone can give me a solution I'd really appreciate it :-) Thanks! Menso On 10 dec 2010, at 15:26, Ludovic Dubost wrote:
I think something like that would work (from memory without having verified this JS):
( function MySuggest(element) { if (!element.suggest) { element.suggest = new XWiki.widgets.Suggest(element, { script: '$xwiki.getURL("${doc.space}.WebHome", "view")?xpage=suggest&classname=XWiki.TagClass&fieldname=tags&secCol=-&', varname: "input", seps: " ,|", offsety: 13 }); } }
document.observe('dom:loaded', function () { if($('myinput1')) Event.observe($('myinput1'), "focus", MySuggest); if($('myinput2')) Event.observe($('myinput2'), "focus", MySuggest);
})();
Maybe some JS wizard can verify it
Ludovic
Le 10/12/10 14:42, Menso Heus a écrit :
Hello everyone,
I've created a form which needs to use autosuggest for fields. The form structure is basically a list of 10 things each of which has a supplier and a product. The supplier and product field are text input, and need to use autosuggest for pagenames from a specific space.
I've been able to make the code from the Autosuggest widget work, which can be found here: http://platform.xwiki.org/xwiki/bin/view/DevGuide/AutoSuggestWidget
I'm trying to translate the javascript offered there in the second codeblock on the page to a more generic function so I can say if the input is X, call suggestSupplier and if it is y call suggestProduct.
All the supplier fields end in _Supplier in their name and all the product fields end in _SoftProd
So far, I've been unsuccessful and I don't quite understand the structure of this javascript offered. Has someone already done this before and can they give me a pointer?
Much appreciated,
Menso _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Ludovic Dubost Blog: http://blog.ludovic.org/ XWiki: http://www.xwiki.com Skype: ldubost GTalk: ldubost
<ludovic.vcf>
-- Met vriendelijke groet/With kind regards, Menso Heus Gendo B.V. Main: +31 20 891 0330 Cell: +31 639574833 [email protected] site: www.gendo.nl Gendo BV Wibautstraat 150, 1091 GR Amsterdam The Netherlands P please consider the environment before printing this email ------------------------------------------------------------------------------------- This e-mail message and its attachments are subject to the disclaimer published at the following website of Gendo: http://www.gendo.nl/disclaimer Gendo B.V. is registered with the trade register in The Netherlands under number 28116864.
Hi Menso, On 12/11/2010 03:23 AM, Menso Heus wrote:
Thanks for your reply Ludovic,
I think I'm almost where I want to be, but I have one final problem which seems to be that my variable doesn't get passed along:
function mySuggest(element, space) { foo = "xpage=plain&spacename=" + space; if (!element.suggest) { element.suggest = new XWiki.widgets.Suggest(element, { script: "$xwiki.getURL("Sandbox.AutoSuggest", "view", foo)&", varname: "input", seps: " ,|", offsety: 13, minchars: 1 }); } }
The space variable gets nicely passed along down to the function mySuggest but when I try to stick it down to the script: part, it appears to be empty. I've tried doing some stuff with this.foo etc but unfortunately with no results.
You're mixing JavaScript (client side) code with Velocity (server side) code. You're trying to pass a JavaScript variable "foo" (evaluated on the client) to a Velocity method call "getURL" (evaluated on the sever, before the pages gets to the client). This is of course not possible. You should try to use the client side URL factory: new XWiki.Document('AutoSuggest', 'Sandbox').getURL('view', foo) Hope this helps, Marius
If anyone can give me a solution I'd really appreciate it :-)
Thanks!
Menso
On 10 dec 2010, at 15:26, Ludovic Dubost wrote:
I think something like that would work (from memory without having verified this JS):
( function MySuggest(element) { if (!element.suggest) { element.suggest = new XWiki.widgets.Suggest(element, { script: '$xwiki.getURL("${doc.space}.WebHome", "view")?xpage=suggest&classname=XWiki.TagClass&fieldname=tags&secCol=-&', varname: "input", seps: " ,|", offsety: 13 }); } }
document.observe('dom:loaded', function () { if($('myinput1')) Event.observe($('myinput1'), "focus", MySuggest); if($('myinput2')) Event.observe($('myinput2'), "focus", MySuggest);
})();
Maybe some JS wizard can verify it
Ludovic
Le 10/12/10 14:42, Menso Heus a écrit :
Hello everyone,
I've created a form which needs to use autosuggest for fields. The form structure is basically a list of 10 things each of which has a supplier and a product. The supplier and product field are text input, and need to use autosuggest for pagenames from a specific space.
I've been able to make the code from the Autosuggest widget work, which can be found here: http://platform.xwiki.org/xwiki/bin/view/DevGuide/AutoSuggestWidget
I'm trying to translate the javascript offered there in the second codeblock on the page to a more generic function so I can say if the input is X, call suggestSupplier and if it is y call suggestProduct.
All the supplier fields end in _Supplier in their name and all the product fields end in _SoftProd
So far, I've been unsuccessful and I don't quite understand the structure of this javascript offered. Has someone already done this before and can they give me a pointer?
Much appreciated,
Menso _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Ludovic Dubost Blog: http://blog.ludovic.org/ XWiki: http://www.xwiki.com Skype: ldubost GTalk: ldubost
<ludovic.vcf>
participants (3)
-
Ludovic Dubost -
Marius Dumitru Florea -
Menso Heus