I'm adding Radio button dynamically
function RadioButton() {
$.ajax({
type: "POST",
url: "VPATransaction.aspx/SetRadioButton",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (result) {
var jsonData = eval(result.d);
$.each(result.d.Table, function (index, value) {
$('#rb').append("<ul><li><input type='radio' name='radio' id='rbs_' value=" + value.PurposeTransid + " style><span id='tf' name='TextFiled'>" + value.Purpose_trans_name + " </span></li></ul>");
$("#rbs_").click(function () {
$("#tf0").val("");
});
});
}
})
}
**TextBox is also adding dynamically**
function Textbox() {
$("#add")
.append($(" <div class='col-md-12'>")
.append($(" <input type='text' name='TextField' id='TF" + Tcount + "'class='col-sm-12 col-md-12 col-xs-12' />")
.append($("</div>")
)
)
);
Tcount++;
}
because on button click I'm adding more textBox
Goal is to clear value of textbox when i click on other radio button
I have used .val and .attr but nothing happend
Here you did not use the click function while using the textbox dynamic function. So you can use like following method,
$(document).ready(RadioButton(){
$('#btnClear').click(RadioButton(){
if(confirm("Want to clear?")){
$('#form1 input[type="text"]').val('');
$('#form1 #txtAddress').val('');
Here when you click the Radio button the function will automatically clear the text box after you click yes on the dialog box appears.
Related
I have a drop down that when a value is selected, there is an ajax query that updates the last input field (Taux de...).
$.ajax({
type: "GET",
cache: false,
url: '/Product/AgentCommissionBaseRate/' + $('input[name=ProductOid]').val() + "_" + $('input[name=Insurer]').val(),
success: function(data) {
//attempt1
document.getElementById('AgentCommissionBaseRate').setAttribute('value', data);
//attempt2
$('#AgentCommissionBaseRate').attr("value", data);
//attempt3
$('#AgentCommissionBaseRate').val(data);
alert($('#AgentCommissionBaseRate').val()) < --Shows proper value
}
});
If I check with an alert box, the value is properly updated. But the new value doesn't show in the input UNTIL I CLICK ON THE FIELD. Been stuggleing for a while on this!
I have the following code and it works well in JSfiddle, but it doesn't work properly on my web page.
On this page, I have dropdown "B" which is populated based on the selected item in dropdown "A". In case of changing "A" items, values of the second dropdown changed correctly but its default text remains unchanged until I change the selected item in the second dropdown manually.
code:
function get_child() {
$("#child").empty();
$.ajax({
type: 'POST',
url: '#Url.Action("Get_child", "Home")',
dataType: 'json',
data: { Name: $("#parent").val() },
success: function (states) {
$("#child").append('<option value="0" selected="selected"> </option>');
$.each(states, function (i, state) {
$("#child").append('<option value="' + state.Text + '">' +
state.Text + '</option>');
});
},
error: function (ex) {
}
});};
Im trying to add additional options to a dropdownlist using ajax in JQM. The first option is a static disabled selected and hidden option. The other options are extracted from a webservice using ajax. The dropdownlist itself is inside a popup window.
This is my code:
<div data-role="popup" id="puIceCream"><div>
<center>Select Flavor:</center>
<select id="ddlFlavorsIC">
<option value="" disabled selected hidden>Please Choose...</option>
<!--Flavors are added here-->
</select>
</div>
And the JS code is below:
$("#puIceCream").on("popupafteropen", function (event) {
if (!$("#ddlFlavorsIC option").length) {
WebServiceURL = "IceWS.asmx";
$.support.cors = true;
$.ajax({
url: WebServiceURL + "/GetFlavors",
dataType: "json",
type: "get",
data: "{ }",
contentType: "application/json; charset=utf-8",
error: function (err) {
alert("error: " + JSON.stringify(err));
},
success: function (data) {
var size = data["d"].length;
for (var i = 0 ; i < size; i++) {
$("#ddlFlavorsIC").append("<option>" + ((String)(data["d"][i].value)) + "</option>");
}
}
});
}
});
If I remove the static hidden option on the markup it works fine, but for some reason it doesn't work with it. why is that?
Thanks in advance!
Change
if (!$("#ddlFlavorsIC option").length) {
to
if ($("#ddlFlavorsIC option").length < 2){
Your code only adds flavors if there are zero options in the dropdown, so your one static option causes you not to enter the IF statement.
DEMO
I have a list of items and I want to do something whenever one of the items is selected, but the problem is that the check-box's change function is not working with me.
I have checked the code inside the function and it's working fine outside the change event. i'm not sure of the reason why it's not working but what could it be other than the function its self ?
Here the change function:
$("input[name='checkCoResult']").change(function () {
if (this.checked) {
$("#searchResultSecond").attr("style", "opacity: 0.6");
$("#searchResultSecond *").attr("disabled", "disabled").off('click');
}
});
and this is the code that generate my list:
$.ajax({
url: "CCDMSWebService.asmx/getCoSearchResult",
data: JSON.stringify(objectData),
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var Result = response.d;
contantDiv.text("");
$.each(Result, function (index, val) {
contantDiv.append('<div class="panel-bod"><label style="margin:2px; border-radius: 10px;border: 1px solid #cc0000;padding: 5px;"><input type="checkbox" value="' + val.companyID + '" name="checkCoResult" class="nnn"> '
+'<img src="images/' + val.companyID + '.png" alt="company logo" width="30%" height="30%">' + val.companyName + ' provides all your needs</label></div>');
})
},
failure: function (msg) {
alert(msg);
}
});
You have to add the selector parameter, otherwise the event is directly bound instead of delegated, which only works if the element already exists (so it doesn't work for dynamically loaded content). In your case it seems you already have a div named contantDiv present in your page, so modify your code like
contantDiv.on("change","input[name='checkCoResult']",function(){ ...
Check out http://api.jquery.com/on/#direct-and-delegated-events for more details.
if your content is dynamic then try
$(document).on("change","input[name='checkCoResult']",function(){
// your code
});
This code works fine in its current state where im using a click event on a button. But if i use a form tag around the input tags in my html code and use jquery's submit method it doesnt give any results. why is that happening? i have to use the form element because i want to be able to search with an enter key insted of clicking on a button
Html:
<body>
Title: <input type="text" id="title"><br/>
<input type="submit" value="Submit" id="btn">
<p id="results"></p>
<body>
jQuery:
$(document).ready(function(){
$("#btn").on("click", function(){
var textval = $('#title').val();
var playListURL = 'https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=' + textval + '&format=json&callback=?';
$.ajax({
type: "GET",
url: playListURL,
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data, textStatus, jqXHR) {
for (var i = 0; i < 10; i++)
{
var url = "https://en.wikipedia.org/wiki/" + data.query.search[i].title;
$("#results").append("<b> <a href='" + url + "' > " + data.query.search[i].title + "</a></b></br> ");
//console.log(url);
}
},
error: function (errorMessage) {
}
});
//alert($('#title').val());
});
});
Try to change this line
$("#btn").on("click", function(){
to this:
$("#btn").on("click", function(e){
e.preventDefault();
Then the form will not submit default way on click