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.
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?
Ok so this is beginning to drive me insane. I have for several hours now searched and searched, and every single solution doesnt work for me. So yes, this question might be redundant, but i cant for the life of me get solutions to work.
I have a bunch of checkboxes being generated by a jquery template that is databound via knockout.js. However, it turns up unstyled. Afaik, it is something about jquery mobile does the styling before knockout renderes the template, so it ends up unstyled.
I have tried numerous methods to no avail, so i hope someone here can see what i am doing wrong.
(i am using jquery mobile 1.2.0 , jquery 1.8.2 and knockout 2.2.1)
This is the scripts:
<script type="text/javascript">
jQuery.support.cors = true;
var dataFromServer = "";
// create ViewModel with Geography, name, email, frequency and jobtype
var ViewModel = {
email: ko.observable(""),
geographyList: ["Hovedstaden","Sjælland","Fyn + øer","Nordjylland","Midtjylland","Sønderjylland" ],
selectedGeographies: ko.observableArray(dataFromServer.split(",")),
frequencySelection: ko.observable("frequency"),
jobTypes: ["Kontor (administration, sekretær og reception)","Jura","HR, Ledelse, strategi og udvikling","Marketing, kommunikation og PR","Handel og service (butik, service, værtinde og piccoline)","IT","Grafik og design","Lager, chauffør, bud mv.","Økonomi, regnskab og finans","Kundeservice, telefoninterview, salg og telemarketing","Sprog","Øvrige jobtyper"],
selectedJobTypes: ko.observableArray(dataFromServer.split(",")),
workTimes: ["Fulltid","Deltid"],
selectedWorkTimes: ko.observableArray(dataFromServer.split(","))
};
// function for returning checkbox selection as comma separated list
ViewModel.selectedJobTypesDelimited = ko.dependentObservable(function () {
return this.selectedJobTypes().join(",");
}, ViewModel);
var API_URL = "/webapi/api/Subscriptions/";
// function used for parsing json message before sent
function omitKeys(obj, keys) {
var dup = {};
var key;
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (keys.indexOf(key) === -1) {
dup[key] = obj[key];
}
}
}
return dup;
}
//Function called for inserting new subscription record
function subscribe() {
if($("#jobmailForm").valid()=== true){
//window.alert("add subscriptiooncalled");
var mySubscription = ko.toJS(ViewModel);
//var json = JSON.stringify(mySubscription);
var jsonSmall = JSON.stringify(omitKeys(mySubscription, ['geographyList','jobTypes','selectedJobTypesDelimited','workTimes']));
//window.alert(jsonSmall);
$.ajax({
url: API_URL,
cache: false,
type: 'POST',
contentType: 'application/json',
data: jsonSmall,
success: function (data) {
window.alert("success");
},
error: function (error) {
window.alert("ERROR STATUS: " + error.status + " STATUS TEXT: " + error.statusText);
}
});
}
}
function initializeViewModel() {
// Get the post from the API
var self = this; //Declare observable which will be bind with UI
// Activates knockout.js
ko.applyBindings(ViewModel);
}
// Handle the DOM Ready (Finished Rendering the DOM)
$("#jobmail").live("pageinit", function() {
initializeViewModel();
$('#jobmailDiv').trigger('updatelayout');
});
</script>
<script id="geographyTmpl" type="text/html">
<input type="checkbox" data-role="none" data-bind="attr: { value: $data }, attr: { id: $data }, checked: $root.selectedGeographies" />
<label data-bind="attr: { for: $data }"><span data-bind="text: $data"></span></label>
</script>
<script id="jobTypeTmpl" type="text/html">
<label><input type="checkbox" data-role="none" data-bind="attr: { value: $data }, checked: $root.selectedJobTypes" /><span data-bind="text: $data"></span></label>
</script>
Note, "jobmail" is the surrounding "page" div element, not shown here. And this is the markup:
<div data-role="content">
<umbraco:Item field="bodyText" runat="server"></umbraco:Item>
<form id="jobmailForm" runat="server" data-ajax="false">
<div id="jobmailDiv">
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" class="required email" data-bind="'value': email" />
</p>
<fieldset data-role="controlgroup" data-mini="true" data-bind="template: { name: 'geographyTmpl', foreach: geographyList, templateOptions: { selections: selectedGeographies } }">
<input type="checkbox" id="lol" />
<label for="lol">fkfkufk</label>
</fieldset>
<fieldset data-role="controlgroup" data-mini="true">
<p data-bind="template: { name: 'jobTypeTmpl', foreach: jobTypes, templateOptions: { selections: selectedJobTypes } }"></p>
</fieldset>
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" id="frequency5" name="frequency" value="5" data-bind="checked: frequencySelection" /><label for="frequency5">Højst 5 gange om ugen</label>
<input type="radio" id="frequency3" name="frequency" value="3" data-bind="checked: frequencySelection" /><label for="frequency3">Højst 3 gange om ugen</label>
<input type="radio" id="frequency1" name="frequency" value="1" data-bind="checked: frequencySelection" /><label for="frequency1">Højst 1 gang om ugen</label>
</fieldset>
<p>
<input type="button" value="Tilmeld" class="nice small radius action button" onClick="subscribe();">
</p>
Tilbage
</div>
</form>
Alternate method of invoking the restyling (doesnt work either):
$(document).on('pagebeforeshow', '#jobmail', function(){
// Get the post from the API
var self = this; //Declare observable which will be bind with UI
// Activates knockout.js
ko.applyBindings(ViewModel);
});
// Handle the DOM Ready (Finished Rendering the DOM)
$("#jobmail").live("pageinit", function() {
$('#jobmail').trigger('pagecreate');
});
Use a custom binding (Knockout) to trigger jQuery Mobile to enhance the dynamically created content produced by Knockout.
Here is a simple custom binding:
ko.bindingHandlers.jqmEnhance = {
update: function (element, valueAccessor) {
// Get jQuery Mobile to enhance elements within this element
$(element).trigger("create");
}
};
Use the custom binding in your HTML like this, where myValue is the part of your view model that changes, triggering the dynamic content to be inserted into the DOM:
<div data-bind="jqmEnhance: myValue">
<span data-bind="text: someProperty"></span>
My Button
<input type="radio" id="my-id" name="my-name" value="1" data-bind="checked: someOtherProperty" /><label for="my-id">My Label</label>
</div>
In my own case, myValue was part of an expression in an if binding, which would trigger content to be added to the DOM.
<!-- ko if: myValue -->
<span data-bind="jqmEnhance: myValue">
<!-- My content with data-bind attributes -->
</span>
<!-- /ko -->
Every dynamically generated jQuery Mobile content must be manually enhanced.
It can be done in few ways, but most common one can be done through the jQuery Mobile function .trigger( .
Example:
Enhance only page content
$('#page-id').trigger('create');
Enhance full page (header + content + footer):
$('#page-id').trigger('pagecreate');
If you want to find more about this topic take a look my other ARTICLE, to be more transparent it is my personal blog. Or find it HERE.
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');
Can we Made an anchor tag autoclick in the success function of Ajax Script?
Does it Possible we Click an anchor tag through Ajax Script?
if Yes then how?I am using Ajax in asp.net MVC?
This is the Viewsource of Partial View
<script language="javascript" type="text/javascript">
$(document).ready(function(){
alert("Button clicked");
$("#bt1").click(function(){
var data2 = $('#txt2').val();
var data1 = $('#Color').val();
$.ajax({
type:"Post",
url:'/Marker/CreateMarkerjson',
data:"Color="+ data1 + "&txt2=" + data2,
success:function(result)
{
alert(result);
$get('click').click();
},
error:function(result)
{
alert("fail");
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<form action="/Marker/CreateMarkerPartial" method="post">
<fieldset>
<legend>Fields</legend>
<p>
<label for="Id" id="ID">
Id:</label>
<input type="text" id="txt1" />
</p>
<p>
<label for="CompanyName">
CompanyName:</label>
<input type="text" id="txt2" />
</p>
<p>
<label for="Color">
Color:</label>
<input id="Color" name="Color" type="text" value="" />
</p>
<p>
<input type="button" id="bt1" value="create" />
</p>
<div id="datepicker"></div>
</fieldset>
</form>
<div>
Back to List
click
</div>
Update answer. Merged the two $(document).ready functions and changed the $get('click') to $('#click'). Let's give it a try.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
alert("Button clicked");
$("#bt1").click(function () {
var data2 = $('#txt2').val();
var data1 = $('#Color').val();
$.ajax({
type: "Post",
url: '/Marker/CreateMarkerjson',
data: "Color=" + data1 + "&txt2=" + data2,
success: function (result) {
alert(result);
$('#click').click();
},
error: function (result) {
alert("fail");
}
});
});
$("#datepicker").datepicker();
});
</script>
<form action="/Marker/CreateMarkerPartial" method="post">
<fieldset>
<legend>Fields</legend>
<p>
<label for="Id" id="ID">
Id:</label>
<input type="text" id="txt1" />
</p>
<p>
<label for="CompanyName">
CompanyName:</label>
<input type="text" id="txt2" />
</p>
<p>
<label for="Color">
Color:</label>
<input id="Color" name="Color" type="text" value="" />
</p>
<p>
<input type="button" id="bt1" value="create" />
</p>
<div id="datepicker">
</div>
</fieldset>
</form>
<div>
Back to List click
</div>
you can fire the click handler of the anchor tag that you want clicked.
for example:
<a id="clickme" href="somelink.html">Click me</a>
now there must be an event being fired from your ajax script on the successful completion of the request. In that function do
document.getElementById('clickme').click();