toaster: fix html5 compliance

This patch brings needed changes in all views so that
each view passes the HTML5 compliance test by the
W3C Markup Service.

Signed-off-by: Alexandru DAMIAN <alexandru.damian@intel.com>

15 files changed, 175 insertions, 182 deletions

diff --git a/lib/toaster/toastergui/templates/base.html b/lib/toaster/toastergui/templates/base.html
index 47bbbbda1..230dee49d 100644
--- a/lib/toaster/toastergui/templates/base.html
+++ b/lib/toaster/toastergui/templates/base.html
@@ -29,10 +29,10 @@
 <script>
   libtoaster.ctx = {
     projectId : {{project.id|default:'undefined'}},
-    xhrDataTypeaheadUrl : "{% url 'xhr_datatypeahead' %}",
     jsUrl : "{% static 'js/' %}",
     htmlUrl : "{% static 'html/' %}",
     {% if project.id %}
+    xhrDataTypeaheadUrl : "{% url 'xhr_datatypeahead' project.id %}",
     xhrProjectEditUrl : "{% url 'xhr_projectedit' project.id %}",
     projectPageUrl : "{% url 'project' project.id %}",
     projectName : "{{project.name}}",
@@ -104,16 +104,16 @@
                       <p><a id="view-all-projects" href="{% url 'all-projects' %}">View all projects</a></p>
                     </form>
                   </li>
-                  <div class="alert" style="display:none">
+                  <li style="display: none">
                     This project's configuration is incomplete,<br/>so you cannot run builds.<br/>
                     <p><a href="{% if project.id %}{% url 'project' project.id %}{% endif %}">View project configuration</a></p>
-                  </div>
+                  </li>
                   <li id="targets-form">
                     <h6>Recipe(s):</h6>
                     <form>
                       <input type="text" class="input-xlarge" id="build-target-input" placeholder="Type a recipe name" autocomplete="off" data-minLength="1" data-autocomplete="off" data-provide="typeahead" />
                       <div>
-                        <a class="btn btn-primary" id="build-button" disabled="disabled" data-project-id="{{project.id}}">Build</a>
+                        <a class="btn btn-primary" id="build-button" data-project-id="{{project.id}}">Build</a>
                       </div>
                     </form>
                   </li>
diff --git a/lib/toaster/toastergui/templates/baseprojectpage.html b/lib/toaster/toastergui/templates/baseprojectpage.html
index 0807f4cb1..c8a7743b1 100644
--- a/lib/toaster/toastergui/templates/baseprojectpage.html
+++ b/lib/toaster/toastergui/templates/baseprojectpage.html
@@ -35,9 +35,10 @@
     </div>
 
     <!-- Begin main page container -->
+    <div style="padding: 0px, margin: 0px, display: inline">
     {% block projectinfomain %}{% endblock %}
+    </div>
     <!-- End main container -->
-
   </div>
 
 
diff --git a/lib/toaster/toastergui/templates/builddashboard.html b/lib/toaster/toastergui/templates/builddashboard.html
index 4e600283a..d5fe92a2b 100644
--- a/lib/toaster/toastergui/templates/builddashboard.html
+++ b/lib/toaster/toastergui/templates/builddashboard.html
@@ -182,7 +182,7 @@
               {% endfor %}
                 </div>
             </dd>
-
+	</dl>
     </div>
 
 </div>
diff --git a/lib/toaster/toastergui/templates/buildrequestdetails.html b/lib/toaster/toastergui/templates/buildrequestdetails.html
index 2a4571f42..9bb9bc178 100644
--- a/lib/toaster/toastergui/templates/buildrequestdetails.html
+++ b/lib/toaster/toastergui/templates/buildrequestdetails.html
@@ -36,7 +36,7 @@
                 </p>
               </div>
 
-              <div class="accordion" id="errors" name="errors">
+              <div class="accordion" id="errors">
                 <div class="accordion-group">
                   <div class="accordion-heading">
                     <a class="accordion-toggle error toggle-errors">
diff --git a/lib/toaster/toastergui/templates/importlayer.html b/lib/toaster/toastergui/templates/importlayer.html
index f956dbcaa..af8f4f985 100644
--- a/lib/toaster/toastergui/templates/importlayer.html
+++ b/lib/toaster/toastergui/templates/importlayer.html
@@ -39,7 +39,7 @@
                       <legend>Layer repository information</legend>
                       <div class="alert alert-error" id="import-error" style="display:none">
                         <button type="button" class="close" data-dismiss="alert">&times;</button>
-                        <h3></h3>
+                        <h3>&nbsp;</h3>
                         <p></p>
                         <ul></ul>
                       </div>
@@ -56,7 +56,7 @@
                         </div>
 
                       </div>
-                      <span id="duplicate-layer-info" style="display:none">
+                      <div id="duplicate-layer-info" style="display:none">
                         <div class="alert warning">
                           <h3>A layer called <a href="" class="dup-layer-link"><span class="dup-layer-name"></span></a> already exists</h3>
                           <p>Layer names must be unqiue. Please use a different layer name.</p>
@@ -79,9 +79,9 @@
 
                         <p><a href="" class="dup-layer-link">View the <span class="dup-layer-name"></span> layer information</a></p>
 
-                      </span>
+                      </div>
 
-                      <span class="fields-apart-from-layer-name">
+                      <div class="fields-apart-from-layer-name">
                         <label for="layer-git-repo-url" class="project-form">
                             Git repository URL
                             <span class="icon-question-sign get-help" title="Fetch/clone URL of the repository. Currently, Toaster only supports Git repositories." ></span>
@@ -104,11 +104,11 @@
                                 <span class="help-inline" style="diaply:none;" id="invalid-layer-revision-hint"></span>
                             </div>
                           </div>
-                        </span>
+                       </div>
 
                     </fieldset>
 
-                    <span class="fields-apart-from-layer-name">
+                    <div class="fields-apart-from-layer-name">
                     <fieldset class="air">
                         <legend>
                             Layer dependencies
@@ -119,7 +119,7 @@
                         </ul>
                         <div class="input-append">
                             <input type="text" autocomplete="off" data-minLength="1" data-autocomplete="off" data-provide="typeahead" placeholder="Type a layer name" id="layer-dependency" class="input-xlarge">
-                            <a class="btn" type="button" id="add-layer-dependency-btn" disabled>
+                            <a class="btn" id="add-layer-dependency-btn">
                                 Add layer
                             </a>
                         </div>
@@ -129,7 +129,7 @@
                       <button class="btn btn-primary btn-large" data-toggle="modal" id="import-and-add-btn" data-target="#dependencies-message" disabled>Import and add to project</button>
                         <span class="help-inline" id="import-and-add-hint" style="vertical-align: middle;">To import a layer you need to enter a layer name, a Git repository URL and a revision (branch, tag or commit)</span>
                     </div>
-                  </span>
+                  </div>
                   </form>
 
 {% endblock %}
diff --git a/lib/toaster/toastergui/templates/layerdetails.html b/lib/toaster/toastergui/templates/layerdetails.html
index 4d892d56f..7b62b6489 100644
--- a/lib/toaster/toastergui/templates/layerdetails.html
+++ b/lib/toaster/toastergui/templates/layerdetails.html
@@ -9,6 +9,23 @@
 </li>
 {% endblock %}
 {% block projectinfomain %}
+{# If this is not an imported layer then hide the edit ui #}
+{% if not layerversion.layer_source_id or layerversion.layer_source.sourcetype != layerversion.layer_source.TYPE_IMPORTED %}
+<style scoped>
+ .icon-pencil {
+   display:none;
+ }
+.delete-current-value{
+  display: none;
+}
+ li .icon-trash {
+   display:none;
+ }
+ .add-deps {
+   display:none;
+ }
+</style>
+{% endif %}
 
 
 <script src="{% static 'js/layerdetails.js' %}"></script>
@@ -27,7 +44,7 @@
         commit: "{{layerversion.get_vcs_reference}}",
         inCurrentPrj : {{layer_in_project}},
         url : "{% url 'layerdetails' project.id layerversion.id  %}",
-        sourceId: {{layerversion.layer_source_id}},
+        sourceId: {{layerversion.layer_source_id|json}},
       }
     };
 
