I have a table where in each row for each id we have 'Client' column. When a user clicks on the row he is able to change client. I am using jquery.dialog for this operation. When a dialog appears the user sees a dropdownlist with Clients. How I can make that after dialog appears, the user sees the current client as the selected item in the dropdown? I've tried as below:
onDblClickRow: function (row, $element) {
$.getJSON('/ManageProjects/GetAvaibleClients/', function (clients) {
if (clients.length == 0) {
$('#clientNameEdit').empty();
$('#clientNameEdit').append('<option value="0">Tasks</option>');
}
$.each(clients, function (index, clientt) {
$('#clientNameEdit').append("<option value='" + clientt.Value + "'>" + clientt.Text + "</option>");
});
})
var currentClient = row.clientName; // Client name from Row
$('#clientNameEdit select').val(currentClient); // Tried to set like that
}
but doesn't work
The value passed in to .val needs to be the clientt.Value and not the text name.
if you dont have the clientt.Value, then try something like:-
$("#clientNameEdit option[text=" + currentClient + "]").attr("selected", true);
And bring the setting of the select inside of the success function.
The following alteration to your code snippet should do the trick:
onDblClickRow: function (row, $element) {
$.getJSON('/ManageProjects/GetAvaibleClients/', function (clients) {
if (clients.length == 0) {
$('#clientNameEdit').empty();
$('#clientNameEdit').append('<option value="0">Tasks</option>');
}
$.each(clients, function (index, clientt) {
$('#clientNameEdit').append("<option value='" + clientt.Value + "'>" + clientt.Text + "</option>");
});
var currentClient = row.clientName; // Client name from Row
$('#clientNameEdit').val(currentClient); // Tried to set like that but doesn't work
});
As indicated above, if you do the currentClient = row.clientName outside the success of the ajax call, it will probably fire before the dropdown is populated and therefore not have any effect.
Secondly the jQuery selector '#clientNameEdit select' should only be '#clientNameEdit' as it refer to the dropdown itself and not it's parent.
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 fill combobox dynamically with javascript;
var $select = $('#itemsize');
$select.empty();
$(data).each(function (index, o) {
$select.append('<option value="' + o.Size + '">' + o.Size + '</option>');});
That code is running perfectly and running another function after that (GetProductInfoWhereSize).
I'm using this combobox's selected value in that function.
Function like this;
function GetProductInfoWhereSize() {
var size = -$("#itemsize").val();
console.log(size);
}
But GetProductInfoWhereSize shows me old values.
How do I use new value in this function?
Sorry for bad English.
Thanks.
Maybe you are using the function in the onchange event of the select, try with this:
$( "#itemsize option:selected").val();
I have a DataTable called Branches which has three columns: Name, Code and Email (along with an ID column hidden to users). It originally has an Edit button on top, and only after clicking on a row can the user click on the button to open a dialog box with the fields populated and edit them. Now however I need to change it so that each row has its own Edit button, therefore removing the need to click on the row first.
So now I have an Edit button for each row in a DataTable, but I can't pass the data for that particular row besides the Index number. The relevant blocks of code are below (unless I missed something, please tell me if I have):
var txtName2 = $("#txtName2"); //For Update
var txtCode2 = $("#txtCode2");
var txtEmail2 = $("#txtEmail2");
var dialog;
var tblBranch = $("#tblBranches");
var branchList;
var selectedIndex;
branchList = response.branches;
var data = { "aaData": [] };
$.each(response.branches, function (i, item) {
data.aaData.push({
"id": item.id,
"name": item.name,
"code": item.code,
"email": item.email,
"action": "<button> class='btnUpdate' type='button' onClick='testUpdateButton(" + i + ")'</button>"
});
});
function testUpdateButton(index, name, code, email) {
//alert(index);
selectedIndex = tblBranch.row(this).index();
var selectedName = tblBranch.row(index).name;
var selectedCode = tblBranch.row(index).code;
var selectedEmail = tblBranch.row(index).email;
//alert(name);
onBtnUpdateClicked(index, name, code, email);
}
function onBtnUpdateClicked(index, name, code, email) {
if (branchList != null && branchList.length > 0) {
var selectedItem = branchList[selectedIndex];
txtName2.val(selectedItem.name);
txtCode2.val(selectedItem.code);
txtEmail2.val(selectedItem.email);
dialog = $("#dialog-form-update").dialog("open");
}
}
When I only pass in the index number 'i' at the button and not the name, code or email, the alert(index) under testUpdateButton displays the correct index number of the selected row, therefore confirming it can get the index number, but not the other three columns (the alert(name) displays nothing).
So I've tried passing all four fields at the button like such:
"action": "<button> class='btnUpdate' type='button' onClick='testUpdateButton(" + i + ", " + item.name + ", " + item.code + ", " + item.email + ")'</button>"
but it only gives me an error: "Uncaught SyntaxError: missing ) after argument list" when I inspect the page in Chrome. I can't see where the missing bracket should be.
Basically, I can obtain the index number but cannot use it to get the corresponding name, code and email.
For reference, here is the function that's the closest thing to a solution I had earlier - this would pass all the row data and load the Editing dialog box with the input fields populated whenever I clicked anywhere on the row itself. It was modified from the previous "Click on row first" version, though I merely added the onBtnUpdateClicked function. Not ideal, but at least it did what it should.
$("#tblBranches tbody").on('click', 'tr', function () {
selectedIndex = tblBranch.row(this).index();
onBtnUpdateClicked();
});
Any help is much appreciated.
Since you are able to get the index of row, you can use this to get other values. Try something like this
function testUpdateButton(index){
//alert(index);
selectedIndex = index;
var name=$("table tr").eq(index).children('td').eq(1).text();
var email=$("table tr").eq(index).children('td').eq(2).text();
alert(name);
alert(email);
onBtnUpdateClicked(index, name, email);
}
A woorking fiddle to get these values is https://jsfiddle.net/shoaibakhter/atpgdofh/19/. This is not a complete solution, but yes this will help you to get other values, which you can pass in your onBtnUpdateClicked function. You have to change the functions as per your table structure and in your onBtnUpdateClicked use these values as below-
function onBtnUpdateClicked(index, name, email) {
if (branchList != null && branchList.length > 0) {
var selectedItem = branchList[index];
txtName2.val(name);
txtEmail2.val(email);
dialog = $("#dialog-form-update").dialog("open");
}
}
Hope this will help you.
I have a dropdown whose options get filled dynamically:
function populateDropdown(dropdownNum) {
// invokeWebService uses $.ajax
json = invokeWebService("GET", "/webservice/dropwdownOptions");
optionsHtml = "";
$.each(json, function(count, jsObj) {
optionValue = jsObj.name
optionsHtml+="<option>" + optionValue + "</option>";
});
var dropdownId = "#NRdropdown_" + dropdownNum;
$(dropdownId).html(optionsHtml);
}
function display(blockNum) {
var url = "/webservice/blocks" + blockNum;
var response = invokeWebService("GET", url);
var replacementHtml = "";
var currBlock = "blah";
$.each(response, function(i, block) {
currName = block.name;
var textfield = "<input type='text' id='blockValue" + block.id +
"'>";
var dropdownMenu = "<select id=\"NRdropdown_" + i +
"\"onClick=\"populateDropDown(" + i +
")\"><option>Existing Blocks</option>"
var submitButton = "<input type='submit' value='UPDATE' id='" +
block.id + "'><br><br>";
replacementHtml = currName + textfield + dropdownMenu + submitButton;
});
$("#main").html(replacementHtml);
}
The javascript function "populateDropdown(dropdownNum)":
Makes the ajax request
Parses the json response for the option values into an html string called optionsHtml
Replaces the inner html of the select element with the option values via:
var dropdownSelector = "#NRdropdown_" + dropdownNum;
$(dropdownSelector).html(optionsHtml)
1) When I click on the dropdown arrow, I STILL see "Existing Blocks".
2) After 1 sec I see the first dynamically generated option UNDERNEATH the "Existing Blocks" option, I don't see the other dynamically generated options.
3) Then I click outside the dropdown and see the dropdwon showing the first dynamically generated value.
4) Finally I click the dropdown arrow again and it works as it should with all the dynamically generated values.
How do I make it work so that:
When the page first loads, the dropdown shows "Existing Blocks".
Once I click the dropdown arrow, the dropdown should show all dynamically generated values without the "Existing Blocks" value.
Thanks!
the dropdown listener should be for onmousedown, not onclick
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.