Is there a "correct" way to create a button using Dojo 1.9.1? - dojo

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

Related

Is there a way to write a quick function with vue's #click?

I was wondering if it is possible to write something like below;
<buttton #click="function(){alert('Yoohooo')}"></button>
Without having to write a method in the Vue instance every time I want to use #click for something as small as that.
It is impossible because Vue trying to add more attributes to DOM and DOM's events in its way with custom attributes and its annotations, methods should be write in methods and so on. As you know HTML is displayed by browsers by tag name, Vue also does that by new rules, more syntax but basically it does not allow write javascript function as tag's attributes
You can use the window-plugin
https://www.npmjs.com/package/window-plugin
<button #click='$window.alert("You clicked a button.")'>Click Me</button>
<button #click='$window.console.log("A button was clicked.")'>Click Me</button>
<button #click='$window.open("https://www.quickchords.org/", "_blank"))'>Click Me</button>
<h1 :v-text='$document.title' />

How attributes like ` v-b-modal` and `v-b-toggle` works? Where are they listened?

I want to add a custom attribute like these two and to trigger other events. But I can't find out how they work.
For example:
<b-button v-b-modal.modal-1>Launch demo modal</b-button>
// Generated html5 tag
<button type="button" class="btn btn-secondary">Launch demo modal</button>
There's no extra attributes used on the generated html5 target for reference and also no event listener registered explicitly.
What's happening behind the scene? How v-b-modal got used?
Check out the source code at https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/directives/modal/modal.js to see how they are implemented. They emit events on $root, which modal listens for.

Dojo Dropdownbutton/TooltipDialog alternative

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.

Different Ways of creating Buttons in DOJO Framework

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.

jquery jqmodal .load() issue

I have a modal window using jqmodal. I need a button within that modal to load a different page in the modal. I have this functioning in all browsers except safari.
JS
<script language="javascript">
function shipCalc() {
$('.jqmWindow').load("/ash/shop/shipping.php");
}
</script>
HTML
<form name="form9" id="form9" method="post">
Zip: <input type="text" size="5" name="zip">
<a href="#" id="submitbtn" onclick= "shipCalc();" >zip</a>
</form>
KEEP IN MIND! The class .jqmWindow is a modal window using the jqmodal jquery plugin. It is NOT just a div on a page. I am using the method .load() to change what has been loaded in the modal window after it has popped up. The html shown above is inside the page that is originally loaded in the modal. I am having trouble understanding why this works in all browsers besides safari. I posted earlier and got some responses that weren't quite addressing the real problem here, which is that I can not use the .load() method to load anything into my modal window in safari. (Ive stripped some non-important information regarding future modifications I will make to further make this suite the needs of the site, just to keep this nice and simple to understand...)
function shipCalc() needed to be on both the initial page AND the page that gets loaded into the modal for safari to load everything properly. All other browsers did not require that. All is working now, so I figured I would post my own answer in case anyone was ever searching for something similar!