I am facing following issue while working with dojo inline template:
I am creating the template in a html page by defining the template in between the following tags(It has mvc also integrated)
`<script id="createNewItem" type="text/template">
<div>
<div data-dojo-type='dijit/TitlePane' data-dojo-props='open:false'>
<div class='accordionRev'>
<input type="number" name="qty" placeholder="Quantity (required)" data-dojo-type="dojox.mobile.TextBox" class='quantity' data-dojo-props="value: at('rel:','quantity'), class:at('rel:', 'quantityErr')" onchange="cntrl.createQuoteFields(true, this, '{{lineNumber}}');" onkeypress="cntrl.quantityHandler.call(this, '{{lineNumber}}')" onpaste="cntrl.pastehandler.call(this)" tabindex=0/>
</div>
</div>
</div>
</script>'
I will be using this template in another page like this
`<ul id="rfqTitlePane" class="hide"
data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: at(cntrl.createQuoteList,'items').direction(at.from)"
data-mvc-child-type="dojox/mvc/Templated"
data-mvc-child-props="clickable: true, variableHeight: 'true',
indexAtStartup: this.indexAtStartup,
customTitle: at(this.target, 'title').direction(at.both), titlePaneDOM:at(this.target,'displayDetails').direction(at.from).transform({format:custom.helpers.RequestMarkup})">
<script type="dojox/mvc/InlineTemplate">
<li>
${titlePaneDOM}
</li>
</script>
</ul>`
I am getting "Unable to resolve constructor for: '"dojox.mobile.TextBox"'" error. I actually defined textbox before the template gets loaded. I am not sure where its going wrong
It appears that the question contains wrong markdown, so I'd recommend fixing that so that better answers can be provided. Meanwhile some things I can say are:
You may want to try importing dojox/mobile/TextBox module before running the template.
Recent releases of Dojo prefers AMD format in data-dojo-type e.g. data-dojo-typ="dojox/mobile/TextBox".
dojox/mvc/InlineTemplateMixin looks at <script type="dojox/mvc/InlineTemplate"> instead of <script type="text/template">.
Hope this helps.
Best, Akira
Related
In Laravel's bootcamp (blade), there are two different syntaxes used for calling route() in a blade view component:
<x-dropdown-link :href="route('chirps.edit', $chirp)">
{{ __('Edit') }}
</x-dropdown-link>
<form method="POST" action="{{ route('chirps.destroy', $chirp) }}">
#csrf
#method('delete')
<x-dropdown-link :href="route('chirps.destroy', $chirp)" onclick="event.preventDefault(); this.closest('form').submit();">
{{ __('Delete') }}
</x-dropdown-link>
My understanding from documentation is that {{ }} is just a shortcut for <?= ?>
and by adding a : to html attribute laravel renders those attributes in the template.
So I started testing variations to see what works and doesn't work. This is what I got:
:href="{{ route(...) }}" doesn't work
href="{{ route(...) }}" works
:action="route(...)" doesn't work
action="{{ route(...)}}" does work
So my understanding makes sense for 1, 2, and 4, but not 3:
What is going on here? Does laravel not have an :action attribute for forms for some reason? or is it due to POSTing rather than GETting? Or is my understanding of laravel's syntax flawed?
It seems putting the : before a laravel/blade component attribute is the way to pass a variable of that name/value into that component class' constructor (passing-data-to-components).
So :href sets __constructor($href) to the string {{route(...)}} in the <x-dropdown-links> class, which laravel/blade constructs when the component is called. Which explains why <form :action...> wouldn't work.
There is an <x-form> component in the extra blade-ui library, but interestingly even there it seems that the action attribute is set with action="" not :action="". So guessing there is an issue related to POSTing after all.
I am new to Vue.js and I am trying to solve the following issue.
I have a component which look as follows:
<template>
<div class="capture-photo">
<input id="chooseFile"
type="file"
accept="image/*"
capture="environment"
#change="onImageCaptured($event.target.name,
$event.target.files)">
<div v-show="imgURL">
<img v-bind:src="imgURL" style="width:200px">
<button id="sendImage" v-on:click.prevent="post">Send Image</button>
<div id="extractedLink">
<a id="extractedLinkButton" v-bind:href="urlLink">{{ urlLink }}</a>
</div>
</div>
and I am trying to run a test that would check that the link is clicked and redirects to the correct page (the urlLink is defines in the data element of my component. The testing in done using nightwatch and the test code looks like this:
'Redirect the extracted url to the actual website': function test(browser) {
const devServer = browser.globals.devServerURL;
browser
.url(devServer)
.waitForElementVisible('#app', 5000)
.click('input[id="chooseFile"]')
.setValue('input[type="file"]', require('path').resolve('http://www.coolture.pt/wp-content/uploads/2017/10/nos-alive-18-3.jpg'))
.click("#sendImage")
.assert.elementPresent('#extractedLink', 'http://nosalive.com')
.assert.elementPresent("#extractedLinkButton")
.click("#extractedLinkButton")
.assert.urlEquals('http://nosalive.com')
.end();
},`
when running the test, the error message that I receive is the following:
TEST FAILURE: 1 assertions failed, 35 passed. (38.623s)
✖ capturePhoto
- Redirect the extracted url to the actual website (2.8s)
Testing if the URL equals "http://nosalive.com". - expected "http://nosalive.com" but got: "http://localhost:8081/#/"`
where http://nosalive.com, being the urlLink value.
Any help would be greatly appreciated.
Thank you
N
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
I have a test jsp with:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript">
</script>
<script type="text/javascript">
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeSelector");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");
</script>
</head>
<body>
<div dojoType="TreeSelector" widgetId="treeSelector"></div>
<div dojoType="Tree" widgetId="treeWidget" selector="treeSelector"toggler="wipe">
<div dojoType="TreeNode" widgetId="1" title="First node" isFolder="false"></div>
<div dojoType="TreeNode" widgetId="2" title="Second node">
<div dojoType="TreeNode" widgetId="2.1" title="Second node First Child"></div>
<div dojoType="TreeNode" widgetId="2.2" title="Second node Second Child"></div>
</div>
<div dojoType="TreeNode" widgetId="3" title="Third node" isFolder="false"></div>
</div>
This will not work in any browser.
I thought this would be easy, it seems the dojo library is not being downloaded/found?
Do I need to do anything else?
Also, my IDE, JDeveloper, reports that the attribute "dojoType" is not defined on element div.
I have to say, this example looks like it is taken from a very old version of dojo, but you're trying to run it against Dojo 1.5. That most likely won't work. dojo.widget hasn't existed since...0.4, 0.9 maybe.
You may be right in your comment to the previous answer in that no parseOnLoad: true was necessary in the original example, but I'd also assure you that that example was not running any version of Dojo anywhere near what you're running it with.
Based on what you're looking at there, you may want to start somewhere like here: http://www.dojotoolkit.org/reference-guide/dijit/Tree.html
I'm not sure what the default behavior is when it's not present, but you probably need to define a djConfig with parseOnLoad set to true (or call the parser directly). See the following links for more information:
http://docs.dojocampus.org/djConfig
http://dojocampus.org/content/2008/03/08/the-dojo-parser/
Follow the:
Google AJAX Libraries API Dev Guide,
and the Google API Loader's Guide.
You need to:
register for an API key (or use a direct link as you did),
if not using a direct link but google.load, you need to defer the execution of your code using an onload callback.
Personally, I would just do something like:
within the <head> section of my.html:
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_API_KEY_GOES_HERE"></script>
<script type="text/javascript" src="my.js"></script>
in my.js:
google.load("dojo", "1.5", {
uncompressed: true
});
function OnLoad() {
/* do stuff here */
}
google.setOnLoadCallback(OnLoad);
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?