@@ -40,24 +57,6 @@
   });
 </script>
 
-{# If this is not an imported layer then hide the edit ui #}
-{% if layerversion.layer_source_id != 3 %}
-<style>
- .icon-pencil {
-   display:none;
- }
-.delete-current-value{
-  display: none;
-}
- li .icon-trash {
-   display:none;
- }
- .add-deps {
-   display:none;
- }
-</style>
-{% endif %}
-
   <div class="row-fluid span11">
       <div class="page-header">
         <h1>{{layerversion.layer.name}} <small class="commit"
@@ -100,7 +99,7 @@
         </span>
 
         <!-- layer details pane -->
-        <div name="information" id="information" class="tab-pane active">
+        <div id="information" class="tab-pane active">
           <dl class="dl-horizontal">
             <dt class="">
               <i class="icon-question-sign get-help" title="Fetch/clone URL of the repository"></i>
@@ -160,19 +159,17 @@
                     Layer dependencies
                   </dt>
                   <dd>
-                    <ul class="unstyled" id="layer-deps-list">
+                    <ul class="unstyled current-value" id="layer-deps-list">
                       {% for ld in layerversion.dependencies.all %}
-                      <span class="current-value">
                       <li data-layer-id="{{ld.depends_on.id}}">
                         <a data-toggle="tooltip" title="{{ld.depends_on.layer.vcs_url}} | {{ld.depends_on.get_vcs_reference}}" href="{% url 'layerdetails' project.id ld.depends_on.id %}">{{ld.depends_on.layer.name}}</a>
                         <span class="icon-trash " data-toggle="tooltip" title="Delete"></span>
                       </li>
-                      </span>
                       {% endfor %}
                     </ul>
                     <div class="input-append add-deps">
                       <input type="text" autocomplete="off" data-minLength="1" data-autocomplete="off"  placeholder="Type a layer name" id="layer-dep-input">
-                        <a class="btn" type="button" id="add-layer-dependency-btn" disabled>
+                        <a class="btn" id="add-layer-dependency-btn" >
                           Add layer
                         </a>
                       </div>
@@ -181,7 +178,7 @@
                   </dl>
                 </div>
                 <!-- targets tab -->
-                <div name="targets" id="targets" class="tab-pane">
+                <div id="targets" class="tab-pane">
                   {% if total_targets == 0 %}
                   <div class="alert alert-info">
                     <p>Toaster does not have recipe information for the <strong> {{layerversion.layer.name}} </strong> layer.</p>
@@ -316,7 +313,7 @@
                 </div>
 
 
-                <div name="machines" id="machines" class="tab-pane">
+                <div id="machines" class="tab-pane">
                   {% if total_machines == 0 %}
                   <div class="alert alert-info">
                     <p>Toaster does not have machine information for the <strong> {{layerversion.layer.name}} </strong> layer.</p>
@@ -482,7 +479,6 @@
                   <i class="icon-pencil"></i>
                   <span class="icon-trash delete-current-value" data-toggle="tooltip" title="Delete"></span>
                 </dd>
-                </dd>
                 {% if layerversion.layer.up_id %}
                 <dt>Layer index</dt>
                 <dd>
diff --git a/lib/toaster/toastergui/templates/layers.html b/lib/toaster/toastergui/templates/layers.html
index abad007ee..e6861c270 100644
--- a/lib/toaster/toastergui/templates/layers.html
+++ b/lib/toaster/toastergui/templates/layers.html
@@ -112,7 +112,7 @@
         {% endwith %}
             </td>
             {% if project %}
-            <td class="add-del-layers" value="{{o.pk}}">
+            <td class="add-del-layers" data-value="{{o.pk}}">
                 <button class="btn btn-danger btn-block layer-exists-{{o.pk}} layerbtn" style="display:none;" data-layer='{ "id": {{o.pk}}, "name":  "{{o.layer.name}}", "url": "{%url 'layerdetails' project.id o.pk%}"}' data-directive="remove" >
                     <i class="icon-trash"></i>
                     Delete layer
diff --git a/lib/toaster/toastergui/templates/machines.html b/lib/toaster/toastergui/templates/machines.html
index 4a0986276..9979376b0 100644
--- a/lib/toaster/toastergui/templates/machines.html
+++ b/lib/toaster/toastergui/templates/machines.html
@@ -77,7 +77,7 @@
       <button class="btn btn-block layerbtn layer-add-{{o.layer_version.id}}" data-layer='{ "id": {{o.layer_version.id}}, "name":  "{{o.layer_version.layer.name}}", "url": "{%url 'layerdetails' project.id o.layer_version.id %}"}' data-directive="add">
         <i class="icon-plus"></i>
         Add layer
-        <i title="" class="icon-question-sign get-help" data-original-title="To enable this machine, you must first add the {{o.layer_version.layer.name}} layer to your project"></i></i>
+        <i title="" class="icon-question-sign get-help" data-original-title="To enable this machine, you must first add the {{o.layer_version.layer.name}} layer to your project"></i>
      </button>
     </td>
   </tr>
diff --git a/lib/toaster/toastergui/templates/newproject.html b/lib/toaster/toastergui/templates/newproject.html
index dcb659064..ed3a27905 100644
--- a/lib/toaster/toastergui/templates/newproject.html
+++ b/lib/toaster/toastergui/templates/newproject.html
@@ -43,7 +43,7 @@
             </fieldset>
 
             <div class="form-actions">
-              <input type="submit" class="btn btn-primary btn-large" value="Create project"></input>
+              <input type="submit" class="btn btn-primary btn-large" value="Create project"/>
               <span class="help-inline" style="vertical-align:middle;">To create a project, you need to enter a project name</span>
             </div>
         </form>
@@ -64,7 +64,8 @@
     </div>
     {% endif %}
 
-    </div>
+</div>
+
     <script type="text/javascript">
         $(document).ready(function () {
             // hide the new project button
@@ -95,5 +96,5 @@
             });
         })
     </script>
