JQuery Plot, exists an OnCompleteDraw Event? - javascript

i want to know if is possible get an event before the JQueryPlot draw a graph and after that. If somebody have an example better.
Thank you in advance

You can use hooks plugin in order to bind some events.
You can find the jqPlot documentation here and a working example on jsFiddle here (once you have clicked the url, close the two alert prompts and click on the "Run" button in order to see correctly how it works :
$.jqplot.config.enablePlugins = true;
$.jqplot.preDrawHooks.push(function(){
alert('predraw');
});
$.jqplot.postDrawHooks.push(function(){
alert('postDraw');
});

Related

I want to catch click event of Ok button in tinyMCE image tools

I want to catch the click event of OK button in tinyMCE image tools button, how do I can achieve this, attaching screenshot for your reference.
When someone clicks on Ok button, I want a user defined function to trigger. Please help me on this.
its already a couple of days old but...
This solution is a bit dirty imo but as long as you can't/won't edit the plugin itself you can get the button with:
// top.tinymce.activeEditor.windowManager.windows[0].statusbar is the footer instance
var tinyMceFooterId = top.tinymce.activeEditor.windowManager.windows[0].statusbar._id;
var tinyMceFooter = document.getElementById(tinyMceFooterId);
var tinyMceSubmitButton = tinyMceFooter.querySelector('.mce-primary button');
Keep in mind, that this will just work if there is a button inside the footer with the class "mce-primary" (the ok button) and it is the first one – otherwise you have to edit the selector.
Not sure if there's a better way except extending/customizing the image plugin itself -> at least it works ;)
Cheers :)

How to use "change event" in bootstrap-wysiwyg?

I am using the bootstrap-wysiwyg.
I need an event to occur after text is modified and the input box is blurred.
I saw the below code, but this isn't the event I want
// bind the event event
$('#wysiwyg').wysiwyg('document').keypress(function(e) {
// This will cancel the keypress
e.preventDefault();
// alert
alert('Keypress detected!');
});
I want an event to occur after text is modified and the input box is blurred.
Event I want is similar to ".change()" in jQuery.
I hope you help me.. thank you..
I know this is a question is a bit old, but here's how you can do it in case you still need to solve this issue in the future. Assuming that you're using the latest version of bootstrap-wysiwyg you can do what you're wanting using the following code:
$('#wysiwyg').wysiwyg().on('change', function()
{
// You code goes here
});
You can download the latest version from here.

Using jquery event on close button in search box

The question is whether I can call a function on event of clicking close button in search box.
What I'm using is <input type='search'>
While typing, close button appears clicking on which I want to call a particular function. Is it possible? I tried to Google it but couldn't get much out of it. Can anyone help?
You can use jQuery .on('search', function() { ... }) to handle this event. Here is a fiddle example: http://jsfiddle.net/7EynL/
See this question for additional details.
Use 'search' event
$('input[type="search"]').on('search', function(event) {
});

KendoUI grid does not fire saveChanges event

I have a problem with events in KendoUI grid control. I assigned "saveChanges" event after grid initialization. I use popup for data editing. I want to fire event "saveChanges" when the user pushes "Save" button. Unfortunately the event is not fired. I can't figure out what is the problem, moreover, other events work. The grid is initialized within MVC helpers. Events are assigned in JavaScript.
Here is the JavaScript code that I'm using:
function bindGridEvents() {
var that = this;
//kendoGrid is an abbreviation of: $("#grid").data("kendoGrid")
kendoGrid.bind("dataBound", function () { }); // works
kendoGrid.bind("edit", function (event) { }); // works
kendoGrid.dataSource.bind("error", function (event) {}); // works
kendoGrid.bind("saveChanges", function (event) { console.log("This event is not fired!"); });
kendoGrid.bind("save", function (event) { }); // works
}
I've already spent a lot of time for finding the solution on my own without success. I will appreciate any help.
EDIT:
I have found what the problem was. Documentation says:
saveChanges event is fired when the user clicks the "save" command
button.
But when the popup shows the command with label "Save" is of type "update". That is why it does not work in edit mode. It works in toolbar only. It's not obvious at first and the documention don't say too much so be aware of that.
Without seeing the code I can't be sure. The event will not fire without you doing any changes I believe. Nice example which works for me is here. If you dealing with the actual dataItem edit not via the grid features, make sure you mark the item as "dirty". Ideally post your code as JsFiddle or JSBin.

Codemirror autocomplete addon event binding

Does anyone know how to bind "shown", "select", and "close" event to the completion object of show hint addon of codemirror? The reason I want to bind those event because I want to auto position the completion list. somehow, the list is off the window when the cursor is at really bottom of the page. but when I looked at the completion demo on the codemirror site. it does not have this issue and it is auto positioned. please help, thanks
Here is the document from codemirror site. it is not really clear that how it works. and there is no example or demo like jQuery doc.
The following events will be fired on the completions object during completion:
"shown" ()
Fired when the pop-up is shown.
"select" (completion, Element)
Fired when a completion is selected. Passed the completion value (string or object) and the DOM node that represents it in the menu.
"close" ()
Fired when the completion is finished.
This addon depends styles from addon/hint/show-hint.css. Check out the demo for an example.
ok, I have solved the problem myself by reading, comparing and debuging CodeMirror Source. and I think it is a mistake of CodeMirror. Basically, there is a line in the show-hint.js of download version which is different in the demo linked file.
You need to move the code below the line 169 and above the "var box" initialization. so that the "var box" can get the correct number after calling getBoundingClientRect(). Hopefully they can fix this problem soon than later.
(options.container || document.body).appendChild(hints);
I am not sure to understand your answer but I had the same problem. The "pick" signal (and other completion signals) seem to be emitted against the "data" and not the "editor" object.
Here is a simple way to subscribe to the "pick" event for example:
var completion = cm.state.completionActive;
console.log('handling the completion object:', completion);
var pick = completion.pick;
completion.pick = function (data, i) {
var completion = data.list[i];
console.log('picked', data, completion);
pick.apply(this, arguments);
}

Categories

Resources