I am trying to use jqmobi with PHP where everything is working but when I try to use PHP session it's not working. First when I use jquery post then it will retrieve data from server but when I reload page then session is destroyed.
I have kept session_start() in every file but still of no use. So if anybody have worked with jqmobi and PHP, share your experience. I am posting my main index.php file:
<?php
session_start();
?>
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>UI Starter</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache" >
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.base.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/icons.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.css" />
<!-- http://code.jquery.com/jquery-1.10.1.min.js -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="./js/lib/jquery.validate.min.js"></script>
<script src="./js/jq.appframework.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.0/appframework.ui.min.js"> </script>
<script src="./fcharts/FusionCharts/FusionCharts.js"></script>
<!-- include touch on desktop browsers only -->
<script>
// $.ui.showBackButton = false;
if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
var script = document.createElement("script");
script.src = "plugins/af.desktopBrowsers.js";
var tag = $("head").append(script);
//$.os.android = true; //let's make it run like an android device
//$.os.desktop = true;
}
</script>
</head>
<body>
<div id="afui"> <!-- this is the main container div. This way, you can have only part of your app use UI -->
<!-- this is the header div at the top -->
<div id="header">
<a onclick="$.ui.toggleSideMenu()" id="mainbuon" class="menuButton" style="float:right"></a>
</div>
<div id="content">
<!-- here is where you can add your panels -->
<div title='Management' id="elogin" class="panel" selected="true"
data-load="notloadedPanel" data-unload="notunloadedPanel">
<h2 >login</h2>
<form id="sample" style="position:absolute;width:250px;height:350px; left:50%; top:50%;margin-left:-130px;margin-top:-50px;">
<input type="email" id="email" name="email" value="" placeholder="username"style="text-align:center;" >
<div id="error"></div>
<input type="password" id="password" name="password" value="" placeholder="password" style="text-align:center;" >
<div id="error1"></div>
<a class="button" onclick="validate()" >Login</a>
</form>
<footer>
</footer>
</div>
<div title='List' data-defer="evelist.php" id="elist" class="panel" data-header="testheader"
data-tab="navbar_list" data-load="loadedPanel" data-unload="unloadedPanel">
</div>
<div id="setting" class="panel" title='Management' data-defer="Setting.php" data-load="settingloadedPanel"
data-unload="settingunloadedPanel" data-tab="navbar_list" >
</div>
<div id="missreport" class="panel" data-defer="MissReports.php" title='Management' data-load="reportloadedPanel"
data-unload="reportunloadedPanel" data-tab="navbar_list" >
</div>
<header id="testheader">
<a onclick="$.ui.toggleSideMenu()" id="mainbuon" class="menuButton" style="float:left"></a>
<!-- <a id="backButton" onclick="$.ui.goBack()" class='button'>Go Back</a> -->
<h1>Events List</h1>
</header>
</div> <!-- content ends here #smessage -->
<!-- bottom navbar. Add additional tabs here -->
<div id="navbar">
<div class="horzRule"></div>
<a href="#Dashboard" id='navbar_dash' class='icon home'>Dashboard</a>
<a href="#elist" id='navbar_list' class='icon home'>list</a>
<a href="#aevent" id='navbar_add' class='icon home'>Add ent</a>
<a href="#smessage" id='navbar_sent' class='icon home'>Sent Msg</a>
<a href="#sendmessage" id='navbar_send' class='icon home'>Send Msg</a>
</div>
<!-- this is the default left side nav menu. If you do not want any, do not include these -->
</div>
</body>
<script type="text/javascript">
var webRoot = "./";
$.ui.autoLaunch = false; //By default, it is set to true and you're app will run right away. We set it to false to show a splashscreen
$(document).ready(function(){
//
$.ui.launch();
});
$.ui.backButtonText="Back"
$(document).bind("swipeLeft",function(){
$.ui.toggleSideMenu(false);
});
$(document).bind("swipeRight",function(){
$.ui.toggleSideMenu(true);
});
//$.ui.useAjaxCacheBuster=true;
function logout(){
var rt= "<?php echo session_destroy(); ?>";
$.ui.loadContent("#elogin",false,false,"slide");
} /***login form panel start here****/
function notloadedPanel(){
$.ui.disableSideMenu();
$('#mainbuon').hide();
$.ui.clearHistory();
}
function notunloadedPanel(){
$.ui.enableSideMenu();
$('#mainbuon').show();
}
function validate(){
var validator = $("#sample").validate({
rules: {
email: {
required: true,
}
, password: {
required: true,
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "email" ) {
// error.insertAfter("#error");
error.appendTo('#error');
} else {
//error.insertAfter(element);
error.appendTo('#error1');
} },submitHandler: function() {
$.post(webRoot + 'parameter.php', {
email:$('#email').val(),password:$('#password').val(),Login:'Login'
}, function (data) {
if($.trim(data)=='success'){
$.ui.loadContent("#elist",false,false,"slide");
}else{
alert("wrong username and password");
}
});
}
});
if(validator.form()){
$('form#sample').submit();
}
}
/***login form panel ends here****/
document.addEventListener("DOMContentLoaded", init, false);
$.ui.ready(function () {
//This function will get executed when $.ui.launch has completed
// $.ui.showBackButton = false;
});
/* This code is used for native apps */
var onDeviceReady = function () {
AppMobi.device.setRotateOrientation("portrait");
AppMobi.device.setAutoRotate(false);
webRoot = AppMobi.webRoot + "/";
//hide splash screen
AppMobi.device.hideSplashScreen();
$.ui.blockPageScroll();
};
document.addEventListener("appMobi.device.ready", onDeviceReady, false);
</script>
The code should be sufficient, however you need to find out if session_destroy or unset($_SESSION) was called else where