how to give an alert whenever the back-end data gets changed?
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?
javascript jquery
edited Nov 13 '18 at 7:48
Krupesh Kotecha
2,05011134
asked Nov 13 '18 at 7:29
John_nyJohn_ny
67
add a comment |
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?
javascript jquery
edited Nov 13 '18 at 7:48
Krupesh Kotecha
2,05011134
asked Nov 13 '18 at 7:29
John_nyJohn_ny
67
Just usesetIntervalto run your Ajax every 10 seconds or so (depends on your use case, but don't do it more often than about every 5 seconds). The only alternative is to use web sockets to send data from server to client when a change is made - this is the only option if you need genuinely "real time" data, but it requires you to be able to change the server side code (it's not clear if you can from your question), and is also more difficult to do.
– Robin Zigmond
Nov 13 '18 at 7:37
add a comment |
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?
javascript jquery
edited Nov 13 '18 at 7:48
Krupesh Kotecha
2,05011134
asked Nov 13 '18 at 7:29
John_nyJohn_ny
67
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?
javascript jquery
javascript jquery
edited Nov 13 '18 at 7:48
Krupesh Kotecha
2,05011134
asked Nov 13 '18 at 7:29
John_nyJohn_ny
67
edited Nov 13 '18 at 7:48
Krupesh Kotecha
2,05011134
asked Nov 13 '18 at 7:29
John_nyJohn_ny
67
edited Nov 13 '18 at 7:48
Krupesh Kotecha
2,05011134
edited Nov 13 '18 at 7:48
Krupesh Kotecha
2,05011134
edited Nov 13 '18 at 7:48
Krupesh Kotecha
2,05011134
2,05011134
asked Nov 13 '18 at 7:29
John_nyJohn_ny
67
asked Nov 13 '18 at 7:29
John_nyJohn_ny
67
asked Nov 13 '18 at 7:29
John_nyJohn_ny
67
67
Just usesetIntervalto run your Ajax every 10 seconds or so (depends on your use case, but don't do it more often than about every 5 seconds). The only alternative is to use web sockets to send data from server to client when a change is made - this is the only option if you need genuinely "real time" data, but it requires you to be able to change the server side code (it's not clear if you can from your question), and is also more difficult to do.
– Robin Zigmond
Nov 13 '18 at 7:37
add a comment |
Just usesetIntervalto run your Ajax every 10 seconds or so (depends on your use case, but don't do it more often than about every 5 seconds). The only alternative is to use web sockets to send data from server to client when a change is made - this is the only option if you need genuinely "real time" data, but it requires you to be able to change the server side code (it's not clear if you can from your question), and is also more difficult to do.
– Robin Zigmond
Nov 13 '18 at 7:37
Just use
setInterval to run your Ajax every 10 seconds or so (depends on your use case, but don't do it more often than about every 5 seconds). The only alternative is to use web sockets to send data from server to client when a change is made - this is the only option if you need genuinely "real time" data, but it requires you to be able to change the server side code (it's not clear if you can from your question), and is also more difficult to do.– Robin Zigmond
Nov 13 '18 at 7:37
Just use
setInterval to run your Ajax every 10 seconds or so (depends on your use case, but don't do it more often than about every 5 seconds). The only alternative is to use web sockets to send data from server to client when a change is made - this is the only option if you need genuinely "real time" data, but it requires you to be able to change the server side code (it's not clear if you can from your question), and is also more difficult to do.– Robin Zigmond
Nov 13 '18 at 7:37
add a comment |
5 Answers
5
active
oldest
votes
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 :)
answered Nov 13 '18 at 7:36
Rahul DudharejiyaRahul Dudharejiya
24412
Not a good idea at all. DDoS will occur in this case. Think 10K users using this code then or even more.
– Jai
Nov 13 '18 at 7:45
add a comment |
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.
answered Nov 13 '18 at 7:37
muka.gergelymuka.gergely
606412
add a comment |
Shall we use mutation Observer for the above case, so that whenever data gets changed, user will get a notification via pop-up.
answered Nov 14 '18 at 5:39
John_nyJohn_ny
67
add a comment |
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>
answered Nov 16 '18 at 12:57
John_nyJohn_ny
67
add a comment |
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
})
answered Nov 13 '18 at 7:51
Santu RoySantu Roy
1484
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275913%2fhow-to-give-an-alert-whenever-the-back-end-data-gets-changed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 :)
answered Nov 13 '18 at 7:36
Rahul DudharejiyaRahul Dudharejiya
24412
Not a good idea at all. DDoS will occur in this case. Think 10K users using this code then or even more.
– Jai
Nov 13 '18 at 7:45
add a comment |
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 :)
answered Nov 13 '18 at 7:36
Rahul DudharejiyaRahul Dudharejiya
24412
Not a good idea at all. DDoS will occur in this case. Think 10K users using this code then or even more.
– Jai
Nov 13 '18 at 7:45
add a comment |
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 :)
answered Nov 13 '18 at 7:36
Rahul DudharejiyaRahul Dudharejiya
24412
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 :)
answered Nov 13 '18 at 7:36
Rahul DudharejiyaRahul Dudharejiya
24412
answered Nov 13 '18 at 7:36
Rahul DudharejiyaRahul Dudharejiya
24412
answered Nov 13 '18 at 7:36
Rahul DudharejiyaRahul Dudharejiya
24412
answered Nov 13 '18 at 7:36
Rahul DudharejiyaRahul Dudharejiya
24412
24412
Not a good idea at all. DDoS will occur in this case. Think 10K users using this code then or even more.
– Jai
Nov 13 '18 at 7:45
add a comment |
Not a good idea at all. DDoS will occur in this case. Think 10K users using this code then or even more.
– Jai
Nov 13 '18 at 7:45
Not a good idea at all. DDoS will occur in this case. Think 10K users using this code then or even more.
– Jai
Nov 13 '18 at 7:45
Not a good idea at all. DDoS will occur in this case. Think 10K users using this code then or even more.
– Jai
Nov 13 '18 at 7:45
add a comment |
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.
answered Nov 13 '18 at 7:37
muka.gergelymuka.gergely
606412
add a comment |
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.
answered Nov 13 '18 at 7:37
muka.gergelymuka.gergely
606412
add a comment |
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.
answered Nov 13 '18 at 7:37
muka.gergelymuka.gergely
606412
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.
answered Nov 13 '18 at 7:37
muka.gergelymuka.gergely
606412
answered Nov 13 '18 at 7:37
muka.gergelymuka.gergely
606412
answered Nov 13 '18 at 7:37
muka.gergelymuka.gergely
606412
answered Nov 13 '18 at 7:37
muka.gergelymuka.gergely
606412
606412
add a comment |
add a comment |
Shall we use mutation Observer for the above case, so that whenever data gets changed, user will get a notification via pop-up.
answered Nov 14 '18 at 5:39
John_nyJohn_ny
67
add a comment |
Shall we use mutation Observer for the above case, so that whenever data gets changed, user will get a notification via pop-up.
answered Nov 14 '18 at 5:39
John_nyJohn_ny
67
add a comment |
Shall we use mutation Observer for the above case, so that whenever data gets changed, user will get a notification via pop-up.
answered Nov 14 '18 at 5:39
John_nyJohn_ny
67
Shall we use mutation Observer for the above case, so that whenever data gets changed, user will get a notification via pop-up.
answered Nov 14 '18 at 5:39
John_nyJohn_ny
67
answered Nov 14 '18 at 5:39
John_nyJohn_ny
67
answered Nov 14 '18 at 5:39
John_nyJohn_ny
67
answered Nov 14 '18 at 5:39
John_nyJohn_ny
67
67
add a comment |
add a comment |
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>
answered Nov 16 '18 at 12:57
John_nyJohn_ny
67
add a comment |
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>
answered Nov 16 '18 at 12:57
John_nyJohn_ny
67
add a comment |
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>
answered Nov 16 '18 at 12:57
John_nyJohn_ny
67
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>
answered Nov 16 '18 at 12:57
John_nyJohn_ny
67
answered Nov 16 '18 at 12:57
John_nyJohn_ny
67
answered Nov 16 '18 at 12:57
John_nyJohn_ny
67
answered Nov 16 '18 at 12:57
John_nyJohn_ny
67
67
add a comment |
add a comment |
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
})
answered Nov 13 '18 at 7:51
Santu RoySantu Roy
1484
add a comment |
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
})
answered Nov 13 '18 at 7:51
Santu RoySantu Roy
1484
add a comment |
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
})
answered Nov 13 '18 at 7:51
Santu RoySantu Roy
1484
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
})
answered Nov 13 '18 at 7:51
Santu RoySantu Roy
1484
answered Nov 13 '18 at 7:51
Santu RoySantu Roy
1484
answered Nov 13 '18 at 7:51
Santu RoySantu Roy
1484
answered Nov 13 '18 at 7:51
Santu RoySantu Roy
1484
1484
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275913%2fhow-to-give-an-alert-whenever-the-back-end-data-gets-changed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Just use
setIntervalto run your Ajax every 10 seconds or so (depends on your use case, but don't do it more often than about every 5 seconds). The only alternative is to use web sockets to send data from server to client when a change is made - this is the only option if you need genuinely "real time" data, but it requires you to be able to change the server side code (it's not clear if you can from your question), and is also more difficult to do.– Robin Zigmond
Nov 13 '18 at 7:37