I am using jquery.rateit.min.js to performing the rating functionality. I have a cancel button on which i need to reset the selected stars. Below the code snippet :
Cancel
Can anyone let me know how to reset the selected stars.
I used the follwing function to reset but it was not invoking on click of the Cancel button.
$("#rate").bind('reset', function () { $('#rating1').val('0'); });
Thanks & Regards,
Santosh Kumar Patro
Its not completely clear what your question is.
But you can change the value of the rating by calling:
$('#rate').rateit('value', 0 */new value/*);
Since rateit version 1.0.5 the way to reset the rating has been changed to:
$('#rate').rateit('value', null); //so set the value to null
you can do something like
$("#Q1a_1").bind('reset', function() { $("#hdnID").val(0); });
and reset the value to 0 and store it in hidden field.
Related
Whenever a user creates a table in ckeditor 4 and presses the enter key whilst inside a table header (th) it creates a new paragraph. A paragraph inside a th is invalid HTML. Ideally I'd like to disable the enter key whenever the cursor is inside a th.
I'm aware of the enterMode config (changing it to a br or a div instead of a paragraph when enter is pressed) but that doesn't really solve the problem.
I guess I need to hook into the keypress event and then check which element type is the parent of the element in which the cursor is residing? But I'm not sure how to do that.
There is a similar question here but I'm specifically looking to disable the enter key in a particular scenario not just entirely. ckeditor turn off enter key
Any help appreciated, thanks.
I've figured this out, seems to work as I desired:
CKEDITOR.instances.editor1.on('key', function(event) {
var enterKeyPressed = event.data.keyCode === 13;
var isTH = CKEDITOR.instances.editor1.getSelection().getStartElement().$.nodeName === 'TH';
var parentisTH = CKEDITOR.instances.editor1.getSelection().getStartElement().$.parentNode.nodeName === 'TH';
if(enterKeyPressed && isTH || enterKeyPressed && parentisTH) {
event.cancel();
}
});
How can I set the minTime and maxTime options after the calendar is created?
I tried the following, which doesn't work:
$('#calendar').fullCalendar('option', 'minTime', 7);
$('#calendar').fullCalendar('render');
I don't know if it is still relevant but I can change the options with the following statement:
example for selectable:
$('#calendar').fullCalendar('getView').calendar.options.selectable = false;
$('#calendar').fullCalendar('render'); // rerender to see visual changes
Though it's not dynamically but at least you don't have to destroy the whole calendar and refetch your events :-)
This way you can change as many calendar options you like:
// save the calendar options in a variable
var calendarOptions = $('#calendar')
.fullCalendar('getView')
.options;
// make your changes to the calendar options
// I wanted to change the slotDuration
calendarOptions.slotDuration = '00:20:00';
// destroy the calendar
$('#calendar')
.fullCalendar('destroy');
//Lets load the calendar with the new options
$('#calendar')
.fullCalendar(calendarOptions);
Hope this helps. Thanks.
This functionality has been officially release in v2.9.0: http://fullcalendar.io/docs/utilities/dynamic_options/
Can't be done without recreating the calendar.
Update:
Can be done in v 2.9: See below
There's an open issue for this functionality here:
https://code.google.com/p/fullcalendar/issues/detail?id=293
just me dude's answer is actually the only way I found myself.
This is just an addendum to this former answer :
If you want to change the editable option, which is very useful if you want to lock the events for asking confirmation on a change before updating your database, it's a little more tricky. In case it can save some time to someone I dump the code:
var view = $('#calendar').fullCalendar('getView');
view.calendar.options.editable = false;
view.calendar.overrides.editable = false;
view.calendar.viewSpecCache.month.options.editable = false;
view.calendar.viewSpecCache.agendaWeek.options.editable = false;
view.calendar.viewSpecCache.agendaDay.options.editable = false;
$('#calendar').fullCalendar('render');
You obviously change all those false to true to unlock.
This code just did fine for me. Call this function anywhere and pass as many custom variables to it, but don't forget to destroy the previous calendar first
function initializeCalendar( timeIntervalCustom ) {
$('#calendar'+id).fullCalendar({
slotMinutes: timeIntervalCustom,
});
}
$('#calendar').fullCalendar("destroy");
initializeCalendar(10);
Is it possible to render a Grid with one row selected as default (set the right page number and highlight the row)?
For highlighting, try using the "OnRowDataBound" event
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
with something like
function onRowDataBound(e) {
var myId = $('#MyId').val();
if (e.dataItem.Id == myId)
e.row.className = 't-state-selected';
}
I'm still trying to figure out how to set the correct initial page number. This bloke might be on to something.
Use the Grid RowAction method, eg:
.RowAction(row => row.Selected = row.DataItem.CustomerCode.Equals(ViewBag.ID))
It is perhaps possible if you iterate in the grid source, locate the row which has to be selected in it, than use a formula to detect on which page will be displayed, and finally change the page index on initial load and select it.
I'm using jqGrid with cell editing. I have setup the colModel properties using the editrules option. Everything works fine in that if I edit a cell and try to save an invalid value the grid displays an error dialog, but I need to know how to position the error message dialog that comes up because in the case of my layout it ends up behind a video. I'm not quite sure how to hook into this and there don't seem to be any obvious options on how to do it.
In this case the dialog I would be trying to manipulate is the one with ID of info_dialog.
Also I'm using the clientArray option for cellsubmit.
I realize this is rather old but upon searching I didn't find any indication this might have been added since, so I figured now that I've figured it out I'd let everyone know how I solved the positioning of mine.
$(document).ready(function ()
{
$.jgrid.jqModal = $.extend($.jgrid.jqModal || {}, {
beforeOpen: centerInfoDialog
});
});
function centerInfoDialog()
{
var $infoDlg = $("#info_dialog");
var $parentDiv = $infoDlg.parent();
var dlgWidth = $infoDlg.width();
var parentWidth = $parentDiv.width();
$infoDlg[0].style.left = Math.round((parentWidth - dlgWidth) / 2) + "px";
}
From what I could find in the jqGrid source code, you can add a beforeOpen and an afterOpen. In my case I'd rather position the thing before it's displayed (duh!). Would be nice if there was a parameter to hook it up in the grid declaration, but this does the trick in the mean time.
I hope this helps someone! I spent most of my afternoon on this!
Default value of zIndex parameter of info_dialog is 1000. The function info_dialog from grid.common.js part of jqGrid will be called from grid.celledit.js without usage a 4-th parameter which can change the option.
So the best pragmatical way which I could recomend you is to decrease zIndex value of your div with the video so that it will be less then 1000.
I was wondering if anyone has found a solution or example to actually populating the input box of a slider and having it slide to the appropriate position onBlur() .. Currently, as we all know, it just updates this value with the position you are at. So in some regards, I am trying to reverse the functionality of this amazing slider.
One link I found: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html is a bit outdated, but looks like they made an attempt. However, the links to the results do not exist. I am hoping that there may be a solution out there.
I know Filament has re-engineered the slider to handle select (drop down) values, and it works flawlessly.. So the goal would be to do the same, but with an input text box.
Will this do what you want?
$("#slider-text-box").blur(function() {
$("#slider").slider('option', 'value', parseInt($(this).val()));
});
Each option on the slider has a setter as well as a getter, so you can set the value with that, as in the example above. From the documentation:
//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);
UPDATE:
For dual sliders you'll need to use:
$("#amount").blur(function () {
$("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
$("#slider-range").slider("values", 1, parseInt($(this).val()));
});
You'll need to use Math.min/max to make sure that one value doesn't pass the other, as the setter doesn't seem to prevent this.
You were almost there when you were using the $("#slider-range").slider("values", 0) to get each value. A lot of jQuery has that kind of get/set convention in which the extra parameter is used to set the value.
I've done some work around the jQuery UI slider to make it accept values from a textbox, it may not be exactly what you were after but could help:
http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html
$slider = $("#slider");
$("#amountMin").blur(function () {
$slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
$(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));
});
$("#amountMax").blur(function () {
$slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );
$(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
});
I just used martin's code and updated the id to #slider also added the math.max as he suggested so the sliders won't overlap.