jquery use of :last and val() -
i'm trying run code http://jsfiddle.net/ddole/ac5mp/13/ on machine , approach i've use below or here.
do know why code doesn't work on machine. firebug doesn't me , can't solve problem. think need pair of eyes :(((
in firebug,console tab don't error message. problem can't value of input dialog box, after press save button. $('input:last').val() seems empty
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui dialog - modal form</title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> <script type="text/javascript" > jquery(function($) { $('.helpdialog').hide(); $('.helpbutton').each(function() { $.data(this, 'dialog', $(this).next('.helpdialog').dialog({ autoopen: false, modal: true, width: 300, height: 250, buttons: { "save": function() { alert($('.helptext:last').val()); $(this).dialog( "close" ); }, cancel: function() { $(this).dialog( "close" ); } } }) ); }).click(function() { $.data(this, 'dialog').dialog('open'); return false; }); }); </script> </head> <body> <span class="helpbutton">button</span> <div class="helpdialog"> <input type="text" class="helptext" /> </div> <span class="helpbutton">button 2</span> <div class="helpdialog"> <input type="text" class="helptext" /> </div> <span class="helpbutton">button 3</span> <div class="helpdialog"> <input type="text" class="helptext" /> </div> <span class="helpbutton">button 4</span> <div class="helpdialog"> <input type="text" class="helptext" /> </div> <span class="helpbutton">button 5</span> <div class="helpdialog"> <input type="text" class="helptext" /> </div> </body>
refer live demo
to display text on save, have modified line alert($('.helptext:last').val());
alert($('.helptext', this).val());
i have added 1 more dependencies on fiddler,
http://code.jquery.com/ui/1.8.21/jquery-ui.min.js
now working expected.
html:
<span class="helpbutton">button</span> <div class="helpdialog"> <input type="text" class="helptext" /> </div> <span class="helpbutton">button 2</span> <div class="helpdialog"> <input type="text" class="helptext" /> </div> <span class="helpbutton">button 3</span> <div class="helpdialog"> <input type="text" class="helptext" /> </div> <span class="helpbutton">button 4</span> <div class="helpdialog"> <input type="text" class="helptext" /> </div> <span class="helpbutton">button 5</span> <div class="helpdialog"> <input type="text" class="helptext" /> </div>
js:
jquery(function($) { $('.helpdialog').hide(); $('.helpbutton').each(function() { $.data(this, 'dialog', $(this).next('.helpdialog').dialog({ autoopen: false, modal: true, width: 300, height: 250, buttons: { save: function() { alert($('.helptext', this).val()); $(this).dialog( "close" ); }, cancel: function() { $(this).dialog( "close" ); } } }) ); }).click(function() { $.data(this, 'dialog').dialog('open'); return false; }); });
Comments
Post a Comment