librelist archives

Re: [flask] UI Multiple Autocomplete plug-in

From:

Gustave Dupont

Date:

2011-10-08 @ 00:43

Dear all,

I still do not know how to translate the net tutsplus tutorial to Flask.

I am extending the minitwit project. In "layout.html", I added the following
lines :

     <script type=text/javascript src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

     <script type=text/javascript src="
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
"></script>
I created a "test.html" file in which I copy-pasted the jQuery code from net
tutsplus. Was I right to do that ?

     {% extends "layout.html" %}
     {% block title %}
       Add people
     {% endblock %}
     {% block body %}
       <h2>{{ self.title() }}</h2>
       {% if g.user %}
           <div>
             <input id='to' type='text'>
           </div>
       {% endif %}
     {% endblock %}

     <script type=text/javascript>
       $(function(){

         //attach autocomplete
         $('#to').autocomplete({

           //define callback to format results
           source: function(req, add){

             //pass request to server
             $.getJSON($SCRIPT_ROOT + '/_add_people', req, function(data) {

               //create array for response objects
               var suggestions = [];

               //process response
               $.each(data, function(i, val){
                 suggestions.push(val.name);
               });

               //pass array to callback
               add(suggestions);
             });
           },

           //define select handler
           select: function(e, ui) {

             //create formatted friend
             var friend = ui.item.value,
             span = $('<span>').text(friend),
             a = $('<a>').addClass('remove').attr({
               href: 'javascript:',
               title: 'Remove ' + friend
             }).text('x').appendTo(span);

             //add friend to friend div
             span.insertBefore('#to');
           },

           //define select handler
           change: function() {

             //prevent 'to' field being updated and correct position
             $('#to').val('').css('top', 2);
           }

         });

         //add click handler to friends div
         $('#friends').click(function(){

           //focus 'to' field
           $('#to').focus();
         });

         //add live handler for clicks on remove links
         $('.remove', document.getElementById('friends')).live('click',
function(){

           //remove current friend
           $(this).parent().remove();

           //correct 'to' field position
           if($('#friends span').length === 0) {
             $('#to').css('top', 0);
           }
         });
       });
     </script>

I added a "test" function to minitwit.py :

    @app.route('/test', methods=['GET','POST'])
    def test():
        if not g.user:
            return redirect(url_for('public_timeline'))
        return render_template('test.html')

Can you please tell me what you think of all that ?

Finally the callback function I wrote is absolutely rubbish :

    @app.route('/_add_people')
    def add_people():
        param = request.args.get('term', '', type=string)
        users = query_db('''select * from user where
            username = ?''', param, one=False)
        return jsonify(result=users)
I thank you very much for your help,
Gustave



2011/10/3 Gustave Dupont <gustave5000@gmail.com>

> I guess the same tutorial with Chosen would be nice too.
> Thanks to everybody
> 2011/10/2 Gregg Lind <gregg.lind@gmail.com>
>
>> I like Chosen (http://harvesthq.github.com/chosen/) for this task, if
>> people want an alternative.
>>
>>
>>
>> On Sat, Oct 1, 2011 at 10:20 PM, Gustave Dupont <gustave5000@gmail.com>
>> wrote:
>> > Dear all,
>> >
>> > I have been reading the AJAX with jQuery section in the documentation.
>> The
>> > example is really simple, maybe too simple.
>> >
>> > Wouldn't it be nice if there were some explanations on how to use the UI
>> > Multiple Autocomplete plug-in ?
>> >
>> > Something similar to :
>> >
>> 
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/
>> >
>> > I will be waiting for that.
>> >
>> > Thanks for your attention,
>> >
>> >
>>
>
>