-</div>
+
 {% endblock %}
diff --git a/lib/toaster/toastergui/templates/project.html b/lib/toaster/toastergui/templates/project.html
index 85a1b164d..933da4f7d 100644
--- a/lib/toaster/toastergui/templates/project.html
+++ b/lib/toaster/toastergui/templates/project.html
@@ -30,7 +30,7 @@ vim: expandtab tabstop=2
 
 {%else%}
 
-<div id="main" role="main" ng-app="project" ng-controller="prjCtrl" class="top-padded">
+<div id="main" role="main" data-ng-app="project" data-ng-controller="prjCtrl" class="top-padded">
 
   <!-- project name -->
   <div class="page-header">
@@ -38,9 +38,9 @@ vim: expandtab tabstop=2
   </div>
 
   <!-- alerts section 1-->
-  <div ng-repeat="a in zone1alerts">
-    <div class="alert alert-dismissible lead" role="alert" ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
-      <span ng-bind-html="a.text"></span>
+  <div data-ng-repeat="a in zone1alerts">
+    <div class="alert alert-dismissible lead" role="alert" data-ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
+      <span data-ng-bind-html="a.text"></span>
     </div>
   </div>
 
@@ -54,21 +54,21 @@ vim: expandtab tabstop=2
   <script type="text/ng-template" id="dependencies_modal">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
-        <h3><span ng-bind="layerAddName"></span> dependencies</h3>
+        <h3><span data-ng-bind="layerAddName"></span> dependencies</h3>
     </div>
     <div class="modal-body">
         <p><strong>{[layerAddName]}</strong> depends on some layers that are not added to your project. Select the ones you want to add:</p>
         <ul class="unstyled">
-            <li ng-repeat="ld in items">
+            <li data-ng-repeat="ld in items">
                 <label class="checkbox">
-                    <input type="checkbox" ng-model="selectedItems[ld.id]"> {[ld.name]}
+                    <input type="checkbox" data-ng-model="selectedItems[ld.id]"> {[ld.name]}
                 </label>
             </li>
         </ul>
     </div>
     <div class="modal-footer">
-        <button class="btn btn-primary" ng-click="ok()">Add layers</button>
-        <button class="btn" ng-click="cancel()">Cancel</button>
+        <button class="btn btn-primary" data-ng-click="ok()">Add layers</button>
+        <button class="btn" data-ng-click="cancel()">Cancel</button>
     </div>
     </form>
   </script>
@@ -82,30 +82,30 @@ vim: expandtab tabstop=2
       <div class="modal-body">
         <p>The following project layers do not exist for the {[releaseDescription]} release:</p>
         <ul>
-          <li ng-repeat="i in items"><span class="layer-info" data-toggle="tooltip" tooltip="{[i.detail]}">{[i.name]}</span></li>
+          <li data-ng-repeat="i in items"><span class="layer-info" data-toggle="tooltip" tooltip="{[i.detail]}">{[i.name]}</span></li>
         </ul>
         <p>If you change the release to {[releaseDescription]}, the above layers will be deleted from your project.</p>
       </div>
       <div class="modal-footer">
-        <button class="btn btn-primary" ng-click="ok()">Change release and delete layers</button>
-        <button class="btn" ng-click="cancel()">Cancel</button>
+        <button class="btn btn-primary" data-ng-click="ok()">Change release and delete layers</button>
+        <button class="btn" data-ng-click="cancel()">Cancel</button>
       </div>
   </script>
 
   <script type="text/ng-template" id="target_display">
-      <div ng-switch on="t.task.length">
-        <div ng-switch-when="0">{[t.target]}</div>
-        <div ng-switch-default>{[t.target]}:{[t.task]}</div>
+      <div data-ng-switch on="t.task.length">
+        <div data-ng-switch-when="0">{[t.target]}</div>
+        <div data-ng-switch-default>{[t.target]}:{[t.task]}</div>
       </div>
   </script>
 
 
   <!-- build form -->
   <div class="well">
-    <form class="build-form" ng-submit="buildNamedTarget()">
+    <form class="build-form" data-ng-submit="buildNamedTarget()">
       <div class="input-append controls">
-        <input type="text" class="huge input-xxlarge" placeholder="Type the recipe(s) you want to build" autocomplete="off" ng-model="targetName" typeahead="e.name for e in getAutocompleteSuggestions('targets', $viewValue)|filter:$viewValue" typeahead-template-url="suggestion_details" ng-disabled="!layers.length"/>
-        <button type="submit" class="btn btn-large btn-primary" ng-disabled="!targetName.length">
+        <input type="text" class="huge input-xxlarge" placeholder="Type the recipe(s) you want to build" autocomplete="off" data-ng-model="targetName" data-typeahead="e.name for e in getAutocompleteSuggestions('targets', $viewValue)|filter:$viewValue" data-typeahead-template-url="suggestion_details" data-ng-disabled="!layers.length"/>
+        <button type="submit" class="btn btn-large btn-primary" data-ng-disabled="!targetName.length">
         Build
         </button>
       </div>
@@ -124,27 +124,27 @@ vim: expandtab tabstop=2
   <!-- latest builds list -->
 
   <a id="buildslist"></a>
-  <h2 class="air" ng-if="builds.length">Latest builds</h2>
-  <div class="animate-repeat alert"  ng-repeat="b in builds track by b.id" ng-class="{'queued':'alert-info', 'deleted':'alert-info', 'in progress': 'alert-info', 'failed':'alert-error', 'completed':{'In Progress':'alert-info', 'Succeeded':'alert-success', 'Failed':'alert-error'}[b.build[0].status]}[b.status]">
+  <h2 class="air" data-ng-if="builds.length">Latest builds</h2>
+  <div class="animate-repeat alert"  data-ng-repeat="b in builds track by b.id" data-ng-class="{'queued':'alert-info', 'deleted':'alert-info', 'in progress': 'alert-info', 'failed':'alert-error', 'completed':{'In Progress':'alert-info', 'Succeeded':'alert-success', 'Failed':'alert-error'}[b.build[0].status]}[b.status]">
     <div class="row-fluid">
-        <switch ng-switch="b.status">
+        <switch data-ng-switch="b.status">
 
