Polling mechanism through an Ajax call - javascript

I need to add polling mechanism to call a web service through my web page. For that I am trying to use an ajax call inside a javascript page. I am very new to ajax and javascript. I wrote the below code.
<html>
<head>
<script language="JavaScript" type="text/javascript">
function pollServerForNewMail() {
setTimeout(function(){
$.ajax({ url: "server", success: function(data){
alert("TEST");
poll();
}, dataType: "json"});
}, 10000);
</script>
</head>
<body>
</body>
</html>
What I need is to fire the alert TEST in every 10 seconds. Anybody please help me on this.
I will edit the post with my two jsp files.
index.jsp file
<html>
<table style="width:100%;text-align:center;'">
<tr>
<td style="text-align:center;width:100%">
<img src="images/import.png" />
</td>
</tr>
</table>
</html>
polling.jsp file
<html>
<head>
<script language="JavaScript" type="text/javascript">
function pollServerForNewMail() {
setTimeout(function(){
$.ajax({ url: "server", success: function(data){
alert("TEST");
poll();
}, dataType: "json"});
}, 10000);
}
pollServerForNewMail() ;
</script>
</head>
<body>
</body>
</html>
Thanks

setTimeout will fire a timer only once.
Use setInterval to execute code every X seconds:
function pollServerForNewMail() {
setInterval(function(){
// Code in this function will run every 10 seconds
$.ajax({ url: "server", success: function(data){
alert("TEST");
poll();
}, dataType: "json"});
}, 10000);
}

I solved my problem by changing polling.jsp file as below. I will add my solution.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var set_delay = 5000,
callout = function () {
$.ajax({
/* blah */
})
.done(function (response) {
alert("TEST");
})
.always(function () {
setTimeout(callout, set_delay);
});
};
callout();
</script>
</head>
<body>
</body>
</html>

Related

Refresh DIV every x second without page reload

There are many stackoverflow entries about div refresh. I tryed some codes but I dont get it to work.
In my DIV I want to call a php function (get current database entries). What should I change? Is it even possible to reload a div to make a new php function call?
my index_design.php:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"</script>
<body onload="startTime()">
<div id="ajaxcontainer">
<div>
<?php $mycontroller->getEntries(); ?>
</div>
<div>
<?php $mycontroller->getEntries2(); ?>
</div>
</div>
</body>
<script type="text/javascript" src="js/javascript.js"></script>
<script type="text/javascript" src="js/javascript_document_ready.js"></script>
my javascript_document_ready.js:
$(document).ready(function () {
function loadlink(){
$('#ajaxcontainer').load('index_design.php',function () {
$(this).unwrap();
});
}
loadlink();
setInterval(function(){
loadlink()
}, 10000);
}
Projectfolder:
index_design.php
Folder (JS) -> javascript.js
Folder (JS) -> javascript_document_ready.js
Try to use AJAX.
setInterval(_ => {
$.ajax({
url: "index_design.php",
type: "GET",
dataType: "html",
success: html => {
$("#ajaxcontainer").html(html);
}
});
}, 10000);

Can't pass a javascript variable to php variable

I tried all the stackoverflow posts about this, I spend two days and still no success 😔, I am trying to pass a JavaScript variable to a PHP variable, I tried this for example and still not succeed, it does not print noting on the screen, here is a full code:
here cc.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//treehouse code
var $my_variable = "something";
$.ajax({
url: 'cc.php',
data: {x: $my_variable},
type: 'POST'
});
});
</script>
</body>
</html>
and here cc.php:
<?php
if(isset($_POST['x'])){
echo $_POST['x'];
}
?>
What should I do?
You don't do anything with the result of the AJAX call. Add a callback function:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//treehouse code
var $my_variable = "something";
$.ajax({
url: 'cc.php',
data: {x: $my_variable},
type: 'POST'
}).done(function (result) {
alert(result); // <--- do something with the result
});
});
</script>
</body>
</html>
And your PHP code remains unchanged:
<?php
if(isset($_POST['x'])){
echo $_POST['x'];
}
?>
What you do in that callback function is up to you. You can alert() the value, log it to the console, write it somewhere on the page, etc.
If you want to print it on the screen you should use success: function(data)$('#result').html(data)} here is code example:
$(document).ready(function() {
$('#sub').click(function() {
var $my_variable = "something";
$.ajax({
url: 'cc.php',
type: 'POST',
data: { x: $my_variable },
success: function(data) {
$('#result').html(data)
}
});
});
});
You can try $.post too
$.post( "cc.php", { x: $my_variable} );

