how to give an alert whenever the back-end data gets changed?
Question
We have simple json like this
{
name: "Johnson"
}
Am using ajax to show up the name as below
$.ajax({
url: /info.json,
success: function(data) {
$('<span><b>' + data.name + '</b></span>').append('body')
}
});
Output Html is like below
<body>
<label> name </label>
<span><b>Johnson</b></span>
</body>
Let us assume that the name what we are getting now gets changed from "Johnson" to "Michael".
Output Html after the name gets changed as below:
<body>
<label> name </label>
<span><b>Michael</b></span>
</body>
Whenever the name gets changed we want show up the popup.There are no events bind to the HTML document, How to achieve this?
In developer tools , using break-on option I can able to debug it. Is there any other way in Javascript to achieve the same thing?
5 answers
solution1
0 2018-11-13 07:36:25
You should try setInterval() of javascript, it checks your file again and again in several time that you have to define like
setInterval(function(){
$.ajax({
url: /info.json,
success: function (data) {
$('<span><b>'+data.name+'</b></span>').append('body')
}
});
},3000) //it will call after each 3 sec
it may helps you :)
solution2
0 2018-11-13 07:37:05
AJAX gets no notification, when data changes on the server.
You could try long polling or a similar technique, or (if your server and application support it) do it with websocket or HTTP/2.
The latter may require some development (even server upgrade) depending on your situation.
solution3
0 2018-11-14 05:39:50
在上述情况下，我们是否应使用突变观察器，以便每当更改数据时，用户都会通过弹出窗口获得通知。
solution4
0 2018-11-16 12:57:26
I have created list items, whenever we add the items we will get the popup. No event is binded to the DOM.I have achieved this by using Mutation observer.
<!DOCTYPE html>
<head>
</head>
<body>
<ol contenteditable oninput="">
<li>Enter the items</li>
</ol>
<script>
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var list = document.querySelector('ol');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
var list_values = [].slice.call(list.children)
.map( function(node) { return node.innerHTML; })
.filter( function(s) {
if (s === '<br>') {
return false;
}
else {
return true;
}
});
alert(list_values);
}
});
});
observer.observe(list, {
attributes: true,
childList: true,
characterData: true
});
</script>
</body>
</html>
solution5
-1 2018-11-13 07:51:23
You need to write a function for content modification event. You can try with this code :
$(document).on('DOMSubtreeModified', 'span b', function(){
console.log("name modified");
// add your action
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.