add some visual feedback for POST requests

diff --git a/root/css/relationship.css b/root/css/relationship.css
index 3a85b7d..d64acab 100644 (file)
--- a/root/css/relationship.css
+++ b/root/css/relationship.css
@@ -214,8 +214,20 @@ span.apimore {
 user-select: none;
 }
 
-#morphology {
+#normalization {
+       float: left;
+       padding: 10px;
+}
+#relemmatize_pending {
+       float: left;
+       padding: 10px;
+       display: none;
+}
+#morph_outer {
+       clear: both;
        float: left;
+}
+#morphology {
        text-align: right;
        margin: 10px;
 }

diff --git a/root/js/relationship.js b/root/js/relationship.js
index ed43d5d..b865e9c 100644 (file)
--- a/root/js/relationship.js
+++ b/root/js/relationship.js
@@ -145,6 +145,7 @@ function color_inactive ( el ) {
 
 function relemmatize () {
        // Send the reading for a new lemmatization and reopen the form.
+       $('#relemmatize_pending').show();
        var reading_id = $('#reading_id').val()
        ncpath = getReadingURL( reading_id );
        form_values = { 
@@ -160,6 +161,7 @@ function relemmatize () {
                } else {
                        alert("Could not relemmatize as requested: " + data['error']);
                }
+               $('#relemmatize_pending').hide();
        });
 }
 
@@ -754,7 +756,9 @@ $(document).ready(function () {
                Cancel: function() {
                        $( this ).dialog( "close" );
                },
-               Update: function() {
+               Update: function( evt ) {
+                       // Disable the button
+                       $(evt.target).button("disable");
                        $('#reading_status').empty();
                        var reading_id = $('#reading_id').val()
                        form_values = {
@@ -771,7 +775,7 @@ $(document).ready(function () {
                        // Make the JSON call
                        ncpath = getReadingURL( reading_id );
                        var reading_element = readingdata[reading_id];
-                       $(':button :contains("Update")').attr("disabled", true);
+                       // $(':button :contains("Update")').attr("disabled", true);
                        var jqjson = $.post( ncpath, form_values, function(data) {
                                $.each( data, function(key, value) { 
                                        reading_element[key] = value;
@@ -779,6 +783,7 @@ $(document).ready(function () {
                                if( $('#update_workspace_button').data('locked') == false ) {
                                        color_inactive( get_ellipse( reading_id ) );
                                }
+                               $(evt.target).button("enable");
                                $( "#reading-form" ).dialog( "close" );
                        });
                        // Re-color the node if necessary
@@ -803,6 +808,7 @@ $(document).ready(function () {
        && ajaxSettings.type == 'POST' && jqXHR.status == 403 ) {
          var errobj = jQuery.parseJSON( jqXHR.responseText );
           $('#reading_status').append( '<p class="error">Error: ' + errobj.error + '</p>' );
+                 $(event.target).parent().find('.ui-button').button("enable");
       }
   });
   

diff --git a/root/src/relate.tt b/root/src/relate.tt
index 49afb7b..ee47b83 100644 (file)
--- a/root/src/relate.tt
+++ b/root/src/relate.tt
@@ -85,12 +85,18 @@ $(document).ready(function () {
                        <label for="reading_grammar_invalid">This word's grammar cannot be right</label>
                        <br/><br/>
                        <!-- Morphological options go here -->
-                       <label for="reading_normal_form">Normalized form: </label>
-                       <input type="text" name="reading_normal_form" id="reading_normal_form"></input>
-                       <button id="#reading_relemmatize" onclick="relemmatize(); return false;">Re-lemmatize</button>
+                       <div id="normalization">
+                               <label for="reading_normal_form">Normalized form: </label>
+                               <input type="text" name="reading_normal_form" id="reading_normal_form"></input>
+                               <button id="#reading_relemmatize" onclick="relemmatize(); return false;">Re-lemmatize</button>
+                       </div>
+                       <div id="relemmatize_pending">
+                               <img src="[% c.uri_for('/images/ajax-loader.gif') %]"/>
+                       </div>
                        <br/><br/>
-                       <label>Lemma / part of speech:</label><br/>
-                       <div id="morphology">
+                       <div id="morph_outer">
+                               <label>Lemma / part of speech:</label><br/>
+                               <div id="morphology"></div>
                        </div>
                        </select>
                        <div id="reading_status"></div>