Ionic net::ERR_FILE_NOT_FOUND in directive template - html

I have a problem with my directive template. When execute ionic run android and go to inspect the device (chrome://inspect), it throws Failed to load resource: net::ERR_FILE_NOT_FOUND. But if I write ionic serve, it works correctly. Also works fine if I write the directive code directly in the main html (recetas.html).
The code:
The directive (recetasCardDirective.js):
.directive('recetasCard', function(){
return {
restrict: 'E',
templateUrl: "/templates/recetas-card.html",
scope: {
titulo: '#',
img: '#'
}
}
});
The directive code (recetas-card.html):
<a class="list card estiloCard" href="#/tabs/recetas/{{titulo}}">
<!-- title card -->
<ion-item>{{titulo}}</ion-item>
<!-- img card -->
<div class="item item-image">
<img ng-src="data:image/png;base64,{{img}}" class="imgResponsive">
</div>
<ion-item class="item-icon-left">
<i class="icon ion-fork"></i>Ver Receta
</ion-item>
</a>
And where I call directive html (recetas.html):
<ion-view title="Recetas Xpress" id="pag-recetas">
<ion-content padding="true" class="has-header">
<div ng-repeat="port in portada">
<recetas-card titulo={{port.titulo}} img={{port.img}} ></recetas-card>
</div>
</ion-content>
</ion-view>
Finally, the config.xml file:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.recetasxpress299189" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>recetasXpress</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="you#example.com" href="http://example.com.com/">
Your Name Here
</author>
<content src="index.html"/>
<access origin="*"/>
<access origin="tel:*" launch-external="yes"/>
<allow-navigation href="*"/>
<allow-navigation href="http://*/*"/>
<allow-navigation href="https://*/*"/>
<allow-navigation href="data:*"/>
<allow-intent href="*"/>
<access origin="*"/>
<preference name="phonegap-version" value="3.7.0" />
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<platform name="ios">
<splash src="resources\ios\splash\Default-568h#2x~iphone.png" width="640" height="1136"/>
<splash src="resources\ios\splash\Default-667h.png" width="750" height="1334"/>
<splash src="resources\ios\splash\Default-736h.png" width="1242" height="2208"/>
<splash src="resources\ios\splash\Default-Landscape-736h.png" width="2208" height="1242"/>
<splash src="resources\ios\splash\Default-Landscape#2x~ipad.png" width="2048" height="1536"/>
<splash src="resources\ios\splash\Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="resources\ios\splash\Default-Portrait#2x~ipad.png" width="1536" height="2048"/>
<splash src="resources\ios\splash\Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="resources\ios\splash\Default#2x~iphone.png" width="640" height="960"/>
<splash src="resources\ios\splash\Default~iphone.png" width="320" height="480"/>
<icon src="resources\ios\icon\icon.png" width="57" height="57"/>
<icon src="resources\ios\icon\icon#2x.png" width="114" height="114"/>
<icon src="resources\ios\icon\icon-40.png" width="40" height="40"/>
<icon src="resources\ios\icon\icon-40#2x.png" width="80" height="80"/>
<icon src="resources\ios\icon\icon-40#3x.png" width="120" height="120"/>
<icon src="resources\ios\icon\icon-50.png" width="50" height="50"/>
<icon src="resources\ios\icon\icon-50#2x.png" width="100" height="100"/>
<icon src="resources\ios\icon\icon-60.png" width="60" height="60"/>
<icon src="resources\ios\icon\icon-60#2x.png" width="120" height="120"/>
<icon src="resources\ios\icon\icon-60#3x.png" width="180" height="180"/>
<icon src="resources\ios\icon\icon-72.png" width="72" height="72"/>
<icon src="resources\ios\icon\icon-72#2x.png" width="144" height="144"/>
<icon src="resources\ios\icon\icon-76.png" width="76" height="76"/>
<icon src="resources\ios\icon\icon-76#2x.png" width="152" height="152"/>
<icon src="resources\ios\icon\icon-83.5#2x.png" width="167" height="167"/>
<icon src="resources\ios\icon\icon-small.png" width="29" height="29"/>
<icon src="resources\ios\icon\icon-small#2x.png" width="58" height="58"/>
<icon src="resources\ios\icon\icon-small#3x.png" width="87" height="87"/>
</platform>
<platform name="android">
<splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources\android\splash\drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
<splash src="resources\android\splash\drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
<splash src="resources\android\splash\drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
<splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
<icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
</platform>
<icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
<allow-navigation href="http://192.168.1.42:8100"/>
</widget>
Don't know what can I do... Thanks in advance and Sorry for my bad english

Sorry for bothers... The problem was a simply bar in directive.js
The correction (templateUrl):
.directive('recetasCard', function(){
return {
restrict: 'E',
templateUrl: "templates/recetas-card.html",
scope: {
titulo: '#',
img: '#'
}
}
});
So stupid... Thanks.

Related

How to redirect react website into other website with image?

Hi guys so I'm trying to create some website using react-bootstrap and I wanted to redirect my user to another website/link when they click on some logo on my footer, How can I do that in react ? because I realize that tag will only redirect the path of our website.
Here's my code:
import { Container, Row, Col } from "react-bootstrap"
import '../CSS/Footer.css'
const Footer = () => {
return (
<Container fluid={true} className="p-0 footerContainer">
<Row>
<Col sm={12} lg={4} className="text-center footerright">
<h3>Follow Us</h3>
<hr style={{border:'2px solid', color:'#FFFFFF', width:'25.7%', margin: 'auto'}}></hr>
<img src="FBLogo.jpg"></img>
<img src="IGLogo.jpg"></img>
</Col>
</Row>
<Row>
<Col sm={12} lg={12} className="text-center">
<hr></hr>
<p>Copyright © 2014 <br></br>All Rights Reserved</p>
</Col>
</Row>
</Container>
)
}
export default Footer
Just like in normal HTML, You will wrap an image with a link tag:
<img src="FBLogo.jpg"/>
<img src="IGLogo.jpg"/>
Or using a workmap:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="stack_overflow" href="https://www.google.com/">
</map>

How to align the container to the right?

My current code renders like Picture 1, how can I get the output to render like Picture 2?
I tried to search the web but most of the results I have found show how to do this in css
Pic one,
Pic two,
<ext:Container id="Container1" runat="server" layout="HBoxLayout" width="2000" marginSpec="0 0 10 0" >
<Items>
<ext:Panel ID="panel_cms004_view" Title="Document Control Profile" runat="server" AutoScroll="true" Region="East" Height="180" Width="700" Split="true">
<Loader ID="cms004_view" runat="server" Url="../CMS/cms004_view.aspx" Mode="Frame" AutoLoad="true" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
<ext:Panel ID="panel_cms004d_audit" Title="Document Control Number - Audit" runat="server" AutoScroll="true" Region="East" Height="180" Width="428" Split="true">
<Loader ID="cms004d_audit" runat="server" Url="../CMS/cms004d_audit.aspx" Mode="Frame" AutoLoad="true" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container id="Container8" runat="server" layout="HBoxLayout" width="2000" marginSpec="0 0 0 0">
<Items>
<ext:Panel ID="docControlNum" Title="Document Control Number" runat="server" AutoScroll="true" Region="East" Height="265" Width="700" Split="true">
<Loader ID="cms004d_view" runat="server" Url="../CMS/cms004d_view.aspx" Mode="Frame" AutoLoad="true" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container id="Container1" runat="server" Height="700" marginSpec="0 0 0 0" Layout="VBoxLayout" >
<Items>
<ext:Panel ID="panel_cms004_view" Title="Document Control Profile" runat="server" AutoScroll="true" Height="180" Width="700" Layout="VBoxLayout">
<Loader ID="cms004_view" runat="server" Url="../CMS/cms004_view.aspx" Mode="Frame" AutoLoad="true" Height="200">
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
<ext:Panel ID="docControlNum" Title="Document Control Number" runat="server" AutoScroll="true" Height="248" Width="700" Layout="VBoxLayout">
<Loader ID="cms004d_view" runat="server" Url="../CMS/cms004d_view.aspx" Mode="Frame" AutoLoad="true" Height="700">
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container id="Container8" runat="server" marginSpec="0 0 0 700" Layout="VBoxLayout" Height="700" Width="430">
<Items>
<ext:Panel ID="panel_cms004d_audit" Title="Document Control Number - Audit" runat="server" AutoScroll="true" Height="425" Width="433" Layout="VBoxLayout">
<Loader ID="cms004d_audit" runat="server" Url="../CMS/cms004d_audit.aspx" Mode="Frame" AutoLoad="true" Height="700" Width="430" >
<LoadMask ShowMask="true"></LoadMask>
</Loader>
</ext:Panel>
</Items>
</ext:Container>
Did some editing. Found out that need to add in the layout for the panel and the container.
whats the problem with CSS?
do something like this :
.right {
position: absolute;
right: 0px;
}
and then :
<div class="right">
// your html
</div>
instead of creating a .css I would recommend you to use preexisting css like twitter bootstrap css or even a frontend framework which they have function and features that works very well.
With Bootstrap it comes a Grid System where you can place your elements like you want.

How to specify the map attribute of HTML in a JSF page

I am trying to replicate the below html page using JSF. But can't find the correct JSF tag to do so.
HTML content (Required HTML):
<body>
<div class="image">
<img src="image.jpg" alt="Image" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="circle" id="circle" coords="135,596,34" href="http://www.google.co.in" alt="Circle" />
<area shape="rect" id="square" coords="192,567,249,628" href="http://www.youtube.com" alt="Square" />
</map>
</div>
</body>
JSF Page (JSF to be modified to get above HTML):
<body>
<f:view>
<h:outputText value="This is a JSF page"></h:outputText>
<br/>
<h:form>
<h:graphicImage id="image" value="image.jpg" usemap="true">
<h:commandLink action="#{managedBean.method}" id="links1" value="map1" coords="135,596,34" shape="circle"></h:commandLink>
<h:commandLink action="#{managedBean.method}" id="links2" value="map2" coords="192,567,249,628" shape="rec"></h:commandLink>
</h:graphicImage>
</h:form>
</f:view>
</body>
Please suggest the correct JSF format to replicate the above HTML page using the JSF page and it calls a method of ManagedBean when clicked on the link.

how can i set asp.net gridview to center of div?

I have a asp.net grid view,and i want this gridview show center of the div,i write this css and html code:
<div style="color: #FFFFFF;" class='center' >
شرکت هایی که درمعاونت تجاری ثبت نشده اند<br />
<br />
<asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<FooterStyle BackColor="Tan" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<SortedAscendingCellStyle BackColor="#FAFAE7" />
<SortedAscendingHeaderStyle BackColor="#DAC09E" />
<SortedDescendingCellStyle BackColor="#E1DB9C" />
<SortedDescendingHeaderStyle BackColor="#C2A47B" />
</asp:GridView>
</div>
and center css is:
.center {
width:800px;
border-radius: 5px;
width: 60%;
height:200px;
margin: 0 auto;
}​
but gridview show this:
how can i solve that?thanks.
Add align="center" in
Like this
<div align="center" style="color: #FFFFFF;" class='center' >
And remove extra style from .center class. You have assigned width 2 time. % and px.

objects cannot be displayed sometimes

I used the following code:
<DIV style="WIDTH: 100%; HEIGHT: 24px" id="_sizing__c_TarPro">
<DIV style="Z-INDEX: 0; POSITION: relative; BACKGROUND: none transparent scroll repeat 0% 0%; HEIGHT: 24px" id="_slot__c_TarPro">
<object id="sl__c_TarPro" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="xxxxxx.xap&xxxxIgnoreNotFound=true"></param>
<param name="onload" value="onSilverlightLoad" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="transparent" />
<param name="windowless" value="true" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<param name="Culture" value="EN" />
<param name="UICulture" value="EN" />
<param name="initParams" value="xxxxxxxxxxxxxxxxxxxxxxx,
dimension=DIMENSION4,
defaultValue=,
dimensionDescription=,
allowMultipleSelection=TRUE,
allowLeafSelection=TRUE,
allowParentSelection=TRUE,
allowReadAccessSelection=TRUE,
attributeFilter=,
symbolSpec=DIM4SET,
targetVariable=_c_TarPro"/>
width=200,
height=24,
<a href="http://go.microsoft.com/fwlink/?LinkID=149156" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style: none"></img>
</a>
</object>
<input id="_c_TarPro" name="_c_TarPro" style="display:none" value=""/>
</DIV>
</DIV>
Repeat this code for several objects, sometimes these objects are displayed. But sometimes few objects are displayed and others are not displayed after refresh. It is random the number of objects are displayed.
This only happens on IE8 and IE9. (Sorry before I said on IE9 it works well because QA reports that, but I tested on IE9 and see the same issue.)
Anybody has idea?
Thanks,
I doubt this is the cause of your issue, but the width and height that you apply to <param name="initParams"> are declared outside the tag, which might prevent those attributes from being interpreted.
You've got:
<param name="initParams" value="xxxxxxxxxxxxxxxxxxxxxxx,
dimension=DIMENSION4,
defaultValue=,
dimensionDescription=,
allowMultipleSelection=TRUE,
allowLeafSelection=TRUE,
allowParentSelection=TRUE,
allowReadAccessSelection=TRUE,
attributeFilter=,
symbolSpec=DIM4SET,
targetVariable=_c_TarPro"/>
<!-- what are these guys doing outside the tag? -->
width=200,
height=24,