-          <case ng-switch-when="failed">
+          <case data-ng-switch-when="failed">
             <div class="lead span3">
-              <a ng-class="{'succeeded': 'success', 'failed': 'error'}[b.status]" href="{[b.br_page_url]}">
-                <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>
+              <a data-ng-class="{'succeeded': 'success', 'failed': 'error'}[b.status]" href="{[b.br_page_url]}">
+                <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>
               </a>
             </div>
             <div class="span2 lead">
-              <ngif ng-if="b.updated - todaydate > 0">
+              <ngif data-ng-if="b.updated - todaydate > 0">
                  {[b.updated|date:'HH:mm']}
               </ngif>
-              <ngif ng-if="b.updated - todaydate < 0">
+              <ngif data-ng-if="b.updated - todaydate < 0">
                  {[b.updated|date:'dd/MM/yy HH:mm']}
               </ngif>
             </div>
             <div class="span2">
-              <ngif ng-if="b.errors.length">
+              <ngif data-ng-if="b.errors.length">
                 <span>
                   <i class="icon-minus-sign red lead"></i>
                   <a href="{[b.br_page_url]}#errors" class="lead error">{[b.errors.length]}
@@ -156,47 +156,47 @@ vim: expandtab tabstop=2
               <!-- we don't have warnings in this case -->
             </div>
             <div> <span class="lead">Build time: {[b.command_time|timediff]}</span>
-                <button class="btn pull-right" ng-class="{'succeeded':  'btn-success', 'failed': 'btn-danger'}[b.status]"
-                    ng-click="buildExistingTarget(b.targets)">Run again</button>
+                <button class="btn pull-right" data-ng-class="{'succeeded':  'btn-success', 'failed': 'btn-danger'}[b.status]"
+                    data-ng-click="buildExistingTarget(b.targets)">Run again</button>
 
             </div>
           </case>
 
-          <case ng-switch-when="queued">
-            <div class="lead span5"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
+          <case data-ng-switch-when="queued">
+            <div class="lead span5"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
             <div class="span4 lead" >Build queued
               <i title="This build will start as soon as a build server is available" class="icon-question-sign get-help get-help-blue heading-help" data-toggle="tooltip"></i>
             </div>
-            <button class="btn pull-right btn-info" ng-click="buildCancel(b)">Cancel</button>
+            <button class="btn pull-right btn-info" data-ng-click="buildCancel(b)">Cancel</button>
           </case>
 
-          <case ng-switch-when="created">
-            <div class="lead span5"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
+          <case data-ng-switch-when="created">
+            <div class="lead span5"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
             <div class="span4">
               <span class="lead">Creating build</span>
             </div>
-            <button class="btn pull-right btn-info" ng-click="buildCancel(b)">Cancel</button>
+            <button class="btn pull-right btn-info" data-ng-click="buildCancel(b)">Cancel</button>
           </case>
 
-          <case ng-switch-when="deleted">
-            <div class="lead span5"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
+          <case data-ng-switch-when="deleted">
+            <div class="lead span5"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
             <div class="span4" id="{[b.id]}-deleted" >
               <span class="lead">Build cancelled</span>
             </div>
-            <button class="btn pull-right btn-info" ng-click="buildDelete(b)">Close</button>
+            <button class="btn pull-right btn-info" data-ng-click="buildDelete(b)">Close</button>
           </case>
 
 
-          <case ng-switch-when="in progress">
-            <switch ng-switch="b.build.length">
-              <case ng-switch-when="0">
-                <div class="lead span5"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
+          <case data-ng-switch-when="in progress">
+            <switch data-ng-switch="b.build.length">
+              <case data-ng-switch-when="0">
+                <div class="lead span5"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
                 <div class="span4 lead">
                   Checking out layers
                 </div>
               </case>
-              <case ng-switch-default="">
-                <div class="lead span3"> <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>   </div>
+              <case data-ng-switch-default="">
+                <div class="lead span3"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
                 <div class="span4 offset1" >
                   <div class="progress" style="margin-top:5px;" data-toggle="tooltip" tooltip="{[b.build[0].completeper]}% of tasks complete">
                       <div style="width: {[b.build[0].completeper]}%;" class="bar"></div>
@@ -207,22 +207,22 @@ vim: expandtab tabstop=2
           </case>
 
 
-          <case ng-switch-when="completed">
+          <case data-ng-switch-when="completed">
             <div class="lead span3">
-              <a ng-class="{'Succeeded': 'success', 'Failed': 'error'}[b.build[0].status]" href="{[b.build[0].build_page_url]}">
-                <span ng-repeat="t in b.targets" ng-include src="'target_display'"></span>
+              <a data-ng-class="{'Succeeded': 'success', 'Failed': 'error'}[b.build[0].status]" href="{[b.build[0].build_page_url]}">
+                <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>
               </a>
             </div>
             <div class="span2 lead">
-              <ngif ng-if="b.build[0].completed_on - todaydate > 0">
+              <ngif data-ng-if="b.build[0].completed_on - todaydate > 0">
                  {[b.build[0].completed_on|date:'HH:mm']}
               </ngif>
-              <ngif ng-if="b.build[0].completed_on - todaydate < 0">
+              <ngif data-ng-if="b.build[0].completed_on - todaydate < 0">
                  {[b.build[0].completed_on|date:'dd/MM/yy HH:mm']}
               </ngif>
             </div>
             <div class="span2">
-              <ngif ng-if="b.build[0].errors">
+              <ngif data-ng-if="b.build[0].errors">
                 <span>
                   <i class="icon-minus-sign red lead"></i>
                   <a href="{[b.build[0].build_page_url]}#errors" class="lead error">{[b.build[0].errors]}
@@ -231,7 +231,7 @@ vim: expandtab tabstop=2
               </ngif>
             </div>
             <div class="span2">
-              <ngif ng-if="b.build[0].warnings">
+              <ngif data-ng-if="b.build[0].warnings">
                 <span>
                   <i class="icon-warning-sign yellow lead"></i>
                   <a href="{[b.build[0].build_page_url]}#warnings" class="lead warning">{[b.build[0].warnings]}
@@ -240,14 +240,14 @@ vim: expandtab tabstop=2
               </ngif>
             </div>
             <div> <span class="lead">Build time: <a href="{[b.build[0].build_time_page_url]}">{[b.build[0].build_time|timediff]}</a></span>
-                <button class="btn pull-right" ng-class="{'Succeeded':  'btn-success', 'Failed': 'btn-danger'}[b.build[0].status]"
-                    ng-click="buildExistingTarget(b.targets)">Run again</button>
+                <button class="btn pull-right" data-ng-class="{'Succeeded':  'btn-success', 'Failed': 'btn-danger'}[b.build[0].status]"
+                    data-ng-click="buildExistingTarget(b.targets)">Run again</button>
 
             </div>
           </case>
 
 
