I use chrome browser.
I use this row:
<td><a href = '/'; >Home</a></td>
To go back to home page.
For example:
If I have this URL in address bar:
http://localhost:1234/#reportPage
After I press Home,I get this URL in address bar:
http://localhost:1234/
The reportPage is ID of the div tha has data-role="page".
The address bar is changes but the view not changes(the old view remain in the same place,the view of HTML page not changes).
But if use FF or IE browser it works perfect,when I press Home button the address bar changes and also the view changes to the Home page. Any idea why I have problems the the code above in google chrome?
Here my HTML code:
<!DOCTYPE html>
<html ng-app="muni">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<title>Review</title>
<link href="css/ol.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/themes/rtl/rtl.jquery.mobile-1.4.0.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="scripts/libs/angular.min.js"></script>
<script src="scripts/libs/angular-touch.min.js"></script>
<script src="scripts/libs/angular-route.min.js"></script>
<script src="scripts/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="scripts/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.pushStateEnabled = false;
$.mobile.defaultPageTransition = 'slide';
$.mobile.buttonMarkup.hoverDelay = 0;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script type="text/javascript" src="scripts/libs/rtl.jquery.mobile-1.4.0.js"></script>
</head>
<body ng-controller="mainController as main">
<div data-role="page" id="home">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<img style="display: block; margin: 10px auto 30px auto;max-width: 90%; max-height: 90%;" ng-src="{{vm.config.customer.logo}}" alt="{{vm.config.customer.name}}" />
<div data-role="controlgroup">
Sites Mapping
Messages
On Cnostruction
Profile
</div>
</div>
</div>
<div data-role="page" id="reportPage" ng-controller="reportController">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<div ng-show="stage=='map'">
<div>
<table class="button-panel">
<tr>
<td><img src="images/mail-sent.png" ng-click="goNextStage()" /></td>
<td class="big" ng-style="{'background': 'url('+ report.Photo +') no-repeat center', 'background-size': '200px'}"><img src="images/photo-large.png" ng-click="takePhoto()" /></td>
<td><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td><a href='/#'>Home</a></td> <----this Home link!!!
</tr>
</table>
</div>
<div style="clear:both"></div>
<select id="reportType" ng-model="viewModel.reportType" ng-options="reportType.Text for reportType in reportTypes"></select>
<div id="addressForm">
<table style="width: 100%">
<tr>
<td style="width:200px">
<input ng-model="search.addressSearch" placeholder="Enter address" />
</td>
<td style="width:auto">
<button ng-click="searchForAddress()" class="ui-btn ui-btn-inline ui-btn-icon-right ui-icon-search ui-corner-all"></button>
</td>
<td style="text-align: left">
<button ng-click="gotoMyLocation()" class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-notext ui-icon-location"></button>
</td>
</tr>
</table>
</div>
<div id="map"></div>
</div>
<div ng-show="stage=='success'">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td></td>
</tr>
</table>
</div>
<div class="ui-body ui-body-a ui-corner-all" style="margin: 20px 10px;">
<img src="images/success.png" style="float: right; width: 100px; margin: 5px;" />
<h3>Site saved</h3>
<p>
Saved.<br />
Number: <span id="reportId">{{reportId}}</span>
<br />
Thank you for coorparating
</p>
</div>
</div>
<div ng-show="stage=='error'"></div>
</div>
<div id="addressPanel" data-role="panel" data-position="left" data-display="overlay">
<ul data-role="listview">
<li ng-repeat="address in search.results">
<a href ng-click="setAddress(address)">{{address.formatted_address}}</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="messages" ng-controller="messagesController">
<div data-role="header">
<h2>Masseges</h2>
</div>
<div data-role="main" class="ui-content">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goBackPlease()" /></td>
<td></td>
</tr>
</table>
</div>
<ul id="messageList" data-role="listview" data-inset="true">
<li ng-repeat="message in messages | orderBy:'-Date' track by $index">
<h2>{{message.Title}}</h2>
<p ng-bind-html="message.Body | wrapphones"></p>
<p style="text-align: left">{{message.Date | date:'dd/MM/yyyy'}}</p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="underConstruction">
<div data-role="header">
<h2>On construction</h2>
Back
</div>
<div data-role="main" class="ui-content">
<img style="width: 95%; display: block; margin: 10px auto;" src="images/Under-Construction.gif" alt="Under Construction" />
</div>
</div>
<div data-role="page" id="logPage">
<div data-role="header">
<h2>LOG</h2>
</div>
<div data-role="main" class="ui-content">
<ul id="log"></ul>
</div>
</div>
z
<script src="phonegap.js"></script>
<script type="text/javascript" src="scripts/libs/ol.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/app/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/app/filters/wrapphones.js"></script>
<script src="scripts/app/services/coordinateSerivce.js"></script>
<script src="scripts/app/services/reportService.js"></script>
<script src="scripts/app/services/mapService.js"></script>
<script src="scripts/app/services/pushService.js"></script>
<script src="scripts/app/controllers/mainController.js"></script>
<script src="scripts/app/controllers/reportController.js"></script>
<script src="scripts/app/controllers/messagesController.js"></script>
</body>
</html>
One approach could be to include an input element as first child of body element, with tabindex set to 1 ; using history.replaceState()
<!DOCTYPE html>
<html>
<head>
<style>
#abc {
position: relative;
top: 800px;
}
</style>
<script>
function home(e) {
e.preventDefault();
history.replaceState({}, "home", location.pathname);
document.getElementById("home").focus()
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input tabindex="1" type="button" id="home" style="opacity:0;width:0;height:0" />
<table>
<tbody>
<tr>
<td>abc
</td>
</tr>
<tr>
<td id="abc">Home
</td>
</tr>
</tbody>
</table>
</body>
</html>
plnkr http://plnkr.co/edit/sRyoc4uR2N4F8sbzD4zZ?p=preview
You basically don't go to another page, or reload it. You stay on the same page, just trying to jump to the top. #reportPage takes you to an element with the id reportPage, removing the id doesn't necessary mean "scroll to top". As you seem to get to the top of the page, just change it to:
<td><a href='/#'>Home</a></td>
It'll function correctly, by explicitly taking you to the top.
If it doesn't work still, the suggestion is to set the location to / and reload the page with javascript:
<td><a href='javascript:location.href="/";location.reload();'>Home</a></td>
The location.reload() sentence may be excess (for me it does work without it), but as you say you have problems with reloading, you can also try with this sentence.
To be sure of all, add this line of JS in your pages:
$('a[href="/"]').off();
jQuery off Remove an event handler, .off() with no arguments removes all handlers attached to the elements.
Your code will works! Just use the correct xHtml:
<td>Home</td>
or, to remain in the same folder
<td>Home</td>
If you have www.yoursite.com/ciao/#apage href="./" will return www.yoursite.com/ciao/ while href="/" will return www.yoursite.com
Related
Firstly, I have this view on table:
when I click the td, it opens the PrettyPhoto Lightbox
on prettyPhoto, the default html trigger is:
<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
<img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>
but instead I have this html:
<a href="image.jpeg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
<div class="kt-user-card-v2__pic">
<img src="http://wasapbro-2019.test/storage/msg/cupb1RUgcGLnUovQi7eBpxLIIRu37sPKcha1jjuI.jpeg" class="m-img-rounded kt-marginless" alt="photo">
</div>
<div class="kt-user-card-v2__details">
<span class="kt-user-card-v2__name">test</span>
</div>
</a>
on mine that fails to trigger
How do I solve this?
I am not sure how you are initializing PrettyPhoto, but I set up this quick demo using your DOM structure and it seems to work just fine. One thing to note is that you need to use jQuery version 2.x or older since PrettyPhoto relies on .size(); which isn't available in jQuery 3.0+.
$(document).ready(function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
<!DOCTYPE html>
<html>
<head>
<title>Pretty Photo</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://lib.arvancloud.com/ar/prettyPhoto/3.1.6/css/prettyPhoto.min.css" type="text/css" media="screen" charset="utf-8" />
<script src="https://lib.arvancloud.com/ar/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table>
<tr>
<td>
<a href="https://live.staticflickr.com/8183/8079715772_f003d725d1_z.jpg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
<div class="kt-user-card-v2__pic">
<img src="https://live.staticflickr.com/8183/8079715772_f003d725d1_z.jpg" class="m-img-rounded kt-marginless" alt="photo">
</div>
<div class="kt-user-card-v2__details">
<span class="kt-user-card-v2__name">test</span>
</div>
</a>
</td>
</tr>
<tr>
<td>
<a href="https://live.staticflickr.com/8512/8509212953_4cfefc8b9a_z.jpg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
<div class="kt-user-card-v2__pic">
<img src="https://live.staticflickr.com/8512/8509212953_4cfefc8b9a_z.jpg" class="m-img-rounded kt-marginless" alt="photo">
</div>
<div class="kt-user-card-v2__details">
<span class="kt-user-card-v2__name">test</span>
</div>
</a>
</td>
</tr>
</table>
</body>
</html>
So i am trying to export a specific div to a PDF file and i am failing miserably...
This is the page:
<!DOCTYPE HTML>
<html>
<head>
<title>Testpage</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!--[if lte IE 8]><script src="../assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="../assets/css/jquery.dataTable.min.css" />
<link rel="stylesheet" href="../assets/css/main.css" />
<link rel="stylesheet" href="../assets/css/toastr.css" />
<link rel="stylesheet" href="../assets/css/chart.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="../assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="../assets/css/ie8.css" /><![endif]-->
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner" id="inner">
<!-- Header -->
<header id="header">
<h2><strong>Test</strong></h2>
</header>
<!-- Content -->
<section>
<!-- Table -->
<h3>Table</h3>
<div class="table-wrapper">
<table id="myTable">
<thead>
<tr>
<th>Time</th>
<th>Speed</th>
<th>Meters</th>
</tr>
</thead>
<tbody>
<?php
require_once ('showData.php');
?>
</section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Menü -->
<nav id="menu">
<header class="major">
<h2>Menü</h2>
</header>
<ul>
<li>Home</li>
<li>
<span class="opener">Test</span>
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
</li>
</ul>
</nav>
<!-- Filter -->
<section>
<header class="major">
<h2>Filter</h2>
</header>
<form method="post" id="submitdata" name="submitdata">
<div class="row uniform">
<div class="12u 12u$">
<input type="text" name="datefrom" id="datefrom" value="" placeholder="Date from" />
</div>
<div class="12u 12u$">
<input type="text" name="dateto" id="dateto" value="" placeholder="Date to" />
</div>
<div class="12u$">
<div class="select-wrapper">
<select name="dropdown" id="dropdown">
<option value="0">- Choose -</option>
<option value="1">All</option>
<option value="2">Speed</option>
<option value="3">Meter</option>
</select>
</div>
</div>
<div class="12u$">
<ul class="actions">
<li><input type="submit" id="btnSubmit" value="Clickme" class="special" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</div>
</div>
</form>
</section>
<!-- Exportmenü -->
<section>
<header class="major">
<h2>Export</h2>
</header>
<div class="12u 12u$">
<button id="btnExport" class="button special icon fa-file-pdf-o">Export as PDF</button>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p> Stuff </p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/skel.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/jquery.dataTables.min.js"></script>
<!--[if lte IE 8]><script src="../assets/js/ie/respond.min.js"></script><![endif]-->
<script src="../assets/js/main.js"></script>
<script src="../assets/js/toastr.js"></script>
<script src="../assets/js/submitData.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable( {
"pagingType": "full_numbers"
});
});
</script>
</body>
</html>
I am trying to get everything in <div class="inner" id="inner"> into an PDF-File but nothing seems to work. I tried with jsPDF and html2canvas (html -> img -> pdf) but the quality is VERY bad. Nothing else seems to work.
I would appreciate some pointers like what i can use to get it working.
Thank you very much,
Skar
EDIT:
This is what i included after the jsPDF recommendation
<script src="../assets/jsPDF/jspdf.debug.js"></script>
<script src="../assets/jsPDF/examples/js/html2canvas.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#header': function(element, renderer){
return true;
}
};
$('#btnExport').click(function(){
var html=$("#inner").html();
doc.fromHTML(html,0,0, {
'width': 500,
'elementHandlers': specialElementHandlers
});
doc.save("Test.pdf");
});
</script>
Try this library, it is built for client side PDF generation.
https://parall.ax/products/jspdf
Here is the github link
Sorry for bad English title, but I'm currently making my ASE and I want dynamic pages. One container and when clicked on a navigation item it will load the pages into the container.
However, if I use jQuery .load, the style is not correct. It seems it doesn't use the stylesheet from either the main page as the content page. I put the stylesheet link on both. I use Bootstrap.
This is my main.php (the main page with the container):
<?php
include('../includes/global.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title><?php echo Core::getSettings()->getValue('blogname'); ?> ASE - Dashboard</title>
<!-- Bootstrap core CSS -->
<link href="../styles/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../styles/dashboard.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../scripts/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../scripts/ie-emulation-modes-warning.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script/ase_main.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><?php echo Core::getSettings()->getValue('blogname'); ?></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<?php include ('headers/navigator.php'); ?>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="mainContent"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>
<script src="../scripts/docs.min.js"></script>
<script src="../scripts/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
This is the Dashboard.php (the page dynamically loaded):
<link href="../styles/dashboard.css" rel="stylesheet">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</div>
<h2 class="sub-header">Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
This is the .js (which loads the content):
$(document).ready(function()
{
console.log($('.nav.nav-sidebar').children());
$('.navItem').unbind('click').click(changeContentType);
});
function changeContentType()
{
$('.navItem').removeClass('active');
$(this).addClass('active');
$('#mainContent').load($(this).data('content') + '.php', function(){});
}
Why doesn't it apply the stylesheet?
i have to two pages in jquery mobile and in each of the pages is a div called content and inside the divs i call external pages into it by means of ajax. for "page1" the call works perfectly but for "page2" the call isn't working. though the div in "page2" is having the same name as that of "page1".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#content').load('total.asp');
}, 3000);
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<table width="311" border="0" cellpadding="3" cellspacing="3">
<tr>
<td width="77">Content</td>
<td width="102"><div id="content"></div></td>
<td width="102">Go to Page 2</td>
</tr>
</table>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<p>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
<table width="320" border="0" cellpadding="3" cellspacing="3">
<tr>
<td width="77">Content</td>
<td width="102"><div id="content"></div></td>
<td width="102">Go to Page 1</td>
</tr>
</table>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</p>
</body>
</html>
try using:
$("div").find("[data-role='content']").load('total.asp');
because you have given it as data attribute. you can better use class if you have multiple id with same name in that case it will be:
$(".content").load('total.asp');
ID has to be unique. try changing id="content" to class="content" and then try the below code
$.ajaxSetup({ cache: false });
setInterval(function() {
$('.content').load('total.asp');
}, 3000);
});
Why tr tag does not show my buttons horizontally but vertically instead.
Similar code works properly on jsfiddle
What am I doing wrong?
here my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link href="css/menuprincipale.css" rel="stylesheet" type="text/css" media="all"/>
<meta name="msapplication-tap-highlight" content="no" />
<script src="cordova.js"></script>
<script src="js/jquery.js"></script>
</head>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<table class="clsActionTable">
<tr>
<td style="text-align: center;">
<button class="clsActionButton" id="idAddButton">Add</button>
<button class="clsActionButton" id="idEditButton">Edit</button>
<button class="clsActionButton" id="idDeleteButton">Delete</button>
</td>
</tr>
</table>
<div data-role="footer" data-position="fixed">
<img src="img/logo.png" />
</div>
</div>
here my CSS:
.clsActionTable
{
width: 100%;
height:20%;
color: white;
font-size: smaller;
}
.clsActionButton
{
width: 180px;
height:40px;
}
#idActionPlane
{
left: 0px;
bottom: 0px;
height:20%;
width:100%;
background-color: #4E5A81;
color: White;
}
I am using these:
Cordova 3.5
jQuery 1.4
js
html5
Try this code.
<tr>
<td style="text-align: center;">
<button class="clsActionButton" id="idAddButton">Add</button>
</td>
<td style="text-align: center;">
<button class="clsActionButton" id="idEditButton">Edit</button>
</td>
<td style="text-align: center;">
<button class="clsActionButton" id="idDeleteButton">Delete</button>
</td>
</tr>
For anyone who has this same problem and the good answer above does not work, in my situation removing data-role="table" from the table html in jQuery mobile solved the problem as it does make the table vertical by default. Even better way for sure would be to do this via css.