CODEWITHSUNDEEP
jquery-mobile
user418775
user418775

Reputation: 698

Jquery mobile page navigation corrupts base url and causes ajax on main page to fail

My main page is here: http://www.mydomain.com/main/main.php

My login page is here: http://www.mydomain.com/main/pages/login.php

Main.php uses ajax to fetch data in response to a tap event. This works fine until I navigate to my login page and then back to my main page. After going to the login page and back, the relative paths get messed up such that the ajax looks for server file in the wrong place.

here is the ajax:

   1. function get_more_data() {
   2.    more_data_index += 15;
   3.    var formData = "index=" + more_data_index;
   4.     $.ajax({
   5.       type: "POST",
   6.       url: "genxml.php", // file located here:  http://www.mydomain.com/main/genxml.php
   7.       cache: false,
   8.       data: formData,
   9.       dataType: "xml",
  10.       success: showFiles3,
  11.       error: onErrorMoreData
  12.     });
  13. }

After I navigate back to main.php from login.php the ajax tries posting to the wrong location: http://www.mydomain.com/main/pages/genxml.php

(genxml.php is not in the "pages" subdirectory; it's in the main directory.)

I tried updating the ajax to use an absolute path: url: "http://www.mydomain.com/main/genxml.php"

This made the post successful, but my data parsing failed because relatives paths are used in the main file for things like images. So instead of getting images from here: http://www.mydomain.com/main/ the script was trying to get images from here: http://www.mydomain.com/main/pages/

I've found a few posts with people having similar issues, but I've not come across a solution. I've also tried reading the jquerymobile docs and it's very possible that the jquery developers attempt to cover this issue here, but I admit I don't completely understand everything on this page: http://jquerymobile.com/demos/1.0b3/#/demos/1.0b3/docs/pages/page-navmodel.html

If anyone can help I would really appreciate it. Thanks.

P.S. This issue happens on Android and Google Chrome, but not in Firefox.

Upvotes: 2

Views: 2144

Answers (2)

sgliser
sgliser

Reputation: 2071

I have created a working example of what you're trying to do. You should be able to look at this and see what I've done. Be sure to checkout the master.js. I think that the key to making it work in your situation is to nest the ajax calls within the "pageshow" event to be sure that your baseURL has been updated. You can download the example at http://www.roughlybrilliant.com/stackoverflow/7372909.7z

View the example in action as it pulls in weather.xml with relative URLs.

$("div").live("pageshow", function(){
    var $page = $(this);
    get_more_data();
});

Upvotes: 1

Milan Jaric
Milan Jaric

Reputation: 5646

Why don't you use one of this:

  1. use "../main.php" when redirecting back from login page, or
  2. remember UrlRefer from Headers when you entering login.php and use that to redirect back to any previous page with 301

Upvotes: 0

Related Questions