Input value updated with .val() not display until field clicked - javascript

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!

Related

Can't get Hidden Input Field (Dynamic) Value in other pages with Jquery

I have a hidden input field in page "A". Whom value I am populating dynamically as there are 100+ values. The value changes when different element is clicked.
I want the set value in a different page "B". I am using the simple method of getting value by id but the output cames undefined.
Here is some code:
Input Field: <input type="hidden" id="sel_s_n" value="" name="sel_s_n">
Populating on element click:
jQuery('.shades-popup').click(function () {
jQuery('#myModaldcm .modal-body').css('display', 'none');
title = $(this).data('dcmtitle');
$("#sel_s_n").val(title);
var rgb = $(this).data('dcmrgb');
var img = $(this).data('dcmimg');
var pro_tit = $(this).data('dcmpt');
var pro_id = $(this).data('pid');
jQuery('.dcmptitle').html(title);
jQuery('.csdcmp').css('background', 'rgb(' + rgb + ')');
jQuery('.cdmpi').attr('src', img);
jQuery.ajax({
type: "post",
dataType: "json",
url: dcmAjax.dcmajaxurl,
data: { action: "get_dcm_products", post_id: pro_id },
success: function (response) {
if (response.type == "success") {
jQuery("#dcmselextt").html(response.data);
jQuery('#myModaldcm .modal-body').css('display', 'block');
}
else {
alert("Network Error! Try Again")
}
console.log(response);
}
})
});
$("#sel_s_n").val(title); --> This line add the value.
On the second page "B" I am getting it like alert( $("#sel_s_n").val() );
Can somebody point out what I am doing wrong.
Thanks

Clear textbox after selection of different radio button in jQuery

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.

How to clear the text of a linked dropdown (selectpicker) using javascript?

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) {
}
});};

Passing variable from a function into submit function

$('.report_filter input') get value of selected radio box sending the variable to function report_operation, from there on I hide some fields based on the selection
$(".js-ajax-php-json") ajax form submission, I want to get inside the .submit the var value. There I could do some if empty field return false to stop the form from submitting. For instance if field name="number" is empty and the var value is 1 return false; This can't be made by a simple form validator, its a quite dynamic form.
I just have no idea how to do that
$('.report_filter input').on('ifChecked', function(event){
var val = $(this).val();
raport_operation(val);
});
$(".js-ajax-php-json").submit(function(){
var data = {
"action": "test1"
};
data = $(this).serialize() + "&" + $.param(data);
alert(raport_operation());
// if ($("#number").val() == "" and val == 1) {
// alert('you did not fill out one of the fields');
// return false;
// }
$.ajax({
type: "POST",
dataType: "json",
url: "api/response.php",
data: data,
success: function(data) {
draw_graph(data);
$(".the-return").html(data);
//alert("Form submitted successfully.\nReturned json: " + data["json"]);
}
});
return false;
});
function raport_operation(query){
//alert(val);
if(query==1){ //number
//alert(1);
$('#segment_optional').hide('slow');
$('#segment_number').show('slow');
$('#segment_optional').show('slow');
$('#segment_customer').hide('slow');
$('#segment_listType').hide('slow');
$('#segment_customer').val('');
$('#reportdate_to').val('');
$('#reportdate_from').val('');
// $('#segment_general').hide();
}
}

Span element is disappearing after intitial loading

I am populating some data from a webservice in a span element. The data which I am getting from the webservices is first adding in a table and then adding that table in the Span element. The table is adding initially in the Span element but after loading it disappeared certainly.In the code snippet I am giving below it is the Span element is giving desired outcome till 'second alert' but after that it is getting disappeared.
$.ajax({
cache: false,
type: "GET",
async: false,
url: GetAStudent + "(" + nextStudentID + ")",
dataType: "json",
success: function (student) {
jPendingStudent = student;
nextStudentID++;
//debugger;
var table = makeTable(student);
$("#spanStudentList").html("").append(table);
alert("span 1 created");
//$("#divNewStudent").css("visibility", "visible");
//$("#divNewStudent").visible();
$("#divNewStudent").show();
alert("span2 created");
//return false;
},

Categories

Resources