I have this function :
function getlst() {
$.ajax({
type: "GET",
url: "/api/Configuration/GetListParameter",
success: function (data) {
EmptyGridStep1();
for (var i = 0; i < data.length; i++) {
$('#tableBody').append('<tr><td><label id="id" name="id" >' + data[i].id + ' </td>'
+ '<td>' + data[i].key + '</td>'
+ '<td><input type="text" onchange="keydown();" value="' + data[i].value + '" /></td></tr>');
}
initGrid();
}
});
}
The Keydown function
function keydown(value )
{
alert(value);
}
I'd like to change :
<td><input type="text" onchange="keydown();" value="' + data[i].value + '" /></td>
To pass the current text as a paramater to keydown function.
How can I modify my code to accomplish this task?
You don't have to do so. All you have to do is pass the input itself as a parameter to your keydown function
<td><input type="text" onchange="keydown(this);" value="' + data[i].value + '" /></td>
and just read its value here
function keydown(input)
{
alert(input.value);
}
Not the most elegant way to do it, I suggest instead of using onchange, you use jquery's change event , so you have one single listener for your change event
$('#tableBody').on("change", "input", function() {
console.log( this.value );
});
You should read this.
Related
I have this code for add dynamic select box and load select2 search for each like this:
<script type="text/javascript">
var attribute_row = <?= $attribute_row; ?>;
function addAttribute() {
html = '<tr id="attribute-row' + attribute_row + '">';
html += ' <td class="text-left"><input type="text" name="product_attribute[' + attribute_row + '][name]" class="attribute-name' + attribute_row + '" value=""><select id="' + attribute_row + '" name="product_attribute[' + attribute_row + '][attribute_id]" class="form-control attributeSelect">';
html += ' </select></td>';
html += ' <td><div class="icheck-primary"><input type="checkbox" id="checkboxAttribute' + attribute_row + '" name="product_attribute[' + attribute_row + '][visible_on_product]" value="1"><label for="checkboxAttribute' + attribute_row + '"></label></div></td>';
html += ' <td><input type="text" name="product_attribute[' + attribute_row + '][text]" value="" placeholder="<?= lang('Product.price'); ?>" class="form-control" /></td>';
html += ' ';
html += ' <td><button type="button" onclick="$(\'#attribute-row' + attribute_row + '\').remove();" data-toggle="tooltip" title="<?= lang('Product.removeAttribute'); ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
$('#attribute tbody').append(html);
$(".attributeSelect").select2({
minimumInputLength: 3,
theme: 'bootstrap4',
width: 'auto',
ajax: {
url: "url",
type: "post",
dataType: 'json',
delay: 250,
data: function (params) {
return {
searchTerm: params.term,
csrf_token: csfr_token // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
}).on("select2:select", function () {
data = $(".attributeSelect").select2('data')[0];
id = $('.attributeSelect').attr('id');
$(".attribute-name" + id).val(data.text);
});
attribute_row++;
}
</script>
in Action after search and select(on select) result i need to add select2 data.text into this input box:
<input type="text" name="product_attribute[' + attribute_row + '][name]" class="attribute-name' + attribute_row + '" value="">
my code work for first select box and add value to first input box But for second and more also add data to first input.
how do can i fix this problem?
You're always getting the first id when doing this for all the items with that class:
id = $('.attributeSelect').attr('id');
That's why it's setting always the result the first element. You should get the current id of the element receiving the event. You can probably receive that from the event object:
$('#mySelect2').on('select2:select', function (e) {
console.log(e);
});
I just created ajax response but i dont know how to give input fields here.. im new bie to Ajax, can you suggest any way please..
$.ajax({
type: "GET",
url: 'get/' + vouchno,
// cache: false,
success: function(data) {
alert(data);
alert(JSON.stringify(data));
$('#vochDate').val(data.strvouchdt);
$('#cashbill').val(data.billtype);
$('#cashref').val(data.refno);
$('#cashAc').val(data.acctname);
$('#refdate').val(data.refdt);
$('#payacc_code').val(data.acctcode);
$('#cashAc').val(data.acctname);
$('#cashAc').val(data.acctname);
for (var i = 0; i < data.cashpayments.length; i++) {
$("#tab_logic ").append('<tr><td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].debit + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' + '</tr>');
}
},
failure: function(data) {
alert(data.responseText);
},
error: function(data) {
alert(data.responseText);
}
});
Completely a guess, you want text-fields in row columns with values prefilled in it:
$("#tab_logic").append(`<tr><td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].debit}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td></tr>`);
If you are talking about binding the data into input form from the response:
function populate(data) {
for (var i in data) {
if (typeof (data[i]) === 'object') {
//populate(data[i]);
} else {
$(
"input[type='text'][name='" + i + "']," +
" input[type='hidden'][name='" + i + "'], " +
"input[type='checkbox'][name='" + i + "'], " +
"select[name='" + i + "'], textarea[name='" + i + "']"
)
.val(data[i]);
$("input[type='radio'][name='" + i + "'][value='" + data[i] + "']").prop('checked', true);
if ($("input[name='" + i + "']").hasClass('datepicker')) {
$("input[name='" + i + "']").val($.datepicker.formatDate("dd-M-yy", new Date(data[i])));
}
if ($("input[name='" + i + "']").hasClass('financialValueFormat')) {
var formatedAmount = financialValFormat(data[i]);
$("input[name='" + i + "']").val(formatedAmount);
}
}
}
$('form').find('input[type="checkbox"]').each(
function () {
if ($(this).siblings('input[type="hidden"]').val() == "true" ||
$(this).siblings('input[type="hidden"]').val() == 1) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
}
);
}
You can define this function some where in your project which is available globally and then just call populate(response.data)
Please ignore the functions financialValFormat. This function is just used to format the value for money fields.
For some reason a field in my JSON response is undefined in IE. When I run it in chrome it looks fine. But in IE when I write to the console is shows undefined.
Here is my code
function getList() {
var argument = new Object();
argument.identifier = _settings.identifier;
$.ajax({
url: "/Vendor.aspx/GetList",
data: JSON.stringify(argument),
dataType: 'json',
contentType: 'application/json',
error: function (xhr) {
console.log(xhr);
},
success: function (data) {
addData(JSON.parse(data.d));
},
type: 'POST'
});
}
function addData(data) {
if (data === undefined || data === null || data.length == 0) {
alert('No data to show');
return;
}
//this.clearRows();
for (var index = 0; index < data.length; index++) {
var d = data[index];
var row = '<tr>' +
'<td>' + d.Item + '</td>' +
'<td>' + d.AlternativeItem + '</td>' +
'<td>' + d.Condition + '</td>' +
'<td>' + d.PCS + '</td>' +
'<td>' + d.Description + '</td>' +
'<td><input type="text" class="input-field-integer" id="' + d.Item + '"/></td>' +
'<td><input type="text" class="input-field-integer" value="' + d.Price + '"/></td>' + //This field is empty in IE but not in Chrome.
'<td><input type="text" class="input-field" value="' + d.Condition2 + '"</></td>' +
'<td><input type="text" class="input-field" value="' + d.Stock + '"</></td>' +
'<td><input type="text" class="input-field" value="' + d.ETAIfNotInStock + '"</></td>' +
'</tr>';
$(this._settings.fileTable + ' tbody').append(row);
console.log(d.Price); // value is undefined???
}
}
Here is the output of the JSON:
{"Item":"1234","AlternativeItem":"","Condition":"New Retail","PCS":"20","Description":"my item detail","Price":"100","Condition2":"new","Stock":"5 stk. ","ETAIfNotInStock":"","Comment":"","RowReference":null}
IE might be caching the response from the server.
try adding [OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)] to the response from the server #WebAPI
I've cleared my browser cache and then it started to work. I had to do clear it twice and then restart computer.
IE is very special.
When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN
function createCheckBoxPlatform(data) {
var platform = "";
$.each(data, function (i, item) {
platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' + getOS();
});
$('#platform').append((platform));
}
function getOS() {
$.ajax({
url: "/QRCNew/GetOS",
type: "post",
dataType: "Json",
success: function (data) {
var os = '<div>';
$.each(data, function (i, item) {
os += '<label><input type="checkbox" name="' + item.OperatingSystemName + ' value="' + item.OperatingSystemSK + '">' + item.OperatingSystemName + '</label> ';
});
os += '</div>';
return os;
}
});
}
I think you have to turn around your logic. The createCheckBoxPlatform loop will have completed before the getOS() ajax call returns, unless it's a synchronous call.
You could split the functions into pieces, gather the getOS data for each data point you have, then construct the checkboxes when your ajax call returns.
You can make your ajax call async and have to make no changes to your current logic. But your execution will stop till you don't get the callback to your ajax call.
function getOS() {
$.ajax({
url: "/QRCNew/GetOS",
type: "post",
dataType: "Json",
async: true,
success: function (data) {
var os = '<div>';
$.each(data, function (i, item) {
os += '<label><input type="checkbox" name="' + item.OperatingSystemName + ' value="' + item.OperatingSystemSK + '">' + item.OperatingSystemName + '</label> ';
});
os += '</div>';
return os;
}
});
}
the first "A" in AJAX stands for "Asynchronous" that means, it is not executed right after it has been called. So you never get the value.
Maybe you could first, get the os list and then output what you need, like this:
function createCheckBoxPlatform(myDatas) {
$.ajax({
url: "/QRCNew/GetOS",
type: "post",
dataType: "Json",
success: function (osList) {
var os = '<div>';
$.each(osList, function (i, item) {
os += '<label><input type="checkbox" name="' + item.OperatingSystemName + ' value="' + item.OperatingSystemSK + '">' + item.OperatingSystemName + '</label> ';
});
os += '</div>';
$.each(myDdatas, function (i, item) {
platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>'+os
});
$('#platform').append((platform));
}
});
}
html code:
<div id="localPropList"></div>
<div id="assignedPropList"> </div>
js code:
function getLocalProposals()
{ // filling these radio buttons dynamically
var htmlStringLocalPro = '<fieldset id="local_proposal_id_div" name ="radioGroup" data-role="controlgroup">';
for (var k = 0; k < result.rows.length; k++) {
var localProposal = result.rows.item(k);
if( !(jQuery.inArray( localProposal.id, arrForQueuePropId ) >=0 ) )
{var fieldId = 'localPro' + k;
htmlStringLocalPro += '<input group="1" type="radio" name="local_proposal_id" id="' + fieldId + '" value="' + localProposal.enquiry_no + ',' + localProposal.id + '"/>'
+ '<label for="' + fieldId + '" data-iconpos="right">' + localProposal.enquiry_no+'-'+localProposal.caller_name+'</label>';
}
htmlStringLocalPro += '</fieldset>';
}
function getAssignedproposals()
{
var htmlString = '<fieldset id="assigned_proposal_id_div" name ="radioGroup" data-role="controlgroup">';
for (var i = 0;i < obj.Proposal.length; i++) {
proposalIds += obj.Proposal[i].id + ',';
if( !(jQuery.inArray( obj.Proposal[i].id, arrForQueuePropId ) >=0 ) ){
var fieldId = 'ap' + i;
htmlString += '<input group="1" type="radio" name="assigned_proposal_id" id="' + fieldId + '" value="' + obj.Proposal[i].enquiry_no + ',' + obj.Proposal[i].id + '"/><label for="' + fieldId + '" data-iconpos="right">' + obj.Proposal[i].enquiry_no + '-' + obj.Proposal[i].caller_name + '-' + obj.Proposal[i].post_code + '</label>';
// htmlString += '<input type="radio" name="local_proposal_id" id="' + fieldId + '" value="' + obj.Proposal[i].enquiry_no + ',' + obj.Proposal[i].id + '"/><label for="' + fieldId + '" data-iconpos="right">' + obj.Proposal[i].enquiry_no + '-' + obj.Proposal[i].caller_name + '-' + obj.Proposal[i].post_code + '</label>';
}
}
htmlString += '</fieldset>';}
$("input:radio[name=local_proposal_id]:checked").each(function () {
var prop = $(this).val().split(',');
});
$("input:radio[name=queue_proposal_id]:checked").each(function () {
var prop = $(this).val().split(',');
});
i need to select only one radio button at a time if radiobutton having name="assigned_proposal_id" is selected then it should not allow to select any radio buttons for name="local_proposal_id]" i cannot assign id different i need to do selection on the basis of name and i cant assign same name to separate group as well
please tell me whats the solution
Checking / Unchecking in jQuery Mobile, you need to use .prop to checked or unchecked and then call .checkboxradio('refresh').
Demo
$(document).on('pageinit', function () {
$(document).on('change', '[type=radio]', function (e) {
// Uncheck radio buttons in #group1 and #group2
$('#group1 [type=radio]:checked, #group2 [type=radio]:checked').prop('checked', false).checkboxradio('refresh');
// "OR" to select all radio buttons in DOM
$('[type=radio]:checked').prop('checked', false).checkboxradio('refresh');
// Check clicked radio
$(this).prop('checked', true).checkboxradio('refresh');
});
});
try the following
if($('input [name="assigned_proposal_id"]').is(':checked')){
$('input [name="local_proposal_id"]').attr('disabled' , true)
}
$('input [name="assigned_proposal_id"]').click(function(){
if($('input [name="assigned_proposal_id"]').is(':checked')){
$('input [name="local_proposal_id"]').attr('disabled' , true)
}
});
It will work like what hussain told
Here A FIDDLE for your purpose. It will uncheck all the radio button, then check the one we clicked on.
HTML :
<div id="localPropList">
<input name="assigned_proposal_id" type="radio" value="value1-1" />value1-1
<input name="assigned_proposal_id" type="radio" value="value1-2" />value1-2
<input name="assigned_proposal_id" type="radio" value="value1-3" />value1-3
</div>
<br/>
<div id="assignedPropList">
<input name="local_proposal_id" type="radio" value="value2-1" />value2-1
<input name="local_proposal_id" type="radio" value="value2-2" />value2-2
<input name="local_proposal_id" type="radio" value="value2-3" />value2-3
</div>
div selected : <span></span>
JQUERY :
$('#localPropList input[name="assigned_proposal_id"], #assignedPropList input[name="local_proposal_id"]').change(function(){
$('#localPropList input[name="assigned_proposal_id"], #assignedPropList input[name="local_proposal_id"]').prop('checked', false);
$(this).prop('checked', true);
$('span').html($(this).val());
});
Disable Syntax:
$('input[name="name_here"]').attr('disabled', 'disabled');
Don't go for the hardest thing
Hussein Nazzal is correct but space matters
between input and '[' bracket
if($('input[name="assigned_proposal_id"]:checked').val() != '')
{
$('input[name="local_proposal_id"]:radio').attr('disabled', 'disabled');
}
Demo
This worked for me, take into account that according to the selector this change will apply to all RadioButtons in the document with the same class, in this case class="chartIndex":
$(".chartIndex").change(function () {
$('[type=radio]:checked').prop('checked', false);
$(this).prop('checked', 'checked');
});
Hope this helps someone. Regards.