FAQ
Hi all,

I've read the last years the thread about "Using Jquery UI Autocomplete
widget with Catalyst::View::JSON". And still got a problem:

My template is:
<script type="text/javascript"
src="/static/js/jquery.validate.min.js"></script>
<script type="text/javascript"
src="/static/js/jquery.bgiframe.min.js"></script>
<script type="text/javascript"
src="/static/js/jquery.ajaxQueue.js"></script>
<script type="text/javascript"
src="/static/js/jquery.autocomplete.min.js"></script>
<script type="text/javascript"
src="/static/js/thickbox-compressed.js"></script>
<link rel="stylesheet" href="[%
c.uri_for('/static/css/jquery/jquery.autocomplete.css') %]" ></link>

<script type="text/javascript">
<!--
$(document).ready(function(){
$("#model").autocomplete("[% c.uri_for('/model/modellist') %]", {
selectFirst: false,
width: 260,
});
});
//-->
</script>

<form id="commentForm" class="cmxform" method="post" action="[%
c.uri_for('save') %]">
<table>
<tr>
<td class="label">Modell</td>
<td class="data"><input id="model" name="model" size="40" /></td>
</tr>
</table>
</form>


In my Controller
sub modellist :Local {
my ( $self, $c ) = @_;
my @aoh = ( { value => "1", label => "betty", },
{ value => "2", label => "jane", },
{ value => "3", label => "marge", },
);
$c->stash->{json} = \@aoh;
$c->forward('View::JSON');
}

When I enter a character into the input-field, the above URL is called
and the follwing data is returned:

[{"value":"1","label":"betty"},{"value":"2","label":"jane"},{"value":"3","label":"marge"}]

But I don't get the expected dropdown, where I can select any of the
returned data.

As far as the returned data seems to be okay, I assume that the mistake
lies within the template (maybe I forgot something?)

Can anybody give me a hint?

Thanks in advance.

--

Armin Wenz

Universit?tsbibliothek Johann Christian Senkenberg
Telefon: 069-798-39504

