Question posted in
You can find the official documentation here.

Jquery ajax – Check if file exists, if not then display specific div

I am using onclick show function to accomplish following sequence..

  1. Onclick, a div with content will appear for 5 seconds
  2. After 5 secs, old div hides and new div with content appears
function show() {
    document.getElementById("myDiv").style.display="block";
    setTimeout("hide()", 5000);  // 5 seconds
}

function hide() {
    document.getElementById("myDiv").style.display="none";
    show2();
}

function show2() {
    document.getElementById("Div2").style.display="block";
}

I want to add one more step here…

  1. Onclick, check if a text file exists on a website and at the same time display a div for 5 secs
  2. Display specific div if file does not exists
  3. Display another div if file exists
Tags:

2

Answers


  1. 0

    To check if a file exists or not can be done using the success and fail callbacks of the jQuery $.get method, see the snippet below.

    Note that in the snippet, no URL will ever load anything because (a) the URLs are invalid, and (b) even with valid URLs, the configured CORS policies of the domain stacksnippets.com make any kind of Ajax requests impossible to succeed. Meaning that when you run it, you will only see the fail scenario happen.

    CORS may also be an important factor to consider for your own domain.

    Also note that you will have to put your show/hide a certain DIV logic inside the success and fail callback functions, or at least you’ll need to call the relevant code from there.

    var url1 = "https://YourDomain.com/Exists.txt";
var url2 = "https://YourDomain.com/DoesNotExist.txt";

HideAll();

function HideAll() {
  $("#divExists").hide();
  $("#divNotExists").hide();
}

function Check(url) {
  HideAll();
  $.get(url,
    function(response, status, jqXhr) {
      $("#divExists").show().html("<b>" + url + "</b> OK");
    }
   )
   .fail(function(response, status, jqXhr) {
      $("#divNotExists").show().html("<b>" + url + "</b> Not found");
    }
   );
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="Check(url1)">Check URL 1</button>
<button onclick="Check(url2)">Check URL 2</button>

<div id="divExists"></div>
<div id="divNotExists"></div>
    Login or Signup to reply.
  2. 0

    @Peter said correct. CORS will prevent you accomplishing what you want. This can be done easily if you want to do this on your own down.

    You will need to add one more div and a function.

    var url1 = "https://YourDomain.com/Exists.txt";


 HideAll();

 function HideAll() {
 $("#divExists").hide();
 $("#divNotExists").hide();
 }

 function Check(url) {
 HideAll();
 $.get(url,
 function(response, status, jqXhr) {
  $("#divExists").show().html("<b>OK");
  show1();
 }

 )
 .fail(function(response, status, jqXhr) {
  $("#divNotExists").show().html("<b>Not found");
 }
 );
 }
    <button onclick="Check(url1)">Check URL 1</button>
  <script type = "text/javascript">
  function show1() {
  document.getElementById("myDivv").style.display="block";

  }

  function show() {
  document.getElementById("myDiv").style.display="block";
  setTimeout("hide()", 5000);  // 5 seconds
  }

  function hide() {
  document.getElementById("myDiv").style.display="none";
  show2();
  }

  function show2() {
  document.getElementById("Div2").style.display="block";
  }
  </script>

    and then….

      <button onclick="Check(url1)">Check URL 1</button>
  <script type = "text/javascript">
  function show1() {
  document.getElementById("myDivv").style.display="block";

  }

  function show() {
  document.getElementById("myDiv").style.display="block";
  setTimeout("hide()", 5000);  // 5 seconds
  }

  function hide() {
  document.getElementById("myDiv").style.display="none";
  show2();
  }

  function show2() {
  document.getElementById("Div2").style.display="block";
  }
  </script>

  <div id = "myDivv" style="display:none"><input type = "button" value = "Proceed" onclick = "show()"><br>clicking above will launch 5 sec div</div>



   <div id = "myDiv" style="display:none">This is show()</div><br>
   <div id="Div2" style="display:none">This is show2()</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search