I've a registration form validated with jquery.validate plugin.
Now, if the form its not valid, i want to put the result of validate in a bootstrap popover, but really, i don't have idea how i can do this.
Some help?
Checkout this: https://github.com/mingliangfeng/jquery.validate.bootstrap.popover
it is a plugin integrating jQuery validate and bootstrap popover, you may get some idea there.
The jQuery.validate plugin has a method called errorPlacement.
This takes 2 arguments:
error: the error message created by the validator on that element.
element: the element being validated.
The Validator sends the error/valid message here and you can handle all the placement logic in there. What I tend to do is put all that in .setDefaults before initialising the validator.
Example:
jQuery.validator.setDefaults({
ignore: "",
errorPlacement: function (error, element){
// Insert error messgae placement logic here
}
});
For showing and hiding tooltips for your errors, you'd need to use the errorPlacement and success callback functions.
Since you've shown no code of your own, here is a similar setup using the Tooltipster plugin, just to give you an idea about how to use these callback functions. Adjust as needed for Bootstrap popovers or whatever other tooltip plugin you may use.
$(document).ready(function () {
$('#myform').validate({
// rules and options here,
errorPlacement: function (error, element) {
// construct tooltip with message as per plugin method
$(element).tooltipster('update', $(error).text());
// show tooltip as per plugin method
$(element).tooltipster('show');
},
success: function (label, element) {
// hide tooltip as per plugin method
$(element).tooltipster('hide');
}
});
});
DEMO: http://jsfiddle.net/kyK4G/
Reference: https://stackoverflow.com/a/14741689/594235
Documentation: http://jqueryvalidation.org/validate
Related
I have a jquery function which calls a java method as defined below.
JSObject window = (JSObject) webEngine.executeScript("window");
window.setMember("clickController", new RecordProcessor());
executejQuery( webEngine, new String(Files.readAllBytes(Paths.get("record.js"))));
webEngine is a JavaFX web engine used to load some website.
RecordProcessor is as below:
public class RecordProcessor {
public void process(Object object, String returnValue, String action) {
System.out.println(action);
}
}
Now in my record.js, I have a jquery function like this:
$(document).ready(function(){
$('*').click(function(event) {
clickController.process(event.target, "someString", "click");
});
}
clickController is the handle used to access the process method of RecordProcessor.
The problem is, when I click once on an element in the webpage, the process method is getting called multiple times. I have no idea why. Can anyone please explain what is going on? Also, a possible solution?
Here, for example, "click" is getting printed in the console many times, and it is not in constant number. Each time I execute, it prints different number of times.
The problem is this line:
$('*').click(function(event) { ...
The * is telling jQuery to bind the 'click' to every element on the page. The DOM is hierarchical, and the event will propagate by default to all the elements up the DOM.
Have you considered binding to document instead?
$(document).click(function(event) { ...
I'm writing an eclipse plugin for JOII but got stuck on modifying the outline in a JavaScript editor.
I have a ContentAssistant that provides me with a list of ICompletionProposal and got the IJavaCompletionProposalComputer functioning perfectly, giving me nice code completions as I type. There is, however, no outline for it (besides the default javascript stuff).
So the question is: How do I hook the ContentAssistant into something that alters/updates the outline view?
Example code I'm parsing with the plugin:
var SomeClass = Class({
foo: function() {},
bar: function() {}
});
In the outline, "SomeClass" is shown as: SomeClass : Any, but I'd like it to display itself as an actual class with the members.
I've been searching all day (litterally) for an example on this, but no luck..
Thanks in advance!!
I'm a java developer. I use SWT and JFace databinding in most projects. Recently, I've been task to work on a different kind of project involving PHP. I need to develop a web application using PHP on server side and JavaScript on client side. So far, I'm strutting with jQuery to do all the work. jQuery is nice, but not nice enough to provide all the plumbing required to build the web interface quickly.
In desktop application, JFace databinding provide all the features to bind widgets, form, labels to the model allowing you to sync the content of a form to an object, validate the content of the form and provide feedback if the content is ok or not.
e.g.: For a text field, you may bind the text value to the property of an object. Add a validation to check if the text value is empty. When empty, show a tool tips asking the user to enter a value and disable the submit button.
So I'm aksing you, is there anything similar to JFace Databinding for JavaScript ?
http://visualstudiomagazine.com/articles/2012/02/01/2-great-javascript-data-binding-libraries.aspx
http://uberpwn.wordpress.com/2010/10/10/databinding-js-objects-into-html-forms-with-jquery-datalink-and-jquery-tmpl/
http://blogs.claritycon.com/blog/2011/02/mvvm-databinding-javascript-with-knockout-html5-boilerplate/
Right now the modern components that support databinding are angular, aurelia and react (sort of... +redux that is about to be dead).
jQuery doesn't provide nice databinding implementation. It needs to manually wire up all prop changes. Probably implement some Observer/Subscriber approach.
Or use some component for databinding tasks that provides enough convenient databinding definition commands. I did it with databindjs. e.g.
// Lets assume that there is just simple form (target)
var simpleForm = {
input: $('.simple .input-value'),
output: $('.simple .output-value')
};
// And here is the simple model object (source)
var model = {
text: 'initial value'
};
// Lets set two directional binding between [input] <-> [text]
var simpleBinding = bindTo(simpleForm, () => model, {
'input.val': 'text', // bind to user input
'output.text': 'text' // simple region that will react on user input
});
// This command will sync values from source to target (from model to view)
updateLayout(simpleBinding);
subscribeToChange(simpleBinding, () => {
$('.simple .console').html(JSON.stringify(model));
});
// Just initialize console from default model state
$('.simple .console').html(JSON.stringify(model));
The full solution here
I'm using SmartGWT 2.5 with Java & Mozilla FF 3.6.x.
I want to open pickList of ComboboxItem or SelectItem manually that means programatically. Is it possible? It's OK if I need to use JavaScript to achieve this. Any hint or solution is appreciated.
I finally got the answer. Posting it here might be useful to others. I've used
comboxItem.showPicker();
to achieve manual opening of picklist of ComboboxItem.
In SmartGWT 2.4 (I didn't check newer versions), the showPicker() method of SelectItem does only show an empty div, not the pick list of the select item. (It does work for the ComboBoxItem, as mentioned by RAS' answer).
Some digging into the underlying SmartClient code showed that on the JavaScript side, there is a showPickList() method which is called when the icon is clicked (or on some other events), but this is not exposed by the Java class.
So I used a piece of JSNI (modified from the source code of SelectItem.showPicker) to call this method:
public static native void showPickList(SelectItem item) /*-{
var jsItem = item.#com.smartgwt.client.core.DataClass::getJsObj()();
if(jsItem.showPickList) {
jsItem.showPickList();
}
}-*/
Calling showPickList(item) for any such pick list now opens the picker.
I'm currently building a SmartGWT-based web application (using the Portlet Layout). So I have several "Portlet", which basically extend GWT Window with different content. Now I want a Portlet to display Dygraphs. So I've created an RPC Service implementation which returns a JSON String (based on a DataTable object).
Since I cannot directly serialize a DataTable object I use
String json = JsonRenderer.renderDataTable(data, true, true).toString();
where "data" is of type DataTable.
Now this String gets correctly passed to the client side where I want to create the Dygraph. In this thread , someone suggested to use
public static native DataTable toDataTable(String json)
/-{ return new $wnd.google.visualization.DataTable(eval("(" + json + ")")); }-/;
If I use this in my GWT client code, i get an error saying
com.google.gwt.core.client.JavaScriptException: (TypeError): $wnd.google.visualization is undefined
Do i miss some "import" of the visualization API? Where do i have to instantiate it?
Or is there another way to get the JSON datastring into the Dygraph? I can't find any examples...
Thank you for any hint!
I assume you have included the visualization.jar and the visualization namespace in your module's XML
<inherits name="com.google.gwt.visualization.Visualization"/>
This will give you the Classes. You probably have done this otherwise you would have gotten a compiler error.
However you also have to include the actual visualization javascript file from the google servers (the visualization.jar is only a wrapper). This can be done in two different ways:
1.) Include it in the host page:
<script type="text/javascript">
google.load("visualization", "1", {'packages' : ["corechart"] });
</script>
or
2.) Load it dynamically where you need it:
VisualizationUtils.loadVisualizationApi(onLoadCallback, MotionChart.PACKAGE);
see http://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=VisualizationGettingStarted
Btw. I have forked the Dygraphs Project and changed the GWT wrapper to more like the other visualization wrappers. You can check it out here: https://github.com/timeu/dygraphs
Edit: I have a new GWT wrapper for dygraphs that uses the GWT 2.8's new JsInterop: https://github.com/timeu/dygraphs-gwt
Note: I changed some behaviour in dygraphs and added some features which weren't available in the upstream code.