Autocomplete suggestion are narrowed based on the form. Thing is I am able to send filter(s) to the server; which also gives the correct output but it does not end up as suggestions (autocomplete) in the textarea.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Combined</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: auto;
}
.ui-autocomplete-loading {
background: white url("../img/ui-anim.gif") right center no-repeat;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$.widget("custom.catcomplete", $.ui.autocomplete, {
_create: function () {
this._super();
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
},
_renderMenu: function (ul, items) {
var that = this,
currentCategory = "";
$.each(items, function (index, item) {
var li;
if (item.event != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.event + "</li>");
currentCategory = item.event;
}
/* li = that._renderItemData(ul, item);
if (item.event) {
li.attr("aria-label", item.event + " : " + item.label);
} */
$("<li></li>")
.data("ui-autocomplete-item", item)
.append('<input type="checkbox"/>' + item.label + '')
.appendTo(ul);
});
}
});
$("#trade").catcomplete({
delay: 0,
source: function (request, response) {
$.ajax({
type: "POST",
url: "tmp3.php",
data: {
trade: request.term,
trainingID: $('form[name=searchTraining] input[name=trainingID]').val(),
totalParticipants: $('form[name=searchTraining] input[name=totalParticipants]').val(),
male: $('form[name=searchTraining] input[name=male]').val(),
female: $('form[name=searchTraining] input[name=female]').val(),
district: $('form[name=searchTraining] input[name=district]').val(),
project: $('form[name=searchTraining] input[name=project]').val(),
fromDate: $('form[name=searchTraining] input[name=fromDate]').val(),
toDate: $('form[name=searchTraining] input[name=toDate]').val(),
rPerson: $('form[name=searchTraining] input[name=rPerson]').val()
},
success: response,
dataType: 'json',
minLength: 1
});
}
});
});
</script>
</head>
<body>
<form name="searchTraining">
<div class="ui-widget">
<label for="search">Search: </label>
<textarea class="tradeF" name='trade' id='trade' placeholder="Trade" autocomplete="on" pattern="[a-zA-Z ]+" size="21" ></textarea>
</div>
<input pattern="[0-9]+" placeholder="Training ID" name="trainingID" size="1" class="idF" type="text" title="TrainingID">
<input autocomplete="on" pattern="[0-9]+" placeholder="Total" name="totalParticipants" size="3" type="text" class="totalF">
<input autocomplete="on" pattern="[0-9]+" placeholder="Male" name="male" size="3" type="text" class="maleF">
<input autocomplete="on" pattern="[0-9]+" placeholder="Female" name="female" size="3" type="text" class="femaleF">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="District" name="district" size="3" type="text">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Project" name="project" size="3" type="text" value="kfw">
From<input name="fromDate" size="3" type="text"><br />To<input name="toDate" size="3" type="text">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Venue" name="venue" size="3" type="text">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Resource Person" name="rPerson" size="3" type="text">
<input type="hidden" name="defaulter" value="true" />
<input type="hidden" name="questItem" value="" />
</form>
</body>
</html>
FYI: Server response is
[{event:'Commercial',label:'Adda Work'},
{event:'Commercial',label:'Alternative Dispute Resolution'},
{event:'Commercial',label:'Auto Electrician'},
{event:'Commercial',label:'Beautician'},
{event:'Staff',label:'Youth Activits Training'}]
I donot know where i am doing wrong But i had narrow it down to the $("#trade").catcomplete code block.
Answering to the twisty comment.
We don't needs a div wrapper for li. the following code will prove it. It basically the same except it doesn't uses remote data source.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Categories</title>
<link rel="stylesheet" href="../../res/jquery/jquery-ui/jquery-ui-1.12.1/jquery-ui.css">
<style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
.ui-autocomplete {
max-height: 600px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: auto;
}
.ui-autocomplete-loading {
background: white url("../img/ui-anim.gif") right center no-repeat;
}
</style>
<script src="../../res/jquery/jquery1.x/jquery-1.12.4.js"></script>
<script src="../../res/jquery/jquery-ui/jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$.widget("custom.catcomplete", $.ui.autocomplete, {
_create: function () {
this._super();
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
},
_renderMenu: function (ul, items) {
var that = this,
currentCategory = "";
$.each(items, function (index, item) {
var li;
if (item.event != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.event + "</li>");
currentCategory = item.event;
}
$("<li></li>")
.data("ui-autocomplete-item", item)
.append('<input type="checkbox"/>' + item.label + '')
.appendTo(ul);
});
}
});
var data = [{event: 'Community', label: 'Agriculture Ex Worker (AEW)'},
{event: 'Community', label: 'BMT Trainings for CRPs'},
{event: 'Community', label: 'Carpentry'},
{event: 'Community', label: 'Fruits & Forest Nursery (Production & Marketting)'},
{event: 'Community', label: 'Heavy Machinery Excavator'},
{event: 'Community', label: 'Masonry'},
{event: 'Community', label: 'Mobile Repairing'},
{event: 'Community', label: 'Motor Cycle Repairing'},
{event: 'Community', label: 'Operation & Maintenance'},
{event: 'Community', label: 'Solar Panel Installation'},
{event: 'Community', label: 'Tailoring & Embroidery'},
{event: 'Staff', label: 'Engineers Training'},
{event: 'Staff', label: 'Engineers Training (Solar Panal)'},
{event: 'Staff', label: 'FATA Engineers Meeting'},
{event: 'Staff', label: 'FATA Projects Review Meeting'},
{event: 'Staff', label: 'Staff Orientation'}];
$("#trade").catcomplete({
delay: 0,
source: data
});
});
</script>
</head>
<body>
<form name="searchTraining">
<div class="ui-widget">
<label for="search">Search: </label>
<textarea class="tradeF" name='trade' id='trade' placeholder="Trade" autocomplete="on" pattern="[a-zA-Z ]+" size="21" ></textarea>
</div>
<input pattern="[0-9]+" placeholder="Training ID" name="trainingID" size="1" class="idF" type="text" title="TrainingID">
<input autocomplete="on" pattern="[0-9]+" placeholder="Total" name="totalParticipants" size="3" type="text" class="totalF">
<input autocomplete="on" pattern="[0-9]+" placeholder="Male" name="male" size="3" type="text" class="maleF">
<input autocomplete="on" pattern="[0-9]+" placeholder="Female" name="female" size="3" type="text" class="femaleF">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="District" name="district" size="3" type="text">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Project" name="project" size="3" type="text" value="kfw">
From<input name="fromDate" size="3" type="text"><br />To<input name="toDate" size="3" type="text">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Venue" name="venue" size="3" type="text">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Resource Person" name="rPerson" size="3" type="text">
<input type="hidden" name="defaulter" value="true" />
<input type="hidden" name="questItem" value="" />
</form>
</body>
</html>
the above code works i.e. autocomplete suggestion do show up. but it is basically useless for me because the source of the autocomplete is static where as mine requirement is it to be generated dynamically.
As far as the what javascript code will pop up is later issue (which code is not included above).
Thanks for the comments anyway.
Some suggestions. As you have not provided any sample data, it's difficult to test or provide an example answer.
$(function() {
$.widget("custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
},
_renderMenu: function(ul, items) {
var that = this,
currentCategory = "";
$.each(items, function(index, item) {
var li;
if (item.event != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.event + "</li>");
currentCategory = item.event;
}
li = $("<li></li>")
.data("ui-autocomplete-item", item)
.append('<div><input type="checkbox"/>' + item.label + '</div>')
.appendTo(ul);
});
}
});
$("#trade").catcomplete({
delay: 0,
source: function(request, response) {
var myForm = $("form[name='searchTraining']");
$.ajax({
type: "POST",
url: "tmp3.php",
data: {
trade: request.term,
trainingID: $('[name=trainingID]', myForm).val(),
totalParticipants: $('[name=totalParticipants]', myForm).val(),
male: $('[name=male]', myForm).val(),
female: $('[name=female]', myForm).val(),
district: $('[name=district]', myForm).val(),
project: $('[name=project]', myForm).val(),
fromDate: $('[name=fromDate]', myForm).val(),
toDate: $('[name=toDate]', myForm).val(),
rPerson: $('[name=rPerson]', myForm).val()
},
success: response,
dataType: 'json',
minLength: 1
});
}
});
});
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: auto;
}
.ui-autocomplete-loading {
background: white url("../img/ui-anim.gif") right center no-repeat;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form name="searchTraining">
<div class="ui-widget">
<label for="search">Search: </label>
<textarea class="tradeF" name='trade' id='trade' placeholder="Trade" autocomplete="on" pattern="[a-zA-Z ]+" size="21"></textarea>
</div>
<input pattern="[0-9]+" placeholder="Training ID" name="trainingID" size="1" class="idF" type="text" title="TrainingID">
<input autocomplete="on" pattern="[0-9]+" placeholder="Total" name="totalParticipants" size="3" type="text" class="totalF">
<input autocomplete="on" pattern="[0-9]+" placeholder="Male" name="male" size="3" type="text" class="maleF">
<input autocomplete="on" pattern="[0-9]+" placeholder="Female" name="female" size="3" type="text" class="femaleF">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="District" name="district" size="3" type="text">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Project" name="project" size="3" type="text" value="kfw"> From
<input name="fromDate" size="3" type="text"><br />To<input name="toDate" size="3" type="text">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Venue" name="venue" size="3" type="text">
<input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Resource Person" name="rPerson" size="3" type="text">
<input type="hidden" name="defaulter" value="true" />
<input type="hidden" name="questItem" value="" />
</form>
The problem was as I suspected minor and cryptic coding of JavaScript. When I created the Json array in php I used quote instead of double quote. i.e.
"{'event':'Community','label':'Agriculture'}"
instead i should had used
'{"event":"Community","label":"Agriculture"}'
when i reverse quote with double quote it worked like a charm.
btw: #twisty thanks for helping me along the way.
Related
How to change the order of the switch and the label in bootstrap 5. The order in the code doesn't make a difference.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Switch first then label</label>
</div>
<div class="form-check form-switch">
<label class="form-check-label" for="flexSwitchCheckDefault">Label first then switch</label>
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
</div>
Here you go...
See the snippet below.
.form-check {
position: relative;
width: 200px;
}
.form-check-input {
position: absolute;
right: 0;
}
.form-check-label {
position: absolute;
left: 0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Switch first then label</label>
</div>
<div class="form-check form-switch">
<label class="form-check-label" for="flexSwitchCheckDefault">Label first then switch</label>
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
</div>
here is my code
this is simple form. I am trying to call on click event on button click
render: function () {
return (
<form className="commentForm">
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
You forgot to pass the onSubmit event for form
render: function () {
return (
<form className="commentForm" onSubmit={this.submit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
submit: function() {
// do your stuff
}
try this:
<form className="commentForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
Can you try like this
handleTextChange(e) {
const { name, value } = e.target;
this.setState({
[name]: value
});
}
_handleSubmit(e) {
e.preventDefault();
let { author, text} = this.state;
// dispatch the submit function
}
render: function () {
return (
<form className="commentForm" onSubmit={this._handleSubmit}>
<input
type="text"
placeholder="Your name"
name="author"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
name="text"
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
u want onclick method here it is onsubmit same work of onclick.
handleSubmit(){
console.log(this.state.author);// u can see the value of autor and say somthing input vale in here it is coming right value or not
console.log(this.state.text);
axios.post(route,{
name:this.state.author, //these name and say are the variable whice are use to take the values to back end
Say :this.state.text
}).then({response}); //here u cn give some thing to disply after data add to database.
}
<form className="commentForm" onsubmit={this.handleSubmit.bind(this)}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Submit" />
</form>
You need not have separate onChange for two fields unless you do something different in each of them.
Render:
<form className="commentForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
name="author"
onChange={this.handleChange}
/>
<input
type="text"
placeholder="Say something..."
name="text"
onChange={this.handleChange}
/>
<button type="submit" >submit</button>
</form>
When submit is clicked :
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state.author) //whatever you want to process the data with...
}
You can have single handleChange to set the state
handleChange = (e) => {
const { value, name } = e.target;
this.setState({ [name]: e.target.value })
}
I am beating my head on the wall for hours with MVC 4 and jQuery validation to validate the first first on blur. I have tried attaching the validation to the entire form AND to the individual element (first field) to no avail. If I add an alert() into the blur event it seems to fire but no validation of the required field. I have additional validations to add after the required is working but haven't gotten to them yet. I don't know that it is a problem with the MVC 4. JQueryvalidate is v1.10. I have also tried setting up the validator and then calling .valid() on the element I want validated using the .blur and still not validation that I can see.
$(function () {
$('#productionOrder').focus();
$.validator.addMethod("cMinLength", $.validator.methods.minlength,
$.format("Must contain as least {0} chars"));
$.validator.addClassRules("productionOrder", { cMnLength: 3 });
$('#myForm').validate({
onkeyup: false,
//onfocusout: false,
errorClass: 'fieldError'
//rules: {
// productionOrder: "required number",
// tc: "required",
// dn: "required"
//}
});
$("#towCount").bind("change keyup", function () {
$form.validate().element("#towCount");
});
//$('#productionOrder').validate({
// //onkeyup: false,
// onfocusout: false,
// errorClass: 'fieldError',
// rules: {
// productionOrder: {
// required: true
// }
// }
//});
});
And the .cshtml
#model FiberLine2.ViewModels.Creel
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<style>
.fieldError {
border-color: red;
border-width: medium;
}
.input-label {
font-size: 13px;
width: 130px;
height: 30px;
display: inline-block;
}
</style>
</head>
<body>
<form id="myForm">
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div>
<!-- app header -->
<label>#Resources.Strings.User: </label>
<label>#User.Identity.Name</label>
</div>
<fieldset>
<legend>#Resources.Strings.Creel #Resources.Strings.Load</legend>
<div>
<div id="errorDiv"></div>
<hr />
#Html.Label(#Resources.Strings.ProductionOrder, new { #class = "input-label lock" })
<input type="text" id="productionOrder" name="productionOrder" class="required" maxlength="4" />
<br />
<label class="input-label lock">#Resources.Strings.Tow #Resources.Strings.Count</label>
<input type="text" id="towCount" name="tc" class="required" size="5" maxlength="5" value="299" />
<br />
<label class="input-label lock">#Resources.Strings.Batch #Resources.Strings.Sequence</label>
<input type="text" id="doffNumber" name="dn" size="5" maxlength="5" value="1" />
<br />
<label class="input-label">#Resources.Strings.Creel #Resources.Strings.Position</label>
<input type="text" id="creelPosition" name="cp" size="5" maxlength="5" />
<br />
<label class="input-label">#Resources.Strings.Batch #Resources.Strings.ID</label>
<input type="text" id="creelNumber" name="cn" size="7" maxlength="7" />
<br />
<hr />
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
</form>
</body>
</html>
Can you try this instead?
var settngs = $.data($('#myForm')[0], 'validator').settings;
settngs.onkeyup = false;
Hello i want to create a popup with Jquerymobile.
in my application i have one question and three answer options. If the user click on one answer then it should appear a popup: for the right answer : This is right. And for the wrong answers: This is wrong.
3 answer option, two are wrong and one is right.
Could somebody help me?
<fieldset data-role="controlgroup">
<legend>
Question?
</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Körpergewicht / (Körpergröße)2</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">(Körpergewicht) / Körpergröße 2</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Körpergewicht / (Alter)2</label>
</fieldset>
prüfen
<script type="text/javascript">
$(document).ready(function() {
$(document).delegate('#popupbut', 'click', function() {
alert($("input[name='radio-choice-1']:checked").val());
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Falsch',
headerClose: true,
blankContent :
'<p><br /><br />This is wrong.</p>'
})
});})
</script>
This should resolve your problem.
$(document).ready(function () {
$(document).delegate('#popupbut', 'click', function () {
var content = '';
var headerText = '';
if ($("input[name='radio-choice-1']:checked").val() == 'choice-1') {
content = '<p><br /><br />Right!.</p>'
headerText = 'Right';
} else {
content = '<p><br /><br />Wrong!.</p>'
headerText = 'Wrong';
}
$('<div>').simpledialog2({
mode: 'blank',
headerText: headerText,
headerClose: true,
blankContent: content
});
});
});
I'm trying to run the code from http://jsfiddle.net/ddole/AC5mP/13/ on my machine and the approach I've use is below or here.
Do you know why that code doesn't work on my machine. Firebug doesn't help me and I can't solve the problem. I think that I need another pair of eyes :(((
In firebug,console tab i don't get any error message. The problem is that I can't get the value of that input from the dialog box, after I press save button. The $('input:last').val() seems to be 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 the text on save, I have modified your line alert($('.helpText:last').val()); to this alert($('.helpText', this).val());
I have added one more dependencies on fiddler,
http://code.jquery.com/ui/1.8.21/jquery-ui.min.js
Now its working as 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;
});
});