document.ready is called before the ajax Get success

Question

i want the document.ready function should called after the my ajax gets success.

In jsondatachart.js script i used one ajax method, in which i get the data from excel sheet and stored in window.ChartData as below. All my data from excel gets stored in window.ChartData but this is happening after document.ready() function is called.

// "jsondatachart.js" script

$.ajax({
        type: "GET",
        url: "Data.csv",
        dataType: "text",
        success: function(data) {window.chartData=data;}
     });

In html page i have referred that script jsondatachart.js, the script gets loaded and the debugger gets hit in $.ajax. But the success function gets fire only after the document.ready function is executed. so the window.ChartData used in the main page is showing undefined

I am facing this problem in IE browser, in firefox its working fine.

 <html>
 <head>
    <script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.globalize.min.js" type="text/javascript"></script>
    <script src="Scripts/jsondatachart.js" type="text/javascript"></script>


</head>
<body>
   <div id="container"> </div>
    <script type="text/javascript" language="javascript">

        $(function () {
         // var data=window.ChartData; (showing window.ChartData is undefine)
          });

In simple, I want the $(function(){}) should called only after the success function in ajax is fired, so that i can make use of the window.ChartData in my document.ready() function.

Thanks in advance

the document ready status is not depending on ajax request... all operations that depends on the value returned by the ajax request has to be in the success handler — Arun P Johny, Mar 06 '14 at 05:42
You should put or call the code that needs `window.ChartData` inside the success function. See [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) for more information about how to structure your code. — Felix Kling, Mar 06 '14 at 05:42

Human Being · Accepted Answer · 2014-03-07T06:25:23.430

First of all , Please understand the different between the two things,

document.ready and ajax are completely independent.They have used for different purpose.
document.ready function is called , when your dom is fully loaded.It does not have any connection with ajax.

Ajax is used to get the data from your Server side.

If you need to do any thing with your ajax success, please do the following,

$( document ).ready(function() {

    alert("DOM is ready");

});

function ajaxFunction(){

    $.ajax({
        type: 'POST',
        url: "Your URL",
        data : "param="+"paramValue",
        dataType: 'html',
        success: function(result) {
            doWhatEver();
        },
        error: function(e){
            //alert('Error in Processing');
        }

    });
}


function doWhatEver() {
      // Do your work Here.
}

Hope it helps.

document.ready is called before the ajax Get success

1 Answers1