Gmail Calendar Documents Reader Web more »
Recently Visited Groups | Help | Sign in
Google Groups Home
ModalBox
Home
+ new post
Pages
Files
About this group
Join this group
Has anyone gotten scriptaculous Autocompleter to work inside a Modalbox?
Options
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
   6 messages - Collapse all  -  Translate all to Translated (View all originals)
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
Ryan  
View profile  
 More options Jul 23 2008, 7:03 pm
From: Ryan <ryan.roz...@gmail.com>
Date: Wed, 23 Jul 2008 16:03:35 -0700 (PDT)
Local: Wed, Jul 23 2008 7:03 pm
Subject: Has anyone gotten scriptaculous Autocompleter to work inside a Modalbox?
Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author
I'm trying to get autocomplete values from a scritpaculous
autocompleter to work inside a modalbox. Wondering if anyone has
gotten this to work before. I have written a sample script to
illustrate and pasted it below. It shows a simple autocomplete.Local
instance both on a page and then in a modalbox. It works when
displayed on the page but does not work when opened in a modalbox. You
need to link to your scriptaculous.js prototype.js and modalbox.js in
your filesystem to run this of course. Any suggestions?

<html>

<head>
   <script src="includes/prototype.js" type="text/javascript"></
script>
   <script src="includes/scriptaculous.js" type="text/javascript"></
script>
   <script src="includes/modalbox.js" type="text/javascript"></script>
   <link rel="stylesheet" href="includes/modalbox.css" type="text/css"
media="screen" />
   <style>        div.autocomplete {
          margin:0px;
          padding:0px;
          width:250px;
          background:#fff;
          border:1px solid #888;
          position:absolute;
          z-index:10000 !important;
        }

        div.autocomplete ul {
          margin:0px;
          padding:0px;
          list-style-type:none;
        }

        div.autocomplete ul li.selected {
          background-color:#D6DFF7;
        }

        div.autocomplete ul li {
          margin:0;
          padding:2px;
          height:28px;
          display:block;
          list-style-type:none;
          cursor:pointer;
          font-size:10pt;
          text-align:left;
        }

        div.autocomplete div.desc {
      font-size:10px;
      color:#888;
      margin-left:12px;
    }

  </style>
</head>

<body>
Type letters 'R' or 'T' to get autocomplete suggestions<br>
<a href='#' onClick="Modalbox.show($('modbox'), {title: 'Modal
Box'});">Display in Modalbox</a><br>
<a href='#' onClick="Effect.toggle('modbox','appear')">Display on
Page</a>

<div id='modbox' style='display:none'>
        <div>
        <input name="input_box" id="input_box"  autocomplete="off" size="40"
maxlength="2048" title="Search"><font size="-1">
        <div id="input_box_update" class="autocomplete"
