Gidday
Just learning the jquery UI, and have made some really good progress today, but have got stumped when figuring out how to get the ID of the selected button in a buttonset before the form is submitted.
I know how to make the AJAX POST work once I get the ID of the selected button.
How is the first part done?
Here's my jquery:
$( "#pi" ).buttonset();
$( "#req1" ).dialog({
resizable: false,
height:350,
minWidth: 310,
modal: true,
buttons: {
"Send request": function() {
//what goes here to retrieve the ID of the selected button?
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
And my form...
<div id="req1" title="make your selection:">
<form>
<div id="pi">
<input type="radio" id="p1" name="pi" /><label for="p1">3</label>
<input type="radio" id="p2" name="pi" /><label for="p2">2</label>
<input type="radio" id="p3" name="pi" /><label for="p3">1</label>
<input type="radio" id="p4" name="pi" checked="checked" /><label for="p4">0</label>
<input type="radio" id="p5" name="pi" /><label for="p5">1</label>
<input type="radio" id="p6" name="pi" /><label for="p6">2</label>
<input type="radio" id="p7" name="pi" /><label for="p7">3</label>
</div>
Thanks for your time and help.
Try this:
var id = $('#pi input[name=pi]:checked').attr('id');
Related
I have a web form with radio buttons and a input field for autocomplete. Based on the selected radio button a different webservice (url) needs to be called to work with the data that the user is entering in input field.
The following code works well, but I don't know how to make it more flexible to accept different URL's.
$("#txtCriteria").autocomplete({
source: function (request, response) {
$.ajax({
async: false,
delay: 500,
url: "../../CommonWebServices/wsEntity.asmx/ReportBuildings",
data: "{ 'Name': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.Text,
value: item.Value
} // end of return
})) // end of response
} // end of success
}); // end of ajax
}, // end of source
minLength: 1,
});
Here are the radio buttons. So If I select Region the webservice URL is different then the Building.
<input id="Radio1" type="radio" value="S" name="rblRptChoice" class="label" checked="checked" />State Wide<br />
<input id="Radio2" type="radio" value="P" name="rblRptChoice" class="label" />Prosperity Region<br />
<input id="Radio3" type="radio" value="R" name="rblRptChoice" class="label" />Region<br />
<input id="Radio4" type="radio" value="T" name="rblRptChoice" class="label" />Cluster<br />
<input id="Radio5" type="radio" value="C" name="rblRptChoice" class="label" />CEPD<br />
<input id="Radio6" type="radio" value="F" name="rblRptChoice" class="label" />Fiscal Agency<br />
<input id="Radio7" type="radio" value="B" name="rblRptChoice" class="label" />Building<br />
<input id="Radio8" type="radio" value="P" name="rblRptChoice" class="label" />CIP Code<br />
<input id="Radio9" type="radio" value="Y" name="rblRptChoice" class="label" />Year<br /><br />
<asp:Label ID="lblDetails" runat="server" Text="Enter Details"></asp:Label><br />
<input id="txtCriteria" type="text" placeholder="Enter Criteria" style="width:250px" />
Any assistance is appreciated.
I put the path value in a variable when the radio button is selected and then set the url to the variable.
Currently i have my project which works this way
Keep Filling a form
Click on a button new window popups
fill data in popupwindow and submit
Popup window closes and data on that window is saved to database
Continue filling parent form and save the data
Now i want to replace the pop-up window with jQuery UI Dialog and perform the same operations
(Step 2 3 4)
Here some code
$( "#rtrDialog" ).dialog({
autoOpen: false,
height: 300,
modal: true,
width: 350,
buttons: {
"Continue..": function() {
alert("Button Clicked");
var url = "contractDetails.htm";
window.open(url, '_blank');
}
}
});
$("#RTRButton").click(function(){
$("#rtrDialog" ).dialog("open");
});
<!-- This form is used to capture the RTR related Dialogs -->
<div id="rtrDialog" title="Enter RTR Details">
<form>
<fieldset>
<p><b>Enter Details for ?</b></p>
<input type="radio" name="entity" value="applicant"/>Applicant<br/>
<input type="radio" name="entity" value="co-app1"/>Co-Applicant 1<br/>
<input type="radio" name="entity" value="co-app2" />Co-Applicant 2<br/>
<input type="radio" name="entity" value="co-app3" />Co-Applicant 3<br/>
<input type="radio" name="entity" value="guarantor1" />Guarantor 1<br/>
<input type="radio" name="entity" value="guarantor2" />Guarantor 2<br/>
<input type="radio" name="entity" value="guarantor3" />Guarantor 3<br/>
</fieldset>
</form>
</div>
How can i go about doing that ??
Do i have to do the jQuery-Ajax way ? Or is there anything better to do this
Use twitter bootstrap for opening the dialog box and perform your action..
http://getbootstrap.com/2.3.2/javascript.html#modals
check this..
Hope this will help ..
Below is a group of radio buttons that appear on my view. I am able to retrieve the selected item via this simple code
string criteria = filter["criteria"];
however I do not know how to retain the selected item. Once the controller posts back to the view the default radio button is always selected.
<form method="post">
#Html.TextBox("searchValue", ViewBag.CurrentFilter as string, new { placeholder = "Search" })
<input type="image" src="#Url.Content("~/Content/Images/Filter.bmp")" alt="Filter" style="padding-top: 0px;" />
<span class="error" style="clear: both;">
#ViewBag.ErrorMessage
</span>
<br />
<br />
<input type="radio" name="criteria" id="bankName" value="bankName" checked="true"/>
<label for="bankName">Bank Name</label>
<input type="radio" name="criteria" id="EPURL" value="EPURL" />
<label for="EPURL">EPURL</label>
<input type="radio" name="criteria" id="specialNotes" value="specialNotes" />
<label for="SpecialNotes">Special Notes</label>
<input type="radio" name="criteria" id="email" value="email" />
<label for="email">Email</label>
<input type="radio" name="criteria" id="dynamicsId" value="dynamicsId" />
<label for="dynamicsId">Dynamics ID</label>
<input type="radio" name="criteria" id="stat" value="stat" />
<label for="fixed">Agent ID </label>
</form>
The answer to this question wound up being incredibly simple. First mistake I made was not using the #Html controls. Second was using FormCollection as an input parameter for the index controller. By changing the radio buttons to the following:
#Html.RadioButton("criteria", "bankName", true)<span>Bank Name</span>
#Html.RadioButton("criteria", "EPURL")<span>EPURL</span>
#Html.RadioButton("criteria", "specialNotes")<span>Special Notes</span>
#Html.RadioButton("criteria", "email")<span>Email</span>
#Html.RadioButton("criteria", "dynamicsId")<span>Dynamics ID</span>
#Html.RadioButton("criteria", "stat")<span>Agent ID</span>
and the signature of the Index method in the controller to this:
public ActionResult Index(string criteria, string searchValue)
The selected radio button stayed selected after the post back.
If I understand your need correctly you could set the name of the item you want checked in the ViewBag (or ViewData or Model) and set the checked property in your view accordingly. Something like this:
<form method="post">
#Html.TextBox("searchValue", ViewBag.CurrentFilter as string, new { placeholder = "Search" })
<input type="image" src="#Url.Content("~/Content/Images/Filter.bmp")" alt="Filter" style="padding-top: 0px;" />
<span class="error" style="clear: both;">
#ViewBag.ErrorMessage
</span>
<br />
<br />
#{
var checkedItemName = ViewBag.CheckedItemName;
}
<input type="radio" name="criteria" id="bankName" value="bankName" checked="#((checkedItemName == "bankName"))"/>
<label for="bankName">Bank Name</label>
<input type="radio" name="criteria" id="EPURL" value="EPURL" checked="#((checkedItemName == "EPURL"))"/>
<label for="EPURL">EPURL</label>
<input type="radio" name="criteria" id="specialNotes" value="specialNotes" checked="#((checkedItemName == "specialNotes"))"/>
<label for="SpecialNotes">Special Notes</label>
<input type="radio" name="criteria" id="email" value="email" checked="#((checkedItemName == "email"))"/>
<label for="email">Email</label>
<input type="radio" name="criteria" id="dynamicsId" value="dynamicsId" checked="#((checkedItemName == "dynamicsId"))"/>
<label for="dynamicsId">Dynamics ID</label>
<input type="radio" name="criteria" id="stat" value="stat" checked="#((checkedItemName == "stat"))"/>
<label for="fixed">Agent ID </label>
</form>
Don't refresh the complete page...Use JQuery and do an Ajax call
$.ajax({
url: "Your Url",
async: true,
type: 'POST',
data: JSON.stringify({ ParameterName: Param_Value }),
beforeSend: function (xhr, opts) {
},
contentType: 'application/json; charset=utf-8',
complete: function () { },
success: function (data) {
//Success Callback
//Code to set value to your control
}
});
I'm using jQuery 1.9.1, jQM 1.3 & knockout 2.2.1.
My html is as follows:
<div data-role="page" id="coloursView">
<div data-role="content">
<fieldset data-role="controlgroup">
<legend>Colour:</legend>
<input type="radio" name="colours" data-bind="checked: colour" id="radio-1" value="1" />
<label for="radio-1">Red</label>
<input type="radio" name="colours" data-bind="checked: colour" id="radio-2" value="2" />
<label for="radio-2">Blue</label>
<input type="radio" name="colours" data-bind="checked: colour" id="radio-3" value="3" />
<label for="radio-3">Green</label>
</fieldset>
</div><!--/content -->
</div><!--/page -->
My view model is also very simple:
function ColoursViewModel() {
this.template = "coloursView";
this.colour = ko.observable("1");
this.label = ko.observable(); // custom binding
}
Now, i would like to get the description of the selected colour, not the value.
It seems to me, that i need a custom binding, like this one:
ko.bindingHandlers.label = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$("radio", element).filter(function(el) { return $(el).text() === value; }).prop("checked", "checked");
}
};
But i'm not able to get the text of the related label - the label-for text.
Someone could help?
Thanks in advance
Update
Here is another approach where to find only :checked items and remove white-space in text.
Checkbox
$('input[type=checkbox]').each(function () {
if ($(this).is(':checked')) {
var checkbox = $(this).prev('label').text();
alert('Checkbox: ' + checkbox.replace(/\s+/g, ' '));
}
});
Radio
$('input[type=radio]').each(function () {
if ($(this).is(':checked')) {
var radio = $(this).prev('label').text();
alert('Radio: ' + radio.replace(/\s+/g, ' '));
}
});
Updated Demo
Checkbox
$('div.ui-checkbox').find('span.ui-btn-text').text();
Radio
$('div.ui-radio').find('span.ui-btn-text').text();
Sorry if i answer myself, but i think i got it. At least for radio inputs.
Now, i have a custom binding handler at fieldset level, to keep the markup clean and more readable, as i can:
<fieldset data-role="controlgroup" id="front-colours" data-bind="frontColourLabel: frontColour">
<legend>Front Colour: <span data-bind="text: frontColourDescription"></span> (Value: <span data-bind="text: frontColour"></span>)</legend>
<input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-1" value="red" />
<label for="fc-radio-1">Red</label>
<input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-2" value="blue" />
<label for="fc-radio-2">Blue</label>
<input type="radio" name="front-colours" data-bind="checked: frontColour" id="fc-radio-3" value="green" />
<label for="fc-radio-3">Green</label>
</fieldset>
this is the binding handler i come up:
ko.bindingHandlers.frontColourLabel = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
ko.utils.unwrapObservable(valueAccessor());
var id = $('input:radio[name='+element.id+']:checked').prop("id");
var radioText = $('label[for=' + id + ']').text();
viewModel.frontColourDescription(radioText);
}
};
the only tricky part here, is that the id of the fieldset is equal to the name of the radio-group, as it's easy to filter out what radio-group i want to address.
WORKING EXAMPLE: http://jsfiddle.net/h7Bmb/1/
I try now to get the checkbox part to work. Someone can help?
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
});
});
});