Develop Reference

Ag-grid cell renderer with slider not working

I am using Ag-grid with native JavaScript. I am trying to get a slider in a cell to work.
I have implemented the cell renderer and used the jQuery slider inside it. However, the slider is not moving. I have tried stopping the event propagation with unsuccessful results. Any help is appreciated.
Here is a working example link.
https://jsbin.com/netavepeme/1/edit?html,js,console,output
cellRenderer: function(params) {
var sUI = "<div class='slider' style='margin:5px'></div>";
// create jQuery slider
var sliderObj = $(sUI).slider({
min: 1,
max: 5,
step: 1,
value: params.data.val,
slide: function(event, ui) {
console.log("slided");
},
stop: function(event, ui) {
console.log("stopped");
}
});
return $(sliderObj).prop("outerHTML");
}

I got it working
https://jsbin.com/coyakeluci/edit?html,js,console,output
So basically what I did is simply return the html inside the cellrenderer and onGridReady event that I added I initialized the plugin. I also removed your events that you added that prevent it to slide as well.
cellRenderer: function(params) {
return "<div class='slider' style='margin:5px'></div>";
}
onGridReady: function(event) {
$(".slider").slider({
min: 1,
max: 5,
step: 1,
slide: function(event, ui) {
console.log("slided");
},
stop: function(event, ui) {
console.log("stopped");
}
});
},

Actually, the existing answer not fully correct
First of all, you've mixed cellRenderer and cellEditor functionality.
cellRenderer - used for RENDERING (for displaying cell info, not for edit)
cellEditor - used for EDITING (which means, editor component would be accessible only when edit mode would be activated)
So if you will try to get an updated cell value from cellRenderer it wouldn't be successfully achieved.
You can play with ag-grid settings to get edit mode activated via a single click or additional key-press or even combine cellRenderer with hover logic to achieve instant edit mode activation.
Btw this is how slider should be initialized in a correct way:
I believe that you already mentioned (from the links above) how you can create your own cellRenderer or cellEditor (in javascript) so, I will notice only about slider initialization.
You have to define the slider after Gui is attached:
afterGuiAttached = function() {
$(this.container).slider({
min: 1,
max: 5,
step: 1,
value:this.resultValue,
slide: (event, ui)=> {
this.resultValue = ui.value;
console.log("slided", ui.value);
},
stop: (event, ui) => {
console.log("stopped", ui.value);
this.params.stopEditing();
}
});
this.container.focus();
};
And also get&set value inside slide function.
Demo
On this example, you can find out how to create a component with enabled edit mode without single\double clicking

Set jQuery Autocomplete on Textbox KeyDown Event

I want jQuery Autocomplete on textbox key down event
I have tried below code, but it is not working.
$("#txtName").keyDown({
$("#txtName").autocomplete({
source: '#Url.Action("GetAllName", "Home")',
select: function (event, ui) {
$("#txtName").val(ui.item.value);
return false;
}
});
});

You do not need the keyDown event otherwise you are rebinding the autocomplete on every keydown.
$("#txtName").autocomplete({
source: '#Url.Action("GetAllName", "Home")',
select: function (event, ui) {
$("#txtName").val(ui.item.value);
return false;
}
});
To show all results when one character is entered add minLength: 1
If what you want is to have all the items displayed when the textbox has focus then this is what you are looking for: https://stackoverflow.com/a/4604300/1398425

If you just want it to begin searching on the first keystroke, try using minLength: 1:
$("#txtName").autocomplete({
source: '#Url.Action("GetAllName", "Home")',
minLength: 1,
select: function (event, ui) {
$("#txtName").val(ui.item.value);
return false;
}
});

How to pass jQuery Ajax value to radio button group

I used jquery ajax code for get some values for running page.
<script>
$(function() {
$("#store_select").autocomplete({
source: "load_store_list.php",
minLength: 2,
select: function(event, ui) {
$('.outlettype').val(ui.item.outlettype);
}
});
});
</script>
I want to set that passed value to radio button group how to do it
eg: think ajax code passed "Car" as a value, I want to make checked for that value
<input type="radio" name="veh" value="Car"/>Car
<input type="radio" name="veh" value="Bus"/>Bus

Try .prop('checked', 'checked') with attribute selector [value=Car]
$('input[type=radio][value=Car]').prop('checked', 'checked');
Edit
$(function () {
$("#store_select").autocomplete({
source: "load_store_list.php",
minLength: 2,
select: function (event, ui) {
$('.outlettype').val(ui.item.outlettype);
$('input[type=radio][value=' + ui.item.outlettype + ']').prop('checked', 'checked');
}
});
});

Display hidden element with the help of jquery

I have some code in a jsfiddle and I want to display one hidden element <div id="e1"></div>
I have written code for this in jquery like this:
$("#credit4").sortable({
receive: function (event, ui) {
ui.item.remove();
var s="PLEASE SELECT ANOTHER BLOCK";
$("#e1").show();
$("#e1").html(s);
setTimeout('$("#e1").hide()',1500);
}
});
credit4 is the id of a draggable element and when the user wants to drag the element then this hidden elemet should be displayed.
You can also check my jsfiddle here - http://jsfiddle.net/sanjayrathod7/5cZD5/44/.
Please suggest me where I'm wrong.

Here's a simplified fiddle with a set of alerts in place indicating which line is hiding #e1. You can see that you're probably hiding it when you didn't intend to (at lines 45 and 171):
http://jsfiddle.net/isherwood/5cZD5/50
$("#credit").sortable({
receive: function (event, ui) {
ui.item.remove();
$("#e1").show();
$("#e1").html(s);
setTimeout('$("#e1").hide()', 1500); alert('hiding 10');
}
});

I have find out the answer
Try this
$( "#credit4" ).draggable({
revert: true,
start: function( event, ui ) {
var s="PLEASE SELECT ANOTHER BLOCK";
$("#e1").show();
$("#e1").html(s);
setTimeout('$("#e1").hide()',1500);
}
});

jquery autocomplete get selected item text

I am wondering how to grab the selected item's text value on jquery autocomplete.
I have initialised jquery as following :
$(document).ready(function (){
$("input#autocomplete").autocomplete({
source: postcodelist,
select: function (event, ui) {
AutoCompleteSelectHandler(event, ui)
}
});
});
And I have created a function function AutoCompleteSelectHandler(event, ui) { }.
Inside this function I want to some extra handling to feed data into correct textboxes but I can't figure out how to grab the text value of the selected item.
I did google a bit and tried examples but I can't seem to get it working.
Any help will be much appreciated.
Thanks a lot advance.

The ui parameter has an item property with the selected text
function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
alert(selectedObj.value);
}
source: http://jqueryui.com/demos/autocomplete/#event-select go to tab "Events" and then event "Select"

// list of clients
$( "#client" ).autocomplete({
source: "lib/getClientList.php",
minLength: 2,
select: function(event, ui) {
alert(ui.item.value);
}
})
;
The ui.item.value is the reference that jquery utilizes to assign a value to the input

You don't need to apply an anonymous function as a wrap, you can directly pass the function ref.
$(document).ready(function (){
$("input#autocomplete").autocomplete({
source: postcodelist,
select: AutoCompleteSelectHandler
});
});
Within that method, you can either access this or event.target to get the current value, both values are referencing the input element:
function AutoCompleteSelectHandler(event, ui) {
alert( $(event.target).val() );
alert( $(this).val() );
// alert( this.value );
}

You just grab the value from the input in the same way you would if the user had typed it in themself:
$('input#autocomplete').val()