Ag-grid cell renderer with slider not working - javascript

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

Related

JQuery UI slider shows wrong value when dragged to 100 (shows 0)

I've created a JQuery UI slider and using both change and slide events. Problem is when adding the slide event and dragging the slider to 100 the value shows as 0 not 100.
Fiddle here: http://jsfiddle.net/nrNX8/524/
var total;
var s = $("#slider").slider({
value: 0,
min: 0,
max: 500,
step: 100,
change: function(event, ui) {
$('#select').val(s.slider('value'));
},
slide: function(event, ui) {
$('#select').val(s.slider('value'));
},
});
$('#up').click(function() {
s.slider('value', s.slider('value') + s.slider("option", "step"));
$('#select').val(s.slider('value'));
});
$('#down').click(function() {
s.slider('value', s.slider('value') - s.slider("option", "step"));
$('#select').val(s.slider('value'));
});
$('#select').change(function() {
s.slider('value', $(this).val());
});
The problem is that when the slide event is fired, the value hasn't actually changed yet, which means that s.slider('value') is still zero when you set it.
Use the value that is passed to the slide callback rather than the value current set on the slider. In other words, you should change s.slider('value') to ui.value inside of the slide callback:
Updated Example
slide: function( event, ui ) {
$('#select').val(ui.value);
},
Reference: jQuery UI slide( event, ui )
According to the docs
Triggered on every mouse move during slide. The value provided in the
event as ui.value represents the value that the handle will have as a
result of the current movement. Canceling the event will prevent the
handle from moving and the handle will continue to have its previous
value.
value of the slider doesnt change during slide, you can access currently selected value via ui.value:
slide: function( event, ui ) {
$('#select').val(ui.value);
}
Updated fiddle

jquery UI draggable: ui.children is not a function

