如何在收到服务器的回复消息后显示DIV?

时间:2013-12-04 07:38:23

标签: javascript jquery html css jsf

大家好我想在我收到服务器的回复后才显示特定的DIV。 我想要做的是,我的用户的密码恢复功能...我得到他们的注册电子邮件ID,然后我检查它与我的数据库,如果它在我的数据库中的我发回一个消息在一个div里面说明密码已经已发送到您的邮件ID ..如果是未注册的电子邮件ID,我发送一条不同的邮件,说明电子邮件ID未注册。

这是我的两个div ...

DIV为我的用户提供电子邮件ID

<div  id="fgpass" >

                    <div id="newpass">
                        <div style="position: absolute;top: 10%;left: 10%;">
                            <center><h2>PASSWORD RECOVERY</h2></center>
                            <h4> Enter Your Registered</h4> 


                  <h4>E-Mail Address :</h4>

                    <f:view>
                        <h:form>
                         <center>
                             <h:inputText id="cmailid" required="true" value="#{forgotPass.mailid}"/>
                             <h:commandButton value="Submit"   action="#{forgotPass.fpass}">

                            </h:commandButton>



                         </center>

                   </div>
                    </div>

                            </h:form>
                </div>

            </div>

显示服务器响应消息的DIV

  <div id="msg" onclick="$('#msg').hide();">
            <div style="position: absolute;top: 20%;left: 2%;">
                   <span style="font-size: medium;">
                         <h:outputLabel  value="#{forgotPass.finalresult}"/>
                   </span>
            </div>
    </div>  

我的CSS

#fgpass {
    position: absolute;
    left: 65%;
    top: 4%;

    border-color: #009900;
    border-width: 3px;
    border-radius: inherit;
   z-index: 800;

}
#newpass{
   position: absolute;
   z-index: 1000;
   height:160px;
   width: 250px;
  color: midnightblue;

   visibility: hidden;
   background-color: lavender;
   -moz-border-radius: 8px;
   border-radius: 8px;
   border-width: 3px;
   border-color:#444;
}  
#msg {
    z-index: 5000;
   width:160px;
   height: 150px;
    -moz-border-radius: 8px;
   border-radius: 8px;
   border-width: 3px;
   border-color:#444;
    position: absolute;
    left: 85%;
    top:3%;
    cursor: pointer;
   background-color: navajowhite;

}

我的问题是,无论何时页面加载或重新加载,msg DIV始终在屏幕上可见。我希望它只有在得到我服务器的响应时才可见。是否有任何JQUERY或JAVASCRIPT或简单的CSS方法来执行此操作。

3 个答案:

答案 0 :(得分:1)

当页面加载时,您需要隐藏div。向#msg添加额外样式即可

#msg
{
    display: none;
}

如果您使用AAJAX从服务器获取响应,那么您可以使用以下代码

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

在ajax请求的成功回调函数内。 jQuery AJAX

答案 1 :(得分:1)

使用jquery函数你可以

$(document).ready(function(){
    $("#msg").hide();

    // later after ajax?

    $.ajax(url).success (function(data) {
      $("#msg").show();
      return false;
    });
});

答案 2 :(得分:-1)

<form method='post' action='#'>
    <input type='text' name='email' placeholder="person@example.com">
    <input type='submit' name="send" value='submit'>
</form>
<?php 
//connect you database here
//after user submits the email check if the email exits

$sql = 'select * from yourtable where email='.$_POST['email'];
$res = mysql_query($sql);
if(mysql_count_rows($res)==1){
  ?>
  <script>
        var unhide_div = document.getElementById('mydiv');
        unhide_div.style.visibility = 'visible';

  </script>

  <?php 

  }else{
      die('Email verification failed!!!');
      }
?>

如果检查了电子邮件,则会在此处显示您的消息!!