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);
});
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>
This is my site
<!DOCTYPE html>
<html>
<head>
<title>gump</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<a><img src="pictures/logo.png" alt="gump" style="height:25px" href="#default" class="logo";></a>
<div class="header-right">
<a class="active">Home</a>
Links
Encryption
</div>
</div>
<div style="padding:25px">
<table style="width:100%; table-layout:fixed">
<tr>
<td style="font-weight:bold">Sites</td>
<td style="font-weight:bold">Partners</td>
<td style="font-weight:bold">Social Media</td>
<td style="font-weight:bold">Tools</td>
<td style="font-weight:bold">Links</td>
</tr>
<tr>
<td>Home</td>
<td>pherbich.com</td>
<td>Steam</td>
<td>byom.de</td>
<td>gumprecht.co.at</td>
</tr>
</table>
</div>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>
Thats too much of just the header and the footer, i want to have the header and the footer external on a external html, but how can i get the external header.html and the footer.html in the index.html
I was looking recently on the same topic and this article explains how you can do it.
Link to the Atricle
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
I searched around how to ad class to div in javascript and find some instruction for eather javascript or jquery but none dont seems to work.
What i tried is a simple code:
<!DOCTYPE html>
<html>
<head>
<title>XY</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="files/jquery.mobile-1.4.0-rc.1.min.css"/>
<script src="files/jquery-2.0.3.min.js"></script>
<script src="files/jquery.mobile-1.4.0-rc.1.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<!--SLO STRAN ################################################ #################-->
<div data-role="page" id="slo" data-theme="a">
<div data-role="header" data-position="fixed" >
Domov
<h1>ABC</h1>
Osveži
</div><br>
<div id="osvezitev_cas_slo" style="margin-left:10px;"></div><br>
<div data-role="collapsible-set">
<!--boja-->
<div data-role="collapsible" data-collapsed="true">
<h3> <div class="ui-grid-a">
<div class="ui-block-a" id="postaja_boja" style="width: 65%;"></div>
<div class="ui-block-b" id="veter_boja" style="width: 35%;"></div>
</div>
</h3>
<div class="ui-grid-b">
<div class="ui-block-a" id="max_boja" style="width:50%;" "margin-left:10px"></div>
<div class="ui-block-b" id="maxob_boja" style="width: 50%;"></div>
</div>
<div id="tmp_boja"></div>
<div class="ui-grid-c">
<div class="ui-block-a" id="mmv1h_boja" style="width:50%;" "margin-left:10px"></div>
<div class="ui-block-b" id="mmv24h_boja" style="width: 50%;"></div>
</div>
</div>
<div data-role="footer" data-position="fixed">
SLO
</div>
</div>
</div>
</body>
</html>
<script>
$('#veter_boja').addClass('class_two');
</script>
I just one add class to "veter_boja" and it doesnt seem to work.
What am I doing wrong?
So, like #Jakadinho points out, your script is not run, because it is never called.
You should place the javascript script inside a function and call it e.g. on page load according to the following (though unrelated) example I modified out of http://www.w3schools.com/jsref/event_onload.asp tutorial example.
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
I tried to get enough near to your problem getting the script out of html element and it worked.
So, attach to body that onload method, make your script a function and call it inside that onload.
I have a homepage which is index.html inside my homepage I have a div which I load all my other page, when I load addpost.php inside that div.
I submit it's form using .ajaxForm() the page redirects but when I open the addpost.php directly in my address bar it does not redirects which I want to achieve.
Here is my homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sugar and Spice</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="../ckeditor.js"></script>
<script src="../adapters/jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
CKEDITOR.disableAutoInline = true;
$( document ).ready( function() {
$( '#editor1' ).ckeditor(); // Use CKEDITOR.replace() if element is <textarea>.
$( '#editable' ).ckeditor(); // Use CKEDITOR.inline().
} );
function setValue() {
$( '#editor1' ).val( $( 'input#val' ).val() );
}
</script>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="other.css"/>
</head>
<body style= "background-image:url('bg.jpg');">
<!-- Navbar
================================================== -->
<div class="navbar navbar-inverse ">
<center><img src="banner.jpg"></center>
<div class="navbar-inner" style= "background-image:url('images.jpg');">
<a class="brand" href="#"><img src="logo.png" width="20" height="20"></img></a>
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
Home
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<div class="nav-collapse collapse side">
<ul class="nav nav-stacked">
<li class="">
Post
</li>
<li class="">
Page
</li>
</ul>
</div>
</div>
<div class="span10 well">
<div class="span10">
<!--Contect goes here-->
</div>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="footerwell">
<div class="footercolor">
<div class="container">
<p class="pull-right"></a></p>
<p></p>
</div>
</div>
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>
<script src="assets/js/application.js"></script>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
//$(".span10").load("home.php");
$(".home").click(function(){
$(".span10").load("addpost.php");
});//close home click
$(".post").click(function(){
$(".span10").load("post.php");
});//close post click
$(".page").click(function(){
$(".span10").load("page.php");
});//close post click
}); //close ready
</script>
</body>
</html>
And here is my addpost.php:
<html>
<head>
<meta charset="utf-8">
<title>jQuery Adapter — CKEditor Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="ckeditor.js"></script>
<script src="adapters/jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
CKEDITOR.disableAutoInline = true;
$( document ).ready( function() {
$( '#editor1' ).ckeditor(); // Use CKEDITOR.replace() if element is <textarea>.
$( '#editable' ).ckeditor(); // Use CKEDITOR.inline().
} );
function setValue() {
$( '#editor1' ).val( $( 'input#val' ).val() );
}
</script>
</head>
<body>
<form id="f1" action="some.php" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>Title:</td>
<td><input type="text" name="articletitle" id="articletitle" required/></td>
</tr>
<tr>
<td>Featured Image:</td>
<td><input name="MAX_FILE_SIZE" value="2097152" type="hidden">
<input name="image" id="image" type="file" required/></td>
</tr>
<tr>
<td colspan="3"><textarea cols="80" id="editor1" name="editor1" rows="10"></textarea></td>
</tr>
<tr>
<td><input id="save" type="submit" value="Save"></td>
</tr>
</table>
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#save").click(function(){
$("#f1").ajaxForm();
});
});
</script>
</body>
</html>
You're not using .ajaxForm() correctly. You're not supposed to call it in your click handler, you call it when initializing your form, and it establishes its own submit handler that submits the form using AJAX.
$(document).ready(function() {
$("#f1").ajaxForm();
});
Since it uses AJAX, the page isn't supposed to be redirected. If you want to redirect to the action attribute of the form, use normal form submission, not .ajaxForm().