I am trying to use the combobox provided by Dijit inside of a custom-made widget. I have been using Dojo's tutorial on comboboxes to guide me.
When I implement a stand-alone webpage similar to their tutorial examples, everything worked fine; but when I ported the code into my custom-made widget, it just renders the combobox as a plain HTML text box.
Here's what my custom widget's template looks like:
<div class='customWidget'>
...
<div dojoAttachPoint="mainDiv" class="mainDiv">
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.txt"></div>
<input dojoType="dijit.form.ComboBox"
store="stateStore"
value="California"
searchAttr="name"
name="state2" />
<button dojoAttachEvent="onclick:chooseState">OK</button>
</div>
...
</div>
In the widget code, I require the combobox and read store:
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
I also tried putting these includes in a <script/> within the custom widget (similar to the way they do it in the tutorial), but it didn't work (in fact, it appears as if the script tag wasn't even evaluated, since I couldn't reference a function I declared inside of it!)
Do you have widgetsInTemplate in your widget declaration?
dojo.declare('my.widget.Cool',[ dijit._Widget, dijit._Templated ], {
widgetsInTemplate: true,
// rest of widget JS here
});
Here's an article about including other widgets in your template.
Have you tried adding:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse();
});
</script>
(from Dojocampus) to ensure Dojo is parsing the page? Are there any errors in your Javascript console? Is the page rendering any normal Dojo widgets?
Related
I'm using Bootstrap 4.5, and have several forms all using the exact same setup to call TinyMCE 5, but one form (the most complex of course) is not showing it. I can find nothing wrong, or anything different between the way the textarea control is created. The code to load TinyMCE is being loaded in a PHP program and is therefore identical in all cases. This is the code being streamed out:
<!-- Jquery -- required for interactive parts of bootstrap and other code to function -->
<script src="../../Awards/jscode/jquery.min.js"></script>
<!-- Bootstrap core JavaScript, popper.js required for tooltips and such -->
<script src="../../Awards/jscode/popper.min.js"></script>
<script src="../../Awards/jscode/bootstrap.js"></script>
<!-- TinyMCE -->
<script src="../../Awards/jscode/tinymce/tinymce.min.js"></script>
<script language="JavaScript">
// TinyMCE, set for all textarea controls, with specific toolbar items, no menubar, etc.:
tinymce.init(
{
selector: 'textarea',
menubar: false,
branding: false,
plugins: 'code lists',
toolbar: 'undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | code',
lists_indent_on_tab: true,
content_css: '<?php echo $Award_html_RootPath; ?>css/AwardList.css'
}); // end of TinyMCE code
</script>
This works for other forms with the same code being streamed out for each. I am stumped as to why this one form doesn't display TinyMCE. The textarea control in question is:
<div class="form-group">
<textarea name="Notes" id="Notes"
class="form-control"
style="height: 250px;"></textarea>
</div> <!-- / form-group -->
Thanks in advance for any suggestions that might point me to where the problem lies. There is a lot of JavaScript for this form but it all seems to work, it's just the TinyMCE code that doesn't want to load ... it displays as a standard textarea, no overlay for TinyMCE.
Okay, so now I feel really sheepish. I was outputting at the top of the page some styles before the header information was loaded properly, so TinyMCE wasn't seeing "standards" mode, which includes the first line of the HTML file needing to be:
<!DOCTYPE HTML>
Moved the script tags to below the code that streams the header into the page so that, among other things, the doctype tag above is the first line, and all is well. Sorry for wasting anyone's time on this.
I am using vue.js 2.0 and have a problem.
I have a custom component which is loaded with the page, but the element that uses the component isn't used until a button is pressed, at that point the HTML is loaded and added to the DOM in a slide panel (whose content is dynamic).
Edit: It might be usuful to know the slide panel is dynamicly created using the jquery-slidepanel plugin... meaning I can't put a a placeholer in it like this:
<div id="slidePanel">
<component v-bind:is="test-thing">
<DYNAMIC CONTENT>
</component>
</div>
My problem is the instead on the component rendering the new content correctly I just see the {{ someitem }} all over the place.
here is a jsFiddle demonstrating what I am talking about: jsfiddle example
I wrote a simple angular application in a learning purpose. However the controllers are working in my system but not in plunker. But, that is not my concern. My concern is I am unable to see the linked pages inside ng-view. They are rather opening as a new page replacing the home page. Secondly, the expressions are not reflecting their values. Kindly help me out. I have uploaded the codes in plunker.
Link to Plunker
<div ng-controller="RamFirstCtrl">{{name}}</div>
<div ng-include="'navbar-top.html'"></div>
<div style="border:1px solid green; position:relative;" ng-view></div>
Noticed couple thing:
http to https, there is error in console, it might be the reason it doesn't work in plunker
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
you have to use the url define in your router:
ng-href="aboutUS.html" to ng-href="#!/aboutUS"
.when("/aboutUS", {
templateUrl : "aboutUS.html"
})
<div>
<a ng-href="#!/aboutUS">
AboutUs
</a>
</div>
Note:#! will be added to url by angular router by default
Hi Any idea how I can load dojo-laced html file dynamically into contentpanes?
I am able to load non-dojo html into content pane using href.
When I loaded dojo-laced html file, I can see text in html tags but not text in dojo scripts. Where did I go wrong?
The scripts I put here are:-
widget.set('href','dojotext.html')
Another problem in jsfiddle is that pressing button 1 will not update, unlike in my environment.
and funny thing is that border container and comtent panes are not displayed, unlike in my environment too.
Here are my links in jsfiddle
- main page for testing loading
- dojo content to be loaded
Please advise. Thanks
Clement
First of all, your ContentPanes and BorderContainer are not being displayed because you're not parsing them.
In your code, you can run parser manually:
ready(function () {
parser.parse();
// ...
});
Regarding your first question, it seems that you didn't read the documentation:
<div id="foo" data-dojo-type="dijit/layout/ContentPane" href="/some/page.html">
<script type="dojo/method">
alert ('Hello World!');
</script>
</div>
Code from: ContentPane documentation
I'm new to Dojo world. I tried to create a custom dojo widget from scratch.The problem that I'm facing is the widget is not getting parsed. I see that postCreate method of that widget is not getting called. The widget JS file is being downloaded from the server.
Here are the steps what I followed.
Created a JavaScript file CustomWidget.js in test folder.
dojo.provide('test.CustomWidget');
dojo.require('dijit._Widget');
dojo.declare('test.CustomWidget', dijit._Widget, {
text: "Hello World",
postCreate: function() {
console.log(this.text+'text');
this.domNode.innerHTML=this.text;
}
});
In my jsp file,I imported test.CustomWidget using dojo.require.
<script type="text/javascript">
dojo.require('test.CustomWidget');
dojo.addOnLoad(function(){ dojo.parser.parse("addFavorites"); });
</script>
<div id='addFavorites' dojoType='test.CustomWidget'>
</div>
I can see that CustomWidget.js file is being downloaded, but I don't see the console statement being printed. Can someone plese help me?
Looks like you aren't instantiating the widget, do you have code like this somewhere?
<div dojoType="mindtree.CustomWidget">...</div>
Otherwise it's like declaring a class but never calling new.