Question

Thanks for taking the time,

I am working on a page for an app where the admin reviews a submitted objective. Each objective is a inside 1 of 3 different tables. “review”, “complete”, and “submitted” are the three tables.

There is a bootstrap btn-group on each with an option to approve, revert or deny depending on which status it currently has. When the status is changed the containing the objective is removed and appended to the proper table.

You can see an example of the functionaliy here:
http://jsfiddle.net/9mYZD/

Now here is the issue:

• When one of the ‘s is moved to another table I need to it to switch the links in the drop down so they will match the others in its new table.

• I have code to do this, but I am trying to write a statement that would work

  tableID = clicked.closest('table').attr('id');
  if(tableID = 'approve-objectives-submitted'){
                  clicked.html('<i class=" icon-undo"></i> Revert').removeClass('action-ok').addClass('action-revert');
                  }
                  else if(tableID = 'approve-objectives-review'){
                  clicked.html('<i class=" icon-ban-circle"></i> Deny').removeClass('action-ok').addClass('action-deny');
                  }
  

If you look at the fiddle provided, I have added this code to the approve function. If you then approve one from submitted, the switch works great, if you approve one from review(they are appended at the very bottom of the list) then you can see the is two revert button rather than one deny and one revert.

If anyone has an idea on how to make this conditional statement work. or maybe i just need to take a step back and look at this from another perspective. Any thoughts would be great.

Thank you!

Answer 1

There were a couple of things I noticed.

I have changed the code in your approve: function () and put up a new fiddle http://jsfiddle.net/5aVCp/

Firstly, your newly appended table row was losing its objective id and the way you get the HTML from the table row was leaving a very small timing window with the posibility of the element being removed from the DOM before you get the HTML.

Secondly, when you were replacing the contents of the last div, the btn-group class div was disappearing. Maybe I missed what this part was doing.

Finally, the approach I took to modifying the labels as per the other rows values was to use the attribute you already include on the anchor tag to simply find them after you append them to the new table and manipulate the HTML as required:

   var dataId = clicked.attr('data-id');
   var ok = $('a[data-id="' + dataId + '"].action-ok');
   var deny = $('a[data-id="' + dataId + '"].action-deny');
   deny.removeClass('action-deny').addClass('action-revert').html('<i class=" icon-undo"></i> Revert');
   ok.removeClass('action-ok').addClass('action-deny').html('<i class=" icon-ban-circle"></i> Deny');

You would be able to do this for each other type of status, just make sure you run the selectors before updating any of their classes or you might find you change one and re select it again.

Hopefully this helps.