I have assumed that if I have the basic setup of...
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
</head>
then, later in the code if I include, say, a header with a button that uses a 'plus' data-icon...
<div data-role="header" data-position="inline">
<h1>Shopping List</h1>
additem
</div>
then the buttons would show up with the 'plus' data-icon. The buttons show up, but without the data-icon. What am I missing in my setup?
The link should have data-role="button" shouldn't it?
i also faced this prob, but then i tried to add this code into the head. the icon now can be displayed.
<link rel="stylesheet" type="text/css" media="screen"
href="${pageContext.request.contextPath}/theme/css/jquery/ui-lightness/jquery-ui-1.8.6.custom.css" />
add
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
Related
I need, from a view-blade, to search a database in order to fetch data and display them in another view-blade when a link is clicked.
I made the following:
In the view-blade who will acting on database:
#foreach($pending as $p)
<tr>
<td>
Click here
</td>
</tr>
#endforeach
the connected 'route' is
Route::get("/getMyForm/{ident}", ['as' => "openMyPage", 'uses' => "BusinessController#seeMyForm"]);
the method on BusinessController has
public function seeMyForm($ident){
$myResult=DB::select(...);
return view('MyViewBlade')->with('myResult', $myResult);
}
the master template (PrincipalView.blade.php) (as was included in the view-blade to display
<!DOCTYPE html>
<html>
<head>
<meta name="csrf_token" content="{{ csrf_token() }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="assets/js/jquery-ui/jquery-ui.css"> -->
<script src="assets/js/jquery.js"></script>
<!-- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> -->
<script src="assets/js/bootstrap-datepicker.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="assets/js/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<link rel="stylesheet" href="assets/js/jquery-ui-1.11.4.custom/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="assets/js/jquery-pessoal.js"></script>
<script src="assets/js/jquery-pessoal2.js"></script>
<link rel="stylesheet" href="assets/plugins/multiple-select-master/multiple-select.css"></script>
<script src="assets/plugins/multiple-select-master/multiple-select.js"></script>
<link href="assets/css/custom.css" rel="stylesheet">
</head>
...
<div class="container">
#yield("corpo")
</div>
...
the view-blade which will display (ToAproveView.blade.php)
#extends('PrincipalView')
#section('corpo')
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Cliente Principal: </label><br>
<input type="text" id="idTxtFaturamentoAprovacaoCliente"
name="namTxtFaturamentoAprovacaoCliente"
readonly value="{{$myResult[0]->clienteprincipal}}"/>
</div>
</div>
is not working. The last view-blade do not render its elements. The view opens itself not well formatted.
Other actions make all other views-blade ok.
I found out, the problem is connected with the line code
Click here
because it was created on the fly (I guess).
Looking at the console of Chrome, is there
GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap-theme.min.css
29638_1472048778961_121:16 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap-datepicker.min.css
29638_1472048778961_121:18 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery.js
29638_1472048778961_121:13 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap.min.css
29638_1472048778961_121:22 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/bootstrap-datepicker.js
29638_1472048778961_121:28 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery-ui-1.11.4.custom/jquery-ui.js
net::ERR_CONNECTION_RESET
29638_1472048778961_121:29 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery-ui-1.11.4.custom/jquery-ui.css
net::ERR_CONNECTION_RESET
29638_1472048778961_121:23 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/bootstrap.min.js
net::ERR_CONNECTION_RESET
The including css and js files do not work (the names in the path are different of that I was wrote abore because I made a translation to better comprehension)
I found out where the error is.
I changed the path to .js and css files in default template and the view rendered correctly:
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
Although there is not the correct answer, since this template serves several views-blade that work perfectly, for now it is ok to me.
First of all I have seen every single question stating the same issue on Stack and non of them applied to mine
I was building my First PhoneGap App and i want to use jQueryMobile libraries
anyways, the JQuery Styles is not working properly,
My Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
btn1
<p>I Am Now A Mobile Developer!!</p>
btn2
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<script type="text/javascript" src="cordova.js"/>
<script type="text/javascript" src="./js/jquery-1.12.0.min.js"/>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"/>
<script type="text/javascript" src="js/index.js"/>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And the results are
as you can see the button inline and corner all attributes worked fine but still that is not the expectedP
You didnt reference them properly
Remove the dot. I following the folder structure of where your css files are, your java script files should be here /js not ./js
So reference like this
[code]
[/code]
I've a very simple hybrid mobile application developed with Cordova and appFramework.
index.html looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and
height=device-height attributes. See https://issues.apache.org
/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/af/main.css" />
<link rel="stylesheet" type="text/css" href="css/af/appframework.css" />
<link rel="stylesheet" type="text/css" href="css/af/lists.css" />
<link rel="stylesheet" type="text/css" href="css/af/forms.css" />
<link rel="stylesheet" type="text/css" href="css/af/buttons.css" />
<link rel="stylesheet" type="text/css" href="css/af/badges.css" />
<link rel="stylesheet" type="text/css" href="css/af/grid.css" />
<link rel="stylesheet" type="text/css" href="css/af/android.css" />
<link rel="stylesheet" type="text/css" href="css/af/win8.css" />
<link rel="stylesheet" type="text/css" href="css/af/bb.css" />
<link rel="stylesheet" type="text/css" href="css/af/ios.css" />
<link rel="stylesheet" type="text/css" href="css/af/ios7.css" />
<link rel="stylesheet" type="text/css" href="css/af/tizen.css" />
<title>Cordova Application</title>
<script type="text/javascript" charset="utf-8"
src="js/vendor/appframework.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.scroller.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.css3animate.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/appframework.ui.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/fade.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/flip.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/pop.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slide.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slideDown.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slideUp.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.slidemenu.js"></script>
<script>
$.ui.ready(function () {
console.log("UI Ready!!!");
});
$(document).ready(function() {
console.log('Document Ready...');
alert('Document Ready...');
});
</script>
</head>
<body>
<div id="afui">
<div id="header">
</div>
<div id="content">
<div data-title="Home" class="panel"
id="main" selected="true">
<span>THIS is the HOME Page!</span>
</div>
<div data-title="Second Page" class="panel" id="second">
</div>
</div>
<nav>
<div class="title">Nav Home</div>
<ul>
<li><a class="icon home mini"
href="#main">Home Link</a></li>
<li><a class="icon mini"
href="#second">Second Link</a></li>
</ul>
</nav>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
This shows up correctly and even the navigation is wired up when opened in Safari or Chrome desktop browsers.
But if I run it in either iOS or Android emulators, I see the alert 'Document Ready' and after that blank page. Home panel is not displayed.
Here is what I do to run the emulators.
cordova emulate ios
cordova emulate android
Even if I open the index.html files directly from the platform builds they show up correctly on the desktop browser.
I'm pretty new to all this so I may be missing steps here. Any help would be appreciated.
You dont need all the fragmented appframework js and css files, you can just include 2 css and 1 js file, here is updated code, it works as cordova app on android, I built Cordova app with Intel XDK.
<!DOCTYPE html>
<html>
<head>
<title>XDK</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/af.ui.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<script type="text/javascript" charset="utf-8" src="js/appframework.ui.min.js"></script>
<script>
$.ui.ready(function () {
console.log("UI Ready!!!");
});
$(document).ready(function() {
console.log('Document Ready...');
alert('Document Ready...');
});
</script>
</head>
<body>
<div id="afui">
<div id="header">
</div>
<div id="content">
<div title="Home" class="panel" id="main" selected="true">
<span>THIS is the HOME Page!</span>
</div>
<div title="Second Page" class="panel" id="second">
</div>
</div>
<nav>
<div class="title">Nav Home</div>
<ul class="list">
<li><a class="icon home mini" href="#main">Home Link</a></li>
<li><a class="icon mini" href="#second">Second Link</a></li>
</ul>
</nav>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
I have main html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">
<div data-role="page" id="homePage">
<div data-role="header"><div class="ui-title">Home</div></div>
<div data-role="content" style="text-align: center">
<a data-role="button" id="login" class="fullWidth">Login</a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages.js"></script>
</body>
Then in Home.js:
// Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below.
window.$ = window.jQuery = WLJQ;
function wlCommonInit(){
// Common initialization code goes here
}
$("#homePage").live('pagecreate', function(event,ui) {
$('#login').click(function(){
$.mobile.changePage($('#nextPage.html'));
});
});
When I tap on login button, it gives error $.mobile is undefined on this line:
$.mobile.changePage($('#nextPage.html'));
Is there anyone can give insight what's wrong with my code? I believe I do the right things? In addition, I use 5.0.2.407-developer-edition Worklight version.
Finally I solved this issue by:
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
and later in js:
jq.mobile.changePage("the.html");
instead of
$.mobile.changePage("the.html");
Worklight is already bundled with jQuery, so you shouldn't add it a second time as you did at the bottom of the HTML. Also, you shouldn't place it at the bottom anyway, rather in the HEAD - remove that line.
Additionally, move the reference to jQuery Mobile to the HEAD a as well.
Using Worklight 5.0.6.1 (the latest version, which you seem not to use) and jQuery Mobile 1.3.1, I created a new project and application, and modified the HTML as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testapp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/testapp.css">
<script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
<script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
testapp
</div>
<script src="js/initOptions.js"></script>
<script src="js/testapp.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I place the minified .css and .js files in a folder, and referenced them inside the HEAD element.
I added inside the BODY element.
Build All and Deploy
Preview via Worklight Console
Works...
I suggest you start small like the above (including using the latest versions of Worklight and jQuery Mobile), and build on that (working) foundation).
You can get the latest version of Worklight from the Eclipse Marketplace (in Eclipse, look at the Help menu >> Marketplace).
I have a layout page thusly
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
#RenderSection("JS", required:false)
#RenderSection("CSS", required:false)
</head>
<body>
#RenderBody()
</body>
</html>
And then a view like so
#{
ViewBag.Title = "Home";
Layout = "~/views/shared/_layout.cshtml";
}
#using RS.Common.HtmlHelpers;
#section JS
{
<script src="#Url.Content("~/scripts/fue.js")" type="text/javascript"></script>
<script src="#Url.Content("~/scripts/jquery.flexslider-min.js")" type="text/javascript"></script>
}
#section CSS
{
<link href="#Url.Content("~/content/hp.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/hp_form.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/flexslider.css")" rel="stylesheet" type="text/css" />
}
<h4>Test!</h4>
The page loads fine as I expect. However, I am getting 3 warnings:
Validation (XHTML 1.0 Transitional): Element 'link' cannot be nested within element 'link'
This error, one for each of the tags in the CSS section on the view.
It is only really an annoyance at this stage, but I wondered what the cause (and thus solution) for this error might be?
You have specified HTML5 DOCTYPE and yet trying to validate as XHTML 1.0 Transitional. I suppose that the final rendered HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<link href="/content/main_layout.css" rel="stylesheet" type="text/css" />
<link href="/content/menu.css" rel="stylesheet" type="text/css" />
<script src="/scripts/fue.js" type="text/javascript"></script>
<script src="/scripts/jquery.flexslider-min.js" type="text/javascript"></script>
<link href="/content/hp.css" rel="stylesheet" type="text/css" />
<link href="/content/hp_form.css" rel="stylesheet" type="text/css" />
<link href="/content/flexslider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h4>Test!</h4>
</body>
</html>
You might want to invert the order of the two RenderSection in your layout so that the links and scripts are grouped together. Or you might also consider moving the script declarations to the end of the page:
Like this:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
#RenderSection("CSS", required:false)
</head>
<body>
#RenderBody()
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
#RenderSection("JS", required:false)
</body>
</html>