Develop Reference

Datatables YADCF - input focus on load

I'm using the excellent Datatables with Vedmack's YADCF plugin, which is working great. The only thing I can't figure out is ...
How do I switch focus to a specific YADCF filter text input box on page load? I've tried the following in and outside of document.ready, but neither work:
$('#yadcf-filter--Table-7').ready(function() {
$('#yadcf-filter--Table-7').focus();
});
... and ...
$('#yadcf-filter--Table-7').load(function() {
$('#yadcf-filter--Table-7').focus();
});
The input box doesn't appear for about 2 seconds after page load and the ID is appended by the plugin, which I assume is why I'm struggling to get it to work.
Any ideas, please?
Thanks!

Sorry - ignore this, the following works fine, I'd just made a daft mistake earlier on:
$(document).ready(function() {
yadcf.init(Table, [
etc, etc...
];
$('#yadcf-filter--Table-7').ready(function() {
$('#yadcf-filter--Table-7').focus();
});
});

place results in a textbox after click

i'm working on an auto complete with jquery which is working perfectly. the results get displayed as the user types. Now the problem is when the user starts typing and the results appear, when the user clicks on the desired results, it doesn't get placed in the textbox
JS
$(function(){
$(".search_tab").keyup(function()
{
var searchid = $(this).val();
var dataString = 'fname='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "http://localhost/myapp/search.php",
data: dataString,
cache: false,
success: function(html)
{
//console.log(html)
$("#result").html(html).show();
}
});
}return false;
});
$('.search_tab').click(function(){
jQuery("#result").fadeIn();
});
});
HTML
<input type="text" class="search_tab" placeholder="Search" autocomplete="off">
<div id="result"></div>

You'll need to do some event delegation over the items that get placed into the div#result element. You'll want something like this:
$('#result').on('click', 'RESULT_ITEM', function (event) {
$('input.search_tab').val(event.target.innerHTML);
});
Where RESULT_ITEM is a selector that matches the individual items that are listed in the autocomplete results.

While i dig into this have you considered using jQuery UI to acomplish this?
https://jqueryui.com/autocomplete/
This is a nice and polished way of doing exactly what you are wanting.
Not quite sure why I am getting down voted really as my suggestion is a perfectly valid solution to this problem...
That being said here is a working fiddle for you.
https://jsfiddle.net/wxr5y5gu/
The main part you seem to be missing is something like this:
$('#result').on('click','li',function(){
/* I used li as the element as im unsure what your response html looks like */
let newValue = $(this).text();
$('.search_tab').val( newValue );
$('#result').html('').hide();
});
That will clear the results, set the clicked value, and hide the results box for you.
That contains a working soution for you. As i dont have access to AJAX your local resources I had to extrapolate and create my own auto fill to show how it works in principal however i can certainly help you tailor the solution to your needs.
This solution uses your code and is compatible with all current jQuery versions.

How TextBox is shown when user select other from DropDownList in web forms using ASP.NET

I have asp:DropDownList and my requirement is when user select other from list a TextBox is shown to user. But initially TextBox is hidden.
I write below code to hide TextBox when page is loaded.
txtOtherArea.Attributes.Add("style", "display:none")
But when I try to show this TextBox using JQuery, nothing happened. Below is my JQuery code.
$(function () {
$("#ddlUserArea").click(function () {
$("#txtOtherArea").fadeIn("slow");
});
});
I also try to use show() instead of fadeIn("slow") but there is no option to use show() method.
Then I try below code to hide TextBox initially.
<script type="text/javascript">
$(function () {
$("#txtOtherArea").fadeOut(1000);
});
</script>
I write above code in head section of Master page. But nothing happened.
I read other topics and question on this forum but don't understand may be because of much complexity. I am new in programming and just need to show TextBox when user select Other from DropDownList. Please help.

Don't use magic string for id, instead use ClientID generated by asp.net for your controls :
var ddlUserArea = "<%=ddlUserArea.ClientID %>";
var txtOtherArea = "<%=txtOtherArea.ClientID %>";
and for dropdown you have to use change event:
$("#"+ddlUserArea).change(function () {
$("#"+txtOtherArea).fadeIn("slow");
});

Because you are using server side id of control, you should use client side id as shown below.
$(function () {
$("#ddlUserArea").click(function () {//YOU SHOULD USE .change() instead
$("#<%=txtOtherArea.ClientID%>").fadeIn("slow");
});
});
BETTER APPROACH
$(function () {
var ddl=$("#<%=ddlUserArea.ClientID%>");
var txt=$("#<%=txtOtherArea.ClientID%>");
ddl.change(function () {
if(ddl.val()=="Other"){
txt.fadeIn("slow");
}
});
});

how to pass value of textbox to another textbox in a modal using javascript?

I have a textbox in my page, what I want is to do some sort of "preview" using a modal, but i cannot display the value of textbox which I put the information i need. Can someone help me?
I use javascript in doing this, but my modal displays empty textbox.
$('#<%= txtDetails.ClientID %>').on('change', function () {
$('input[id$="txtKBDecription"]').text($(this).val());
});
$('#<%= txtIssue.ClientID %>').on('keyup', function () {
$('input[id$="txtKBSummary"]').text($(this).val());
});
$('#<%= area.ClientID %>').on('change', function () {
$('input[id$="txtKBResolution"]').text($(this).val());
});

Really need more specifics, but essentially you're going to grab the value form one and put it in the other whenver it changes.
this goes in your preview modal
<input type="text" id="preview" onchange="Copy();">
and this one goes in your final modal
<input type="text" id="final">
and code...
<script>
function Copy()
{
document.getElementById("final").value = document.getElementById("preview").value;
}
</script>
though it should really be something closer to
<script>
function Copy()
{
var previewValue = document.getElementById("preview").value;
if(previewValue != "" /* Or Other Validation */)
document.getElementById("final").value = previewValue;
}
</script>
you should also consider checking to make sure the elements exist if you are planning on having other people edit the page and/or to make it more robust.

Move cursor to next field with Javascript

Basically the function below is a listener for a change in selection of one dropdown. I want the cursor to move to the next field on the page as well the below function is executed. How do I do this in Javascript? The next field on the page is an ExtJs textbox.
function changeVehicleCondition() {
var ValuationSource = getCurrentValuationSource();
var vehicleConditionId = vehiclePnl.VehicleConditions.getValue();
if (ValuationSource == 0) {
vehiclePnl.VehicleConditionId.setValue(0);
} else {
vehiclePnl.VehicleConditionId.setValue(vehicleConditionId);
}
}
Edit: focus() doesn't work for me, because I tried this already:
vehiclePnl.Mileage.focus();
with no luck..

For ExtJs you apparentley have to do this:
focus( true, false );
true tells it to select the text in the next field and false tells it whether or not to delay. it actually didn't work for me but i think thats because my controls don't match up, but that's the code to do it.

This is with no knowledge of extjs
<select id="listen">...</select>
<input id="focus" />
<script type="text/javascript">
document.getElementById('listen').onchange = function () {
changeVehicleCondition()
document.getElementById('focus').focus()
}
</script>
The script tag can be anywhere after the select. You can also do it this way:
<select id="listen" onchange="changeVehicleCondition(); document.getElementById('focus').focus()">...</select>
<input id="focus" />

Lets say your form panel is defined as variable "vehiclePnl" and the next field your wanted to focused is have name attribute "Mileage".
Instead using your previous code
vehiclePnl.Mileage.focus();
Then you should use this code bellow
vehiclePnl.getForm().findField("Mileage").focus();