Cannot access scripts when return to main page of Jquery site

Question

Ok I'm reposting this from the start. I'm just so frustrated with this I'm about to just give up on JQM all together. This shouldn't be this hard.

My site structure:

OUI/
index.php
js/
pages/
images/

On my index.php page I have just a two line form for login I'm at http://localhost/~me/OUI/:

<? session_start();
?><!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=false,initial-scale=1;">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="stylesheet" href="js/jquery.mobile-1.4.0.min.css">
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" /> 
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/jqm-datebox.comp.datebox.min.js"></script>

<script src="js/mainsite.js" type="text/javascript"></script>


<link rel="stylesheet" href="css/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OUI CHEF</title>

</head>

<body style="background-image:url(media/kitchen.jpg)">


    <div data-role="page" id="loginarea">

    <div data-role="content" id="maincontentarea2"> 
    <img src="media/OUIChef.png" style="margin-top:75px" id="mainimage">

    <div data-role="fieldcontain" class="ui-hide-label">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" value="" style="text-align:center" placeholder="Username"/><BR>
<label for="username">Password:</label>
    <input type="password" name="password" id="password" value="" style="text-align:center" placeholder="Password"/>
</div>   
     <div style="text-align:center">
    <a href="javascript:doLogin();" data-role="button" data-inline="true" data-mini="true">DO LOGIN</a>
</div>

</div><!-- /page -->
</div>
</body>
</html>

So when I hit the login button it take me to my options.php page vi the following function:

function doLogin(){

$.ajax({
  type: "POST",
  url: "functions/checklogin.php",
  data: {
      usrnm: $('#username').val() , passwd: $('#password').val()
        }
})
  .done(function( msg ) {
    if(msg.match(/YES/)){
         $('#username').val('');
          $('#password').val('');

        $("body").pagecontainer("change","pages/options.php",{ });
    }
    else
   {
    alert(msg);
    }

  });   

}

In the URL bar I now have http://localhost/~me/OUI/pages/options.php and everhthing in the page is working well. I have the signout button. in the code which calls

OPTIONS.PHP:

<div data-role="page" id="optionspage">    
<div data-role="header">
<a href="javascript:doSignout();" data-role="button" data-mini="true"  class="ui-btn-right" style="padding:5px">Sign Out</a>

    <h1>MAIN</h1>
</div>

    <div data-role="content" id="options1"> 
    <? if($_SESSION['role']=='A'){?>
      <a href="admin.php" data-role="button"  data-mini="true">ADMIN PAGE</a> 
      <a href="ordersetup.php" data-role="button"  data-mini="true">ORDER SETUP PAGE</a> 
      <? } ?>
       <a href="production.php" data-role="button"  data-mini="true">PRODUCTION</a>
        <a href="menurecipe.php" data-role="button" data-mini="true">MENU / RECIPE PAGE</a>


    </div><!-- /content -->
    </div>

this calls the JS:

function doSignout(){
$.ajax({
  type: "POST",
  url: "../functions/signout.php",
  data: {    }
})
  .done(function( msg ) {
       $('body').pagecontainer( "change", "#loginarea",{});

  });   
}

I can never get the link to the signout page to link correctly. If I put the double dots which should be correct from the "pages" folder I get it trying to link to

http://localhost/~me/functions/signout.php

and if I remove the double dots I get

http://localhost/~me/OUI/pages/functions/signout.php

both which are 404 errors.......this is BUNK in my book. the ".." is actually removing two directories..not just one.

What is happening? PLease help

If the login script is failing, why didn't you provide that code? — , Jan 24 '14 at 03:14
It isnt' the login script. It is the access to anything once I run the doSignout Javascript. It is as if Jquery mobile loses the abaility to AJAX load anything. — BostonMacOSX, Jan 24 '14 at 13:28
Check out http://stackoverflow.com/questions/19174611/how-to-change-page-in-latest-jquery-mobile-1-4-beta — user583576, Jan 24 '14 at 13:38

Pebbl · Answer 1 · 2014-01-24T14:02:44.980

As we don't see you log-in function, I'm assuming it looks something like the following?

$.ajax({
  type: "POST",
  url: "../functions/signin.php",
  data: {}
})

If that is the case how does "../functions/signin.php" find it's mark when you are residing at /OUI/ initially — surely it would need to be "functions/signin.php" when you are on your home page.

Simply put I'm guessing your sign-in code is different on the homepage initially, and then after loading subsequent pages via ajax your sign-in code is getting overwritten or modified with code that is designed to work with a "../" prefix on deeper pages... and this isn't getting rectified when you switch back to the home page.

Basically you need to rewrite your code to detect how many folders deep the current URL is at and request your ajax files accordingly... either that or set one global variable (that is easily updatable) that keeps a full domain path to prefix all ajax urls with. i.e.:

var ROOT_URL = 'http://localhost/OUI/';

Depending on what you want to use this path can be generated by either PHP or JavaScript, PHP is more reliable — as in the end user does not require JavaScript — but it can be confused when hosted behind proxies and shared hosts.

var ROOT_URL = 'http://<?php echo $_SERVER["HTTP_HOST"]; ?>/OUI/';

var ROOT_URL = 'http://' + window.location.host + '/OUI/';

Cannot access scripts when return to main page of Jquery site

1 Answers1