Jquery UI dialog inner html not showing
Question
I want to insert a login form to a dialog. Now the dialog is showing but without the form ! Any help please ? I looked on google and other posts on this site but I found no answer !
here is the code:
$('.dia').attr('title', 'LOGIN').text('Login to eWarsha').dialog({ autoOpen: false, modal: true, draggable: false, resizable: false, width: 600, height: 400 }); $('#cl').click(function() { $('.dia').dialog("open"); });
<html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> </head> <body> <input type="submit" id="cl"> <div class="dia"> <form class="dia login-form-dia" method="post"> <input type="text" id="si" name="leamil" placeholder="Email" maxlength="16"> <input type="text" id="si" name="lpassword" placeholder="Password"> <input type="submit" name="login" value="LOGIN"> </form> </div> </body> </html>
1 answers
solution1
0 ACCPTED 2015-02-01 18:44:16
It's because you're replacing the contents of the .dia element when you call the .text() method:
$('.dia').attr('title', 'LOGIN').text('Login to eWarsha').dialog({ ... });
It seems like you would rather prepend that text using the following instead:
$('.dia').attr('title', 'LOGIN').prepend('<h2>Login to eWarsha</h2>').dialog({ ... });
..you could just specify the title attribute in the HTML, and add the desired text there rather than prepending it too:
var $dialog = $('.dia').dialog({ autoOpen: false, modal: true, draggable: false, resizable: false, width: 600, height: 400 }); $('#cl').click(function() { $dialog.dialog("open"); });
<html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> </head> <body> <input type="submit" id="cl"> <div class="dia" title="LOGIN"> <h2>Login to eWarsha</h2> <form class="login-form-dia" method="post"> <input type="text" id="si" name="leamil" placeholder="Email" maxlength="16"> <input type="text" id="si" name="lpassword" placeholder="Password"> <input type="submit" name="login" value="LOGIN"> </form> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.