jquery - dynamically detect change to span element -

-

i have span elements dynamically generated ajax response. trying detect change span value using below code , seems work in jsfiddle fixed elements not in real scenario data dynamically generated. span values updated setinterval function number increment trying detect.

the steps taking - appreciate advice on why code not working?

  1. for elements id containing "minutes" <- these span elements
  2. get id's
  3. detect change in elements id's step 2
  4. when change detected, span element value
  5. check if span value greater 00 i.e. 01 (this minute value)
  6. if condition step 5 met apply css
  7. if condition step 5 not met remove css
$('[id*="minutes"]').each(function() {     spanid = $(this).attr('id');      console.log(spanid);      $("#"+spanid).on('change',function(){          spanval = $(this).text();         id = $(this).attr('id').charat(0);          if(spanval > 00) {             $('#results').text(span);              $("#"+id+"-wt-html").css({"background":"#ffe95b", "color":"red"});         } else {             $("#"+id+"-wt-html").removeattr("style")        }     }); });

sample html

<td id="9-wt-html"> <div id="9-wt-ajax"> <span id="9-hours">00</span>: <span id="9-minutes">15</span>: <span id="9-seconds">12</span> </div> </td>

the above span elements created before ajax call using fixed script below:

for (var key in skills_arr) { //console.log(skills_arr[key]+" - "+key); $('#table > tbody:last-child').append('<tr><td>'+skills_arr[key]+'</td><td id="'+key+'-cw-html"><div id="'+key+'-cw-ajax"></div></td><td id="'+key+'-aa-html"><div id="'+key+'-aa-ajax"></div></td><td id="'+key+'-wt-html"><div id="'+key+'-wt-ajax"><span id="'+key+'-hours">00</span>:<span id="'+key+'-minutes">00</span>:<span id="'+key+'-seconds">00</span></div></td><td id="'+key+'-op-html"><div id="'+key+'-op-ajax"></div></td></tr>'); }

okay, have created snippet below based on understandings.

also, highlight below points.

for span element, can't listen change event. instead, code below listen domsubtreemodified event.

also, can directly listen event of element using $('[id*="minutes"]').on('domsubtreemodified', function(){}) if element exists before line.

otherwise, have listen same parent or document given below.

$('#table').on('domsubtreemodified', '[id*="minutes"]', function() {      var span = $(this);      var spanvalue = parseint(span.text());      var id = span.attr('id').charat(0);      if(spanvalue > 0) {              //$('#results').text(span); // not sure this?                $("#"+id+"-wt-html").css({"background":"#ffe95b", "color":"red"});      } else {              $("#"+id+"-wt-html").removeattr("style")      }  });    var skills_arr = {    '9': 'some value here'  };    (var key in skills_arr) {  $('#table > tbody:last-child').append('<tr><td>'+skills_arr[key]+'</td><td id="'+key+'-cw-html"><div id="'+key+'-cw-ajax"></div></td><td id="'+key+'-aa-html"><div id="'+key+'-aa-ajax"></div></td><td id="'+key+'-wt-html"><div id="'+key+'-wt-ajax"><span id="'+key+'-hours">00</span>:<span id="'+key+'-minutes">00</span>:<span id="'+key+'-seconds">00</span></div></td><td id="'+key+'-op-html"><div id="'+key+'-op-ajax"></div></td></tr>');  }    settimeout(function(){    $('#9-minutes').text('15');    $('#9-seconds').text('12');  }, 3000);    settimeout(function(){    $('#9-minutes').text('00');    $('#9-seconds').text('10');  }, 6000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table id="table">    <tbody>    </tbody>  </table>  <p>results:</p>  <div id="#results">  </div>


Comments

Post a Comment

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

-
i have password protected page on frontend. on page, want display full list of purchases associated single woocommerce product id. option 1: i've looked through woocommerce docs , , found: wc_cli_order , list_( $args, $assoc_args ) function lists orders. presumably, orders can filtered product id [--=] filter orders based on order property. line item fields (numeric array, started index zero): line_items.0.product_id option 2: i found article , based on customer id. i've modified code based on guesses meta_key , meta_value. $customer_orders = get_posts( array( 'numberposts' => -1, 'meta_key' => '_product', 'meta_value' => get_product_id(), 'post_type' => wc_get_order_types(), 'post_status' => array_keys( wc_get_order_statuses() ), ) ); how display orders single product showing recent order first? here solution put based on these articles: http://www.w...
Read more

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

-
i'm having difficult time , hope guys can help. using helicon isapi rewrite version 3.1.0.104 on our iis server. edit http.conf file , have tried , still fail. this trying do: redirect url: https://www.domain.com/switch-by-version?version=2.8.5.2594 to: https://test.domain.com/load/load.aspx?tver=2.8.5.2594 the version number @ end source url change, , need target url have same version number @ end of url example above shows. i tried following not work: rewritecond %{query_string} ^version=(\d\d?)\.(\d\d?)\.(\d\d?)\.(.*)$ [nc] rewriterule ^/switch-by-version(.*)$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l] any appreciated! thanks. if it's running in equivalent context of .htaccess , rule shouldn't start / . here's simpler version: rewritecond %{query_string} ^version=(\d+\.\d+\.\d+(?:\..+)?)$ [nc] rewriterule ^switch-by-version/?$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l]
Read more

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -

-
https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps following tutorials, try write authentication restrict admin panel, didn't understood how can that. this admin panel, admin panel don't want show , request database unauthenticated users. my laravel-routes route::get('/admin',function(){ return view('index'); }); route::get('/api/v1/employees/{id?}', 'employees@index'); route::get('/api/v1/users/{id?}', 'employees@users'); route::post('/api/v1/employees', 'employees@store'); route::post('/api/v1/employees/{id}', 'employees@update'); route::delete('/api/v1/employees/{id}', 'employees@destroy'); route::group(['prefix' => 'api'], function() { route::resource('authenticate', 'authenticatecontroller', ['only' => ['index']]); route::post('authenticate', 'authentic...
Read more