Simple Javascript show div function isn't working

Question

I have the following Javascript function:

function checkConnection() {
    $.ajax({
        url: 'php_scripts/checkconnection.php',
        type: "POST",
        success: function() {
            document.getElementById('openOfflineDIV').style.display = 'none';
            console.log("connected");
        },
        error: function() {
            document.getElementById('openOfflineDIV').style.display = 'block';
            //I have also tried: 
            document.getElementById('openOfflineDIV').style.display = 'inline';
            console.log("disconnected");
        }
    }).complete(function() {
        setTimeout(checkConnection, 1000);
    });
}

This function's purpose is to check the internet connectivity status every second. If the connection is active, then the div openOfflineDIV should not be visible, but if the connection is lost, then the div should be visible.

This code is partially working, meaning that if I navigate to my webpage address with "/#openOfflineDIV" added to the end of the url, then the page will load with the div showing on screen, this then disappears after a second once the function starts to run (which means the function is closing the div successfully once it realises the connection is active).

But the second part of the function isn't working, it's not displaying the div automatically when the internet connection is lost. I've tried both the inline and block methods but neither is working. I'm very confused since the function is definitely able to hide the div successfully (which I think means my syntax for defining the div is correct).

This is the code for the modal in my html:

<div id="openOfflineDIV" class="modalOfflineDIVDialog">
  <div id="mfs">
      <div id="wrapper">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                       <td align="center" valign="middle" class="alerttextbig">You have been disconnected from the internet!</td>
                  </tr>
               </table>
           </div>
      </div>
</div>

And this is the CSS for the modal:

.modalOfflineDIVDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 11;
    opacity:1;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalOfflineDIVDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalOfflineDIVDialog > div {
    width: 760px;
    height: 545px;
    position: relative;
    margin: 1% auto;
}

As I said the function is half working, the console.logs "connected" and "disconnected" are appearing in the console correctly, and it is able to close the div successfully, but I can't figure out why it won't show the div automatically when the internet connection is lost.

Any ideas on why this isn't working fully would be really appreciated.

possible duplicate of [JQuery Ajax - How to Detect Network Connection error when making Ajax call](http://stackoverflow.com/questions/1730692/jquery-ajax-how-to-detect-network-connection-error-when-making-ajax-call) — Marcos Pérez Gude, Sep 14 '15 at 09:52
Hi @lal I have ``https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js`` included inside my page's head. Is this bad practice? — Emily, Sep 14 '15 at 09:55
@Emily while offline, you wont be able to load jquery if you use this..try this after downloading jquery and use the path of the downloaded jquery to load it. — Lal, Sep 14 '15 at 09:56
@Emily: It works just fine. See: http://jsfiddle.net/abhitalks/46ujyu0y/ Check by disconnecting and re-connecting. — Abhitalks, Sep 14 '15 at 10:13
Hi @lal I uploaded ``jquery-1.11.3.min.js`` to my server and included it in the head of my page but unfortunately it's still performing the same as before. — Emily, Sep 14 '15 at 10:27
@RohitKumar Hi, thanks for your reply. I added ``cache: false`` to the ajax call but it hasn't fixed the problem unfortunately. — Emily, Sep 14 '15 at 10:27
Hi @MysterX thanks for your comment, I've added the CSS to my question. — Emily, Sep 14 '15 at 10:52
@Emily: Did you take a look at the fiddle I shared in the [above comment](http://stackoverflow.com/questions/32561769/simple-javascript-show-div-function-isnt-working#comment52979696_32561769)? — Abhitalks, Sep 14 '15 at 10:52
@Emily, also try to open browser dev-tools and look for this div in the page elements. You can watch does your `display:block` was applied. — MysterX, Sep 14 '15 at 11:02
Hi @Abhitalks thanks for your reply and the fiddle. I've tried to implement it, but I'm unsure of what to put in the get request instead of ``'/echo/json/'`` as that doesn't seem to work, I entered the address of a file on my the server instead but it doesn't seem to be working, the console.log just logs the GET attempt every second whether the connection is active or not. I think I may be testing this wrong, what address should I try? Thanks again. — Emily, Sep 14 '15 at 11:05
@Emily: In the fiddle, you cannot change the url because it will be rejected for cors. In your own code, make the url any page on your website/app and it will work. — Abhitalks, Sep 14 '15 at 11:07
@Emily do you have that problem alive (online)?? I mean do you have a website in which this problem is occuring? if so then share the url.. — Rohit Kumar, Sep 17 '15 at 09:20
Hi @RohitKumar thanks for your comment, I just got this problem resolved, it turned out to be an issue with the CSS. — Emily, Sep 20 '15 at 02:00

score 1 · Accepted Answer · answered Sep 14 '15 at 11:05

1

In your CSS to hidden block added property opacity:0 so you need to change it to 1 if you want to see that division when changing display property

answered Sep 14 '15 at 11:05

MysterX

2,318
1
12
11

Hi @mysterx thanks for your comment! I updated the opacity in the CSS in my question. The function is now working fully! There's one problem though, the div now appears visible at the start of the page loading, it stays on screen for about 5 seconds until everything else is loaded, it then disappears, is there anyway to have it load in the background, out of sight, so that the user doesn't see it when all the page elements are in the process of loading? Thanks again! – Emily Sep 14 '15 at 11:41
You should make this div hidden by default. Set in CSS `display:none;` for it – MysterX Sep 14 '15 at 14:29
Hi @mysterx thanks for your comment, it turns out that the issue was indeed the CSS! Thanks so much again! – Emily Sep 20 '15 at 02:01

score 0 · Answer 2 · edited Sep 14 '15 at 11:47

0

Try this

$('#openOfflineDIV').hide(); to hide

and this

$('#openOfflineDIV').show(); to show!

edited Sep 14 '15 at 11:47

MarmiK

5,639
6
40
49

answered Sep 14 '15 at 10:08

Sunil

919
15
25

Hi @sunil thanks for your reply, I originally tried that method, but it didn't work, the console.logs wrote correctly, but the div show-hide methods didn't work. – Emily Sep 14 '15 at 10:30

score 0 · Answer 3 · edited Sep 14 '15 at 12:46

0

Can you try below code to show/hide instead of style.display:

$('#openOfflineDIV').show();
$('#openOfflineDIV').hide();

edited Sep 14 '15 at 12:46

Vivek Jain

3,811
6
30
47

answered Sep 14 '15 at 10:11

rk3024

5
3

Hi @rk3024 thanks for your reply, that was the method I originally tried, but it didn't work for me, the console.logs wrote correctly, but the div show-hide didn't work. – Emily Sep 14 '15 at 10:29
Try this then , to show document.getElementById("remember").style.visibility = "visible"; and to hide document.getElementById("remember").style.visibility = "hidden"; – rk3024 Sep 14 '15 at 12:38

Simple Javascript show div function isn't working

3 Answers3