Databases
StackOverflow2013
Postsdbo
POThinking in AngularJS - what's the proper approach for modifying the DOM in an AJAX request?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POThinking in AngularJS - what's the proper approach for modifying the DOM in an AJAX request?
    primarykey
    data
    text
    <p>I'm brand new to AngularJS. I've read over <a href="https://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1">&quot;Thinking in AngularJS&quot; if I have a jQuery background?</a> and the answers made a lot of sense. However, I'm still having a hard time translating what I want to do without relying on jQuery.</p> <p>My request seems fairly simple. I have a form that does an AJAX call when submitted. I want the Submit button to visually update to inform the user on the the AJAX request status. The Submit button won't be updated with simple text, but instead be updated with text plus a icon. The icon is in HTML which means I can't use AngularJS simple data binding.</p> <p>I have this request working in <a href="http://jsfiddle.net/ravishi/urSDM/4/" rel="nofollow noreferrer">jsFiddle</a>. </p> <p><strong>HTML</strong></p> <pre><code>&lt;div ng-app &gt; &lt;form id="id_request" ng-controller="RequestCtrl"&gt; &lt;input id="id_title" name="title" ng-model="request.title" type="text" class="ng-valid ng-dirty" /&gt; &lt;button type="submit" class="btn btn-primary" ng-click="submitRequest($event)"&gt; Submit &lt;/button&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p><strong>AngularJS</strong></p> <pre><code>function RequestCtrl($scope, $http) { $scope.request = {}; $scope.submitRequest = function($event) { $($event.target).prop("disabled", true).html('&lt;i class="icon-refresh icon-spin"&gt;&lt;/i&gt; Submitting&lt;/a&gt;'); $http({ method : 'GET', url : '/ravishi/urSDM/3/', data : $.param($scope.request), headers : { 'Content-Type' : 'application/x-www-form-urlencoded', } }). success(function(data, status, headers, config) { console.log("success"); console.log($event); // This callback will be called asynchronously when the response is available. $($event.target).html('&lt;i class="icon-ok"&gt;&lt;/i&gt; Success').delay(1500).queue(function(next) { $(this).removeAttr("disabled").html("Submit"); next(); }); }). error(function(data, status, headers, config) { console.log("error"); // Called asynchronously if an error occurs or server returns response with an error status. $($event.target).html('&lt;i class="icon-warning-sign"&gt;&lt;/i&gt; Error').delay(1500).queue(function(next) { $(this).removeAttr("disabled").html("Submit"); next(); }); }); } } </code></pre> <p>I am completely aware that this is the <strong>wrong</strong> way to do it in AngularJS. I shouldn't be updating the DOM in my controller and I should by trying to avoid jQuery completely.</p> <p>From what I gather, I need to use directives. I've seen some examples but can't think of a nice way to update the button's HTML through the multiple states it goes through. There are four states of the button:</p> <p>1 Initial -> 2 Submitting -> 3 Error or 4 Success -> 1 Initial</p> <p>My first thought is to update an arbitrary button attribute in the controller. Then in the directive, I would somehow retrieve the attribute value and conditionally update the HTML appropriately. With this approach, I am still unsure of how to link the status of the AJAX request to the button's HTML in the directive. Should I forgo the AJAX call in the controller and instead do the AJAX call in the directive by binding to the button's click event? Or, is there is a better way to do this?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USravishi
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COUse AngularJS data binding. The text is one field and the text and the image being another, the image is already there and use `ng-show` to choose which (the status or the result) to show based on the status. If you _must_ resort to editing HTML you _can_ use [ngBindHtml](http://docs.angularjs.org/api/ng.directive:ngBindHtml) but it should only be used as a last resort, especially since ng-show and ng-hide seem to solve your case nicely. Also, put the AJAX request itself in a factory or service - or even better, a resource. Data that does not affect your view doesn't belong in the controller.
      singulars
      1. POThinking in AngularJS - what's the proper approach for modifying the DOM in an AJAX request?
      1. USBenjamin Gruenbaum
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload