I am unable to preview my sample mobile page in Firefox on Android which has been developed using notes 9. Seems Dojo 1.8 not compatible with Mozilla in Android. I did the same logic using Dojo 1.8.3. It works fine in iPad and Blackberry, but not with Mozilla in Android. its work well in native browser and chrome in Android. Even its not working with Chrome desktop browser with Android user agent
Does anyone face the same issue?
How can I resolve the issue?
To reproduce the issue. Open the following URL and change user agent to Android and check.
Same thing works well both chrome with android UA and Firefox in android Tab when upgrade Dojo version to 1.9. But i need to get work with Dojo 1.8.1 since new Domino 9 have Dojo 1.8
Click here for the demo: Dojo 1.8 demo
The JavaScript:
dojo.require('dojox.mobile.parser')
dojo.require('dojox.mobile.deviceTheme')
dojo.require('dojox.mobile')
dojo.require('dojox.mobile.FixedSplitter')
dojo.require('dojox.mobile.ScrollableView')
dojo.ready(
function()
{
dojox.mobile.parser.parse()
}
)
The HTML:
<div dojoType="dojox.mobile.FixedSplitter">
<div dojoType="dojox.mobile.Container"
id="landscape" style="width:200px;border-right:1px solid black">
<h1 dojoType="dojox.mobile.Heading" fixed="top"
class="mblHeadingLeft"></h1>
<div id="mainMenu" dojoType="dojox.mobile.ScrollableView"
selected="true">
<ul dojoType="dojox.mobile.EdgeToEdgeList"
transition="slide" stateful="true">
<li dojoType="dojox.mobile.ListItem" moveTo="Contact" label="Contact" selected="true"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="AccountInfo" label="Account Info"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="ContactInfo" label="Contact Info"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="Social" label="Social"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="PersonalInfo" label="Personal Info"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="PersonalInfo" label="Comments"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="PersonalInfo" label="Additional"></li>
</ul>
</div>
</div>
<div dojoType="dojox.mobile.Container">
<h1 dojoType="dojox.mobile.Heading" fixed="top" label="Contact" class="mblHeadingRight">
<span dojoType='dojox.mobile.ToolBarButton'>Navigation</span>
<span dojoType='dojox.mobile.ToolBarButton' style="float:left" > Back </span>
<span dojoType='dojox.mobile.ToolBarButton'> HI </span>
<span dojoType='dojox.mobile.ToolBarButton'>Back </span>
</h1>
<div id="fullFrame">
<div id="Contact" dojoType="dojox.mobile.ScrollableView"
selected="true">
Contact
</div>
<div id="AccountInfo"
dojoType="dojox.mobile.ScrollableView"
selected="false">
Account Info
</div>
<div id="ContactInfo"
dojoType="dojox.mobile.ScrollableView"
selected="false">
Contact Info
</div>
<div id="Social" dojoType="dojox.mobile.ScrollableView"
selected="false">
Social
</div>
<div id="PersonalInfo"
dojoType="dojox.mobile.ScrollableView"
selected="false">
Personal Info
</div>
<div id="Comments"
dojoType="dojox.mobile.ScrollableView"
selected="false">
</div>
<div id="Additional"
dojoType="dojox.mobile.ScrollableView"
selected="false">
</div>
</div>
<div id="PopUpPanels">
</div>
</div>
</div>
A few pointers:
Send your code through a Validator (looks OK
Make sure you selected HTML5 as property in the XSP properties
Be nice and put ; at the end of your lines in JavaScript (I once spend 2h debugging since one browser was OK without and the other wasn't)
make sure you use the XPage properties and not passthu HTML for your dojo.require
Related
I'm trying to load dynamic images here. My api provides me only with the filename. I combine it with the path (which is the public path of nodejs), then I require it from vuejs to show the image.
It all works fine in the development but when it comes to production build it fails and says "Cannot find the module".
I've spent tons of hours to this and still cannot find an answer.
Edit - I noticed after the production build earlier images I saved from development mode is also displayed in production build.but If I try save a new image from a production build it wouldnt work.My URL is somehow converted to point the public/img folder in vue from development mode.
in HTML
<div class="section-1" v-for="(cardinfo,index) in cardinfos" style="cursor:pointer" :key="index" #mouseover="moment(cardinfo)">
<div class="img-wrap" >
<a #click="deleteAd(cardinfo)">
<mdb-icon v-if="data.myads" icon="trash-alt" class="close red-text" size="lg" />
</a>
<img class="img-fluid ad-image" :src="getImgUrl(cardinfo.images[0])" alt="ad" v-on:click="navigateToAd(cardinfo)" />
</div>
<div class="wrapper" v-on:click="navigateToAd(cardinfo)">
<mdb-card-title>{{cardinfo.subject}}</mdb-card-title>
<hr class="mb-3" />
<div class="venue">
<strong>Venue:</strong>
<p>{{cardinfo.venue}}</p>
</div>
<div class="contact">
<strong>Contact:</strong>
<p>{{cardinfo.contact}}</p>
</div>
<div class="Conducted-By" >
<p title="Click to visit">{{cardinfo.lecturer}}</p>
</div>
</div>
<div class="info-footer">
<div class="info">
<div class="name">{{time}}</div>
</div>
</div>
</div>
in Script
getImgUrl(pic) {
return require("../../../tuition/public/images/" + pic);
}
Error
vue.runtime.esm.js:1888 Error: Cannot find module './marques-brownlee-wallpaper.jpg-1588649676704.png'
at n (.*$:142)
at s (.*$:137)
at o.getImgUrl (Card.vue:107)
at Card.vue?852f:1
at o.jt [as _l] (vue.runtime.esm.js:2630)
at o.B (Card.vue?852f:1)
at o.e._render (vue.runtime.esm.js:3548)
at o.a (vue.runtime.esm.js:4066)
at na.get (vue.runtime.esm.js:4479)
at na.run (vue.runtime.esm.js:4554)```
Using Odoo 11 with wkhtmltopdf verion 0.12.1.3
All the default headers are not on any of the PDF reports I print, even when I try to preview the document templates in general settings.
I still have the footers though.
Furthermore the reports are very plain now, like the table-striped that has become a white plain column, or "row" that doesn't show the elements inside in a row but rather one under the other.
Edit :
To illustrate my problem here is what happen when I chose the Standard template in General Settings and I try to Preview the document.
There is what happends
What's strange is that I didn't touch - I don't think so - this header in any way (even though I've done some custom reports but unrelated).
Here is the code of web.external_layout_standard:
<?xml version="1.0"?>
<t t-name="web.external_layout_standard">
<div class="header">
<div class="row">
<div class="col-xs-3 mb4">
<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % to_text(company.logo)" style="max-height: 45px;"/>
</div>
<div class="col-xs-9 text-right" style="margin-top:22px;" t-field="company.report_header" name="moto"/>
</div>
<div t-if="company.logo or company.report_header" class="row zero_min_height">
<div class="col-xs-12">
<div style="border-bottom: 1px solid black;"/>
</div>
</div>
<div class="row">
<div class="col-xs-6" name="company_address">
<span t-field="company.partner_id" t-field-options="{"widget": "contact", "fields": ["address", "name"], "no_marker": true}" style="border-bottom: 1px solid black; display:inline-block;"/>
</div>
</div>
</div>
<div class="article o_report_layout_standard">
<t t-raw="0"/>
</div>
<div class="footer">
<div class="text-center" style="border-top: 1px solid black;">
<ul class="list-inline mb4">
<li t-if="company.phone">Phone: <span t-field="company.phone"/></li>
<li t-if="company.email">Email: <span t-field="company.email"/></li>
<li t-if="company.website">Web: <span t-field="company.website"/></li>
<li t-if="company.vat"><t t-esc="company.country_id.vat_label or 'TIN'"/>: <span t-field="company.vat"/></li>
</ul>
<div name="financial_infos">
<span t-field="company.report_footer"/>
</div>
<div class="text-muted">
Page: <span class="page"/> / <span class="topage"/>
</div>
</div>
</div>
</t>
EDIT temporary SOLUTION
It might have been a cache problem since we were several people working on the same admin account at the same time.
Thus I copied the database. Checked it worked well in my new database (eureka!). Erased the old one. And changed the name of the copy by the old name.
BUT! at some point it keeps despairing again. I'm doing qweb changes in custom reports so I don't touch the headers but maybe it's connected...
It seems that your pdf processor (wkthmltopdf) is not finding the proper CSS to form the reports. I solved this issue in Odoo 11 with the following steps:
Create a new system parameter report.url
For this go to Settings -> Parameters -> System and check if the parameter report.url exists. If not create it.
Set the value of report.url to http://127.0.0.1:8069 or http://0.0.0.0:8069
This is by the way the approach suggested by CZoellner. I have learnt more insight from the discussion on headers and CSS in reports at Odoo Help.
Here is the scenario, I have multiple tiles on home page. when a user logins in for the first time some of them need to be disabled. Same i am trying to test using selenium.
To disable the div i am using ng-class by which i am applying .disableDiv class on the div which has below css
.disableDiv {
pointer-events: none;
opacity: 0.4; }
When i target it using .isEnabled() but it is showing true even if the disable class is applied on it.
Please suggest how should i target the disabled elements.
below as you see isNewUser is ng-class which applies .disableDiv on the element which makes is disabled for the end user.
Thanks in advance
HTML
<div class="col-md-6 col-sm-12 tile-box-1" id="div-importcontent" ng-class="isNewUser">
<div class="tile-box-2">
<div class="col-md-2 col-sm-2 col-xs-3 tile-box icon-box">
<!-- icon -->
<a class="d-icon-download icon" ui-sref="importcontent" id="a-importcontent"></a>
</div>
<div class="col-md-10 col-sm-9 col-xs-8 tile-box desc-box">
<h4 class="heading" ui-sref="importcontent" id="h4-importcontent">Import content</h4>
<!-- <a class="d-icon-info_circle icon-info"></a> -->
<span class="desc" ui-sref="importcontent" id="span-importcontent">Import installed applications reporting content into BMC Remedy Smart Reporting
</span>
</div>
</div>
</div>
I am developing an Angular 4 application using ngx-bootstrap modals heavily. I am currently using the template + modalService way of opening up modals. During a click event, this line of code is called:
#ViewChild() worklistTemplate;
// ...
this.modalRef = this.modalService.show(this.worklistTemplate, this.config);
And the worklist template looks like this:
<ng-template #worklistTemplate>
<app-action-view
[leftButtons]="leftButtons"
[labelHeader]="modalHeader"
[labelIcon]="modalIcon"
[modalRef]="modalRef">
<div class="row modal-info-panel">
<div class="col-xs-4 modal-user-info">
<fa name="mars" class="gender-icon"></fa>
<div class="field-panel">
<input type="text"
[ngModel]="rowInfo.lastName"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
<input type="text"
[ngModel]="rowInfo.firstName"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
<div>
<label for="modal-mrn">MRN --</label>
<input id="modal-mrn" type="text"
[ngModel]="rowInfo.mrn"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
</div>
<div>
<label for="modal-dob">DOB --</label>
<input id="modal-dob" type="text"
[ngModel]="rowInfo.birthDate"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
</div>
<div class="edit-panel">
<fa *ngIf=modalFieldsEditable class="worklist-edit-buttons green-hover link" name="floppy-o" tooltip="Save" (click)=saveChanges()></fa>
<fa *ngIf=modalFieldsEditable class="worklist-edit-buttons red-hover link" name="times" tooltip="Cancel" (click)=toggleModalFields()></fa>
</div>
</div>
</div>
<div class="col-xs-8 modal-id-info">
Associated ID
<div class="full-width">
<div class="row" *ngFor="let i of rowInfo.associatedIDs">
<div class="col-xs-6 cell">{{i.id}}</div><div class="col-xs-6 cell">{{i.source}}</div>
</div>
</div>
</div>
</div>
<div class="row" id="modal-table">
<app-table-view
[columns]="objDetailsCols"
[tableData]="objDetailsData"
[expandTemplate]="rowImageContainer"
[expandColStyle]="expandColStyle">
</app-table-view>
</div>
<div *ngIf="resolvePanelVisible" class="resolve-panel"
[#slideRight]>
<div class="resolve-label">
<fa class="lt-icon" name="wrench"></fa>
Resolve QA Issue
</div>
<div class="resolve-body">
Hello, World!
</div>
<div class="resolve-footer">
<a>Validate</a>
<a>Resolve</a>
<a>Reload</a>
<a (click)="toggleResolvePanel()">Close</a>
</div>
</div>
</app-action-view>
</ng-template>
The modal can be closed by clicking outside of the modal boundaries or there is a button inside the ActionViewComponent that calls modalRef.hide().
Memory usage increases drastically as more and more modals are opened. In fact, if I open the modal around 5 times, the application becomes sluggish and almost unusable. This is especially apparent if there are many rows in our TableViewComponent.
Is there a problem with the way I am using the modals, or is this an issue related to ngx-bootstrap modals? OR, is the issue related to the browser and unavoidable? I am developing on Chrome 62 right now.
I have verified that onDestroy is never called on the TableViewComponent inside the modal. It is not even called if I navigate to a different page component, though another table (not in the template) does have onDestroy called when navigating from the page.
Any feedback is appreciated greatly- I have been stuck for way too long on this.
This is an issue of ngx-bootstrap, unfortunately. I created a pull request (https://github.com/valor-software/ngx-bootstrap/pull/3179) so this will be fixed as soon as my PR is merged and new version is released.
I am new to Bigcommerce and also to Handlebars. I am currently building a website according to a design and I am using the Merchant Stencil theme.
Here is a picture of the homepage structure I need
For the moment, I hardcoded the 3 sections in the home.html template file, but I want to bring the product information (url, name, description) dynamically for each product based on it's ID .
The store only sells 3 types of products At the moment, I have a featured products section with the all the 3 products set as featured. This is working fine. The second part is that I want to access a Product Object or Product Card object (documentation links added) and I don't know how to do it. They don't have code examples and I really can't find my way around it. Any help on how can I use these objects would be much appreciated.
I have even asked the Bigcommerce support, and they sent me here. The support people there have no clue about development on their platform, so they sent me here.
Cheers!
Here is the code in my home.html file.
{{#if products.featured}}
<section class="products-featured section">
<h4 class="section-title">{{lang 'home.featured_products'}}</h4>
<div class="wrapper">
{{#each products.featured}}
{{> components/products/product-grid-item
quick_shop=../theme_settings.quick_shop
}}
{{/each}}
</div>
</section>
{{/if}}
<section id="gg-one" class="glue-section">
<div class="container">
<div class="text-col">
<h2 class="section-title">Grizzly One</h2>
<p class="caption-content">North America's first liquid polyurethane glue - a high-tech adhesive widely used by European woodworks and craftsmen for decades.</p>
<ul class="glue-feats">
<li>Ideal for proffessional, commercial, and industrial woodworking needs.</li>
<li>Even bonds to oily and exotic woods!</li>
</ul>
<div class="buttons">
</div>
</div>
<div class="img-col">
</div>
</div>
</section>
<section id="gg-structan" class="glue-section">
<div class="container">
<div class="img-col">
</div>
<div class="text-col">
<h2 class="section-title">Grizzly Structan</h2>
<p class="caption-content">This heavy-bodied, cartridge-loaded
polyurethane adhesive is stronger than liquid polyurethane
glues.</p>
<ul class="glue-feats">
<li>Perfect for wood, stone, tile, metal, and glass - dries to a tough elastic texture.</li>
<li>Industrial strength - ideal for professional and commercial applications.</li>
</ul>
<div class="buttons">
</div>
</div>
</div>
</section>
<section id="gg-xpress" class="glue-section">
<div class="container">
<div class="text-col">
<h2 class="section-title">Grizzly Xpress</h2>
<p class="caption-content">All the srength and body of a semi-gel adhesive<br> with a quick setting and curing time.</p>
<ul class="glue-feats">
<li>The first and only semi-gel adhesive available in North America!</li>
<li>Quick, professional-strength bond for wood, stone, tile, metal and glass.</li>
</ul>
<div class="buttons">
</div>
</div>
<div class="img-col">
<div class="inner">
<img src="https://cdn3.bigcommerce.com/s-jgnuwblrjb/product_images/uploaded_images/grizzly-xpress-home.png">
</div>
</div>
</div>
</section>
Create a component for the dynamic sections below the featured section. Then do
{{#each products.featured}}
{{> components/products/your-new-component }}
{{/each}}
Inside your component, you will get product object and you can get the data by simply {{product.id}} or {{product.title}}