I am using Select2 dropdown menu to get data from database threw ajax and json/php.
The option i make will then populate some input fileds for editing the database.
I use (This field get´s populated ok):
<input type="text" class="form-control" name="valt_element_id" id="valt_element_id" placeholder="Objekt ID" />
But on some field i just want to show the data, not to be edited.
I figured to use:
<span id="valt_element_id"></span>
But this span code won´t work!
Why?
JS:
$(document).ready(function(){
var valtObjektElement = $('#valj_objekt_element');
$('#valj_objekt_element').select2({
ajax: {
url: "valj_objekt_element.php",
dataType: 'json',
data: function (term, page) {
return {
q: term
};
},
results: function (data, page) {
return { results: data };
}
} // Ajax Call
}); // Select2
// Start Change
$(valtObjektElement).change(function() {
var ElementId = $(valtObjektElement).select2('data').id;
var ObjektNummer = $(valtObjektElement).select2('data').text;
$('#valt_element_id').val(ElementId);
$('#valt_objekt_nummer').val(ObjektNummer);
}); //Change
}); //Domument Ready
There is no value attribute for span. You should either use text or html.
Replace
$('#valt_element_id').val(ElementId);
with
$('#valt_element_id').text(ElementId);
Using javascript:
document.getElementById("valt_element_id").innerHTML = ElementId;
Or jQuery:
$('#valt_element_id').html(ElementId);
You mentioned:
But on some field i just want to show the data, not to be edited . Why not use readonly attribute in input rather than replacing it with a span ?
Related
I am new to Kendo and creating a project using it. I have encountered a very unique kind of problem. I am using select options in kendoCombox. What I am doing is that I am just updating the select box value on click of the edit button. The value is updated successfully but when I scroll, it automatically calls the function where I get all values. Here is my code:
I am updating the value using this:
$("#rackModelName").data("kendoComboBox").value(deviceModelName);
<select class="span12" onchange="rackChange()" id="rackModelName" name="rackModelName"
tabindex="6">
</select>
The below function automatically calls on scroll change:
function getRackFun(libraryDeviceId,dataCenterId,type){
console.log("calling");
if(libraryDeviceId && dataCenterId){
$.ajax({
type : "GET",
dataType : "json",
url : "${getRacksByLocationId}&libraryDeviceId=" + libraryDeviceId+"&dataCenterId=" +dataCenterId,
success : function(result) {
if(result.length>0){
var jsonObject = jQuery.parseJSON(JSON.stringify(result));
$("#rackModelName").data("kendoComboBox").setDataSource(jsonObject);
}else{
if(type!="edit"){
$("#rackModelName").data("kendoComboBox").value("");
$("#rackModelName").val("");
$("#rackModelName").data("kendoComboBox").setDataSource([]);
$("#rackStartUnit").empty();
$("#rackStartUnit").append($('<option>',{
value : '',
text : '<liferay-ui:message key="inventory.please_select"></liferay-ui:message>'
}));
$("#rackEndUnit").val('');
}
}
}
});
}else{
$("#rackModelName").data("kendoComboBox").value("");
}
}
change the way you initialize the combobox to
$("#rackModelName").kendoComboBox({
...
change: rackChange, //your change function name
...
});
$("#rackModelName").data("kendoComboBox").value(deviceModelName);
remove the on change from the html element
To know more about events trigger check this https://demos.telerik.com/kendo-ui/combobox/events
I have this HTML code that dynamically adds barcode[] and description[] input fields to my form, using the onfocusout event, the get_barcode_data JS function below is triggered to get the barcode description, but it only works for a single barcode[] input field:
<div>
<input type="text" id="barcode[]" name="barcode[]" onfocusout="get_barcode_data(this);"/>
</div>
<div>
<textarea id="description[]" name="description[]" disabled="disabled"></textarea>
</div>
<div align="center">
</div>
The console.log(name) call displays the value I entered on any of the dynamically created barcode[] input fields and the request is successfully done but after that I don't know how to point the response to the right barcode[] and description[] fields:
function get_barcode_data(element)
{
var name = element.value;
console.log(name);
$.ajax({
method: 'POST',
url: 'include/get_barcode_data.php',
data: {
barcode: name
},
success: function(response){
if (response == 'FALSE') {
$('#barcode[]').focus();
$('#barcode[]').val('');
$('#description[]').val('');
var message = 'Invalid barcode.';
alert( message );
} else {
var res = jQuery.parseJSON(response);
$('#description').val(res.description);
}
}
});
}
Any ideas on how to solve this would be much appreciated.
Like James pointed out in the comment section, you cant have duplicate IDs in your document. You should either generate unique IDs for each element, or remove the IDs altogether.
If you generate unique IDs, you can pass the generated ID to your event handler and use it to select the correct element.
<div>
<input type="text" id="barcode_123" name="barcode[]" onfocusout="get_barcode_data(this, 'description_123');"/>
</div>
<div>
<textarea id="description_123" name="description[]" disabled="disabled"></textarea>
</div>
<div align="center">
</div>
123 should be a dynamically generated number.
And in your handler:
function get_barcode_data(element, target_id)
{
var name = element.value;
console.log(name);
$.ajax({
method: 'POST',
url: 'include/get_barcode_data.php',
data: {
barcode: name
},
success: function(response){
if (response == 'FALSE') {
$(element).focus();
$(element).val('');
$('#' + target_id).val('');
var message = 'Invalid barcode.';
alert( message );
} else {
var res = jQuery.parseJSON(response);
$('#' + target_id).val(res.description);
}
}
});
}
I would like to point out though, that this is not very good practice. Code like this get hard to maintain and breaks easily.
You would really be better off by learning a well though out framework, like Vue.js, Angular or React.
I'm programming a form with dynamic typeaheads fields, and i have found a problem when i want to show and select the suggestions.
I have two first fields, a input select and a input typeahead. When a option is selected, it's load a list of values in the input typeahead. The problem comes when i create(dynamically) a clone of this pair of fields and i want to get de list of values in the correct typeahead.
I get the id of the field (idTypeAhead) when i focus in the field and i use it in the typeahead.
This is the code:
//TYPEAHEAD
$('input.typeahead').focus(function(){
idTypeAhead = parseInt($(this).attr('id').replace('typeAhead_',''));
selectAttr = $('select#selectAttr_'+idTypeAhead).find('option:selected').val();
if(selectAttr=="null"){
selectAttr=0;
}
});
$("input#typeAhead_"+idTypeAhead).on("typeahead:select").typeahead({
name:'input#typeAhead_'+idTypeAhead,
displayKey: 'input#typeAhead_'+idTypeAhead,
input: 'input#typeAhead_'+idTypeAhead,
container:'input#typeAhead_'+idTypeAhead,
display: $(this),
suggestion: $(this),
minLength : 1,
sorter : this.query,
source : function(query, process){
return $.ajax({
url:'/aplicaciones/jsonValorAttr?selectAttr='+selectAttr,
dataType: 'json',
type:'POST',
success: function(data){
states = [];
map = {};
$.each(data, function (i, state) {
map[state] = state;
states.push(state);
});
process(states);
}
});
}
});
I have this code in form (i use Spring STS). Also i have two buttons "+" and "-". When i click "+", i clone this two fields and increase de id number of each element. When i click "-", i remove a pair of fields. (example: selectAttr_101 ->newclone: selectAttr_102).
<div class="controls">
<form:select path="rolHerramientaID" id="selectAttr_101" cssClass="field-required lstAtributos" cssErrorClass="select-error">
<form:option value="null" selected=""><spring:message code="altaAplicacion.form.seleccionar" />
</form:option>
<c:forEach var="selectAtributos" items="${resultAtributos}" varStatus="rowCount">
<form:option value="${selectAtributos.atributosId}">${selectAtributos.nombreAtributo}</form:option>
</c:forEach>
</form:select>
<form:errors path="rolHerramientaID" class="help-block" /></div>
</div>
<div class="control-group required">
<label for="input01" class="control-label"><spring:message code="altaAplicacion.form.valor" /></label>
<div class="controls">
<input id="typeAhead_101" class="input-medium typeahead" type="text" data-provide="typeahead" autocomplete="on">
</div>
How can i change the container of the typeahead dynamically?
I've been searching for the solution for this problem and found your post, with some small changes that worked for me.
I've stated the fixed input field in the form as typeAheadId_1 and created a function before create the typeahead object to manipulate the typeahead index.
on the insert operation, I increase the counter and destroy the typeahead object before each dynamic fields wrapping and recreate the typeahead object
(passing the counter) after the fields creation.
For edition (some dynamic fields are created direct in the form), I've created a REST service to return how many fields were wrapped and start counting from this.
It worked perfect for me.
If you didn´t solve or need some help, please let me know!
Following codes are working for me -
var typeaheadSettings = {
source: function (query, result) {
$.ajax({
url: "{{url('/work-order/get_parts_suggestion')}}",
data: 'txt=' + query,
dataType: "json",
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
type: "POST",
success: function (data) {
result($.map(data, function (item) {
return item;
}));
}
});
}
};
$('.typeahead').typeahead(typeaheadSettings); /* init first input */
$('.typeahead').on('added',function(){
$('.typeahead').typeahead(typeaheadSettings);
});
add this line after appending/creating dynamic element -
$('.typeahead').trigger('added');
Reference - https://www.bootply.com/61431
I am trying to get all the values present in my dynamic HTML table and POST the values to AJAX.
I have HTML table like this
When i press '+' , I can able to add rows dynamically . When i click save, How to POST array values from this HTML table to AJAX, so that i can meanwhile INSERT those values into MYSQL
I have tried getting the 'text' of each td present in my table
var rows = $("tbody tr",$("#myTable")).map(function() {
return [$("td",this).map(function() {
return this.innerHTML;
}).get()];
}).get();
This is getting me -> <input type="text"> and so on.
you are returning the innerHTML, which is... HTML.
you can get the value of a input element with .val()
how does this work for you?
return $("td input").map(function() {
return $(this).val();
});
Use serialize function using jQuery
<script type="text/javascript">
(function ($) {
$('#formID').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '/pathTo/process_form.php',
data: $('#formID').serialize()
});
});
})(jQuery);
</script>
var rows = $("td input",$("#myTable")).map(function() {
return { name : $(this).attr('name'), value :$(this).val()};
});
and you should get :
[
{
name : 'inputname',
value : 'inputval'
},
{ ... }
]
This would return an array like the .serialize() method
here i have created dynamic elements after clicking its adding one row.but how to validate it without plugin.
var cnt = 1;
$("#anc_add").click(function() {
cnt++;
$("input[id=rows]").val(cnt);
$('#tbl1 tr').last().after('<tr><td><select name="'+cnt+'1" id="'+cnt+'1" class="Exp"><option value="0" >Select Expenses Type</option></select></td><td><textarea name="'+cnt+'2"></textarea></td><td><input type="text" name="'+cnt+'3" id="'+cnt+'3" onkeypress="return isNumberKey(event)"></td></tr>');
element_id=cnt+'1';/*alert(element_id);*/
$.ajax({
url: "../../modal/system_operator/get_companyexpenses_type.php",
dataType: "html",
type: 'POST',
success:function(json) {
var result = jQuery.parseJSON(json);
length=result.len;
/*alert(length);*/
for(k=1;k<=length;k++) {
$('#'+element_id+' option').last().after('<option value="'+eval("result.row"+k+".company_expenses_type_id")+'">'+eval("result.row"+k+".company_expenses_type")+'</option>');
}
$('select[name="'+element_id+'"]').rules('add', {required:true});
}
});
});
I assume by without plugin means you do not use jquery.validate or some other plugin to validate your input control values.
Then try the following snippet
$(document).on('blur','#form_id input,#form_id select', function(){
// write your validation logic here
});
The above code says that all (including dynamic) input,select controls within #form_id element will call the function on blur event.