CODEWITHSUNDEEP
jqueryhtml
palAlaa
palAlaa

Reputation: 9878

Dialog does not appear when it's called

When I click on the anchor 

<span>Forgot your password? Click <a href="#" id="ForgetPassword">here</a> to retrieve it.</span>

I want to show a form in a dialog 

  <form action="UsersAccountServlet" id="retrievePasswordForm" method="post">
        <label>Email address</label>
        <input type="text" name="email" />
        <input type="submit" name="retrievePassword"/>
         <input type="hidden" name="lang" value="E"/>
         <c:if test="${retrivePassResult != null}">
             <c:out value="${retrivePassResult}"></c:out>
         </c:if>
    </form>

I use this jquery script to show the dialog but the dialog i does not appear?

$(document).ready(function() {
  $("#ForgetPassword").click(function(){
     alert("here");
     $("#retrievePasswordForm").dialog();

 });
});

Upvotes: 0

Views: 106

Answers (4)

shernshiou
shernshiou

Reputation: 518

http://jsfiddle.net/shernshiou/8rVBm/1/ seems working..

did you include jquery ui?

Upvotes: 2

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

I think you should wrap your form in a div and call the dialog on the div. 

<div id='dialog' style='display:none'>
<form action="UsersAccountServlet" id="retrievePasswordForm" method="post">
        <label>Email address</label>
        <input type="text" name="email" />
        <input type="submit" name="retrievePassword"/>
         <input type="hidden" name="lang" value="E"/>
         <c:if test="${retrivePassResult != null}">
             <c:out value="${retrivePassResult}"></c:out>
         </c:if>
    </form>
</div>
<span>Forgot your password? Click <a href="#" id="ForgetPassword">here</a> to retrieve it.</span>


  $("#ForgetPassword").click(function(){
     alert("here");
     $("#dialog").dialog();

 });

Look at the fiddle here: http://jsfiddle.net/TUHgd/

Upvotes: 0

avall
avall

Reputation: 2055

Maybe there is the same problem when calling content to Fancybox.

You should wrap form with display:none div and then call dialog for form: And don't hide form tag.

<div style="display:none">
    <form action="UsersAccountServlet" id="retrievePasswordForm" method="post">
        <label>Email address</label>
        <input type="text" name="email" />
        <input type="submit" name="retrievePassword"/>
         <input type="hidden" name="lang" value="E"/>
         <c:if test="${retrivePassResult != null}">
             <c:out value="${retrivePassResult}"></c:out>
         </c:if>
    </form>
</div>

Upvotes: 0

cetver
cetver

Reputation: 11829

$( "#retrievePasswordForm" ).dialog( "open" );

Upvotes: 0

Related Questions