CODEWITHSUNDEEP
phpjavascriptjqueryhtmlajax
user2608855
user2608855

Reputation: 415

jQuery .show() not working until a refresh is made

I have a jQuery function to display various things depending on whether a user was logged in or not.

The function is in the header which is included in every page (I tried it within the head of the page in question with the same result.

The id loggedIn is set to display:none and the the jquery should display it once logged in but it never does.

I've tested with both loggedIn and loggedOut but nether appear, however the head does update the links, albeit after a refresh and that's the other issue.
In the header, I have to refresh the page before the links change.

Thanks tons for any help.

<script>
$(document).ready(function () {
    var loggedIn = <? php echo json_encode($general - > loggedIn()); ?> ;
    if (loggedIn == true) {
        $("#loggedIn").show();
    } else {
        $("#loggedOut").show();
    }
});            
</script>

Neither of the loggedIn or loggedOut elements display in the below code.

<p id="loggedOut">YOOOOHOOOOOOO</p>
  </div>

<?php

 $body = <<<EOT
        <div class="viewAndDownload" id="loggedIn">
            <a href="../download.php?filename=bla.pdf">Click to download the PDF/>
</div>
EOT;

This is the HTML from the header where the login box doesn't show until after a refresh:

<nav class = "memberHeaderArea" id="loggedIn">
    Links Here
</nav>

<nav class = "memberHeaderArea" id ="loggedOut">
 Removed links etc to save space
<input type="submit" name="loginButton" id="loginButton" value="Login!"   onclick="validLogin(); return false;"/>

onclick calls an ajax function

function validLogin(){

//removed get username etc

var params = {username: username, password: password};
var url = "../loginProcessAjax.php";

$("#statusLogin").show();

$.ajax({
    type: 'POST',
    url: url,
    data: params,
    dataType: 'json',
    beforeSend: function() {
      document.getElementById("statusLogin").innerHTML= '<img src="../images/loginLoading.gif" /> checking...' ;
    },

    success: function(data) {

        $("#statusLogin").hide();

        if(data.success == true){

            //$('#loggedIn').show();
            $('#loginContent').slideToggle();
            //$('#loggedOut').hide();

        }else{
           // alert("data.message... " + data.message);//undefined
            $("#error").show().html(data.message);
        }

    },
    error: function( error ) {
        console.log(error);
    }
});
}

Thank you again, this has been bugging me for ages and I haven't found a way to solve it despite many attempts

EDIT: logged in function

public function loggedIn(){

return (isset($_SESSION['id'])) ? true : false;
}//end function

Upvotes: 0

Views: 1527

Answers (2)

nubinub
nubinub

Reputation: 1938

$(document).ready(function(){
    function testLoggedIn(){
      var loggedIn = <? php echo json_encode($general - > loggedIn()); ?> ;
        if (loggedIn == true) {
          $("#loggedIn").show();
        } else {
          $("#loggedOut").show();
        }
    }

    setInterval(testLoggedIn(),1000);
});

Something like this should work.

EDIT The main idea is you have to constantly check if the user is logged in or not and not only on document ready. To achieve that you can use setInterval which will keep executing the function according to the interval value passed in parameters. This way , if this script is running on all your pages, all pages of the user will update automatically if he logs in / logs out, and not only the page where he fired the login event.

Upvotes: 1

Mathias Lykkegaard Lorenzen
Mathias Lykkegaard Lorenzen

Reputation: 15896

This most likely happens due to the browser caching the script within the script tag (and also its global variables).

What you can do is refer to the script externally, and then append some random string behind it that always changes.

<script src="myscript.php?randomkey=<?php echo date("U"); ?>">
</script>

And the contents of myscript.php would then be your code.

This way, the browser will constantly be led to believe that the script has changed. Keep in mind that myscript.php's header mime-type that it broadcasts must be text/javascript to make sure it works in all browsers.

I am aware it might not be the most clean solution, but it should work just fine.

Upvotes: 1

Related Questions