I am using jquery mobile and html5.
when i redirect from one page to another page , getting a white screen (flickering).
So how to get out of this problem.
Here is my code..
--Page1--
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="x-blackberry-defaultHoverEffect" content="false" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<link href="css/Global.css" rel="stylesheet" />
<script>
/*********Page bind evnet --start--********/
$(document).bind("pageinit", function () {
$("#login").unbind("click").click(function () {
Login();
});
});
/*********Page bind evnet --Ends--********/
var Type;
var Data;
var Url;
var DataType;
var ContentType;
var ProcessData;
var Method;
jQuery.support.cors = true
function Login() {
Type = "POST";
Url = "/login";
Data = '{}';
DataType = "JSON";
ContentType = "application/json; charset=UTF-8";
ProcessData = true;
CallLoginService();
}
function CallLoginService() {
$.ajax({
type: Type,
data: Data,
dataType: DataType,
processData: ProcessData,
url: Url,
contentType: ContentType,
crossDomain: true,
success: function (jsonObj) {
if (jsonObj.GetLoginResult[0].Status == "true") {
$(location).attr('href', 'City.html');
}
else if (jsonObj.GetLoginResult[0].Status == "Invalid username") {
ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
}
else {
ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
}
},
error: function (response) {
CheckNetwork();
}
});
</script>
</head>
<body>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header">
<p style="color:#13a5db;"> Login</p>
</div>
<div data-role="content">
<div id="alertcontainer1" >
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button" id="login" data-theme="b">Login</a>
<a data-role="button" href="Registration.html" data-transition="slide" data-theme="b">Register</a>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<p> CopyRight ® 2013</p>
</div>
</div>
</body>
</html>
page2--(city.html) second page
<html>
<head>
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*********Page bind evnet --start--********/
$(document).bind("pageinit", function () {
//code
});
/*********Page bind evnet --Ends--********/
</head>
<body>
//code
</body>
</html>
Related
I installed LazyLoading jquery plugin and try to use it in my bootstrap mvc project. In examples that I saw, address of just one image is set to tag. I don't know how does it work.
How can I show all images by scrolling page. This is my Code.
<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="~/scripts/js/modernizr.custom.js"></script>
<script src="~/Scripts/jquery.lazyload.js"></script>
<script src="~/Scripts/js/bootstrap.min.js"></script>
<!--Custom-Theme-files-->
<!--theme-style-->
<link href="~/Content/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="~/Content/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="~/Content/css/products.css" rel="stylesheet" type="text/css" media="all" />
<div class="LazyImage">
<div class="container">
<div>
<div class="col-md-9 ">
<div>
<div class="col-md-4 product-left p-left">
<div class="product-main simpleCart_shelfItem">
<img class="lazy" src="~/Content/images/grey.gif" data-original="../Content/images/LazyLoad/example.jpg" width="200" height="200" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript" charset="utf-8">
$(function () {
$("img.lazy").lazyload({
//threshold = 100,
//event = "sporty",
placeholder : "/Content/images/grey.gif",
event : "lazyload",
effect : "fadeIn",
effectspeed : 2000
});
});
$(window).bind("load", function () {
var timeout = setTimeout(function () {
$("img.lazy").trigger("lazyload")
}, 6000);
});
$(window).load(function () {
$("html,body").trigger("scroll");
});
</script>
I create a App which Phonegap on IOS, where I need to play sounds for specified actions.
To play the sound from a url works fine, but not from a local source. I tried different things.
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="msapplication-tap-highlight" content="no"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/sisMedia.css"/>
<link rel="stylesheet" href="css/sisMedia_custom.css"/>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/jqm_custom.js"></script>
<script src="js/jquery-validation/jquery.validate.min.js"></script>
<title>Einlasskontrolle</title>
</head>
<body>
<div data-role="header" id="header" data-position="fixed" data-theme="a">
<h1>Audiotest</h1>
</div><!-- /header -->
<div data-role="page" data-title="Einlasskontrolle">
<div role="main" class="ui-content">
<button onclick="playAudio('audio/ok.mp3')">Play</button>
<button onclick="playAudio('audio/ok.mp3',true)">Play</button>
<button onclick="playAudio('https://test.sistecs.de/sismedia/files/admin/downloads/ok.mp3')">Play</button>
<script>
function playAudio(src, absolute) {
if (absolute == true) {
src = getPhoneGapPath() + src;
}
if (device.platform == 'Android') {
src = 'file://' + src;
}
var media = new Media(src, success, error_error);
media.play();
}
function success() {
// ignore
}
function error_error(e) {
alert('error ' + e.message);
}
function getPhoneGapPath() {
var path = window.location.pathname;
var sizefilename = path.length - (path.lastIndexOf("/") + 1);
path = path.substr(path, path.length - sizefilename);
return path;
}
</script>
</div>
</div>
<div data-role="footer" id="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Scan</li>
<li>Setup</li>
</ul>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Can you help me?
index.html:
<!DOCTYPE HTML>
<html>
<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.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page" id="reviewsPage">
<script language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$(document).on("mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: false, changeHash: true,
});
});
});
</script>
<div data-role="header">
<h1>Reviews</h1>
<a href="#" id="mybtn" class="ui-btn-right" >TWEET</a>
</div>
</div>
</body>
</html>
tweet.html:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page" id="twitterPage" >
<script type="text/javascript">
$(document).on("mobileinit", function() {
});
$(document).bind('pageshow', '#twitterPage', function(event, ui) {
$(document).on('click', '[data-rel=back]', function() {
$.mobile.changePage('index.html');
});
});
</script>
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous" >
Back
Home
</div>
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>
Tweets
</p>
</li>
</ul>
</div>
</div>
Here I have link when the link is clicked tweet.html file will be called. But when I clicked the back button I will be directed to the previous page without any error. But second time onwards when I click the back button I will be directed to the previous page and comes to the current page again.
$("#mybtn").unbind();`
unbind event will prevent this
I have two pages: index.html and main.html
When i set the main.html page to be the default page of my app, the java script works, but when I set the index.html to be the main one, after the redirect, the javascript on the main.html just stops working.
here is the HTML of the two pages:
index.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxLinksEnabled = false;
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
// request the persistent file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, null);
}
function onSuccess(fileSystem) {
fileSystem.root.getFile("kuapodata.xml", null, gotMe, failFile);
}
// se o arquivo não existir
function failFile(error) {
$("#formLogin").show();
}
// se o arquivo existir
function gotMe(fileEntry) {
$.mobile.changePage("main.html", null, false, false);
}
</script>
</head>
<body onload="onLoad();">
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="formLogin">
<form id="loginFrm">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinputEmail">
</label>
<input id="textinputEmail" placeholder="email" value="" type="email" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinputPassword">
</label>
<input id="textinputPassword" placeholder="senha" value="" type="password" />
</fieldset>
</div>
<input value="entrar" type="submit" />
</form>
</div>
</div>
<script>
var xml;
function gotFS(fileSystem) {
fileSystem.root.getFile("kuapodata.xml", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
writer.write(xml);
}
function fail(error) {
alert(error.code);
}
// ao fazer o login
$("form").submit(function() {
// chama função que valida usuário
ValidateUser();
return false;
});
// verifica se o usuário existe
function ValidateUser(email, password) {
$.ajax({
type: 'POST',
url: 'http://********/oauth.aspx',
data: "email=" + $("#textinputEmail").val() + "&password=" + $("#textinputPassword").val(),
success: function(data) {
// se o usuário existir
if (data != "false") {
xml = data;
// cria o arquivo xml se ainda não existir
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
// muda o usuário de página
$.mobile.changePage("main.html");
}
else {
alert("Dados inválidos. Tente novamente.");
}
}
});
}
</script>
</body>
</html>
main.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$(document).ready(function() {
alert("yesss");
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="main">
</div>
</div>
</body>
</html>
jQuery Mobile pulls in remote pages via AJAX. When it does this, it only pulls in the first data-role="page" element it finds. This means that anything outside the data-role="page" element is discarded.
The best work-around is to put all of your app's JS into a custom.js file and include it in the head of every page, this way all the code for your site is always available (to do this you will need to use event delegation).
You can also put the JS for each page inside the data-role="page" element so it is grabbed by jQuery Mobile and not just discarded:
<div data-role="page" id="page1">
<script>
alert('hello');
</script>
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="main">
</div>
</div>
I am working on creating a html page with three tabs, each one of which pulls data from three different html pages through jquery ajax. I am passing 2 parameters , method and mode ( to set read only or edit for all the html elements in the page ) while calling the ajax function.
The problem I have is, when i set the parameters with method=somemethod&mode=ro, the first renders the proper method and in readonly mode, whereas the second tab's html is rendered in edit mode. I debugged the page using firebug but couldnot find the actual problem. All the three tab htmls are all the similar, so i have no idea why this is happening. I have attached the code. Kindly help.
Main html/php page.
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<html>
<head>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<link type="text/css" href="./methodeditor.css" rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function loadtabs() {
$( ".tabs" ).tabs({cache:false});
//$( ".tabs" ).tabs();
method = "<? echo $method; ?>";
mode = "<? echo $mode; ?>";
$.ajax({
type: "GET",
url: "oven.php",
data: "method=" +method+"&mode="+mode,
cache: false,
async: true,
success: function(data){
htdata = data;
$("#oven").html(data);
},
});
$.ajax({
type: "GET",
url: "detectors.php",
data: "method=" +method+"&mode="+mode,
async: true,
cache: false,
success: function(data1){
htdata = data1;
$("#detectors").html(data1);
},
});
$.ajax({
type: "GET",
url: "inlets.php",
data: "method=" +method+"&mode="+mode,
async: true,
cache: false,
success: function(data){
$("#inlets").html(data);
},
});
}
</script>
</head>
<body>
<form id="editor" action="method.php" method="POST" >
<div class="editor">
<div class="tabs">
<ul>
<li>Oven</li>
<li>Detectors</li>
<li>Inlets</li>
</ul>
<div id="oven" ></div>
<div id="detectors" ></div>
<div id="inlets"> </div>
</div>
<script>
loadtabs();
</script>
</form>
</div>
</body>
</html>
tab1 php
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<!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>Oven</title>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function togglestatus(val) {
if ( val == "ro" )
{
$('#elements :input').attr('disabled', true );
}
if ( val == "edit")
{
$('#elements :input').removeAttr('disabled');
}
}
function getvalues() {
//file = window.method;
file = "<? echo $method; ?>";
file = "./method/"+file;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmldoc = xmlhttp.responseXML;
etimenode = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[1];
etime = etimenode.textContent;
document.getElementById("etime").value = etime;
maxovtp = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[5].childNodes[0].data;
document.getElementById("maxovtp").value = maxovtp;
}
</script>
</head>
<body>
<div id="elements">
<input type="checkbox" id="oventemp" value="ON" />Oven Temperature<br />
Equilibrium time <input type="text" id="etime" /><br />
Maximum Oven Temperature <input type="text" id="maxovtp" /><br />
<script>
getvalues();
x = "<? echo $mode; ?>";
togglestatus(x);
</script>
</div>
</body>
</html>
tab2 php/html page
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<!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>Detectors</title>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function togglestatus(val) {
if ( val == "ro" )
{
$('#elements :input').attr('disabled', true );
}
if ( val == "edit")
{
$('#elements :input').removeAttr('disabled');
}
}
function getvalues() {
file = "<? echo $method; ?>";
file = "./method/"+file;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmldoc = xmlhttp.responseXML;
heater = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[1].childNodes[0].data;
document.getElementById("heater").value = heater;
h2flow = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[3].childNodes[0].data;
document.getElementById("h2flow").value = h2flow;
}
</script>
</head>
<body>
<div id="elements">
Heater Status <input type="checkbox" id="heaterstat" value="ON" /><br />
Heater <input type="text" id="heater" /><br />
H2 Flow <input type="text" id="h2flow" /><br />
<script>
getvalues();
x = "<? echo $mode; ?>";
togglestatus(x);
</script>
</div>
</body>
</html>
I figured out the solution by chance.
Both the tabs had elements wrapped under the same div called . So when toggle status was called , only the first div with id "element" was getting changed. I gave different names to the divs and solved the problem.