What's the best way to do this kind of manipulation case :
When the trigger using the combo box is change, I want to change the type of the textField that has previously been added to the form.
My sample data collection :
function DataProvide(){
selectValues = {
"choose" : "-Choose-",
"id" : "ID",
"emp_name" : "Employee Name",
"photo_path" : "Photo Path",
"emp_id" : "Employee ID",
"start_date" : "Start Date",
"birth_date" : "Birth Date"
};
$.each(selectValues, function(key, value) {
$('#data1_1')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
}
$(document).ready(function() {
DataProvide();
});
Data has been displayed in the combobox.
Then I add a field to a form using the $.append()
var count = 1;
$(".addCF").click(function(){
count += 1;
var $row = $('<tr>'
+ '<td>' + '</td>'
+ '<td>' + '<input id="data2_' + count + '" type="text" name="data2[]" class="data2" value="" placeholder=""/>' + '</td>'
+ '<td>' + '<input id="data3_' + count + '" type="text" name="data3[]" class="data3" value="" placeholder=""/>' + '</td>'
+ '<td>' + 'Remove' + '</td>'
+ '</tr>').appendTo("#customFields");
$row.find('td:first').append($('#data1_1').clone())
});
$("#customFields").on('click','.remCF',function(){
$(this).parent().parent().remove();
count -= 1;
});
Until this point I've been as successful as I want.
But I want to make a small change to 3rd column. How best way to manipulate this form when trigger (combo box) that I select for example "start_date" then the field will be changed to use the class "onlyDate" that I add jQuery UI to display the date options.
I added :
$(".onlyDate").datepicker({
dateFormat: "dd-mm-yy"
});
Then to check the value of the combo
$("#customFields").on('change', '.tabelBaru', function() {
if(nilai=='gender'){
$this.closest("tr").find(".data3").replaceWith(
'<select name="data3[]" class="data3">'
+ '<option value="man" selected >Man</option>'
+ '<option value="woman">Woman</option>'
+ '</select>'
)
}else if(nilai=='start_date'){
$this.closest("tr").find(".data3").replaceWith(
'<input type="text" name="data3[]" value="" class="onlyDate"/>'
)
}
};
But jQueryUI datepicker does not appear as usual. But if the normal form (without using $.append) all running normally.
How do I fix it?
$(".onlyDate").datepicker({
dateFormat: "dd-mm-yy"
});
When this code execute, it will only find out that current statement's object whit class name onlyDate.
After that any object with class name onlyDate append on the page won't execute the datepick code.
Maybe you should try out jquery function "delegate" or execute the datepicker code after each append.
Related
I have a functionality where in a table, I can click an add button and a new tr gets prepended to the table. However, I want field AddOn to get disabled if a certain food category is selected. It is easy to tackle it on change but how to do it when I click on add and depending on the value originally selected in dropdown?
var index = 0;
var FoodCategory = "FoodCategory" + index;
var tr = '<tr class="row">' +
'<td></td>' +
'<td></td>' +
'<td><select id="' + FoodCategory + '" type="text" class="form-control" /><span id="FoodCat""></select></span></td>' +
'<td><span><select id="' + AddOns + '" class="form-control"></select></span><span id="AddOns"></span></td>' +
'</tr>';
("#tblFood").prepend(tr);
I'm trying to access the value of FoodCategory to disable the select of AddOns by
$('#'+FoodCategory).val() but it is not working.
I have dropdowns that are being appended dynamically on a page. However, I could not assign the value to the select2. Anyone can help me with this?
Below is what I have try to do to assign the data to select2, but still cannot. Where am I missing??
1. $('select.row-item').eq(index).val(item.itemID);
2. $('.row-item:eq("' + index + '")').val('"' + item.itemID + '"')
3. var $row = $(html)
a. $row.find("row.item option[value=" + item.itemID + "]").prop("selected", true);
b. $row.find('select .row-item').val(item.itemID).trigger('change');
$(function() {
var data = data1
var html = '';
html += '<thead><tr>';
html += '<th>Item</th>';
html += '<th>Description</th>';
html += '<th>Qty</th>';
html += '<th>Total</th>';
html += '</tr></thead>';
html += '<tbody class="acc_table">';
data.forEach((item, index) => {
html += '<tr class="acc-row">';
html += '<td><select class="row-item"><option label="Choose One"> </option><option value="10">ITEM 1</option><option value="20">ITEM 2</option></select></td>';
html += '<td><input class="row-desc" type="text" value="' + item.itemName + '"></td>';
html += '<td><input class="row-qty" type="text" onkeyup="onlyDecimal(this)" value="' + item.itemQty + '"></td>';
html += '<td><input class="row-totalamount" type="text" value="' + item.totalAmount + '" disabled></td>';
html += '</tr>';
//at here I assign the data to select2
$('select.row-item').eq(index).val(item.itemID);
});
html += '</tbody>';
$('.item tbody').empty();
$('.item').append(html);
$('.row-item:last').select2();
$('.item').DataTable({
"paging": false,
"ordering": false,
"info": false,
"searching": false,
});
})
const data1 = [{
"itemID": "10",
"itemName": "Item 1",
"itemQty": "1",
"totalAmount": "50.00"
},
{
"itemID": "20",
"itemName": "Item 2",
"itemQty": "5",
"totalAmount": "150.00"
}
]
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
<table class="item">
On closer look, your line:
var $row = $(html);
$row is not used later on, so $row...whatever has no effect. You keep building the html and later do $('.item').append(html);.
So changing the select value within $row has no effect because $row is not appended, only the unchanged html variable.
As you're building HTML, you can add selected directly to the html:
html += '<option value="10"' + (item.itemID == 10 ? "selected" : "") + '>ITEM 1</option>'
html += '<option value="20"' + (item.itemID == 20 ? "selected" : "") + '>ITEM 2</option>'
Alternatively, if the html build can't be changed (or prefer not to, to keep it cleaner), add the itemID has a data-value and then use code later
html += '<select class="row-item" data-itemid="' + item.itemID + '">'
and then use jquery to set the .val(value) based on .data(itemid"):
$('.item').append(html);
$('select.row-item').each(function() {
$(this).val($(this).data("itemid"));
$(this).select2();
});
Note: you only need .trigger("change") after you've converted the select to a select2 - if it's not a select2 yet, then no need to call .trigger("change") (unless, of course, you have some other code that relies on this change and needs to run during initialisation, but would be better to explicitly call that rather than raise an event).
I have given row a class name , and i want to set a click function to be clicked on specific column of that row.
Here is the code-
var row = $('<tr class="parent_row"><td>' + '</td>' + '<td>' + data1 + '</td>' + '<td>'
+ data2 + '</td>; + '<td>' + data3 + "</td></tr>"
My click functon-
$('.parent_row).find("td:eq(1)").(click(function(e) { })
This is not working, I want that second column of row that is 'data1' should be clicked. I need help?
You can rewrite like this :
$('.parent_row').find("td:eq(1)").on("click",function(e){
//your stuff
})
I tried it out and it worked for me in this way.
You should write click event on td.
$('tr.parent_row td:eq(1)').on('click', function(){
// handle it here $(this)
});
I'm doing a select box with a list of items(dynamically created from an XML created by a webservice), and I'm unable to pull the selected value correctly. Here is what is happening.
What I'm sending:
onchange="changeFunction(this.options[this.selectedIndex].value)"
What I'm receiving:
function (a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!=
I'm the only thing I'm using is some self built functions and jQuery.
Any help would be superb.
Edit: here is the change function. All it is intended to do is build a form populated with values for given selected item.
function changeFunction(selection) {
console.log(selection);
$('#right').empty();
var addNewFields = 'these will be the fields';
$('#right').append(addNewFields);
}
Here is the select in question:
<select class="userSelection" id="userSelection" size="10" style="width:150px;" onchange="changeFunction(this.options[this.selectedIndex].value)"></select>
This is literally all the code in the html part of it. It's being populated via ajax, and there are 2 divs, one for left, containing the select, and one for right, containing the content for the user.
Just for giggles, here is the code creating the options:
var optionTag = '<option value="' + $(this).find('optionID').text + '" >' + $(this).find('optionName').text() + '</option>';
$('#userSelection').append(optionTag);
var optionTag = '<option value="' + $(this).find('optionID').text + '" >' + $(this).find('optionName').text() + '</option>';
should be:
var optionTag = '<option value="' + $(this).find('optionID').text() + '" >' + $(this).find('optionName').text() + '</option>';
Notice that $(this).find('optionID').text should be $(this).find('optionID').text().
or even better, to avoid this soup:
var optionTag = $('<option/>', {
value: $(this).find('optionID').text(),
html: $(this).find('optionName').text()
});
When you set the event handler of a DOM object to a function it get passed an event object as it's argument.
selectBox.onchange = function(event) {
changeFn(this.options[this.selectedIndex].value);
};
I've got a problem with another dojo enabled form that I am working on. A user can enter details onto the page by entering the data using a dialog box, which in turn updates the database and then displays the user data entered on to the form.
Each element added consist of 2 x Validation Text boxes 1 x FilteringSelect. When it's added to the page they are added as simply text boxes.
I've tried just adding as standard strings but that means the dojo.parse() does not run on the code. I've also tried programmatically adding the elements but that just displays the element object as a string to the page. So far I have:
var xhrArgs = {
url: url,
handleAs: "text",
preventCache: true,
load: function(data){
var idResult = parseInt(data);
if(idResult > 0){
var divStr = '<div id="employ_' + idResult + '" style="float:left;width:100%;">' +
'<table width="300">' +
'<tr>' +
'<td height="29"><Strong>' +
'<input type="text" dojoType="dijit.form.ValidationTextBox ' +
'change="markEmploymentForUpdate(); ' +
'id="cmpy_'+ idResult +'" '+
'required="true" ' +
'promptMessage="Please enter a valid company name" ' +
'invalidMessage="please enter a valid company name" ' +
'trim="true"' +
'value="'+ companyname +'"/>' +
'</td>' +
'<td height="29"><input dojoType="dijit.form.FilteringSelect" store="rolestore" searchAttr="name" name="role" onchange="markEmploymentForUpdate();" id="roleInput_'+ idResult +'" value="'+ jobrole +'" ></td>' +
'<td height="29">' +
'<input type="text" dojoType="dijit.form.ValidationTextBox" onchange="markEmploymentForUpdate();"' +
'id="jtitle_'+ idResult + '"' +
'required="true"' +
'promptMessage="Please enter your job title"' +
'invalidMessage="Please enter your job title"' +
'value="'+ jobtitle + '"/>' +
'</td>' +
'<td height="29"><img src="/images/site/msg/small/msg-remove-small.png" border="0" onmouseover="this.style.cursor=\'pointer\';" onclick="removeEmployer(\'employ_'+ idResult +'\', '+ idResult +')" /></td>' +
'</tr>' +
'</table>' +
'</div>';
dijit.byId('companydetails').hide();
dijit.byId('employername').setValue('');
dijit.byId('jobtitle').setValue('');
dijit.byId('jobrole').setValue('');
dojo.byId('data-table').innerHTML += divStr;
dojo.byId('companydetails').hide();
}else{
dojo.byId('add-error').innerHTML = '<div class="error">Unable to process your request. Please try again.</div>';
}
}
};
var deferred = dojo.xhrGet(xhrArgs);
This is displaying text boxes as the dojo.parse isn't running on this. If I replace the ValidationTextBox with:
var textbox = new dijit.form.ValidationTextBox({
id:"cmpy_" + idResult,
required:true,
trim:true,
"change":"markEmploymentForUpdate();",
promptMessage:"Please enter a valid company name",
value:companyname
});
I just get the object printed to the page.
Any ideas how I can added this to my page and maintain the dojo component rather than it defaulting to a text box?
Many thanks.
dojo.parser.parse(dojo.byId('data-table')); after you set it's innerHTML