Nomination mobile - part 5

This post its a part of a series about creating an app with node.js and express for Facebook... this time for mobile browsers

Part 1

Part 2

Part 3
Part 4

Version en español

Desktop version:

Part 10

*NOTE: jqm = jquery mobile

Last post for this mobile series

Firs the erase part, lets update the "mscript.js" with this

$('#remove').click(function(ev){
    $.mobile.showPageLoadingMsg();
    ev.preventDefault();
    var uid = $(this).attr('uid');
    var details = $('#details');
    var nid = details.find('#attd').attr('nid');
    $.post("/nominations/eraseuser", { id: nid, user: 'eraseme' },
        function(data) {
            if (data){                    
                //get the row of the user and erase it
                $('.users').find('#'+uid).remove();
                var usersl = details.find('.users');
                usersl.listview('refresh');
            }else{
                showMsg('dashboard.error', 'dashboard.error_removing');
            }
            $.mobile.hidePageLoadingMsg();
        }
    ).error(function() { 
        $.mobile.hidePageLoadingMsg(); 
        showMsg('dashboard.error', 'dashboard.error_removing'); 
    }); 
});

And also the page to store the user id in the button:

a#remove(href="#", data-icon="minus", uid="#{user.id}") #{t('dashboard.remove_me')}

Simple, we just get the id of the user, we ge the details page and we search for the id of the nomination, send the data to the server and  if we don't have errors erase that row

God, now to refresh, lets do the following, first lets add the class "refresh" to all refresh buttons:

a.refresh(href="#", data-role="button", data-theme="b", data-icon="refresh") #{t('dashboard.refresh')}

And then add the functionality in the script

//refresh the list of nominations
$('.refresh').click(function (ev) {
    $.mobile.showPageLoadingMsg();
    ev.preventDefault();
    //get the actual page id
    var pageid = $.mobile.activePage.attr('id').split('-')[1];
    //erase the actual list
    var divider = $('#'+pageid).find('li')[0];
    $('#'+pageid).find('li').remove();
    $('#'+pageid).listview('refresh');
    //add the divider
    $('#'+pageid).append(divider);
    //reload the nominations
    loadNominations(pageid);
});

Get the id of the actual page, and then get the type on nomination the user is looking, then get the divider, erase the actual list, add again the divider, refresh and reload the nominations of that type

Good, easy, now lets update the routes to handle the request from small devices, lets update the file "routes/dashboard.js"

bt = new bowser(req);
if (bt.isMobile() || bt.isTablet()){
    res.redirect('/dashboardm');
}else{
    res.render('dashboard', 
        { 
            user: req.session.user, 
            error : req.param('error'), 
            type: 'dashboard', 
            invited: invited                
        });
}

We are checking for tablet or mobile and if so lets redirect them to the mobile version, with this any user can see the mobile version by updating the url

We are just missing to update the strings in the jade files or js to i18 strings, lets give that task as a homework for all, any doubt on doing that let me know

Thats it for the mobile verions, we have a nice version now quite interesting, lets announce it everywhere now, if you can please help me with some bugs or new stuff for the application, i may be missing a nice feature.

Next time we will try to do a job to run it daily and close the nominations already passed and send notifications in facebook to the users.

After that we will move this to phonegap to make it native for different platforms :)

Fork the code

https://github.com/nodejs-mexico/nomi-nation

Greetings