Javascript redirection is not working - javascript

I am creating a mobile version of my application . This is a part of the settings page (mysettings.php).
if(!isset($_SESSION['access_token']))
{
echo("<script type='text/javascript'> window.top.location.href='http://www.example.com/mobile/login.php'</script>");
}
If the access_token is not set then it should redirect to the login.php but i cant understand why isnt it working.
In the rendered source code I can see because the redirection is not occurring is ( The redirection code exists )
<script type='text/javascript'> window.top.location='http://www.example.com/mobile/login.php'</script>
<!DOCTYPE html>
<html>
<head>...
.
.
.</html>
I am using Chrome and this is source code from where I am logging to mysettings.php page
<?php
session_start();
$logins=0;
?>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Settings</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">Settings </div>
<div class="ui-block-b">My Pictures </div>
</div>
</div><!-- /content -->
<div data-role="footer">
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

You can use the header PHP function to perform a redirect:
<?php
if(!isset($_SESSION['access_token'])) {
header("Location: http://www.example.com/mobile/login.php");
exit;
}
?>
Note that this will need to be performed before sending any HTML markup

Perhaps try using the php header("Location: http://some/url"); or also try to use window.location.href instaed of top lastly try to put the script instead the document markup instead of before it (might work?...)

I added
data-ajax="false"
to the button on mysettings.php and it started working fine. Thank you

Related

JavaScript not loading after PHP header() redirect

I have a page where a user can sign in by submitting a basic form, the data is sent to a separate PHP script (for validation, etc). The PHP script ends with the header() function to direct the user to a welcome page:
// form validation above
header(Location: ../welcome.php);
exit();
I would like to be able to run some JavaScript on the welcome page, however I am noticing that even this basic code won't fire:
$(document).ready(function() {
console.log("ready!");
});
I have split the welcome page using PHP include to separate the header, body, and footer:
The Header:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<!-- HOSTED ONLINE -->
<!-- Google Fonts: Lato & Pacifio -->
<link href="https://fonts.googleapis.com/css?family=Lato|Pacifico" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/3d58889dd8.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- jQuery UI -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- LOCAL -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="resources/style.css">
<!-- JavaScript -->
<script type="text/javascript" src="resources/script.js"></script>
<!-- Animate.css -->
<link rel="stylesheet" href="resources/animate.css">
<title>Website Title</title>
</head>
<body class="userBody">
<!-- title card -->
<div class="container-fluid titleCard">
<h1 class="pacificoFont mainTitle">Website Title</h1>
</div>
The Body:
<?php
include_once "user_header.php";
?>
<div>
<?php
echo "welcome " . $_SESSION["username"] . "!<br>";
echo "Your email is " . $_SESSION["email"];
echo '<form action="includes/logout_inc.php" method="POST">
<button type="submit" name="submit">Logout</button></form>';
?>
</div>
<div class="test" id="test">
Test
</div>
<?php
include_once "user_footer.php";
?>
The Footer:
</body>
</html>
I do believe the local JavaScript is properly linked, where it's in the same directory as the CSS and the styling is linked and working. I am also running this locally using MAMP (if that info helps).
It's probably quite noticeable that I am very new at PHP/JavaScript. Any help would be deeply appreciated! Thank you for taking the time :)
the javascript reference should be at the bottom of the HTML page before the closing body tag. Just cut the reference of the javascript to the the page bottom below:
<script type="text/javascript" src="resources/script.js"></script>
</body>
</html>
The problem is that jquery got rendered before your page load.

How to customize when jquery mobile dialog shows?

I need to be able to choose when the jquery dialog opens up but nothing i seem to do works.
so far ive tried this
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="main" class="ui-content">
Open Dialog Popup
Test
<div data-role="popup" id="myPopupDialog">
<div data-role="header">
<h1>But wait theres more!</h1>
</div>
<div data-role="main" class="ui-content">
<h2 style="text-align: center;">Would you like an exclusive offer?</h2>
Sounds Good!
No Thanks, Take me back..
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</div>
<script>
$(document).ready(function(){
console.log(document.body.scrollTop);
if(document.body.scrollTop === 0)
{
$.mobile.changePage('#myPopupDialog', 'pop', true, true);
}
});
</script>
</body>
</html>
which works but when i change the if statement in the javascript it breaks also if i remove the anchor tag at the top it just doesnt show... jQuery mobile has me confused.
So anyway my question is how do manually make a dialog box show on the page, i would prefer it to show on the same page and not another page.
use this:
$("#myPopupDialog").addClass("ui-page-active ui-page ui-page-theme-a")

