Javascript functions not fetching data on load

Question

I'm having an issue with the code I have provided below and I'm new to Javascript and Jquery. What the code is supposed to do is on load it fetches a number for "unread notifications" then places that number in a div called notes_number. Then it should read the number from notes_number and depending on if the number is more than 0 it will show the div called notes_signal.

I do this on load, every 5 seconds, and then whenever the notifications button is pressed. The code isn't working because on load it doesn't put a number in the notes_number div. Also the other occurrences aren't working. At one point I thought it was working but now I can't figure out what's up. Here's the code:

//THIS IS TO CHECK WHEN THE PAGE COMES UP
$("#notes_number").load("getnumber.php");

if(document.getElementById("notes_number").innerHTML > 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "";
}

if(document.getElementById("notes_number").innerHTML == 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "none";
}


//THIS IS TO CHECK EVERY 5 SECONDS
window.setInterval(function(){
$("#notes_number").load("getnumber.php");

if(document.getElementById("notes_number").innerHTML > 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "";
}

if(document.getElementById("notes_number").innerHTML == 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "none";
}
}, 5000);



//THIS IS TO CHECK WHEN THE BUTTON IS PRESSED
function toggleDiv(divId) {
   $("#"+divId).show();

$(document).ready(function(){
   $("#myContent").load("getnotes.php?page=<? echo $page; ?>");
});



$("#notes_number").load("getnumber.php");

if(document.getElementById("notes_number").innerHTML > 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "";
}

if(document.getElementById("notes_number").innerHTML == 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "none";
}
}

untitled · Accepted Answer · 2013-09-19 21:39:33Z

2

Create a function:

function checkNotes() {
    $.get( "getnumber.php", function( data ) {
        $( "#notes_number" ).text( data );
        if ( parseInt(data) > 0 ) {
            $('#notes_signal').show();
        } else {
            $('#notes_signal').hide();
        }
    });
}

And call it on load, on interval and on button click.

answered Sep 19, 2013 at 21:39

untitled

1,1272 gold badges13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2362601 Over a year ago

Is there a way to hide #notes_signal automatically and show it if needed? Because right now it'll show for half a second then the code kicks in to hide it. Thanks for the help!

Kevin Lynch Over a year ago

in your CSS put #notes_number {display: none;} that will hide it in the first instance

untitled Over a year ago

Create CSS rule #notes_signal { display: none }

Kevin Lynch · Accepted Answer · 2013-09-19 21:23:40Z

0

I would use .get in your instance

var load = $.get('getnumber.php');

answered Sep 19, 2013 at 21:23

Kevin Lynch

24.7k3 gold badges38 silver badges39 bronze badges

2 Comments

user2362601 Over a year ago

you mean instead of $("#notes_number").load("getnumber.php");?

t.niese Over a year ago

Because the problem of the question is that the request is asynchronous, you should explain what $.get(...) returns and what should be done with that result.

andrew · Accepted Answer · 2013-09-19 21:36:15Z

0

Javascript is asynchronous, which means that

if(document.getElementById("notes_number..... will run before

$("#notes_number").load("getnumber.php"); is completed.

So you have to use a call back like this:

 $("#notes_number").load("getnumber.php",function(){
     if(document.getElementById("notes_number").innerHTML > 0){
        var elem = document.getElementById("notes_signal");
        elem.style.display = "";
        }

        if(document.getElementById("notes_number").innerHTML == 0){
        var elem = document.getElementById("notes_signal");
         elem.style.display = "none";
       }
  });

Also I'm not sure that this will work elem.style.display = "";

Try 'elem.style.display = "block"; instead

answered Sep 19, 2013 at 21:36

andrew

9,6039 gold badges36 silver badges62 bronze badges

1 Comment

t.niese Over a year ago

="" removes the value that was set directly to the element, so it will have the value that results out of the matchig css rules again.

Collectives™ on Stack Overflow

Javascript functions not fetching data on load

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related