style="display:none;"></div>
        <script type="text/javascript" language="javascript" charset="utf-8">
          var suggestionVals = new Array(
           'Ryan<div class="desc"><span class="informal">Ryan</span></div>',
           'Bryan<div class="desc"><span class="informal">Bryan</span></
div>',
           'Robert<div class="desc"><span class="informal">Robert</span></
div>',
           'Tom<div class="desc"><span class="informal">Tom</span></div>',
           'Tim<div class="desc"><span class="informal">Tim</span></div>',
           'Thomas<div class="desc"><span class="informal">Thomas</span></
div>');
          new Autocompleter.Local('input_box','input_box_update',
suggestionVals, { tokens: new Array(' ','!','|','('), fullSearch:
false, partialSearch: false, choices: 20 });
        </script>
        </div>
</div>

</html>


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Justinas Urbanavicius  
View profile  
 More options Jul 24 2008, 2:52 am
From: "Justinas Urbanavicius" <justin...@gmail.com>
Date: Thu, 24 Jul 2008 09:52:58 +0300
Local: Thurs, Jul 24 2008 2:52 am
Subject: Re: [ModalBox Group] Has anyone gotten scriptaculous Autocompleter to work inside a Modalbox?
Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author

as written in the wiki, the var globals are discarted right after parsing
the javascript.

try using this object instead.

eg.:
this.my_var = new Array();

then to ghet array alert(this.my_var);


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Ryan  
View profile  
 More options Jul 30 2008, 5:11 pm
From: Ryan <ryan.roz...@gmail.com>
Date: Wed, 30 Jul 2008 14:11:38 -0700 (PDT)
Local: Wed, Jul 30 2008 5:11 pm
Subject: Re: Has anyone gotten scriptaculous Autocompleter to work inside a Modalbox?
Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author
Thanks for the suggestion, but unfortunately it still does not work
when switching to use this object.. See the code below it is modified
to use the 'this' object. If you test it in a browser, the div that is
on the page works fine (autocomplete works) but when displayed in the
modalbox it does not:

<html>

<head>
   <script src="includes/prototype.js" type="text/javascript"></
script>
   <script src="includes/scriptaculous.js" type="text/javascript"></
script>
   <script src="includes/modalbox.js" type="text/javascript"></script>
   <link rel="stylesheet" href="includes/modalbox.css" type="text/css"
media="screen" />

</head>

<body>
Type letters 'R' or 'T' to get autocomplete suggestions<br>
<a href='#' onClick="Modalbox.show($('modbox'), {title: 'Modal
Box'});">Display in Modalbox</a><br>
<a href='#' onClick="Effect.toggle('modbox','appear')">Display on
Page</a>

<div id='modbox' style='display:none'>

        <input name="input_box" id="input_box"  autocomplete="off" size="40"
maxlength="2048" title="Search"><font size="-1">
        <div id="input_box_update" class="autocomplete"
style="display:none;"></div>
        <script type="text/javascript" language="javascript" charset="utf-8">
          this.suggestionVals = new Array(
           'Ryan<div class="desc"><span class="informal">Ryan</span></div>',
           'Bryan<div class="desc"><span class="informal">Bryan</span></
div>',
           'Robert<div class="desc"><span class="informal">Robert</span></
div>',
           'Tom<div class="desc"><span class="informal">Tom</span></div>',
           'Tim<div class="desc"><span class="informal">Tim</span></div>',
           'Thomas<div class="desc"><span class="informal">Thomas</span></
div>');
          new Autocompleter.Local('input_box','input_box_update',
this.suggestionVals, { tokens: new Array(' ','!','|','('), fullSearch:
false, partialSearch: false, choices: 20 });
        </script>

</div>

</html>

On Jul 24, 1:52 am, "Justinas Urbanavicius" <justin...@gmail.com>
wrote:


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Ryan  
View profile  
 More options Aug 25 2008, 3:50 pm
From: Ryan <ryan.roz...@gmail.com>
Date: Mon, 25 Aug 2008 12:50:05 -0700 (PDT)
Local: Mon, Aug 25 2008 3:50 pm
Subject: Re: Has anyone gotten scriptaculous Autocompleter to work inside a Modalbox?
Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author
Just one last attempt to see if anyone has gotten modalboxes to work
with scriptaculous autocompleters. As you can see in my last post, I
tried the suggestion to use the 'this' object. As modalboxes are a
great way to display form-based data and autocompleters are common in
forms, I figured someone must have tried this. Anyway I am stumped as
to how to get this to work, code snippets demonstrating this issue are
included in my previous post.

Ryan

On Jul 30, 4:11 pm, Ryan <ryan.roz...@gmail.com> wrote:


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
infringer  
View profile  
 More options Sep 1 2008, 3:01 pm
From: infringer <infrin...@gmail.com>
Date: Mon, 1 Sep 2008 12:01:53 -0700 (PDT)
Local: Mon, Sep 1 2008 3:01 pm
Subject: Re: Has anyone gotten scriptaculous Autocompleter to work inside a Modalbox?
Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author
Set your z-index of the autocomplete div to:

          z-index:10005 !important;

Works for me.

Modalbox's z-index for "mb_window" is 10000, so setting it higher will
place it on top of the window.

I'm using v1.6.1 from SVN.

Hope that helps,
-David

On Aug 25, 3:50 pm, Ryan <ryan.roz...@gmail.com> wrote:


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
bowser_senior  
View profile  
(1 user)  More options Oct 18 2008, 4:58 am
From: bowser_senior <bowsersen...@gmail.com>
Date: Sat, 18 Oct 2008 01:58:52 -0700 (PDT)
Local: Sat, Oct 18 2008 4:58 am
Subject: Re: Has anyone gotten scriptaculous Autocompleter to work inside a Modalbox?
Reply to author | Forward | Print | Individual message | Show original | Report this message | Find messages by this author
I was having this same problem and I managed to solve it by creating
the Autocompleter after calling Modalbox.show() by using Modalbox's
'afterLoad' option. In my case, z-index was not at fault. The code
might look something like:

        Modalbox.show(  $('autocompleteContainerDiv'),
                                        {       afterLoad: function () {
                                                        new Autocompleter.Local('inputField',
                                                                'autocompleteResultsList',
                                                                valuesList
                                                                );
                                                }
                                        }
        );
/*
autocompleteContainerDiv contains everything I want to show in the
Modalbox, including the input field the user types into as well as the
results list that shows up with the results from the Autocompleter
*/

Hope this helps. I was struggling with this for a while myself.

-Mani

On Aug 25, 12:50 pm, Ryan <ryan.roz...@gmail.com> wrote:


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
End of messages
« Back to Discussions « Newer topic     Older topic »

Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2009 Google