-          <case ng-switch-default="">
+          <case data-ng-switch-default="">
           <div>FIXME!</div>
           </case>
         </switch>
@@ -259,9 +259,9 @@ vim: expandtab tabstop=2
   <h2 class="air">Project configuration</h2>
 
   <!-- alerts section 2 -->
-  <div ng-repeat="a in zone2alerts">
-    <div class="alert alert-dismissible lead" role="alert" ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
-      <span ng-bind-html="a.text"></span>
+  <div data-ng-repeat="a in zone2alerts">
+    <div class="alert alert-dismissible lead" role="alert" data-ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
+      <span data-ng-bind-html="a.text"></span>
     </div>
   </div>
 
@@ -273,7 +273,7 @@ vim: expandtab tabstop=2
         Layers <span class="muted counter">({[layers.length]})</span>
         <i class="icon-question-sign get-help heading-help" title="Bitbake reads metadata files from modules called 'layers'. Layers allow you to isolate different types of customizations from each other. <a href='http://www.yoctoproject.org/docs/current/dev-manual/dev-manual.html#understanding-and-creating-layers' target='_blank'>More on layers</a>"></i>
       </h3>
-      <div class="alert" ng-if="!layers.length">
+      <div class="alert" data-ng-if="!layers.length">
         <b>You need to add some layers </b>
         <p>
         You can:
@@ -285,10 +285,10 @@ vim: expandtab tabstop=2
         Or type a layer name below.
         </p>
       </div>
-      <form ng-submit="layerAdd()">
+      <form data-ng-submit="layerAdd()">
         <div class="input-append">
-          <input type="text" class="input-xlarge" id="layer" autocomplete="off" placeholder="Type a layer name" data-minLength="1" ng-model="layerAddName" typeahead="e.name for e in getAutocompleteSuggestions('layers', $viewValue)|filter:$viewValue" typeahead-template-url="suggestion_details" typeahead-on-select="onLayerSelect($item, $model, $label)" typeahead-editable="false" ng-class="{ 'has-error': layerAddName.$invalid }" />
-          <input type="submit" id="add-layer" class="btn" value="Add" ng-disabled="!layerAddName.length"/>
+          <input type="text" class="input-xlarge" id="layer" autocomplete="off" placeholder="Type a layer name" data-minLength="1" data-ng-model="layerAddName" data-typeahead="e.name for e in getAutocompleteSuggestions('layers', $viewValue)|filter:$viewValue" data-typeahead-template-url="suggestion_details" data-typeahead-on-select="onLayerSelect($item, $model, $label)" data-typeahead-editable="false" data-ng-class="{ 'has-error': layerAddName.$invalid }" />
+          <input type="submit" id="add-layer" class="btn" value="Add" data-ng-disabled="!layerAddName.length"/>
         </div>
         {% csrf_token %}
       </form>
@@ -298,9 +298,9 @@ vim: expandtab tabstop=2
         |
         <a href="{% url 'importlayer' project.id %}">Import layer</a></p>
       <ul class="unstyled configuration-list">
-          <li ng-repeat="l in layers track by l.id" class="animate-repeat">
+          <li data-ng-repeat="l in layers track by l.id" class="animate-repeat">
             <a href="{[l.layerdetailurl]}" class="layer-info" data-toggle="tooltip" tooltip-placement="right" tooltip="{[l.giturl]} | {[l.branch.name]}">{[l.name]}</a>
-            <i class="icon-trash" ng-click="layerDel(l.id)" tooltip="Delete"></i>
+            <i class="icon-trash" data-ng-click="layerDel(l.id)" tooltip="Delete"></i>
                       </li>
       </ul>
     </div>
@@ -312,10 +312,10 @@ vim: expandtab tabstop=2
         Recipes
         <i class="icon-question-sign get-help heading-help" title="What you build, often an image recipe that produces a root file system file. Something like <code>core-image-minimal</code> or <code>core-image-sato</code>"></i>
       </h3>
-        <form ng-submit="buildNamedTarget()">
+        <form data-ng-submit="buildNamedTarget()">
           <div class="input-append">
-            <input type="text" class="input-xlarge" placeholder="Type the recipe(s) you want to build" autocomplete="off" data-minLength="1"  ng-model="targetName1" typeahead="e.name for e in getAutocompleteSuggestions('targets', $viewValue)|filter:$viewValue" typeahead-template-url="suggestion_details" ng-disabled="!layers.length">
-            <button type="submit" class="btn btn-primary" ng-disabled="!targetName1.length">
+            <input type="text" class="input-xlarge" placeholder="Type the recipe(s) you want to build" autocomplete="off" data-minLength="1"  data-ng-model="targetName1" data-typeahead="e.name for e in getAutocompleteSuggestions('targets', $viewValue)|filter:$viewValue" data-typeahead-template-url="suggestion_details" data-ng-disabled="!layers.length">
+            <button type="submit" class="btn btn-primary" data-ng-disabled="!targetName1.length">
               Build </button>
           </div>
           {% csrf_token %}
@@ -324,18 +324,18 @@ vim: expandtab tabstop=2
           <a href="{% url 'all-targets' project.id %}">View all compatible recipes</a>
           <i class="icon-question-sign get-help" title="View all the recipes you can build with the release selected for this project, which is {[project.release.desc]}"></i>
         </p>
-        <div ng-if="frequenttargets.length">
+        <div data-ng-if="frequenttargets.length">
         <h4 class="air">
             Most built recipes
         </h4>
           <ul class="unstyled configuration-list {[mutedtargets]}">
-          <li ng-repeat="t in frequenttargets">
+          <li data-ng-repeat="t in frequenttargets">
             <label class="checkbox">
-              <input type="checkbox" ng-model="mostBuiltTargets[t]" ng-disabled="disableBuildCheckbox(t)" ng-checked="mostBuiltTargets[t] && !disableBuildCheckbox(t)">{[t]}
+              <input type="checkbox" data-ng-model="mostBuiltTargets[t]" data-ng-disabled="disableBuildCheckbox(t)" data-ng-checked="mostBuiltTargets[t] && !disableBuildCheckbox(t)">{[t]}
             </label>
           </li>
         </ul>
-        <button class="btn btn-large btn-primary" ng-disabled="enableBuildSelectedTargets()" ng-click="buildSelectedTargets()">Build selected recipes</button>
+        <button class="btn btn-large btn-primary" data-ng-disabled="enableBuildSelectedTargets()" data-ng-click="buildSelectedTargets()">Build selected recipes</button>
         </div>
     </div>
 
@@ -347,17 +347,17 @@ vim: expandtab tabstop=2
       </h3>
       <p class="lead" id="select-machine-opposite">
         <span>{[machine.name]}</span>
