Hi , i found these two ways for creating Button in DOJO Framework
<input id="cb" dojotype="dijit.form.Button" name="developer" type="Button" />
<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button>
Please tell me if there is any difference between these two ways of creating buttons in DOJO ??
From Dojo's dijit.form.Button documentation, the difference is in the html tag underlying dojo's widget. Here <button> vs. <input type="button" />. Which to use? there is an interesting discussion about html button vs html input with type=button.
The main difference is that the second choice lets you write html content between tags.
Related
I have a list of radio buttons that are loading dynamically,
I've already searched in a couple of blogs and similar questions like Integrate iCheck plugin with knockout js
My problem is that these examples are not adding the name of the inputs dynamically using also knockout.
Here is my code of the input
<input type="radio" data-bind="name:$parentContext.$data.id, value:value,iCheckRadio: radioCheckedValue,click:activate" />
Any advice, please.
On a form, I have a typical opt-in text checkbox but also have a link in that label. That link doesn't go anywhere but rather triggers a Bootstrap 3 Popover for additional detail.
It works, however clicking the popover link also unchecks the checkmark. Saw other questions on SO and solutions but they were for normal links and didn't apply to a javascript link link like this. Any thoughts?
The of course first thing one would think of is to have the link outside the label, but then the text won't wrap with the preceding text and will always have to appear beneath the disclaimer text which is not desired.
<div class="checkbox">
<label>
<input class="optin" type="checkbox" checked value="">My disclaimer text here. <a type="button" data-toggle="popover" title="Popover Title Here" data-content="Popover body text here">My Link</a>.
</label>
</div>
Assuming I need to integrate stop propagation somehow but can't seem to determine how to integrate in this scenario.
I want to create a button with Dojo that upon clicking, does dome database quering. I am using Dojo 1.9.1. My only partial success is with
<button data-dojo-Type="dijit/form/Button" type="Button" onClick="FunctionCall()">Button Name</button>
(By partial success, I mean it made it to the function in the debugger, beyond that is a whole other can of worms)
I have tried the method described in dijit/form/Button reference guide via the declarative example, but the button does nothing except hang out and look pretty.
<button data-dojo-type="dijit/form/Button" type="button">Click me too!
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
FunctionCall();
</script>
</button>
I also tried the Hello World style guide from a dojo tutorial with no success.
<button data-dojo-type="dijit/form/Button" type="button">Click me too!
<script type="dojo/method" event="onClick">
FunctionCall();
</script>
</button>
Is my first method of calling a function using this dojo button consider correct/acceptable/proper? Or are one of the tutorial methods prefered?
Is my first method of calling a function using this dojo button consider correct/acceptable/proper?
Short answer, yes, but it might not be what you want to do moving forward, as it's not "the dojo way".
If you do want to use the dojo/method method, I believe you need to set parseOnLoad to true in your dojo config. See this working fiddle for an example.
To see how you can create a button in good dojo have a look here;-)
http://dojotoolkit.org/reference-guide/1.9/dijit/form/Button.html#dijit-form-button
There's discribed how to create a button declarativ or programmaticale.
Regards, Miriam
I have div in html
<div id="test"></div>
If I do
$('#test').html(' <form method="GET" action="whatever"> <input type="text"/> </form>')
In IE 10 I will get
<div id="test">
<input type="text">
</div>
In Firefox or IE 8 I will get
<div id="test">
<form action="whatever" method="GET">
<input type="text">
</form>
Can you help me with IE10?
(jquery 1.7.2)
Around div test there is another form tag.
You stated in the end of your question that you are attempting to nest one form inside of another. Please have a look at the specification regarding the content model for form elements:
4.10.3 The form element
Content model:
Flow content, but with no form element descendants.
It is invalid to nest form elements. This may be why Internet Explorer 10 is trying to protect you from invalid markup that may not work properly in all browsers. The latest version of Google Chrome appears to also remove invalid child forms.
If you need to submit one form from inside another, use the form attribute on buttons instead. This will tell them which form they are to submit, and not necessarily the form they are currently in.
4.10.18.3 Association of controls and formsA form-associated element is, by default, associated with its nearest ancestor form element (as described below), but may have a form attribute specified to override this.
Note: This feature allows authors to work around the lack of support for nested form elements.
So you could have the following:
<form id="one">
<!-- This button submits #two -->
<input type="submit" form="two">
</form>
<form id="two">
<!-- This button submits #one -->
<input type="submit" form="one">
</form>
Try using .html() to append the the form with HTML functionality and after that use .append() to push every element in the form, so you have something like:
$('#test').html('<form method="GET" action="whatever"></form>');
$('form [action="whatever"]').append('<input type="text"/>'); // Note for selector will be better to use ID for the form
I'm wondering if there is an alternative for dijit.form.DropDownButton when it comes to the usage of TooltipDialog. On dojo guide reference it says "TooltipDialog can only be opened by other widget, usually DropDownButton", but I don't want that.
What I really want, and maybe a lot of people, is declarative way to call the dialog clicking on an image/link/or whatever, not only buttons. It's something like the Tooltip widget does with connectId.
See a sample what I am looking for:
<div dojoType="MyWidget">
<img src="test.png" /><!-- this image will be clickable to open dialog -->
<div dojoType="dijit.TooltipDialog">Text here</div>
</div>
Any thoughts?
Thanks!
You could extend the dijit.form.DropDownButton and provide a html template that is just the image.