How to get live data from HTML element by JQuery?

Question

Element

<span class="bar">xxx</span>

contain value and it's updated by Ajax.

I have successfully get this xxx data to variable via JQuery with this script

var foo = $('.bar').html();
$("#other").append("<strong>" + foo  + "</strong>");
// alert(foo) <- for testing

to append it to #other place in page, and it's works fine but... How to get live data (updated by Ajax) from this .bar element?

You can attach event to the bar element: https://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div — Rauli Rajande, Jan 26 '18 at 12:47
So when the `` is updated you want the text to be updated into #other also? — Carsten Løvbo Andersen, Jan 26 '18 at 12:47
You mentioned that value in `.bar` is updated by AJAX, why not update '#other' in the same AJAX success callback? — Junaid, Jan 26 '18 at 12:49
@PipBoy2000 Another option would be to put this update bit to the ajax success method. — Rauli Rajande, Jan 26 '18 at 12:49
@Junaid because second mutiple .bar class cause ajax problems. i don't want to override any ajaxcalls. just grab .bar data to separate variable and manage it by my own little script — PipBoy2000, Jan 26 '18 at 12:51
you could use a callback or attach an event to #other element, for instance attach onchange to that element, once that element change you update the $(.bar) element — JPRLCol, Jan 26 '18 at 14:07

score 1 · Answer 1 · answered Jan 26 '18 at 12:51

You can use the following:

$('.bar').bind("DOMSubtreeModified",function(){
  $("#other strong").text($(this).text());
});

It will update #other strong when .bar is modified. aka when its updated.

var foo = $('.bar').text();
$("#other").append("<strong>" + foo + "</strong>");


$("button").click(function() {
  $('.bar').text("new data");
})

$('.bar').bind("DOMSubtreeModified",function(){
  $("#other strong").text($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="bar">xxx</span>

<div id="other"></div>


<button>add new content to bar</button>

Rauli Rajande · Accepted Answer · 2018-01-26T14:18:23.633

1

Use .on() as .bind() is deprecated!

// to simulate ajax changing contents
$('.ajax').on('keyup', function(){
  $('.first_div').html($(this).val())
})

// your answer
updater();

$('.first_div').on('DOMSubtreeModified', updater)

function updater(){

  var data = $('.first_div').html();
  
  // your logic here
  data = '[' + data + ']'

  // display result
  $('.second_div').html(data)
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<pre>
Enter new content:
<input class="ajax" value="initial">

This is what ajax updates:
<div class="first_div">initial</div>

This is updated by DOMSubtreeModified event:
<div class="second_div"></div>

</pre>

edited Jan 26 '18 at 14:18

answered Jan 26 '18 at 13:34

Rauli Rajande

2,010
1
20
24

Works well only when .first_div is updated - as expected. When .first_div is unchanged throws nothing. Any idea how to manage this case? – PipBoy2000 Jan 26 '18 at 13:51
1

@PipBoy2000 I moved updating to updater() function, which could be called on page load, seems to work with jQuery 1.11.0 too – Rauli Rajande Jan 26 '18 at 14:03
Top notch! Love it! :) – PipBoy2000 Jan 26 '18 at 14:14
I hope this solution will help a lot of people too :) Now i will need to get this grabed data as variable to make some logic :D – PipBoy2000 Jan 26 '18 at 14:16
1

Thanks :) I added logic part as well – Rauli Rajande Jan 26 '18 at 14:18
holy lord bro! :) Made my day!! Best regards from Poland! – PipBoy2000 Jan 26 '18 at 14:27

How to get live data from HTML element by JQuery?

2 Answers2