爲什麼我的div在Ajax調用後不會顯示自己？

Ajax/jQuery的新手。我迄今試過的所有東西都失敗了。我有一個動態的標題，用於顯示鏈接，如果登錄，如果沒有登錄。爲什麼我的div在Ajax調用後不會顯示自己？

使用簡單的PHP如果其他顯示鏈接。

登錄下拉，在提交jQuery/Ajax函數時調用。一旦成功，我希望LoggedOut隱藏它的功能。但是LoggedIn拒絕顯示自己。

我不能在css中使用display：none，因爲這個頭文件和鏈接應該總是存在。

請幫助我，讓我可以停止皺眉和抓頭:)非常感謝。

success: function(data) { 

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

     if(data.success == true){ 

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

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

    },

編輯：HTML

<?php if($general->loggedIn()){ ?> 

<nav class = "memberHeaderArea" id="loggedIn"> 
    <ul> 
     <li> 
      <a href="userProfile.php?username=<?php echo $user['username'];?>">Profile<span class="user icon"></span></a> 
     </li> 
     <li> 
      <a href="userLogout.php">Log out<span class="lock icon"> </span></a> 
     </li> 
    </ul> 
</nav> 

<?php 
    //toplinks for when not logged in 
}else{ ?> 

<nav class = "memberHeaderArea" id ="loggedOut"> 
    <ul> 
     <li id="login"> 
      <a id="loginTrigger" href="#">Login<span class="unlock icon"></span></a> 

      <div id="loginContent"> 

       <form method="post" action="" id="ourLoginFormID_JS"> 
        <div id="error"></div> 
        <div class="ourContactFormElement2"> 
         <label for="username">Username:</label> 
         <input type="text" id="username" name="username" autocomplete="off" class="required" value="<?php if(isset($_POST['username'])) echo htmlentities($_POST['username']); ?>" /> 
        </div> 

        <div class="ourContactFormElement2"> 
         <label for="password">Password:</label> 
         <input type="password" id="password" name="password" autocomplete="off" class="required"/> 
        </div> 

        <div class="ourContactFormElement2"> 
         <label> &nbsp; </label> 
         <input type="submit" name="loginButton" id="loginButton" value="Login!" onclick="validLogin(); return false;"/> 
        </div> 

        <div id="statusLogin"></div> 
       </form> 

      </div> 
     </li> 

     <li> 
      <a href="userRegister.php">Register<span class="adduser icon"></span></a> 
     </li> 


    </ul> 
</nav> 

<?php 
} 
?>

來源

2013-07-21 null

是否有任何在JavaScript控制檯中的錯誤？檢查拼寫錯誤，並記住它是區分大小寫的。 – Barmar

服務器的迴應是什麼？ –

@Barmar，沒有我能看到的錯誤。沒有錯別字。我已經檢查，然後再次檢查 – null

我懷疑這就是問題所在：

<?php if($general->loggedIn()){ ?> 

<nav class = "memberHeaderArea" id="loggedIn">

用戶沒有當頁面最初發送登錄，所以沒有loggedIn元素在DOM。當您通過AJAX登錄時，這不會改變DOM中的內容。所以沒有什麼可顯示的。

你應該無條件地發送這個HTML，並且只使用CSS和JS來隱藏和顯示它。

獲取初始狀態到jQuery的，你可以這樣做：

$(function() { 
    var loggedIn = <?php echo json_encode($general->loggedIn()); ?>; 
    $("#loggedIn").toggle(loggedIn); 
    $("#loggedOut").toggle(!loggedIn); 
});

另一種方式，你可以做到這一點是這樣的：

<nav class = "memberHeaderArea" id="loggedIn" <?php if (!$general->loggedIn()) echo 'style="display: none;"'; ?> > 

... 

<nav class = "memberHeaderArea" id="loggedOut" <?php if ($general->loggedIn()) echo 'style="display: none;"'; ?> >

來源

2013-07-21 10:49:08 Barmar

。 -.-我可以在php標籤中使用jquery腳本來檢測是否登錄並顯示需要嗎？ – null

編號PHP在編寫頁面時在服務器上運行，jQuery在接收到頁面後在客戶端上運行。 – Barmar

我儘可能多地知道，但希望有一些魔力。我需要在幾乎每一頁上都使用這個php函數。一個解決方法是爲導航導航，不同的ID，隱藏它，並使用jquery來顯示？這很難看，但它可能工作 – null

問題的大部分是你的初始頁面加載不包括loggedIn元素。你有服務器端代碼：

<?php if($general->loggedIn()){ ?>

......這並不首先發送這些字段。然後，您使用Ajax調用進行登錄，並且不會將任何新內容加載到頁面中，因此您的jQuery $('#loggedIn')找不到該元素，因爲它不存在。（您可以通過點擊瀏覽器的「查看頁面源代碼」選項（或同等功能）來確認 - 您將看不到該元素）。

您可以通過先發送所有HTML然後根據需要顯示或隱藏它，然後將用戶名設置爲通過jQuery/JS顯示，或者通過更改您的Ajax以將相關的HTML返回給。在登錄後顯示

來源

2013-07-21 10:48:42 nnnnnn

爲什麼我的div在Ajax調用後不會顯示自己？

回答

相關問題