i have a draggable list, a sortable-droppable list and a couple of li's inside the first.
now i want to pull them over, in the stop-funtion i have a function that adds a class to the first child (it's a span representing the clip-number like
<li>
<span>1.</span>
<span>Title</span>
<span>1min23sec</span>
</li>
). the reason for this is, i want to represent the original clip number in the playlist(sortable).
but i get a console error saying
TypeError: ui.children is not a function
ui.children("li")[0].addClass(".slot_clip_info");
i am not 100% sure, but i think this exact code HAS already worked in the past time, i might have changed somthing without knowing, but i am not aware of that.
draggable:
$(function() {
$(".pl_clipEntry").draggable({
appendTo: "body",
revert: "invalid",
connectToSortable: "#tracks",
distance: 20,
helper: function(){
return $(this).clone().width($(this).width()); // hack for the drag-clone to keep the correct width
},
stop: function(ui) {
ui.children("li")[0].addClass(".slot_clip_info");
},
zIndex: 100
});
});
sortable:
$(function() {
var removeItem;
$("#tracks").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
placeholder: "sort_placeholder",
helper: "clone",
distance: 20,
sort: function () {
$(this).removeClass("ui-state-default");
updatePlaylist();
},
over: function (event,ui) {
updatePlaylist();
removeItem = false;
console.log(event);
console.log(ui);
var originalClass = ui.helper.context.childNodes[0].className;
console.log(originalClass);
var small_clip = originalClass.match(/(\d+)/g)[1];
ui.item.context.children[0].innerHTML = small_clip;
ui.item.context.children[0].classList.add("slot_clip_info");
},
out: function () {
updatePlaylist();
removeItem = true;
},
beforeStop: function(event,ui) {
if (removeItem) {
ui.item.remove();
}
},
stop: function(event,ui) {
console.log("checking placeholder");
var list = $(this);
var count = list.children(':not(.placeholder)').length;
list.children('.placeholder').css("display", count > 0 ? "none" : "block");
savePlaylist();
}
});
as soon as i pull and element IN or reorder them, i get the said error.
also, on refresh, the list seems to multiply itself.. but i guess that's another issue...
Full fiddle (pretty messy, functionality in top dropdown button "PL TOGGLE"
UPDATE: another thing i noticed: the first drag works without problems, then shows the error on release, subsequent drags will (mostly.. sometimes they do...) not work
you need to make ui a jquery object, and then wrap the first element in another jquery object to do what you want.
so change:
ui.children("li")[0].addClass(".slot_clip_info");
to
$($(ui).children("li")[0]).addClass(".slot_clip_info");
In jQuery UI's draggable module, the stop function has 2 parameters : event and ui.
ui is a javascript object (and not a jQuery one, there's a difference.)
This object has 3 attributes :
helper which is a jQuery object
position which is a javascript object
offset which is a javascript object
Depending on your HTML code (we don't have), you could replace
ui.children("li")[0].addClass(".slot_clip_info");
by
ui.helper.children("li")[0].addClass(".slot_clip_info");

Change variable based on value of 'jQuery UI Slider'

I'm trying to update a variable based on the value of a jQuery UI Slider, which is then used within a function but I can't get it to work. Here's what I have so far:
$(document).ready(function() {
$('.drag').draggable();
$("#hue").slider({
min: -180,
max: 180,
value: 150,
slide: function(event, ui) {
$("#slideResult").text(ui.value);
},
change: function(event, ui) {
$("#slideResultSecret").val(ui.value);
}
});
var hueValue = document.getElementById("slideResultSecret").value;
$("#slideResult").text("null!");
});
$(window).load(function() {
$('.window img').pixastic("hsl", {hue: hueValue, rect:{left:115,top:115,width:490,height:692}});
});
Does that make sense? It's hard to explain it when you don't fully understand it yourself.
It is enough to define the variable inside the change event, like so:
change: function(event, ui) {
hueResult = $("#hue").slider("value");
}

jQuery UI Autocomplete displaying wrong value

jsFiddle for the interactive example
I have an auto-complete box similar to the example. If you start typing a name, that begins with M it will give you a drop-down list. If arrow down through the names (rather than selecting one with your mouse), you will notice, that the input box gets filled with the value rather than the name of the person.
HTML:
<input type="text" id="myInput" placeholder="Type M...">
<input type="hidden" id="myHidden">
Script:
$("#myInput").autocomplete({
delay: 500,
minLength: 1,
select: function(e, ui) {
$(this).val(ui.item.label);
$("#myHidden").val(ui.item.value);
return false;
},
source: [{"label":"Marie","value":1},
{"label":"Michelle","value":2},
{"label":"Mia","value":3},
{"label":"Melissa","value":4},
// ...etc
];
});
When you select a name, it adds it to the input correctly, but I'm trying to get rid of the numerical values being displayed as you arrow through the choices.
I didn't see any event in the auto-complete docs to hook into accomplish this.
May I have missed it or perhaps there is a way of restructuring my source data to prevent this?
Solution:
$("#myInput").autocomplete({
delay: 500,
minLength: 1,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
$("#myHidden").val(ui.item.value);
return false;
},
focus: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
},
source: [{"label":"Marie","value":1},
{"label":"Michelle","value":2},
//...
{"label":"Maureen","value":40}]
});
JSFiddle demo

Error : cannot call methods on slider prior to initialization attempted to call method 'value'

I have written something like below. onclick of div with id "PLUS" I
am getting the following error:
cannot call methods on slider prior to initialization attempted to call method 'value'
<div id="PLUS" class="PLUS"></div>
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
});
</script>
Any help is appreciated.
If we check error in detail you will notice that it says you are trying to call the value method before the initialization of slider plugin.
Reason:
Actually JavaScript is an interpreted language, and it doesn't wait for first command to execute and finish. That's why your $(".slider").slider({ and $(".PLUS").click(function() { lines run at same time and the error occurs.
Solution:
You can put your code in setTimeout function here is an example given below.
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
setTimeout(function(){
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
},200); // 200 = 0.2 seconds = 200 miliseconds
});
</script>
I hope this will help you/someone.
Regards,
You have used $(".slider").slider() at the time of initializing and
$("#slider-result").slider() at the time of getting the value some plugins work on selector you have used at the time of init, so try that.
The error is caused because $("#slider-result") is not the element initialized as slider and you're trying to execute slider widget methods on it instead of $(".slider") which is the actual slider.
Your code should be
$(".PLUS").click(function() {
var value = $(".slider").slider("value"),
step = $(".slider").slider("option", "step");
$("#slider-result").text(value + step);
//---- maybe you'll need to ----^---- parseInt() the values here
});
i had a similar problem.
your block here
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value")
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
just keep it under
create: function( event, ui ) {}
ie.
create: function( event, ui ) {
$(".PLUS").click(function() {
var value = ui.value;
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
}
hope this works.
The best way I found to achieve this is to use the event from the ON function from the slider library to get the value. Ex:
slider.on('slideStop', function(ev) {
let value= ev.value; //try ev if you want to see all
console.log(value);
})
Regards

Categories

Resources