Search Discussions

  • Róbert Oroszi at Apr 29, 2011 at 11:03 am
    I think it's a client side problem, that Autocomplete plugin is not the
    jQuery UI Autocomplete.
    You should grab the latest from http://jqueryui.com and you can read the
    documentation here: http://jqueryui.com/demos/autocomplete/

    ps: the JSON data structure is fine.

    2011/4/29 Armin Wenz <wenz@ub.uni-frankfurt.de>
    Hi all,

    I've read the last years the thread about "Using Jquery UI Autocomplete
    widget with Catalyst::View::JSON". And still got a problem:

    My template is:
    <script type="text/javascript"
    src="/static/js/jquery.validate.min.js"></script>
    <script type="text/javascript"
    src="/static/js/jquery.bgiframe.min.js"></script>
    <script type="text/javascript"
    src="/static/js/jquery.ajaxQueue.js"></script>
    <script type="text/javascript"
    src="/static/js/jquery.autocomplete.min.js"></script>
    <script type="text/javascript"
    src="/static/js/thickbox-compressed.js"></script>
    <link rel="stylesheet" href="[%
    c.uri_for('/static/css/jquery/jquery.autocomplete.css') %]" ></link>

    <script type="text/javascript">
    <!--
    $(document).ready(function(){
    $("#model").autocomplete("[% c.uri_for('/model/modellist') %]", {
    selectFirst: false,
    width: 260,
    });
    });
    //-->
    </script>

    <form id="commentForm" class="cmxform" method="post" action="[%
    c.uri_for('save') %]">
    <table>
    <tr>
    <td class="label">Modell</td>
    <td class="data"><input id="model" name="model" size="40" /></td>
    </tr>
    </table>
    </form>


    In my Controller
    sub modellist :Local {
    my ( $self, $c ) = @_;
    my @aoh = ( { value => "1", label => "betty", },
    { value => "2", label => "jane", },
    { value => "3", label => "marge", },
    );
    $c->stash->{json} = \@aoh;
    $c->forward('View::JSON');
    }

    When I enter a character into the input-field, the above URL is called and
    the follwing data is returned:


    [{"value":"1","label":"betty"},{"value":"2","label":"jane"},{"value":"3","label":"marge"}]

    But I don't get the expected dropdown, where I can select any of the
    returned data.

    As far as the returned data seems to be okay, I assume that the mistake
    lies within the template (maybe I forgot something?)

    Can anybody give me a hint?

    Thanks in advance.

    --

    Armin Wenz

    Universitätsbibliothek Johann Christian Senkenberg
    Telefon: 069-798-39504

    _______________________________________________
    List: Catalyst@lists.scsys.co.uk
    Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
    Searchable archive:
    http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
    Dev site: http://dev.catalyst.perl.org/
    -------------- next part --------------
    An HTML attachment was scrubbed...
    URL: http://lists.scsys.co.uk/pipermail/catalyst/attachments/20110429/6788d0e2/attachment.htm
  • Armin Wenz at Apr 29, 2011 at 1:17 pm

    Am 29.04.2011 13:03, schrieb Oroszi, R?bert:
    I think it's a client side problem, that Autocomplete plugin is not the
    jQuery UI Autocomplete.
    You should grab the latest from http://jqueryui.com and you can read the
    documentation here: http://jqueryui.com/demos/autocomplete/
    You were right. After using jqueryui everything works as expected.
    Thanks for the quick reply.

    --

    Armin Wenz

    Universit?tsbibliothek Johann Christian Senkenberg
    Telefon: 069-798-39504
  • Dmitry L. at Apr 29, 2011 at 12:05 pm
    Hi!

    Your controller must return JSONP data (not just JSON)

    jQuery send additional param to you controller ("callback" by default, I
    think)
    my $cb = $c->req->param("callback");

    So View::JSON should return something like this: $cb($data);
    Where $data is [{"value":"1","label":"betty"},{"value":"2","label":"jane"},
    {"value":"3","label":"marge"}]

    And Content-type header probably should be "application/javascript"

    Or look at jQuery.autocomplete manual to use JSON (instead of JSONP)

    --
    //wbr, Dmitry L.
  • Róbert Oroszi at Apr 29, 2011 at 12:10 pm
    Dmitry, you should return JSONP only for crossdomain requests.
    if you are on the same domain and port you can send JSON.

    2011/4/29 Dmitry L. <dim0xff@gmail.com>
    Hi!

    Your controller must return JSONP data (not just JSON)

    jQuery send additional param to you controller ("callback" by default, I
    think)
    my $cb = $c->req->param("callback");

    So View::JSON should return something like this: $cb($data);
    Where $data is [{"value":"1","label":"betty"},{"value":"2","label":"jane"},
    {"value":"3","label":"marge"}]

    And Content-type header probably should be "application/javascript"

    Or look at jQuery.autocomplete manual to use JSON (instead of JSONP)

    --
    //wbr, Dmitry L.

    _______________________________________________
    List: Catalyst@lists.scsys.co.uk
    Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
    Searchable archive:
    http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
    Dev site: http://dev.catalyst.perl.org/
    -------------- next part --------------
    An HTML attachment was scrubbed...
    URL: http://lists.scsys.co.uk/pipermail/catalyst/attachments/20110429/222f9261/attachment.htm
  • Lee at Apr 29, 2011 at 12:17 pm
    Remember 'same domain' includes same port.

    If you have two servers on the same host and it isn't working for you
    because on is on a different port, you can try something like this in
    your Apache config:

    RewriteEngine ON
    RewriteRule ^/ajax/(.+) http://localhost:3000/$1 [P,L]

    There all requests to loalhost/ajax get redirected to localhost:3000,
    which might be your Catalyst app server with View::JSON. No need for
    JSONP then.

    HTH
    Lee
    On 29/04/2011 14:10, Oroszi, Róbert wrote:
    Dmitry, you should return JSONP only for crossdomain requests.
    if you are on the same domain and port you can send JSON.

    2011/4/29 Dmitry L. <dim0xff@gmail.com
    Hi!

    Your controller must return JSONP data (not just JSON)

    jQuery send additional param to you controller ("callback" by
    default, I
    think)
    my $cb = $c->req->param("callback");

    So View::JSON should return something like this: $cb($data);
    Where $data is
    [{"value":"1","label":"betty"},{"value":"2","label":"jane"},
    {"value":"3","label":"marge"}]

    And Content-type header probably should be "application/javascript"

    Or look at jQuery.autocomplete manual to use JSON (instead of JSONP)

    --
    //wbr, Dmitry L.

    _______________________________________________
    List: Catalyst@lists.scsys.co.uk Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
    Searchable archive:
    http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
    Dev site: http://dev.catalyst.perl.org/



    _______________________________________________
    List: Catalyst@lists.scsys.co.uk
    Listinfo: http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst
    Searchable archive: http://www.mail-archive.com/catalyst@lists.scsys.co.uk/
    Dev site: http://dev.catalyst.perl.org/
    -------------- next part --------------
    An HTML attachment was scrubbed...
    URL: http://lists.scsys.co.uk/pipermail/catalyst/attachments/20110429/6ac44dec/attachment.htm
  • Dmitry L. at Apr 29, 2011 at 12:18 pm

    Dmitry, you should return JSONP only for crossdomain requests.
    if you are on the same domain and port you can send JSON.
    Oops... Really. My fault. Sorry

    --
    //wbr, Dmitry L.

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupcatalyst @
categoriescatalyst, perl
postedApr 29, '11 at 10:55a
activeApr 29, '11 at 1:17p
posts7
users4
websitecatalystframework.org
irc#catalyst

People

Translate

site design / logo © 2022 Grokbase