-        <i id="change-machine" class="icon-pencil" ng-click="toggle('#select-machine')"></i>
+        <i id="change-machine" class="icon-pencil" data-ng-click="toggle('#select-machine')"></i>
       </p>
       <div id="select-machine" style="display: none">
         <div class="alert alert-info">
           <strong>Machine changes have a big impact on build outcome.</strong>
               You cannot really compare the builds for the new machine with the previous ones.
         </div>
-        <form ng-submit="editProjectSettings('#select-machine')" class="input-append">
-              <input type="text" id="machine" autocomplete="off" ng-model="machineName" value="{[machine.name]}" typeahead="m.name for m in getAutocompleteSuggestions('machines', $viewValue)" typeahead-template-url="suggestion_details" />
-              <input type="submit" id="apply-change-machine" class="btn" type="button" ng-disabled="machineName == machine.name || machineName.length == 0" value="Save"></input>
-              <input type="reset" id="cancel-machine" class="btn btn-link" ng-click="toggle('#select-machine')" value="Cancel"></input>
+        <form data-ng-submit="editProjectSettings('#select-machine')" class="input-append">
+              <input type="text" id="machine" autocomplete="off" data-ng-model="machineName" value="{[machine.name]}" data-typeahead="m.name for m in getAutocompleteSuggestions('machines', $viewValue)" data-typeahead-template-url="suggestion_details" />
+              <input type="submit" id="apply-change-machine" class="btn" data-ng-disabled="machineName == machine.name || machineName.length == 0" value="Save"/>
+              <input type="reset" id="cancel-machine" class="btn btn-link" data-ng-click="toggle('#select-machine')" value="Cancel"/>
               {% csrf_token %}
         </form>
         <p>
@@ -376,9 +376,9 @@ vim: expandtab tabstop=2
   <h2>Project details</h2>
 
   <!-- alerts section 3 -->
-  <div ng-repeat="a in zone3alerts">
-    <div class="alert alert-dismissible lead" role="alert" ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
-      <span ng-bind-html="a.text"></span>
+  <div data-ng-repeat="a in zone3alerts">
+    <div class="alert alert-dismissible lead" role="alert" data-ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
+      <span data-ng-bind-html="a.text"></span>
     </div>
   </div>
 
@@ -387,31 +387,31 @@ vim: expandtab tabstop=2
     <h3>Project name</h3>
     <p class="lead" id="change-project-name-opposite">
       <span >{[project.name]}</span>
-      <i class="icon-pencil" ng-click="toggle('#change-project-name')" ></i>
+      <i class="icon-pencil" data-ng-click="toggle('#change-project-name')" ></i>
     </p>
     <div id="change-project-name" style="display:none;">
-      <form ng-submit="editProjectSettings('#change-project-name')" class="input-append">
-        <input type="text" class="input-xlarge" id="type-project-name" ng-model="projectName" value="{[project.name]}">
-        <input type="submit" class="btn" value="Save" ng-disabled="project.name == projectName"/>
-        <input type="reset" class="btn btn-link" value="Cancel" ng-click="toggle('#change-project-name')">
+      <form data-ng-submit="editProjectSettings('#change-project-name')" class="input-append">
+        <input type="text" class="input-xlarge" id="type-project-name" data-ng-model="projectName" value="{[project.name]}">
+        <input type="submit" class="btn" value="Save" data-ng-disabled="project.name == projectName"/>
+        <input type="reset" class="btn btn-link" value="Cancel" data-ng-click="toggle('#change-project-name')">
      </form>
     </div>
 
-    <h3 ng-if="releases.length > 1">
+    <h3 data-ng-if="releases.length > 1">
       Release
       <i class="icon-question-sign get-help heading-help" title="The version of the build system you want to use"></i>
     </h3>
-    <p ng-if="releases.length > 1" class="lead" id="change-project-version-opposite">
+    <p data-ng-if="releases.length > 1" class="lead" id="change-project-version-opposite">
       <span id="project-version">{[project.release.desc]}</span>
-      <i id="change-version" class="icon-pencil" ng-click="toggle('#change-project-version')" ></i>
+      <i id="change-version" class="icon-pencil" data-ng-click="toggle('#change-project-version')" ></i>
     </p>
     <div class="div-inline" id="change-project-version" style="display:none;">
-      <form ng-submit="testProjectSettingsChange('#change-project-version')" class="input-append">
-        <select id="select-version" ng-model="projectVersion">
-          <option ng-repeat="r in releases" value="{[r.id]}" ng-selected="r.id == project.release.id">{[r.description]}</option>
+      <form data-ng-submit="testProjectSettingsChange('#change-project-version')" class="input-append">
+        <select id="select-version" data-ng-model="projectVersion">
+          <option data-ng-repeat="r in releases" value="{[r.id]}" data-ng-selected="r.id == project.release.id">{[r.description]}</option>
         </select>
-        <input type="submit" class="btn" style="margin-left:5px;" value="Save" ng-disabled="project.release.id == projectVersion"/>
-        <input type="reset"  class="btn btn-link" value="Cancel" ng-click="toggle('#change-project-version')"/>
+        <input type="submit" class="btn" style="margin-left:5px;" value="Save" data-ng-disabled="project.release.id == projectVersion"/>
+        <input type="reset"  class="btn btn-link" value="Cancel" data-ng-click="toggle('#change-project-version')"/>
 
       </form>
     </div>