How can I get particular webpage using jquery or Ajax call?

I have two .cshtml webforms, in one webform I have Bootstrap header and in other webform I have one div containg form. Now I want to implement such thing like when I click any of links available in Header that time Jquery function will be called and it should get desired page and load it into defined div block.
My code is seems as bellow (header.cshtml) :
<html>
<head>
<script type="text/javascript" src="../assest/js/jquery-3.1.1.js"></script>
<script type="text/javascript">
function myFunction(str) {
$(document).ready(function () {
//alert(str);
$.ajax({
type: "GET",
url: str + ".cshtml",
dataType: "html",
success: function (data) {
$("#form_load").html(data);
},
error: function (data) {
alert(data);
}
})
});
}
</script>
</head>
<body>
<div>
<a id="nav_link" onclick="myFunction(this.name)" name="farmer_master">Farmer</a>
</div>
<div id="form_load"></div>
</body>
</html>
other webform (farmer_master.cshtml) :
<div>
Hi I shoud be called !
</div>

javascript - animate numbers with json data

I have a problem with animated number effect when grabbing data from json.
Animated number effect works correctly if it loads from html, but if I load it from json it doesn't work.
html code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.animateNumbers.js" type="text/javascript"></script>
</head>
<body>
Time from html (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)
<div id="display_time"></div>
<script>
$('.animate-number').each(function(){
$(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
})
</script>
<script>
$(function time(){
$.ajax({
type: "POST",
url: "data_time.php",
data: "get_time=true",
dataType:'json',
success: function(data){
$("#display_time").html(data.time);
}
});
});
</script>
</body>
</html>
data_time.php code:
<?php
if(isset($_POST['get_time']))
{
$time[] = 'Time from json (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)';
echo json_encode(array('time' => $time ));
}
;?>
preview: click
I think the problem is with callback. Try this,
<script>
function runCallback(){
$('.animate-number').each(function(){
$(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
})
}
</script>
<script>
$(function time(){
$.ajax({
type: "POST",
url: "data_time.php",
data: "get_time=true",
dataType:'json',
success: function(data){
$("#display_time").html(data.time);
runCallback();
}
});
});
</script>
Use $time instead of $time[]. There's no need for it to be an array.
Take out dataType:'json'. You are not SENDING json.

Execute code if page doesn't load

I want to create a code that reloads a part of the page every 10 seconds and if it fails to reload (because of connection issue), then it plays a sound.
Is such thing possible using ajax and how? I have seen this type of feature in web chats before but never came across a code for it.
Try using setInterval function:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" language="JavaScript"></script>
<style type="text/css">
<!--
.square {
background-color: #AAAAAA;
width: 250px;
height: 100px;
}
//-->
</style>
<script type="text/javascript" language="JavaScript">
$(document).on('ready',function(){
setInterval(updateDiv,10000);
});
function updateDiv(){
$.ajax({
url: 'getContent.php',
success: function(data){
$('.square').html(data);
},
error: function(){
//Code to play a sound
$('.square').html('<span style="color:red">Connection problems</span>');
}
});
}
</script>
</head>
<body>
<h1>The next div will be updated every 10 seconds</h1>
<div class="square">
Hello
</div>
</body>
</html>
And the php script:
<?php
echo "Updated value --> " . rand();
?>
To test, try renaming the php script (simulating connection problems) and rename to original name (getContent.php) to test correct situation again. Hope this helps.
Using JQuery, you can add handlers to run on fail...
$.ajax({
dataType: "json",
url: "myurl.com"
}).done(function( data ) {
//do what you want when it's all good
}).fail(function() {
//do what you want when the call fails
});
Or you can do it this way...
$.ajax({
type: "post",
url: "/SomeController/SomeAction",
success: function (data, text) {
//do what you want when it's all good
},
error: function (request, status, error) {
//do what you want when the call fails
}
});
And per request, here is a jsfiddle, it calls a service every 2 seconds, either with a URL that will return the date, or with a bad URL that will fail, mimicking a failed server.
UPDATE: I modified the jsfiddle to play a sound, as long as that sound remains on the server it's on :)

Categories