-2

I am a beginner in ajax/JS/jQuery. I have an ajax call that checks if a file is available on server. To accomplish this I use setInterval() and clearInterval(). I am having trouble in setting the display property to an html element upon successful ajax call. Any guidance is highly appreciated.

<html>
<head>

</head>
<body >

<div id="export-div" hidden>
Click Me
</div>

<script type="text/javascript">
    function foo_func() {
            $('#export-div').show(); //*****tried, but does not work*******
            var foo = document.getElementById("export-div");
            foo.style.display = "block"; // **********Does not work***************
            alert(foo.innerHTML); //Alert box correctly pops up with text 'Click Me'
            clearInterval(timerForLoadingResult); //I initially had this inside the ajax success/done function
            }
</script>

<script type="text/javascript">
    var timerForLoadingResult = setInterval(checkServerForFile,5000); //call the function in every 5 seconds and write ajax in that function.
    function checkServerForFile() {
                    var chck = $.ajax("<?php echo "/Results/".$filename; ?>") //searches for a file on server
                    chck.success(function(){
                    alert( "Ajax call successful" ); //This alert box also pops up
                    foo_func();
                    });
            };
</script>
</body>
</html>
mallya
  • 33
  • 1
  • 7

3 Answers3

0

Not sure what do you expect when you request to "<?php echo "/Results/".$filename; ?>", but it seems that if fails always, and your done method is always being fired.

These are the methods for your $.ajax() request:

  • .success(): fired only when status recieved is 200
  • .error(): fired when status recieved is not 200 (an error)
  • .done(): fired always
lante
  • 7,192
  • 4
  • 37
  • 57
  • I wish @lante had provided a constructive solution when you know I am beginner, before down voting the question. In my case the alert statement within the done block is fired only after the file is available on server. I have checked this fact, because it works. I am not sure if I am technically right though! Any clear and simple explanation is welcome. – mallya Dec 30 '14 at 18:40
  • just replace the done() function with success() function and see if the alert is called. – m1crdy Dec 30 '14 at 19:33
  • @m1crdy I have used success() function as suggested, and alert is being called - as should be the case. When I was using the done() function it was doing the exact same thing i.e. alerting after the file is created (and not before that). In my case it takes anywhere between 15-20 seconds for the file to be available on the server - so alert within done() executed only after that. This (using success() ) however does not resolve the question I have asked, which is updating the visibility of the html
    element upon successful ajax call.
     – mallya Dec 30 '14 at 19:44
0

The contents will not be displayed because you have a css absolute position and you send the element away from your window.

Thanasis Pap
  • 2,031
  • 2
  • 17
  • 19
0

I added the fix to http://jsfiddle.net/20dw5ex8/6

use jquery show() and hide() functions. Like 

$('#export-div').show(); or $('#export-div').hide();

you can set your div hidden at the beginning

<div id="export-div" hidden> Click Me</div>

and show it when the ajax call is returned.

ETS
  • 516
  • 2
  • 7
  • 15
  • I have tried this approach, without any success. – mallya Dec 30 '14 at 19:10
  • did you remove style="display: none;" – ETS Dec 30 '14 at 19:13
  • There you go the fix in http://jsfiddle.net/20dw5ex8/ – ETS Dec 30 '14 at 19:22
  • Yes, I tried removing style="display: none". I looked into the jsfiddle fix that you provided (thank you). But I want to make the
    visible only after a successful ajax call, so when I try your implementation it still does not display
    .
     – mallya Dec 30 '14 at 19:48
  • Click Me will show after 5 secs! – ETS Dec 30 '14 at 20:51
  • I agree your code works, but in my case I want to change the display property after ajax.done() or .success() function. – mallya Dec 30 '14 at 21:01
  • Looks like I have a problem with `var chck = $.ajax("") //searches for a file on server.` Because when I hard-code the above line with a completle url OR filepath, your fix works perfectly. Do you have any suggestion for this. In my case `$filename` will be a unique string generated with current timestamp. – mallya Dec 30 '14 at 21:08
  • i updated JSFiddle http://jsfiddle.net/20dw5ex8/6/ , Here I am doing a ajax call to /echo/json/ . You just need to switch to your echo php statement and test it on your machine. – ETS Dec 30 '14 at 21:33
  • Your solution is correct. Thank you. – mallya Dec 30 '14 at 21:40