Hi guys i have written some javascript code to display some values depend on another dropdown. So now i would like to display those selected values in my edit page..
Here is my code:
function getSubjectsTopics(subject_id)
{
if(subject_id) {
loading_show();
axios.get("/master/topic/get-topic-by-subject-id/" + subject_id)
.then(function(response) {
var optionHtml = '<option value="0">Parent</option>';
if(response.data.status) {
$.each(response.data.subject_topics, function(i,v) {
optionHtml += `<option value="${v.id}" >${v.name}</option>`;
}
$("#ddl_topic_type").html(optionHtml).attr('disabled', false).select2();
loading_hide();
})
.catch(function(error) {
loading_hide();
console.log(error);
Swal.fire({
type: 'error',
title: 'Oops...',
text: 'Something went wrong!'
})
})
} else {
$("#ddl_topic_type").attr('disabled', true);
}
}
Can some one help me how can i add my selected code in optionhtml variable.TIA
In the $.each block, you can use a ternary operator and add the "selected" keyword based on the selection criteria.
First assign a boolean to isSelected variable after checking whether it should be selected or not. Then add the selected keyword into the template literals using a ternary operator
optionHtml += `<option value="${v.id}" ${isSelected ? 'selected' : ''} >${v.name}</option>`;
Related
Hope you're doing well
I'm new to JavaScript and I need your help to complete the code below.
I've written a JS code as you can see below :
$("#input_KindCode").change(function () {
if ($(this).val() == 1) {
RunSql("Select DateKey From ProjectExecution.Contractinfo WHERE PlanCode = " + $("#input_PlanCode").val() + " AND ProjectCode = '" + $("#input_ProjectCode").val() + "' AND ContractCode = '" + $("#input_ContractCode").val() + "' AND KindCode = 1 ", function (data) {
if (data.length > 0) {
$("#input_DateKey").val(data[0].DateKey);
/////// THIS PART///////
} else {
$("#input_DateKey").val('');
EnableCol("DateKey");
}
});
}
else {
$("#input_DateKey")[0].value = '';
EnableCol("DateKey");
};});
In the 'RunSql' part of the code , I'm checking whether the 'datekey' column has value if true the value will show up in the field otherwise the user must enter the value for the column.
The problem is I want to add something to the code . I want to show the value if it exists AND I want to disable the column so that the user can not change the value . I can not use the function 'disable column' cause it does not work in my case are there any other functions ??
so I want a function to prevent user from changing the value of the column if it is being shown on the field. the function must be written in the 'This part' part of the code
Thanks in advance
You can disable this input field using jquery. To perform this you need to add one line.
Code:
if (data.length > 0) {
$("#input_DateKey").val(data[0].DateKey);
$("#input_DateKey").prop('disabled',true);
} else {
$("#input_DateKey").val('');
$("#input_DateKey").prop('disabled',false);
EnableCol("DateKey");
}
I want to loop an array and show the result using sweet alert, I am new in this so I try the code below, but show me some like [object],[object]
swal({
content:{
element: "ul",
attributes: {
innerHTML:$.each(json.DATA.ARYPUB, function (key, img) {
"<li><img src='"+img.PATH+"'></li>"
})
}
}
})
Can someone help me, please
One approach could be generating the complete HTML outside the constructor of the alert and then set that html string to the related property. Example:
var html = "";
$.each(json.DATA.ARYPUB, function(key, img)
{
html += "<li><img src='" + img.PATH + "'></li>"
});
swal({
content:{
element: "ul",
attributes: {
innerHTML: html
}
}
});
I faced the same issue so, I did this
const addOption = (arr) => {
let optionItems;
arr.forEach(item =>{
optionItems += `<option value="${item}">${item}</option>`
})
return optionItems
}
//in swal
Swal.fire({
html:addOption(Yourarray)
})
How to change the selected text of the dropdown without changing the text in the option? For ex: if dropdown has code and description both but on select i only wants to display the code and remove the description but description should be present in the dropdown.
Populating data in the dropdown:
$.each(jtc12_2_2_reasoncode1List, function(i, item) {
$('#jtc12_2_reasonForFailure1').append($('<option>', {
value : item.Code,
text : item.Code + " " + item.Description
}));
});
Change the text of selected option:
var jtc12_2_2_reasonCode1Code = $("#jtc12_2_reasonForFailure1 :selected").val();
var jtc12_2_2_reasonCode1Desc = _.filter(e.data.jtc12_2_2_reasonCode1List, function(item) {
return item.Code === jtc12_2_2_reasonCode1Code;
});
jtc12_2_2_reasonCode1Desc = jtc12_2_2_reasonCode1Desc[0].Description;
$("#jtc12_2_reasonForFailure1 option[value = " + jtc12_2_2_reasonCode1Code + "]").text(jtc12_2_2_reasonCode1Code);
One way to achieve this is to add a new option at runtime and select that (the newly added) value instead of the selected value. Then the selected value can be removed on dropdown's click event.
Assuming the code and description are separated by a colon (:) refer the following code.
var onSelect = false;
$('select').click(function (e) {
if ($(this).val() !== '' && !onSelect) {
$(this).find('option:selected').remove();
} else {
onSelect = false;
}
});
$('select').change(function (e) {
var selectedVal = $(this).val();
var newVal = selectedVal.split(':')[0];
$(this).append($('<option>', {
value: newVal,
text: newVal
}));
$(this).val(newVal);
$(this).find('option:selected').hide();
onSelect = true;
});
jsFiddle
I am trying to add a jQuery tooltip on a Selectize (http://brianreavis.github.io/selectize.js/) select box, however for some reason I'm having some problems.
Here's a snippet of my code:
$(function() {
$("#myDropdown").selectize({
onChange: function(value) {
var ddOptions = {
1: triggerOpt1,
2: triggerOpt2,
3: triggerOpt3,
4: triggerOpt4
};
ddOptions[value]();
},
render: {
option: showItem,
item: showItem
}
});
$("#myDropdown .ddOption").tooltip({
position: "bottom left",
offset: [-2, 10],
opacity: 0.9
});
});
function showItem(data) {
return Handlebars.templates["dropdown"]({
itemClass: data.value,
label: data.text,
title: I18n["ddOption_" + data.value]
});
}
<select id="myDropdown">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
For some reason, I am not getting the jQuery tooltip but the native browser tooltip. When I try to attach the tooltip in the console it works fine..
Has anyone ever encountered this issue?
EDIT: the class ddOption is being added to the selectize items in the handlebars template.
I don't know about Selectize but I can figure out it is based on jQuery-ui's selectmenu with which I experienced same problem.
The underlying cause is that jquery-UI hides actual select element and build an entirely new one with other html which simulates it and synchronize its value to original select tag.
So, if you capture it, for example, by it's id or class to do anything, you end up modifying a hidden element.
You should search for a sibling span with the ui-selectmenu-button class instead. But better use your preferred browser inspector to see it's actual attributes uses selectize plugin.
ddOptions is JS array type.. you need html element to get hover intent..
so try below code .. it might help you out...
$("#myDropdown option").tooltip({
position: "bottom left",
offset: [-2, 10],
opacity: 0.9
});
});
I found a partial solution:
Only apply if you tooltip message is generic or equals, to each elements that take Selectize plugin in the View.
Use jQuery to set manually ToolTip options:
$(".selectize-control").tooltip({
placement: "top", // position
title: "Your Message"
});
I've created this code. I hope it helps you.
This is the way like I initialized my data to Selectize
$.ajax({
type: 'GET',
url : 'tableConfig',
success : function(data) {
$('#idTrans').each(function() {
if (this.selectize) {
let list = data.filter(x => x.codigo === "TRANS");
for(let i = 0; i < list.length; i++){
this.selectize.addOption({value:list[i].idConfiguracion, text: list[i].valor, title: list[i].descripcion});
}
}
});
},
error: function (request, status, error) {
//alert("No se pudo realizar la operación por un error interno, contactese con el Administrador.");
}
});
And then, I can customize the tooltip.
$('#idTrans').selectize({
render: {
option: function(data, escape) {
let txtTitle = data.title;
if(txtTitle === undefined || txtTitle === 'Ingrese Detalle:') txtTitle = '';
return '<div class="option">' +
'<div title="' + txtTitle + '">' + escape(data.text) + '</div>' +
'</div>';
},
item: function(data, escape) {
return '<div>'+ escape(data.text) + '</div>';
}
},
onChange: function (value) {
let tableConfig = $('#tableConfig').bootstrapTable('getData');
let list = tableConfig.filter(x => x.idConfiguracion === parseInt(value));
if (list.length > 0) {
let idProTrans = list[0].nivel_padre;
if (idProTrans !== null) {
$("#idProceso_Trans").val(idProTrans);
}
}
}
});
The property 'onChange'. Maybe, it isn't necessary for you and also you can delete that part.As you see, inside of render's property. I put 'title' for tooltip
Finally, looks like this.
I have a dropbox that when selected it displays its respective fields
in first image you can see there is A person without an ID so when selected it displays
something like:
if you see I added 12
Now if i change my mind and select the other option (person with ID) one field is displayed like:
I added 9999
That is ok, but now if I change my mind again and return to other selected option the values are still there like:
I would like to clean them... How can I accomplish that?
It does not matter to fill all respective fields again, I want to reset values in that case if select
person without ID, delete the 9999, on the other hand, if i select person with Id, i want to reset the vakue 12
please take a look at my fiddle
some of the jquery code is:
//function available
function validate(id, msg) {
var obj = $('#' + id);
if(obj.val() == '0' || obj.val() == ''){
$("#" + id + "_field_box .form-error").html(msg)
return true;
}
return false;
}
$(function () {
$('#has_id').show();
$('#select_person').change(function () {
$('.persons').hide();
if ($('#select_person').val() == 'typeA') {
$("#has_id").html('');
$("<option/>").val('0').text('--Choose Type A--').appendTo("#has_id");
$("<option/>").val('person-A-withID').text('person-A-withID').appendTo("#has_id");
$("<option/>").val('person-A-withoutID').text('person-A-withoutID').appendTo("#has_id");
}
if ($('#select_person').val() == 'typeB') {
$("#has_id").html('');
$("<option/>").val('0').text('--Choose Type B--').appendTo("#has_id");
$("<option/>").val('person-B-withID').text('person-B-withID').appendTo("#has_id");
$("<option/>").val('person-B-withoutID').text('person-B-withoutID').appendTo("#has_id");
}
});
$('#has_id').change(function () {
$('.persons').hide();
$('#' + $(this).val()).show();
});
});
var validation = function(){
var err = 0;
err += validate('select_person', "select person.");
err += validate('has_id', "Select whether it has an ID or not.");
if(err == 0){
alert('continue');
}else{
alert('error');
}
};
Simply make this change:
$('#has_id').change(function () {
$('.persons input').val('');
$('.persons').hide();
$('#' + $(this).val()).show();
});
New fiddle: http://jsfiddle.net/6m27M/
This simply clears out all the values any time a change is made to the #has_id dropdown.