ajax request not working on IE - javascript

function VReload()
{
$.ajax({
type: "GET",
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});
This piece of code is working fine on Mozilla and chrome but not on IE. Ajax call is not firing on IE. What could be the reason.


Switch off caching by doing this:
$.ajax({
type: "GET",
cache: false,
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});


set cache false
$.ajaxSetup({ cache: false });
or
$.ajax({
cache: false,
//other options
});


Try this:
function VReload()
{
var timestamp = new Date();
$.ajax({
type: "GET",
url: "/foo/" + "&timestamp=" + timestamp.getTime(),
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});


use jQuery's $.get() function
$.get('/foo/', {}, function(data){
// whatever
});

Related

Jquery ajax request increases exponentially on each request

I use Jquery-ajax calls to get information from a api and store it. The problem I encounter is the following:
When first call is made call everything seems normal. When the call is made 2nd time (after 1 min )again one only call takes place but with 3rd call 2 times sendData function is getting called ,4th time 4 times sendData function is called.
Please tell me where i am going wrong.Thanks in advance.
$(document).ready(function() {
$(function ajaxCall() {
$.ajax({
url: "https://blockchain.info/ticker",
method: "GET",
dataType: "json",
crossDomain: true,
processData: true,
async: false,
success: function(resp) {
if (resp != null) {
alert(resp);
var myJSON = JSON.stringify(resp);
alert(myJSON);
sendData(myJSON);
setInterval(ajaxCall, 1000 * 60);
} else {
alert("something went wrong");
}
}
});
});

I would suggest you to move calling method to Ajax's complete method:
$(document).ready(function () {
$(function ajaxCall() {
$.ajax({
url: "https://blockchain.info/ticker",
method: "GET",
dataType: "json",
crossDomain: true,
processData: true,
success: function (resp) {
if (resp !== null) {
alert(resp);
var myJSON = JSON.stringify(resp);
alert(myJSON);
sendData(myJSON);
} else {
alert("something went wrong");
}
},
complete: function () {
setInterval(ajaxCall, 1000 * 60);
}
});
})
});

Script on button click

I'm trying to call a script on button click .. Here function summarydata does not call.
Also when I check console there is not a single error. Where is the problem? any solution please?
<button id="chartid" type="button" runat ="server">Show</button>
CODE
[WebMethod]
public static string summarydata()
{
try
{
T1 sd = new T1();
var data = new TrackDataEntities1().spsumdata().Select(s => new { name = s.Month, data = new int[] { s.data.Value } }).ToArray();
return Newtonsoft.Json.JsonConvert.SerializeObject(data);
}
catch (Exception)
{
throw new Exception();
}
}
UPDATED
<script type="text/javascript">
alert("iooooooooooooo");
$(function () {
$('[ID*=chartid]').on('click', function () {
alert("i");
$.ajax({
type: "POST",
url: "WebForm1.aspx/summarydata",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
alert(result.d);
alert("i");
},
error: function (error) {
alert(error);
}
});
});
</script>
When i set breakpoint on web method and click on button then breakpoint does not call

your js code should be in $(document).ready()
<script type="text/javascript">
alert("iooooooooooooo");
$(document).ready(function(){
$("#chartid").click(function() {
alert("i");
$.ajax({
type: "POST",
url: "WebForm1.aspx/summarydata",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
alert(result.d);
alert("i");
},
error: function (error) {
alert(error);
}
});
});
});
</script>

Have you tried other option like using .on() like this one
<script type="text/javascript">
alert("iooooooooooooo");
$(document).ready(function(){
$("#chartid").on( "click",function() {
alert("i");
$.ajax({
type: "POST",
url: "WebForm1.aspx/summarydata",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
alert(result.d);
alert("i");
},
error: function (error) {
alert(error);
}
});
});
});
</script>

Place inside document ready / include script before end of body tag / use $(document).on("click","#chartid",function(){} ) instead .click . Because it will search for element with ID as chartid from root document object.

Call function after ajax load()

I initiate a function after an ajax load(), but the function I intimate calls upon an additional function, which isn't working. How do I initiate ajaxstuff() after load()?
function ajaxstuff(data) {
$.ajax({
type: "POST",
url: "do-it.php",
data: {data},
success: function() {
console.log('I got this far'); // this doesn't work / isn't called
}
});
}
function doit() {
$('form').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
console.log('I got this far'); // this works
ajaxstuff(formData);
}
}
$('.popup-loader').click(function() {
$(this).append('<div class="popup"></div>');
$('.popup').load('popup.php', function() {
doit(); // this works
}
});

Check for errors in your console, also, in your AJAX add an async option. set it to FALSE ("Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called"):
function ajaxstuff(data) {
$.ajax({
async: false,
type: "POST",
url: "do-it.php",
data: data,
success: function(result) {
console.log(result); //check in your console for errors
}
});
}

Syntax error in ajaxstuff function. data: {data}, , probably should be data: data,
Also when you're passing a FormData object to $.ajax, you have to specify processData: false and contentType: false
$.ajax({
type: "POST",
url: "do-it.php",
data: data,
processData: false,
contentType: false,
success: function() {
console.log('I got this far');
}
});

jQuery fade-in-out animation

I need to add a fade-in-out transition animation to this ajax loading code. Could someone explain me how to do it please?
JS :
function loadPage(url)
{
url=url.replace('#page','');
$('#loading').css('visibility','visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#loading').css('visibility','hidden');
}
}
});
}

Use beforeSend() function of ajax request to fadeIn() and in success fadeOut()
$('#loading').css('visibility', 'visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page=' + url,
dataType: "html",
beforeSend: function () {
$('#loading').fadeIn();
},
success: function (msg) {
if (parseInt(msg) != 0) {
$('#pageContent').html(msg);
$('#loading').fadeOut();
}
}
});

I hope you want to show the effects on success of the ajax result. You may try this.
$.ajax({
type: "POST",
url: "institutions-filter.action",
data: data,
cache: false,
success: function(msg)
{
if(parseInt(msg)!=0)
{
$('#loading').css('visibility','hidden');
$("#pageContent").fadeOut(400, function()
{
$("#pageContent").html(msg).fadeIn(400);
});
}
}
});

jquery function problem

I have this function
function onclickRowRecord(recordID) {
$.ajax({
type: "POST",
url: '/file/to/post.to.php' ,
data: {recordID:recordID},
success: function(data) {
//how to post this to function howToPost(recordID) the recordID
}
});
}
function howToPost(recordID){
alert(recordID);
}
so how can I get the response from ajax success and post to the other function

If post you mean call the hotToPost function, then
...
success: function(data) {
howToPost(data.recordID); //or whatever
}
....
Hope this helps.

$.ajax({
type: "POST", url: '/file/to/post.to.php' , data: {recordID:recordID}, success: function(data) {
alert(recordID)
}
});
Does that work? Kinda new to jQuery

Categories