I am attempting integrate jQuery Mobile into an existing mobile page. I want to use the collapsible element, and form features.
When I include the js file, and load the page, the page is rendered blank. When it is not included it is rendered correctly. I have added data-role="page" and "content" as below:
Looking in Firebug I see the body element has the 'ui-mobile-viewport' class on it and it's visibility is set to hidden; its child elements have display = none.
I am getting this error in the console when debugging (line 5014) of jquery-mobile-1.0.1.js:
$el.prop is not a function
if ( $el.prop("disabled") ) {
Code below:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><%=PageTitle%></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<link rel="stylesheet" type="text/css" href="<%=CssPath%>/jquery.mobile-1.0.1.css" media="screen" />
<script type="text/javascript" src="<%=JsPathShared%>/jquery.js"></script>
<script type="text/javascript" src="<%=JsPath%>/page.js"></script>
<script type="text/javascript" src="<%=JsPath%>/jquery.mobile-1.0.1.js"></script>
</head>
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<div data-role="page" id="page-wrap" >
<header>
<%RenderBanner();%>
</header>
<div data-role="content" class="section-wrap">
<%Render();%>
<footer>
<nav>
<%RenderNavigation();%>
</nav>
<%RenderFooter();%>
</footer>
</div>
</div>
<%=GoogleAnalytics()%>
</body>
</html>
Consider checking out the jQuery Mobile Boilerplate project from Github. It contains a complete jQuery Mobile project along with code snippets you can use to compare your code to a working project.
https://github.com/commadelimited/jQuery-Mobile-Boilerplate
Related
I am have ASP.Net MVC5 Web application & in need to integrate Angular5 app with it.
Referring to the below link, I am doing the integration.
Integrate Angular 5 with ASP.NET MVC 5
This command can only be run inside of a CLI project
When running the standalone Angular5 app, it runs fine. but when the same component integrating with Razor view, I am getting the below error.
The selector "app-root" did not match any elements
It's been more than a day that I spent on fixing this.
Index.cshtml looks as below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/bundles/styles.bundle.js" rel="stylesheet"/>
<script src="/bundles/inline.bundle.js"></script>
<script src="/bundles/polyfills.bundle.js"></script>
<script src="/bundles/scripts.bundle.js"></script>
<script src="/bundles/vendor.bundle.js"></script>
<script src="/bundles/main.bundle.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="container body-content">
<div class="row">
<app-root></app-root>
</div>
<hr />
<footer>
<p>© 2018 - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
Thanks.
OMG!!
Two steps fixed this big head breaking issue:-
added <base href="/"> in head section
moved the bundles in the bottom of page i.e., just before the closing body tag
#Styles.Render("~/Content/Styles")
#Scripts.Render("~/Scripts/Bundles")
</body>
Hope this helps!!
Keep the code in Index.cshtml as below. It should work.
<html>
<head>
<base href="/" />
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="~/Scripts/lib/runtime.js"></script>
<script type="text/javascript" src="~/Scripts/lib/polyfills.js"></script>
<script type="text/javascript" src="~/Scripts/lib/vendor.js"></script>
<script type="text/javascript" src="~/Scripts/lib/main.js"></script>
</body>
</html>
I had this problem, but then realised the cause was that I hadn't wrapped my static script references in the #section scripts tag as per the demo, and they were above the app-root tag. The layout needs to write the scripts into the page after the app-root tag. If the tag appears before the references, you'll get that error message.
I have setup Angular 2 with ASP.NET core, using:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
I followed the standard setup but the App.component.html is duplicating the html and body tags.
When Pressing Control U (to view source) the html looks like:
<html>
<head>
....
</head>
<body>
<app>
<html>
<head>
<style>
...
</style>
</head>
</app>
</body>
</html>
</app>
...
</body>
</html>
redacted
None of my components have html or body tags in them. the only one that has html or body tag is the initial page
My _Layout.cshtml html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - HotSnail</title>
<base href="/" />
<script src="~/content/modules/jquery/jquery-3.2.1.min.js"></script>
<script src="~/content/modules/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
<link href="~/content/modules/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="~/content/modules/animate/animate.css" rel="stylesheet" />
<link href="~/content/global.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
My Index.cshtml
<script src="~/dist/vendor.js" asp-append-version="true"></script>
#section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
}
The above code is what should be served, now the first bit of angular should be the app.component
app.component.html
<ribbon></ribbon>
<div id="content">
<router-outlet></router-outlet>
</div>
ribbon.component.html:
<div id="ribbon">
<span class="ribbon-button-alignment">
<span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh" rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true" data-reset-msg="Would you like to RESET all your saved widgets and clear LocalStorage?"><i class="fa fa-refresh"></i></span>
</span>
<!-- breadcrumb -->
<ol class="breadcrumb"><li>Home</li><li>Outlook</li><li>Inbox</li></ol>
</div>
This is all the components that should be injected on the first page
UPDATE*
So I have done some more research and it seems to be a known bug. As it says here:
https://github.com/aspnet/JavaScriptServices/issues/662
I cant quiet figure out their hacky solution
Here is hacky code that fixes this:
return requestZone.run>(() =>
platform.serializeModule(AppModule)).then(html => { resolve({ html:
html.slice(27, html.length - 14).replace('', '') }); },
reject);
Also in index.cshtml I advice changing app to div because we already
have app tag returned from Universal.
Loading...
I'm not sure where that code would go..
UPDATE
This also happens in the DEFAULT project created when doing
dotnet new angular
Does anyone know who maintains these templates as I'd like to post a bug with the development team
Same problem for angular 5.
I fixed it like in suggestion from last comment on https://github.com/aspnet/JavaScriptServices/issues/662 (last comment by salarcode):
boot.server.ts file change the code to this:
resolve({
html: (() => {
let apphtml = state.renderToString();
apphtml = apphtml.replace('<html><head><style>', '<style>').replace('</head><body><app', '<app').replace('</app></body></html>', '</app>');
return apphtml;
})()});
Getting this error $(..).tabs not a function.
here are my imports
<link rel="stylesheet" href="css/jquery-ui-1.10.4.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="js/home.js"></script>
Can you help debugging that.
JSP FILE
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login to Web Service Details Tool</title>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="js/home.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css" type="text/css"></link>
</head>
<body>
<div id="tabs">
<ul>
<li>Overview</li>
<li>Web Service Dashboard</li>
<li>Console</li>
</ul>
<div id="tabs1">
<jsp:include page="overview.jsp" />
</div>
<div id="tabs2">
<jsp:include page="dashboard.jsp"/>
</div>
<div id="tabs3">
<jsp:include page="menu.jsp" />
</div>
</div>
<br><br>
This was working until today, i don't know why it stopped working & console is throwing me error tabs is not defined function
The structure would need to look like this:
page.html
-js (folder)
--jquery-2.1.1.js
--jquery-ui-1.10.4.js
The html file would then have the references as you've show above:
<link rel="stylesheet" href="css/jquery-ui-1.10.4.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="js/home.js"></script>
You could also use chrome dev tools (F12) to check if the resources have loaded
NOTE: if you're home.js is using any jquery functionality, this file should always be added after the jquery files.
EDIT: based on comment
make sure you're using it like $("#name").tabs(); and not $("#name").tabs;
I had included jquery.js in one of the included jsp page which was causing the issue & the browser was not able to load the jquery files.
I have a strange problem with an app developed using phonegap and jquery mobile:
when the app starts, styles are not applied but if I browse within the app and then go back to the index, I can see styles well applied.
What should I change?
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
var intervalloRefresh;
var intervalloRisultati;
var iter=0;
// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
</script>
<script type="text/javascript" src="jquery/jquery-1.5.2.min.js"></script>
<!-- <script type="text/javascript" src="main.js"></script> -->
<script type="text/javascript" src="jquery/jquery.mobile-1.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#pulsantiera{width:25%;height:100%;float:left;}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div id="pulsantiera" data-role="controlgroup" data-type="vertical">
<!-- Allineamento -->
Allinea
Percorsi
Programma
Info
Foto
Chat
Y
A
N
</div>
<div style="width:74%;height:100%;margin-left:26%" >
<h1 id="title">PATH</h1>
<div id="content">
<img src="images/IT_MAPPA.jpg">
</div>
<div id="vote" stle="display:none"></div>
</div>
</div>
</div>
</body>
</html>
Have you tried switching the position of your CSS and JS files?
If parsed from top to bottom:
1) jquery is initialized
2) jquery mobile is initialized
3) then the CSS is loaded
So the CSS needed for the JQM widgets is not there when JQM kicks into gear.
Try switching to:
1) all CSS
2) jquery
3) jquery mobile
Also check the JQM page template. The CSS always goes first.
this is edit of my question that was first how to apply 2 layouts in the same gsp page but now i got problem with 3 layouts :) :
I am fairly new to all that css and layout stuff and i'm using grails 2.0 version
i have the following moduls in my problem:
1. main.gsp layout which basically have a nice header with company logo for all pages.
2. mainTabPanle.gsp layouts which basically contain some main tabs all pages should have
3. reportTab.gsp layout which basically contain nice report tabs and short javascript code to manipulate chosen tab color that all reports gsp pages should have.
what i am trying to do is to use this reportTab layout in all the reports gsp pages.
so this is what i got so far:
main.gsp:
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}"type="text/css">
<g:layoutHead/>
<r:layoutResources />
</head>
<body style="height:100%">
<div>some nice header in here </div>
<g:layoutBody/>
<r:layoutResources />
</body>
</html>
mainTabPanle.gsp (also located in layout folder)
<g:applyLayout name="main">
<!doctype html>
<html>
<head>
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<div>some main tabs here </div>
<g:layoutBody/>
</body>
<script type="text/javascript">
//script to manipulate main tabs
</script>
<r:layoutResources />
</body>
</html>
</g:applyLayout>
reportTabPanel.gsp:
<g:applyLayout name="mainTabPanel">
<!doctype html>
<html>
<head>
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<div>some reports tab panel </div>
<g:layoutBody/>
</body>
<script type="text/javascript">
//some script to manipulate report tab item
</script>
<r:layoutResources />
</body>
</html>
</g:applyLayout>
and now im using in moneyreport.gsp header the following line:
<meta name="layout" content="reportTabPanel" />
what i want to see is the nice header and the maintabsPanel and the reportTabPanel but all i see is the body of moneyreport.gsp
the weird thing is that if i use this:
<meta name="layout" content="mainTabPanel" />
inside moneyreport.gsp i see mainTab and the body of moneyreport.gsp as expected.
what am i doing wrong? i cannot use 3 layout on the same page?
thanks for your help guys ...
You can apply 2 layouts on the same page. In order to apply a different layout in a layout file, you need to use the applyLayout tag. Your reportTab should be something like this:
<g:applyLayout name="main">
<!doctype html>
<head>
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<div> some nice tabs here </div>
<g:layoutBody/>
</body>
<script type="text/javascript">
few line script handling chosen tab color in here
</script>
<r:layoutResources />
</body>
</html>
</g:applyLayout>
The best way is using templates because you can use as many as you want. I have this main HTML where I want to include different templates, like a menu and a generic content page:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
<g:layoutTitle default="Loto Tasks"/>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<g:layoutHead/>
</head>
<!-- Including menu -->
<g:render template="/templates/menu" />
<!-- Including generic content page -->
<g:render template="/templates/genericcontent" />
<g:layoutBody/>
</body>
</html>
I have a package named templates inside a views package, and inside templates I have two files, _menu.gsp and _genericcontent.gsp. The _genericcontent.gsp file looks like the following simple code. I could see that this is a little confusing if I insert a <head> with imports to other files, but you can import in the main file and it works:
_genericcontent.gsp
<div id="mainSearchPanel" class="searchPanel">
×
Filter panel here
</div>
<div id="search-icon" class="animate__animated animate__heartBeat animate__infinite animate__slower">
<i class="fas fa-search fa-2x"></i>
</div>
first thanks for your reply Anuj !
it kind of work but in a wrong way cuz i was getting weird html source:
i was getting 2 headers and 2 body tags so basically grails just copy paste all the layout
together and that wasn't good html page even that the browser display it right!
i found what i needed and that is simply using templates!
for example i have file called "_mainHeader.gsp" which look like this:
<!-- this is my main header for all gsp pages -->
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>IntentIQ Management System</title>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}"type="text/css">
<link rel="shortcut icon" href="${resource(dir:'images/myImg',file:'favicon.ico')}" type="image/x-icon">
and from all pages i can use those lines like for example in page1.gsp:
<g:render template="/templates/mainHeader" />
</head>
<body>
<h1> this is page1 with header from mainHeader.gsp template </h1>
</body>
</html>
pay attention for who ever who read this to:
1.temmplate file name are with '_' character
2.the closing body tag in "page1.gsp" is closing the body tag started at "_mainHeader.gsp" file.
so basically this tempaltes stuff is kind of copy paste of parts of gsp pages and its working great!
thanks for your reply never the less!