Rails 4 - update value or data attribute in form from ajax and use this updated value in an if statement

Question

I have a Rails app in which Users can belong to one or many Teams. Users can create ideas for each team. I want the form for Ideas to look and behave slightly different depending on how many teams the user is a member of. If a user isn't a member of any teams this message will be shown: You need to create a team first, before the user can create any ideas.

The issue I'm having is that I create Teams with Ajax. In the ideas form I currently have conditions like this:

- if current_user.teams.count == 0
  You need to create a team first
- else
  [..]

Since I create the teams using Ajax, this message is being displayed even when the user have created his / her first team. Unless he / she reloads the page of course, then it works. But I want to have a seamless experience.

So this condition:

- if current_user.teams.count == 0

Needs to be changed into something that I can access and update from a js.erb file, and I'm not quite sure how I can achieve that.

I was thinking of possibly using a hidden_field_tag, that I can update in Ajax. But I'm not sure how my if statement in the view would look then. I have tried the following without success (I use HAML):

= hidden_field_tag "team_count", current_user.teams.count, id: :team_count

:javascript
  if ($("#team_count").val > 1) {
    [...]
  } else {
    [...]
  }

Any ideas on what I should do instead?

Answer 1

The easiest way to pass data from Rails to your front end is via a route (accessed with ajax).

If you're also creating the team via an ajax call, I'd make a function that checks current teams and updates your view accordingly as part of the team creation callback.

Something like:

function updateDom(){
    $('#myForm').text('On a team');
};

function checkTeam(){
    $.get('/numTeams', function(data){
        if (data.teams > 1){
            updateDom();
        }
    })
};

function createTeam(args){
    $.post('/createTeam', data, function(res){
        checkTeam();   
    })
};

So, when a team is created, it'll check for the team and update the DOM accordingly.

You could also have js constantly check if the team is different and update accordingly with

var formText = window.setInterval(checkTeam, 1000);

The bottom line is that anything dynamic will be handled by js, not by rails (besides totally refreshing the page to get new information populated on load).

Answer 2

Bouncing on my idea of local storage...

If you only care about this for current_user, then you could do something like this...

EDIT : counting teams rather than just checking for any

EDIT 2 : why even use localStorage ? Just javascript variables would do.

EDIT 3 : Actually, local storage will preserve consistency across tabs !

In your view.html.erb

...
<%= if current_user.has_teams %>
<script>
/* Using local storage : */
localStorage.setItem('nb_teams', <%= current_user.teams.count %>);

/* ...Hey ! We can just add a javascript variable */
var num_teams = <%= current_user.teams.count %>
</script>
<% end %>
....

In the javascript of your form

/* Local storage only : */
num_teams = parseInt(localStorage.getItem('nb_teams'))

if( num_teams === 0){
  alert("You don't have any team !");
} else if (num_teams ===1) {
  // Normal case
} else if (num_teams >= 2){
  alert("Please select a team")
}

In the javascript of your AJAX team creation

function createTeam(){
  ....
  $.post(....)
  .success( function(){
    /* Local storage */
    num_teams = parseInt(localStorage.getItem('nb_teams'))
    localStorage.setItem('nb_teams', num_teams+1);

    /* Plain old javascript */
    num_teams ++;
  })
}