Jquery Mobile - disabled dialog on page load?

I have an initial init page in my application that acts as an entry point and loads my login page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- initialse and load the application -->
<div data-role="page" id="init">
<script type="text/javascript">
$('#init').live( 'pageinit', function() {
window.location.href="views/login.html";
});
</script>
</div>
</body>
</html>
When my login page loads there is a button which loads a dialog. This button initially doesn't work and only loads the dialog when the page is manually refreshed. Why does this happen and what can I do to enable the button/dialog immediately upon page load.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- login page -->
<div data-role="page" id="login">
<!-- css -->
<link rel="stylesheet" href="../css/global.css" />
<link rel="stylesheet" href="../css/login.css" />
<!-- page markup -->
<div data-role="header">
Settings
</div>
</div>
<!-- end of page -->
<!-- settings dialog page -->
<div data-role="dialog" id="settings_dialog">
<!-- page markup -->
<div data-role="header" style="text-align: left;">
</div>
<div data-role="content">
</div>
</div>
<!-- end of page -->
</body>
</html>
Not sure if you've fixed this but it seems to be something to do with the DOM cache & AJAX.
I'm not sure how you'd do it, but try setting the ajax: false when you do the window reload. Alternatively you could redirect via server side (I'd recommend this as it'll still work if the user has JS turned off.
Why I figured this out was because I had a page with a list on it, the list items sent me to a new page which has a jump link on it (#settings_dialog). Setting the data-ajax="false" on each list item somehow 'refreshed' the DOM and forced the second page to load 'fresh' and voila - my dialog works 100% now.
So, in short, turn off the AJAX feature or (better) redirect from serverside & be happy!

Jquery Mobile makes script execute twice

why does the test message shows twice on:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
alert("Test");
</script>
</body>
</html>
I copied the headers from from http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html and as I started doing some examples I noticed that my javascript methods where being called twice.
Here is the code in JsFiddle:
http://jsfiddle.net/LsxBW/2/
As Explosion Pills perfectly stated you have to play by jQM rules. At least:
Use appropriate jQM markup for a page or pages
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
Use pageinit event instead of jQuery ready handler.
So instead of
$(function() {
alert("Test");
});
use
$(document).on("pageinit", "#page1", function(){
alert("Test");
});
jsFiddle is here
You can use
$(function() {
alert("Test");
});
.. just fine, as long as you put it outside of the div with data-role="page".
No script tags allowed inside the page markup.

Page loading differently, window.location vs href:

Hey still new to JS/CSS/HTML well basicly webdevelopment.
I have a page, for which I'm loading most of the stuff dynamicly. If i goto it by window.location="mapmode.jsp" Then it doesn't load properly but if I do an <a href> tag it loads fine.
Also if I do pagerefresh on the fine page, it loads in badly again.
Could be a jquerymobile thing maybe, but I'm just not sure..
The way I initialize the dynamic stuff might also be relevant so here it is:
$(document).on("pageinit", "#mapmode", function(event) {
initPageHeader();
});
Any help would be appreciated.
edit: mapmode.jsp:
<%--
Document : mapMode
Created on : Jul 12, 2012, 10:36:22 AM
Author : ame
--%>
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.1.0.css" />
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="mapmode" name="mapmode">
<div data-role="header" id="header" name="header">
<p>TEEEST</p>
</div><!-- /header -->
<div data-role="content" id="mapmodePageContent" name="mapmodePageContent">
<p>I'm the first page in mapMode!.</p>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" src="js/LocalAction.js"></script>
<script type="text/javascript" src="js/firstPage.js"></script>
<script type="text/javascript" src="js/MenuLoader.js"></script>
<script type="text/javascript" src="js/PageHeader.js"></script>
<script type="text/javascript" src="js/Mapmode.js"></script>
</body>
</html>
jQuery Mobile sidesteps your browsers linking and history. It automatically wires this up for links (<a href>). But for JavaScript you need to use their changePage method.
For example:
$.mobile.changePage('pagename.jsp');
See the linked documentation for more information and options when using changePage.

Categories