@@ -431,7 +431,7 @@ angular.element(document).ready(function() {
   scope.urls = {};
   scope.urls.xhr_build = "{% url 'xhr_projectbuild' project.id %}";
   scope.urls.xhr_edit = "{% url 'xhr_projectedit' project.id %}";
-  scope.urls.xhr_datatypeahead = "{% url 'xhr_datatypeahead' %}";
+  scope.urls.xhr_datatypeahead = "{% url 'xhr_datatypeahead' project.id %}";
   scope.urls.layers = "{% url 'all-layers' project.id %}";
   scope.urls.targets = "{% url 'all-targets' project.id %}";
   scope.urls.importlayer = "{% url 'importlayer' project.id %}";
diff --git a/lib/toaster/toastergui/templates/recipe.html b/lib/toaster/toastergui/templates/recipe.html
index 6eba9b6f0..a0fe6d71d 100644
--- a/lib/toaster/toastergui/templates/recipe.html
+++ b/lib/toaster/toastergui/templates/recipe.html
@@ -45,7 +45,7 @@
         </li>
     </ul>
     <div class="tab-content">
-        <div class="tab-pane {{tab_states.1}}" id="information" name="information">
+        <div class="tab-pane {{tab_states.1}}" id="information">
             <dl class="dl-horizontal">
                 <dt>
                     <i class="icon-question-sign get-help" title="The name of the layer providing the recipe"></i>
@@ -144,7 +144,7 @@
             </table>
             {% endif %}
         </div>
-        <div class="tab-pane {{tab_states.3}}" id="dependencies" name="dependencies">
+        <div class="tab-pane {{tab_states.3}}" id="dependencies">
 
             {% if not object.r_dependencies_recipe.all %}
             <div class="alert alert-info">
@@ -176,7 +176,7 @@
             {% endif %}
 
         </div>
-        <div class="tab-pane {{tab_states.4}}" id="brought-in-by" name="brought-in-by">
+        <div class="tab-pane {{tab_states.4}}" id="brought-in-by">
 
             {% if not object.r_dependencies_depends.all %}
             <div class="alert alert-info">
diff --git a/lib/toaster/toastergui/templates/targets.html b/lib/toaster/toastergui/templates/targets.html
index dc2cef688..224288ea3 100644
--- a/lib/toaster/toastergui/templates/targets.html
+++ b/lib/toaster/toastergui/templates/targets.html
@@ -97,14 +97,14 @@
             </a>
             {% endif %}
         </td>
-        <td class="add-layer" value="{{o.pk}}">
+        <td class="add-layer" data-value="{{o.pk}}">
           <a href="{% url 'project' project.id %}#/targetbuild={{o.name}}" class="btn btn-block layer-exists-{{o.preffered_layerversion.pk}}" style="display:none; margin-top: 5px;" >
             Build recipe
           </a>
           <button class="btn btn-block layerbtn layer-add-{{o.preffered_layerversion.pk}}" data-layer='{ "id": {{o.preffered_layerversion.pk}}, "name":  "{{o.preffered_layerversion.layer.name}}", "url": "{%url 'layerdetails' project.id o.preffered_layerversion.pk%}"}' data-directive="add">
             <i class="icon-plus"></i>
             Add layer
-            <i title="" class="icon-question-sign get-help" data-original-title="To build this target, you must first add the {{o.preffered_layerversion.layer.name}} layer to your project"></i></i>
+            <i title="" class="icon-question-sign get-help" data-original-title="To build this target, you must first add the {{o.preffered_layerversion.layer.name}} layer to your project"></i>
         </button>
       </td>
     </tr>
diff --git a/lib/toaster/toastergui/templates/task.html b/lib/toaster/toastergui/templates/task.html
index 907c62183..6e06ddfa3 100644
--- a/lib/toaster/toastergui/templates/task.html
+++ b/lib/toaster/toastergui/templates/task.html
@@ -22,19 +22,20 @@
 </h2>
 {%if task.task_executed %}
     {# executed tasks outcome #}
-    <dl class="dl-horizontal">
-	{% if task.logfile %}
-	{% if MANAGED and build.project %}
+    {% if task.logfile %}
+      {% if MANAGED and build.project %}
             <a class="btn btn-large" href="{% url 'build_artifact' build.id "tasklogfile" task.pk %}" style="margin:15px;">Download task log</a>
-	{% else %}
+      {% else %}
+       <dl class="dl-horizontal">
         <dt>
             <i class="icon-question-sign get-help" title="Path the task log file"></i> Log file
         </dt>
         <dd>
              <code>{{task.logfile}}</code>
         </dd>
-	{% endif %}
-	{% endif %}
+       </dl>
+      {% endif %}
+    {% endif %}
         {# show stack trace for failed task #}
         {% if task.outcome == task.OUTCOME_FAILED and log_head %}
             <h3>Python stack trace</h3>
@@ -45,7 +46,6 @@
                         <code>{{log_body}}</code><br><a id="full-trace-hide" class="btn btn-mini collapsed" style="font-family:Helvetica Neue" data-target="#fulltrace" data-toggle="collapse">Collapse stack trace<i class="icon-caret-up"></i></a></div></pre>
             </div>
         {% endif %}
-    </dl>
 {% else %}
 {# not executed tasks outcome #}
     {% if task.outcome == task.OUTCOME_PREBUILT %}
@@ -155,15 +155,16 @@
 
 {# Execution section #}
     {% if task.task_executed %}
-	<h2>
+    <h2>
         Executed
         <i class="icon-question-sign get-help heading-help" title="'Executed' tasks are those that need to run in order to generate the task output"></i>
     {% else %}
-	<h2 class="muted">
+    <h2 class="muted">
         Not Executed
         <i class="icon-question-sign get-help heading-help" title="'Not executed' tasks don't need to run because their outcome is provided by another task"></i>
     {% endif %}
-	</h2>
+    </h2>
+
 <dl class="dl-horizontal">
     <dt>
         <i class="icon-question-sign get-help" title="To make builds more efficient, the build system detects changes in the 'inputs' to a given task by creating a 'task signature'. If the signature changes, the build system assumes the inputs have changed and the task needs to be rerun"></i>
@@ -172,12 +173,12 @@
     <dd>
         {{task.sstate_checksum}}
     </dd>
+</dl>
     {% if task.sstate_result != task.SSTATE_NA %}
-		</dl>
         <div class="alert alert-info">Attempting to restore output from sstate cache
             <i class="icon-question-sign get-help get-help-blue" title="The build system is searching for the task output in your <code>sstate-cache</code> directory and mirrors. If the build system finds the task output, it will reuse it instead of building it from scratch by running the real task. Reusing the task output makes the build faster"></i>
         </div>
-		<dl class="dl-horizontal">
+        <dl class="dl-horizontal">
             <dt>
                 <i class="icon-question-sign get-help" title="The name of the file searched for in your <code>sstate-cache</code> directory and mirrors"></i>
                 File searched for
@@ -274,27 +275,27 @@
     <h2 class="details">Performance</h2>
 {% endif %}
     <dl class="dl-horizontal">
-		{% if task.elapsed_time %}
+        {% if task.elapsed_time %}
         <dt>
             <i class="icon-question-sign get-help" title="How long it took the task to finish in seconds"></i>
             Time (secs)
         </dt>
         <dd>{{task.elapsed_time|format_none_and_zero|floatformat:2}}</dd>
-		{% endif %}
-		{% if task.cpu_usage > 0 %}
+        {% endif %}
+        {% if task.cpu_usage > 0 %}
         <dt>
             <i class="icon-question-sign get-help" title="The percentage of task CPU utilization"></i>
             CPU usage
         </dt>
         <dd>{{task.cpu_usage|format_none_and_zero|floatformat:2}}%</dd>
-		{% endif %}
-		{% if task.disk_io > 0 %}
+        {% endif %}
+        {% if task.disk_io > 0 %}
         <dt>
             <i class="icon-question-sign get-help" title="Number of miliseconds the task spent doing disk input and output"></i>
             Disk I/O (ms)
         </dt>
         <dd>{{task.disk_io|format_none_and_zero}}</dd>
-		{% endif %}
+        {% endif %}
     </dl>
 
 </div>
diff --git a/lib/toaster/toastergui/urls.py b/lib/toaster/toastergui/urls.py
index de8c62cd6..d686c967d 100644
--- a/lib/toaster/toastergui/urls.py
+++ b/lib/toaster/toastergui/urls.py
@@ -53,7 +53,7 @@ urlpatterns = patterns('toastergui.views',
         # images are known as targets in the internal model
         url(r'^build/(?P<build_id>\d+)/target/(?P<target_id>\d+)$', 'target', name='target'),
         url(r'^build/(?P<build_id>\d+)/target/(?P<target_id>\d+)/targetpkg$', 'targetpkg', name='targetpkg'),
-        url(r'^dentries/build/(?P<build_id>\d+)/target/(?P<target_id>\d+)$', 'dirinfo_ajax', name='dirinfo_ajax'),
+        url(r'^dentries/build/(?P<build_id>\d+)/target/(?P<target_id>\d+)$', 'xhr_dirinfo', name='dirinfo_ajax'),
         url(r'^build/(?P<build_id>\d+)/target/(?P<target_id>\d+)/dirinfo$', 'dirinfo', name='dirinfo'),
         url(r'^build/(?P<build_id>\d+)/target/(?P<target_id>\d+)/dirinfo_filepath/_(?P<file_path>(?:/[^/\n]+)*)$', 'dirinfo', name='dirinfo_filepath'),
         url(r'^build/(?P<build_id>\d+)/configuration$', 'configuration', name='configuration'),
@@ -83,7 +83,7 @@ urlpatterns = patterns('toastergui.views',
 
         url(r'^project/(?P<pid>\d+)/layers/$', 'layers', name='all-layers'),
         url(r'^project/(?P<pid>\d+)/layer/(?P<layerid>\d+)$', 'layerdetails', name='layerdetails'),
-        url(r'^project/(?P<pid>\d+)/layer/$', lambda x: HttpResponseBadRequest(), name='base_layerdetails'),
+        url(r'^project/(?P<pid>\d+)/layer/$', lambda x,pid: HttpResponseBadRequest(), name='base_layerdetails'),
 
         # the import layer is a project-specific functionality;
         url(r'^project/(?P<pid>\d+)/importlayer$', 'importlayer', name='importlayer'),
@@ -92,12 +92,12 @@ urlpatterns = patterns('toastergui.views',
         url(r'^project/(?P<pid>\d+)/machines/$', 'machines', name='all-machines'),
 
         url(r'^xhr_build/$', 'xhr_build', name='xhr_build'),
-        url(r'^xhr_projectbuild/(?P<pid>\d+)/$', 'xhr_projectbuild', name='xhr_projectbuild'),
+        url(r'^xhr_projectbuild/(?P<pid>\d+)$', 'xhr_projectbuild', name='xhr_projectbuild'),
         url(r'^xhr_projectinfo/$', 'xhr_projectinfo', name='xhr_projectinfo'),
-        url(r'^xhr_projectedit/(?P<pid>\d+)/$', 'xhr_projectedit', name='xhr_projectedit'),
-        url(r'^xhr_configvaredit/(?P<pid>\d+)/$', 'xhr_configvaredit', name='xhr_configvaredit'),
+        url(r'^xhr_projectedit/(?P<pid>\d+)$', 'xhr_projectedit', name='xhr_projectedit'),
+        url(r'^xhr_configvaredit/(?P<pid>\d+)$', 'xhr_configvaredit', name='xhr_configvaredit'),
 
-        url(r'^xhr_datatypeahead/$', 'xhr_datatypeahead', name='xhr_datatypeahead'),
+        url(r'^xhr_datatypeahead/(?P<pid>\d+)$', 'xhr_datatypeahead', name='xhr_datatypeahead'),
         url(r'^xhr_importlayer/$', 'xhr_importlayer', name='xhr_importlayer'),
         url(r'^xhr_updatelayer/$', 'xhr_updatelayer', name='xhr_updatelayer'),
 
diff --git a/lib/toaster/toastergui/views.py b/lib/toaster/toastergui/views.py
index d938fd828..44f33beba 100755
--- a/lib/toaster/toastergui/views.py
+++ b/lib/toaster/toastergui/views.py
@@ -743,9 +743,9 @@ def targetpkg( request, build_id, target_id ):
 
 from django.core.serializers.json import DjangoJSONEncoder
 from django.http import HttpResponse
-def dirinfo_ajax(request, build_id, target_id):
+def xhr_dirinfo(request, build_id, target_id):
     top = request.GET.get('start', '/')
-    return HttpResponse(_get_dir_entries(build_id, target_id, top))
+    return HttpResponse(_get_dir_entries(build_id, target_id, top), content_type = "application/json")
 
 from django.utils.functional import Promise
 from django.utils.encoding import force_text
@@ -1961,7 +1961,7 @@ if toastermain.settings.MANAGED:
 
         if (insert_projects):
             context['tablecols'].append(
-                    {'name': 'Project', 'clclass': 'project',
+                    {'name': 'Project', 'clclass': 'project_column',
                     }
             )
 
@@ -2307,14 +2307,9 @@ if toastermain.settings.MANAGED:
 
     from django.views.decorators.csrf import csrf_exempt
     @csrf_exempt
-    def xhr_datatypeahead(request):
+    def xhr_datatypeahead(request, pid):
         try:
-            prj = None
-            if request.GET.has_key('project_id'):
-                prj = Project.objects.get(pk = request.GET['project_id'])
-            else:
-                raise Exception("No valid project selected")
-
+            prj = Project.objects.get(pk = pid)
 
             def _lv_to_dict(x):
                 return {"id": x.pk,
@@ -2322,7 +2317,7 @@ if toastermain.settings.MANAGED:
                         "tooltip": x.layer.vcs_url+" | "+x.get_vcs_reference(),
                         "detail": "(" + x.layer.vcs_url + (")" if x.up_branch == None else " | "+x.get_vcs_reference()+")"),
                         "giturl": x.layer.vcs_url,
-                        "layerdetailurl" : reverse('layerdetails', args=(x.pk,)),
+                        "layerdetailurl" : reverse('layerdetails', args=(pid, x.pk,)),
                         "revision" : x.get_vcs_reference(),
                        }
 
@@ -2867,8 +2862,7 @@ if toastermain.settings.MANAGED:
             ]
         }
 
-        if 'project_id' in request.session:
-            context['tablecols'] += [
+        context['tablecols'] += [
                 {   'name': 'Build',
                     'dclass': 'span2',
                     'qhelp': "Add or delete targets to / from your project ",
@@ -3509,7 +3503,7 @@ else:
     def layerdetails(request, layerid):
         return render(request, 'landing_not_managed.html')
 
-    def targets(request):
+    def targets(request, pid):
         return render(request, 'landing_not_managed.html')
 
     def machines(request):