I have a dijit that looks fine as far as I can tell, but it is raising Uncaught Error: Invalid template every time. I have not been able to figure out why. All variables (e.g. ${variableName} are defined in the widget correctly.
Here is the widget:
<div class="${classPrefix}-wrapper">
<div class="${classPrefix} flair" dojoAttachPoint="flairNode"></div>
<div class="${classPrefix}-count hidden" dojoAttachPoint="countWrapperNode">
<div class="count" dojoAttachPoint="countNode">0</div>
</div>
<div class="${classPrefix} ${secondaryClass} action hidden" dojoAttachPoint="secondaryClickNode" dojoAttachEvent="onclick:_onSecondaryClick">
<div class="${classPrefix}-inner"></div>
<div class="${classPrefix}-icon"></div>
</div>
<div class="${classPrefix} ${primaryClass} action" dojoAttachPoint="primaryClickNode" dojoAttachEvent="onclick:_onPrimaryClick">
<div class="${classPrefix}-inner"></div>
<div class="${classPrefix}-icon"></div>
</div>
<div class="${classPrefix}-message hidden" dojoAttachPoint="messageNode"></div>
</div>
<div class="${actionPromptNodeClass}" dojoAttachPoint="actionPromptMessageNode">
<span dojoAttachPoint="actionPromptMessage">${actionPromptText}</span>
<span dojoAttachPoint="actionCompletedMessage" class="hidden">${actionCompletedText</span>
</div>
Found the answer to my question. It turns out that you can only have one root node in a Dijit. I missed this in the docs, but it is at the bottom of this tutorial:
Common Pitfalls
Be sure to only have one root node in your template
Don’t start or end your template with a comment because that means you technically have two nodes
Avoid a trailing </div> at the end of your template
There may be only one root element in the template. Wrap your template into <div></div> and it should work.
Related
I am using VS2022.
I am getting this error and I didn't think it was possible. :)
Anyone knows what could cause this? I tried to comment out the #RenderBody in my _Layout.cshtml, but the error persists...very weird. Any help is greatly appreciated.
MainLayout.razor
#inherits LayoutComponentBase
<PageTitle>TestCoreRazor</PageTitle>
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
About
</div>
<article class="content px-4">
#Body
</article>
</main>
</div>
Index.razor
#page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, Developer!</h1>
<p>If you are reading this, you must be building a custom component.</p>
SOLVED!
I found another post that has the same symptom and the culprit is the exactly same:
check the page directive in ALL your page Razor component...you might have a duplicate
If you have recently added a component, check all the values that assigned to the properties of the components have been defined correctly.
I am using ngx clipboard to copy my value to clipboard which is working fine if I do that in the main page but I want that functionality in my modal which is neither throwing any error nor copying anything.
Angular-5.2.3
ngx-clipboard-9.1.3
Below is the code:
<span>
<img src="../../assets/img/copy-icon.png" ngxClipboard [cbContent]="myvalue" (click)="copyToClipboard()">
</span>
and my ts file:
copyToClipboard(){
console.log("copyToClipboard")
}
For all those who are getting this error below is the answer:
TLDR;
Make your own textarea to hold the value to copy and hook ngxClipboard to it.
Longer Explanation
I had a couple of issues with this plugin that seemed to happen a lot in Chrome (v64). I was getting intermittent successes.. most of the time the 'copy to clipboard' would fail to actually copy anything, and the 'success' callback would also be called. So it was the worst of both.. nothing in the logs, no copy, cbOnSuccess called. The above seemed exacerbated by large amounts of text. Safari seemed to work just fine. In Chrome, I noticed some messages in the console in the 'verbose' mode that were timeout kinds of errors.
Now I don't know the full story, but it seemed like the code in ngx-clipboard that was 'creating a text area' was showing me (in the debugger) a message like 'Uncaught SyntaxError: Unexpected end of input'.
I also use a Bootstrap modal but I'm not sure if that was really causing much of an issue. In the end, I was able to get everything going when I:
made my own
used the [ngxClipboard]="textAreaName" format
html template
<div class="modal fade" id="export-bundle-modal-{{bundleToExport.id}}" tabindex="-1" role="dialog"
aria-labelledby="modal-content modal-header title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" #exportBundleModalClose data-dismiss="modal">×</button>
<span id="title">Export {{bundleToExport.name}}</span>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<textarea class="form-control text-area" readonly="readonly"
rows="10" #bundleJson style="resize: none">{{bundleWithDependencies | json}}</textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit" data-dismiss="modal"
[disabled]="!taxonomiesLoaded || !componentTypesLoaded || !configurationsLoaded"
[ngxClipboard]="bundleJson" (cbOnSuccess)="copied()">
<small *ngIf="!(taxonomiesLoaded && componentTypesLoaded && configurationsLoaded)">
LOADING...
</small>
<small *ngIf="taxonomiesLoaded && componentTypesLoaded && configurationsLoaded">
COPY TO CLIPBOARD
</small>
</button>
</div>
</div>
</div>
</div>
Notice the button and how bundleJson is attached to the via the #bundleJson and the 'value' of the textarea is a pipe calculated value. Doing the calculation here (as opposed to when the 'copy to clipboard' was clicked also was necessary.. in essence, make sure the string in the textarea is correct before trying to send it to the clipboard.
We also use the bootstrap.js + jQuery integration instead of a native Angular bootstrap solution (don't ask), so notice that the data-dismiss="modal" is also attached to the button. When the button is clicked both the copied() function as well as the close of the modal happen.. there didn't seem to be any chaining/timing issues.
Add #container in modal div.
<div class="modal fade" id="addAddressSuccessModal" tabindex="-1" role="dialog" aria-hidden="true" #container>
And to copy =>
<div ngxClipboard [cbContent]="createdAddress" [container]="container" ><label class="fbold color-bluey-grey font-10 cursor-pointer">TAP TO COPY</label></div>
Condider the following snippet:
<template v-if="tryIsMobile" >
<div class='device device-mobile-portrait' :class="deviceClass">
<div class="device-scroller-container">
<div class='device-scroller'>
<img id='tryit-img-mobile' :src="srcUrlMobile" v-on:load="onImgLoad" v-on:error="onImgError"/>
</div>
</div>
</div>
</template>
<template v-else>
<div class='device device-tablet-landscape' :class="deviceClass" >
<div class="device-scroller-container">
<div class='device-scroller'>
<img id='tryit-img-tablet' :src="srcUrlTablet" v-on:load="onImgLoad" v-on:error="onImgError"/>
</div>
</div>
</div>
</template>
This code conditionally renders one of the two images. Some user action results in the actual shown image to be toggled.
What I'm seeing is the following: When toggling from say, tryit-img-mobile to tryit-img-tablet, the image loaded as part of tryit-img-mobile will get displayed with different dimensions instantly. However, during the time the image loads it's new source :src="srcUrlTablet", the image with src :src="srcUrlMobile" still displays.
This is probably due to Vue using the same img-tag for both the templates. How can I prevent Vue from doing this, and instead use seperate img-tags?
In cases such as this, Vue uses a special key attribute that tells it not to reuse the same element. Give each element this attribute with a unique value, and Vue will no longer reuse the same element:
<div v-if="tryIsMobile"
class="device device-mobile-portrait"
:class="deviceClass"
key="mobile"
>
...
</div>
<div v-else
class="device device-tablet-landscape"
:class="deviceClass"
key="tablet"
>
...
</div>
How to get Emmet codding to get html structure from this code:
.header>.logo+.lang.+.menu+.container+.row>+.col-md-6+.col-md-6
I need to get container element outside of header element.
Use grouping or climb-up syntax
Grouping: ()
(.header>.logo+.lang.+.menu)+.container+.row>+.col-md-6+.col-md-6
Climb-up: ^
.header>.logo+.lang.+.menu^.container+.row>+.col-md-6+.col-md-6
<div class="header">
<div class="logo"></div>
<div class="lang "></div>
<div class="menu"></div>
</div>
<div class="container"></div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
See Emmet Documentation: Abbreviation Syntax
Edit: Answer updated to include climb-up syntax alternative
I'm working on a project for Prestashop and I have the following file:
blocktopmenu.tpl
https://github.com/PrestaShop/PrestaShop/blob/master/modules/blocktopmenu/blocktopmenu.tpl
I need to know where is the end tag for "sf-contener clearfix" < / div >
Any idea?
Thks and sorry my english!
------ EDITED POST ------
i tried it, but no work for me :(((
I placed "exampleDiv" right here:
header.tpl
<div id="header_right" class="grid_6 omega">
{$HOOK_TOP}
<div id="exampleDiv"></div>
</div>
but i look this result in Firebug:
<div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="#"></a>
<div id="header_right" class="grid_6 omega">
<div id="topMenu_bg_up"></div>
<div class="sf-contener clearfix"></div>
**i wanna to play here :D**
</div>
<div id="minic_slider" class="theme-default"></div>
<div style="display:none;">
<div>
<script type="text/javascript">
<div id="exampleDiv"></div>
**but it work in this other place :(**
</div>
</div>
Here :
https://github.com/PrestaShop/PrestaShop/blob/master/themes/default/header.tpl#L84
The #header_right is closed in blocktopmenu.tpl and the topmenu is displayed under.
Edit : If you want to add content just after the topmenu, the best way is to create e module, hook it on toppage and position it just after the blocktopmenu.