[Proto-Scripty] Re: formatting list item content in Ajax.Autocompleter
No modifications are needed to any of the scriptaculous code. The
afterUpdateElement passes the arguments (text, li).to our callback
method, so you can access the contents of li as is, using its
innerHTML property. Sample code is as follows
new Ajax.Autocompleter(inputTextBox, listContainerDIV,
serverSideScript, { paramName:'someName',
parameters:'oneOrMore=parameters', minChars:2,
afterUpdateElement:callbackMethod });
function callbackMethod(text, li) {
li.innerHTML // gets the intact contents of the li element
}
It is working for me, not sure if this is the best way to do it.
Thanks.
Ashwin
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: formatting list item content in Ajax.Autocompleter
Yogesh,
I am stymied by one last hurdle as I get closer. I am loading text
embedded inside span elements and inserting them into the li
elements that comprise the drop down list items of the autocompleter.
Works just as required.
When the user selects one of the items in the list, I had assumed that
contents of the li item will be copied over verbatim, but only the
text is copied over. span and any other HTML tags are not copied
over. There is no Autocompleter option to change this behavior.
What are my options if I want to copy over the text from the li item
into the text box, intact?
Thanks.
Ashwin
On Nov 11, 3:48 pm, Yogesh Agashe yogesh.aga...@gmail.com wrote:
Sure, glad that I was able to help you !
Yogesh
Ashwin wrote:In addition to your snippet, I had to add the following CSS
attributes to the LI element: position: relative; overflow: auto; and
slightly increased the width of the container UL element. It is now showing
up as expected. Thanks for your help! Ashwin On Nov 11, 2:15 pm, Yogesh
Agasheyogesh.aga...@gmail.comwrote:I have a list with 3 columns. This is
the code. You just modify it a little bit for your page. li Name span
class='citystateinlist'City,State/span span
class='dateinlist'Date/span /li .dateinlist{ float: right;
width: 80px; } .citystateinlist{ float: right; width: 150px; } Ashwin
wrote:Hi Yogesh, You gave me some food for thought! I added float:left; and
width: 300px; attributes to all the span tags just to see how that turns
out. When I do that, the span elements are outside the enclosing li
elements, one below the other. I am no CSS expert, so I could be messing up
somehow in that area. Can you send me a relevant snippet of the CSS that you
employ for this effect? Thanks, Ashwin On Nov 11, 12:59 pm, Yogesh
Agasheyogesh.aga...@gmail.comwrote:Hi Ashwin, How about floating the span
elements? I have similar list and I use float. Add a class to your span
elements. In CSS, assign a width and float them left or right as per your
requirement. HTH. Yogesh Ashwin wrote:One of the reasons I like the Google
Suggest powered autocomplete function at Google Finance (http://finance.
google.com) is because the drop choice choices appear in a tabular format
with 2 columns. The left column contains the ticker symbol and the right
column contains the company name. I am trying to emulate a similar effect but
with 4 columns. Without thinking about customization, my first attempt
involves trying to return data that looks like this from the server sideul
lispan style=width:50px;1/spanspan style=width:
150px;Jane/spanspan style=width:150px;Doe/spanspan
style=width:250px;Director/span/li lispan
style=width:50px;2/spanspan style=width: 150px;John/spanspan
style=width:150px;Doe/spanspan style=width:250px;Manager/span/li
lispan style=width:50px;3/spanspan style=width:
150px;Peter/spanspan style=width:150px;Tr ent/spanspan
style=width:250px;Developer/span/li /ulIn a regular HTML page, this
has a tabular look to it. But when this content gets loaded in the
autocompleter's DIV element, it gets treated just like HTML whitespace.Am I
missing something here, or are there better ways of doing this?Thanks!Ashwin-
Hide quoted text -- Show quoted text -
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: formatting list item content in Ajax.Autocompleter
My server-side script generates the ul.../ul structure to pass back to the update div element. The li elements contain some text embedded inside span. Here is a sample of what the server-side script passes back to the Ajax.Autocompleter instance: ul li style=overflow:auto;span style=display:none;1/spanspan style=width:150px;float:left;John/spanspan style=width: 200px;float:left;Doe/span/li li style=overflow:auto;span style=display:none;2/spanspan style=width:150px;float:left;Jane/spanspan style=width: 200px;float:left;Doe/span/li /ul (The reason I do this is because I want to see the drop down list display the list items in a tabular layout... which was the original topic of this thread) However, when I select an item from this drop down list, only the plain text gets copied into the element i.e. the input text box) linked to the Ajax.Autocompleter control. What I need is for the contents of the selected li element to be copied over, so I can work with the raw HTML as needed. When I perused the JS source, I understand that the updateElement function is responsible for the copying, and it employs Element.collectTextNodes and Element.collectTextNodesIgnoreClass methods to extract the textual content from the selected li element. I tried to hack my way around this by replacing the line: value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal'); with: value = selectedElement.innerHTML It seems like this works, but I am very averse to modifying well- tested code (not to mention, my JS skills are very immature) and potentially breaking another part of my application that depends on the default implemented behavior of this control. Can anyone tell me if there is some (more recommended) means of copying the contents of the selected li element into the text box without modifying controls.js? Ideally, it would be nice to have an option to use in the constructor, to toggle between copying raw content versus textual content. Thanks. Ashwin --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] formatting list item content in Ajax.Autocompleter
One of the reasons I like the Google Suggest powered autocomplete function at Google Finance (http://finance.google.com) is because the drop choice choices appear in a tabular format with 2 columns. The left column contains the ticker symbol and the right column contains the company name. I am trying to emulate a similar effect but with 4 columns. Without thinking about customization, my first attempt involves trying to return data that looks like this from the server side ul lispan style=width:50px;1/spanspan style=width: 150px;Jane/spanspan style=width:150px;Doe/spanspan style=width:250px;Director/span/li lispan style=width:50px;2/spanspan style=width: 150px;John/spanspan style=width:150px;Doe/spanspan style=width:250px;Manager/span/li lispan style=width:50px;3/spanspan style=width: 150px;Peter/spanspan style=width:150px;Trent/spanspan style=width:250px;Developer/span/li /ul In a regular HTML page, this has a tabular look to it. But when this content gets loaded in the autocompleter's DIV element, it gets treated just like HTML whitespace. Am I missing something here, or are there better ways of doing this? Thanks! Ashwin --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: formatting list item content in Ajax.Autocompleter
Hi Yogesh, You gave me some food for thought! I added float:left; and width: 300px; attributes to all the span tags just to see how that turns out. When I do that, the span elements are outside the enclosing li elements, one below the other. I am no CSS expert, so I could be messing up somehow in that area. Can you send me a relevant snippet of the CSS that you employ for this effect? Thanks, Ashwin On Nov 11, 12:59 pm, Yogesh Agashe yogesh.aga...@gmail.com wrote: Hi Ashwin, How about floating the span elements? I have similar list and I use float. Add a class to your span elements. In CSS, assign a width and float them left or right as per your requirement. HTH. Yogesh Ashwin wrote: One of the reasons I like the Google Suggest powered autocomplete function at Google Finance (http://finance.google.com) is because the drop choice choices appear in a tabular format with 2 columns. The left column contains the ticker symbol and the right column contains the company name. I am trying to emulate a similar effect but with 4 columns. Without thinking about customization, my first attempt involves trying to return data that looks like this from the server side ul lispan style=width:50px;1/spanspan style=width: 150px;Jane/spanspan style=width:150px;Doe/spanspan style=width:250px;Director/span/li lispan style=width:50px;2/spanspan style=width: 150px;John/spanspan style=width:150px;Doe/spanspan style=width:250px;Manager/span/li lispan style=width:50px;3/spanspan style=width: 150px;Peter/spanspan style=width:150px;Trent/spanspan style=width:250px;Developer/span/li /ul In a regular HTML page, this has a tabular look to it. But when this content gets loaded in the autocompleter's DIV element, it gets treated just like HTML whitespace. Am I missing something here, or are there better ways of doing this? Thanks! Ashwin- Hide quoted text - - Show quoted text - --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: formatting list item content in Ajax.Autocompleter
In addition to your snippet, I had to add the following CSS attributes
to the LI element:
position: relative;
overflow: auto;
and slightly increased the width of the container UL element. It is
now showing up as expected.
Thanks for your help!
Ashwin
On Nov 11, 2:15 pm, Yogesh Agashe yogesh.aga...@gmail.com wrote:
I have a list with 3 columns. This is the code. You just modify it a little
bit for your page.
li
Name
span class='citystateinlist'City,State/span
span class='dateinlist'Date/span
/li
.dateinlist{
float: right;
width: 80px;
}
.citystateinlist{
float: right;
width: 150px;
}
Ashwin wrote:Hi Yogesh, You gave me some food for thought! I added
float:left; and width: 300px; attributes to all the span tags just to see
how that turns out. When I do that, the span elements are outside the
enclosing li elements, one below the other. I am no CSS expert, so I could
be messing up somehow in that area. Can you send me a relevant snippet of the
CSS that you employ for this effect? Thanks, Ashwin On Nov 11, 12:59 pm,
Yogesh Agasheyogesh.aga...@gmail.comwrote:Hi Ashwin, How about floating the
span elements? I have similar list and I use float. Add a class to your span
elements. In CSS, assign a width and float them left or right as per your
requirement. HTH. Yogesh Ashwin wrote:One of the reasons I like the Google
Suggest powered autocomplete function at Google Finance
(http://finance.google.com) is because the drop choice choices appear in a
tabular format with 2 columns. The left column contains the ticker symbol and
the right column contains the company name. I am trying to emulate a similar
effect but with 4 columns. Without thinking about customization, my first
attempt involves trying to return data that looks like this from the server
sideul lispan style=width:50px;1/spanspan style=width:
150px;Jane/spanspan style=width:150px;Doe/spanspan
style=width:250px;Director/span/li lispan
style=width:50px;2/spanspan style=width: 150px;John/spanspan
style=width:150px;Doe/spanspan style=width:250px;Manager/span/li
lispan style=width:50px;3/spanspan style=width:
150px;Peter/spanspan style=width:150px;Trent/spanspan
style=width:250px;Developer/span/li /ulIn a regular HTML page, this
has a tabular look to it. But when this content gets loaded in the
autocompleter's DIV element, it gets treated just like HTML whitespace.Am I
missing something here, or are there better ways of doing this?Thanks!Ashwin-
Hide quoted text -- Show quoted text -
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] DOM building with Prototype library
The following code works perfectly in Firefix (3.x) and Safari (3.x),
but behaves strangely short of failing in IE (7).
__
html
head
script type=text/javascript language=JavaScript
src=prototype.js/script
script type=text/javascript language=JavaScript
function insertCheckboxInForm()
{
var formNode = new Element('form');
var tableNode = new Element('table').setStyle({'border':'1px
solid black','border-collapse':'collapse'});
formNode.insert(tableNode);
for (var count=0; count10; count++) {
var checkBoxNode = new Element('input',
{type:'checkbox',id:'n'+count,value:'true'});
tableNode.insert(new Element('tr').insert(new Element
('td').setStyle({'border':'1px solid black'}).update('cell' +
count)).insert(new Element('td').setStyle({'border':'1px solid
black'}).update(checkBoxNode)));
}
$$('body')[0].insert(formNode);
}
/script
/head
body onload=insertCheckboxInForm();
/body
/html
__
In Firefox and Safari, a 10x2 table with CellX in the first column
and a checkbox in the second column is generated. In IE, nothing
renders in the browser, but if I just copy and paste the browser
rendering area and paste into Notepad, the text content of the table
shows up.
Does IE have a different behavior for DOM building, or am I not
following a best/recommended practice for such type of dynamic content
generation using the DOM model?
I would really appreciate being pointed in the right direction!!!
Thanks.
Ashwin
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
