Trigger Jquery on an element immediately after it gets populated

Question

I have a text area which gets populated after click of a button .

<textarea rows="4" cols="50" id="4321">
  {{ data.classi}}
</textarea>

Now i want something to happen after it gets populated . I have tried onchange and a few other options but they only work after the textarea is populated an we change its content . I want it to happen right after the textarea is populated with json from back-end . How can this be done

$('#4321').on('change', function() {
  alert( this.value ); // or $(this).val()
});

This doesn't work

I am pasting the entire code here in case it helps

<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
   <script src="jquery.json-view.js"></script>
  <link href="jquery.json-view.css" rel="stylesheet"></link>

    <style>
        table, th , td  {
          border: 1px solid grey;
          border-collapse: collapse;
          padding: 5px;
        }
        table tr:nth-child(odd) {
          background-color: #f1f1f1;
        }
        table tr:nth-child(even) {
          background-color: #ffffff;
        }
    </style>
  </head>
  <body ng-controller="DebugController">
    
    <div>
      <input type="text" ng-model="query" placeholder="Search Query">
      <input type="text" ng-model="pog"  placeholder="Enter No of POGs">
      <button ng-click="onSearch()" class="button" id ="abcd">Search</button>
    </div>
    <textarea rows="4" cols="50" id="abc">
   {{ data.classi}}
   </textarea>
    <div>
        <h4>Parameters</h4>
         <table>
          <tr ng-repeat="x in data.p ">
            <td>{{ x[0] }}</td>
            <td>{{ x[1] }}</td>
          </tr>
        </table>
    </div>
    <div>
        <h4>Classifier Scores</h4>
        <table>
          <tr>
            <th>Category URL</th>
            <th>Additive Boost</th>
          </tr>
          <tr ng-repeat="x in data.classifier">
            <td>{{ x[0] }}</td>
            <td>{{ x[1] }}</td>
          </tr>
        </table>
    </div>
    <div>
        <h4>Product Groups (POGs)</h4>
        <table>
          <tr>
            <th>Id</th>
            <th>Details</th>
            <th>Score</th>
            <th>HPSA Score</th>
            <th>BF Score</th>
            <th>Word Match</th>
            <th>Classifier Score</th>
            <th>QUL Score</th>
          </tr>
          <tr ng-repeat="x in data.items | limitTo: limit " >
            <td><a href="{{ x.get }}">{{ x.id }}</td>
            <td>
                <p><b>{{ x.name[0] }}</b></p>
                <p><u>Brand</u>: {{ x.Brand }}; <u>Category URL</u>: {{ x.mlnURL }};<u>Price</u>: Rs {{x.Price}} </p>
            </td>
            <td>
                <p><a href="{{x.explain}}"><b>{{ x.score }}</b></a></p>
                Classifier Score: {{ x.cscore }} <br>
                Document Score: {{ x.sscore }} </p>
            </td>
            <td>
                <p><b> {{ x.hpsaScore_default }} </b></p>
            </td>
            <td>
                <p><b> {{ x.bf_value }} </b></p>
            </td>
            <td>
                
            </td>
            <td>
                <p> <b> {{ x.cscore }} </b></p>
            </td>
            <td>
                
            </td>
          </tr>
        </table>
    </div>
    <div>
        <h4>Solr Query</h4>
        <p>{{ data.query }}</p>
    </div>
<script>
var pog;
$(function() { 
 $('#abc').on('input', function() {
    alert("hi");
});
 });

  
</script>
  </body>
</html>

The controller of the page

 
var app = angular.module('myApp', []);

app.controller('DebugController', function($scope, $http) {
  $scope.onSearch = function () {
    $scope.data = {}
    number = $scope.pog
    $scope.limit = number
    $http.get('/search?q=' + $scope.query)
       .then(function(response) {
            console.log(response)
            params = []
     urls = []
            for (p in response.data.params) {
                params.push([p, response.data.params[p]])
            } 
     for (i in response.data.bf_value) { 
  for(j in response.data.bf_value[i]) {
   }
  
      }
     for( t in response.data.items ) { 
  p =""
  for ( s in response.data.bf_value ) { 
   p+=response.data.bf_value[s][t]
   
  }
  response.data.items[t].bf_value = p
  }
     console.log(response.data.bf_value);
            $scope.data = response.data
     $scope.data.classi = response.data.classify 
            $scope.data.p = params
            $scope.data.u = urls 

        });
   
  }
});

Side note: You cannot use that id according to the HTML specs. http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — roberrrt-s, Oct 27 '16 at 12:06
its getting populated with a json from back-end . {{ data.bf}} — Evan Root, Oct 27 '16 at 12:08
@Roberrrt Thanks . it was working with tht id as well but i shouldn't use it . Thanks for letting me know — Evan Root, Oct 27 '16 at 12:11
So, as soon as there is text inside the `` you want something to happen? — roberrrt-s, Oct 27 '16 at 12:11
is there a moment when the textarea is visible and the text gets changed? or is the page already rendered with the populated content? — Woncker, Oct 27 '16 at 13:42
@Woncker it gets populated after i click a button along with the different tables . Its visible before that and is empty — Evan Root, Oct 28 '16 at 07:06
so the button click fires an event, then there must be some kind of callback function that adds the text. is it possible to edit this callback function? — Woncker, Oct 28 '16 at 09:00

score 0 · Answer 1 · answered Oct 27 '16 at 12:17

0

Use the input event. (mdn)

$('#hello').on('input', function() {
    console.log($(this)[0].value) // console logs the value of the textarea
});

answered Oct 27 '16 at 12:17

roberrrt-s

7,249
2
41
53

Again it works after the text is loaded and i make nay changes in it , But doesn't trigger the first time when the json is loaded initially – Evan Root Oct 27 '16 at 12:23
Can you show me the way you import your json in your original question? Might be easier to place an event on that request. – roberrrt-s Oct 27 '16 at 12:24
I'm not that familliar with angular, but my gut is telling me to add a class to your textarea called `.populated` whenever your http request is finished. – roberrrt-s Oct 27 '16 at 12:34
Not really familiar with angular myself or would have solved it using that . Will try you suggestion . thanks – Evan Root Oct 27 '16 at 12:36

score -1 · Answer 2 · answered Oct 27 '16 at 12:14

-1

 $("#4321").change(function(){
        alert("The text has been changed.");
    });

This should work.

answered Oct 27 '16 at 12:14

Jithendranath Gupta

89
1
1
6

1

It doesn't with `` http://stackoverflow.com/questions/11338592/how-can-i-bind-to-the-change-event-of-a-textarea-in-jquery – roberrrt-s Oct 27 '16 at 12:17

Trigger Jquery on an element immediately after it gets populated

2 Answers2