Using latest - AJAX requests broken due to incorrect host name

[PorridgeBear]

I wanted to test out some of the latest fixes so reference the http://code.jquery.com/mobile/latest/jquery.mobile.js nightly.

All my AJAX requests have broken and the reason appears to be that the domain and URI are malformed.

So in Alpha 1.4 AJAX requests correctly point to

http://localdomain/mobile/book/addressSearch/ec1r4rr

In the nightly vNightly-20110511 the URL becomes

http://localdomainpickup-page/mobile/book/addressSearch/ec1r4rr

That is, somehow the domain has become a combination of the localhost and the page ID

http://localdomainpickup-page/

[toddparker]

This looks like something Kin should look at.

[baquila]

I can confirm this issue also. I'm sending AJAX requests from within a nested list and now they're broken. The original AJAX URL was:
http://www.truckingtruth.com/parking.php?tsAddComment=true&parkinglocationid=168&uid=5&comment=

...which still works fine in the alpha release. But in the latest release the URL is being sent as:
http://www.truckingtruth.compage1/parking.php?tsAddComment=true&parkinglocationid=168&uid=5&comment=

...note the "page1" inserted after truckingtruth.com

I can give access to the app if it would help - just let me know if you wanna see it.

[PorridgeBear]

I think this ought to be a blocker. It turns normal jQuery calls of the following URL format

$.getJSON('/mobile/book/addressSearch/' ...

into malformed URLs by introducing the page ID.

http://localdomainpickup-page/mobile/book/addressSearch/

[toddparker]

The people have spoken. This is now a blocker.

[baquila]

LoL! Yeah, it should be a blocker - I agree. Good call.

[jblas]

If someone can give us an url or sample markup that reproduces the problem I can take a look at this right away.

[baquila]

Ok, here's what I've got. On your desktop, go to my mobile app:

http://www.truckingtruth.com/parking/index.html

Login using:
email: test@test.com
pass: test

Then do a search for truck stops on Interstate 10 in California. When the list comes up, choose any truckstop, then on the next page choose "leave a comment". When you type in a comment and hit submit, the spinner will just keep spinning and in the console you'll get an error message:

"XMLHttpRequest cannot load http://www.truckingtruth.compage1/parking.php?tsAddComment=true&parkinglocationid=134&uid=5&comment=gfdgf. Origin http://www.truckingtruth.com is not allowed by Access-Control-Allow-Origin."

The "page1" part of the URL should not be there. Let me know if you have any problems getting logged in or anything.

[toddparker]

Thanks for the link, we'll take a look now.

[jblas]

Hmmm, that's kind of a complex sample. :-)

So the leave a comment form has markup that looks like this:

    <form data-ajax="false">

Are you intercepting the submit of the form on your own and doing some processing?

[PorridgeBear]

I wish i had time to write up a quick test, but it does require AJAX transitioning so that you are on a hashed page ID in the URL and then a simple $.getJSON makes this issue occur for me. I don't have form data-ajax false as above, although I do have an onsubmit="return false" but this is all standard stuff. If this issue is not resolved by next week I'll write up a sample.

[baquila]

Yap - I'm interception the submit and here's the click function for the submit button:

$('.commentButton' + parkinglocationid).bind('click.commentButton', function(e){
                          e.preventDefault();
                          $.mobile.pageLoading();
                          var comment = $('.leaveComment' + parkinglocationid).val();
                          $.getJSON('parking.php', {"addComment":"true","parkinglocationid":parkinglocationid,"uid":jsper.get('parking-uid'), "comment":comment}, function(data) {
                            $.mobile.pageLoading('true');
                            if (data.status=="success"){alert("We've got it. Thanks!");}
                            else {alert("There was a problem reaching the network. Please re-submit comment. If problem persists, please let us know. Thanks");}
                          });
                      }); //.commentButton .bind click() 

The "parkinglocationid" is just an identifier that's dynamically generated out of the database so I know which location the comment is regarding - so it has no effect on the problem

And yap again - the form does have data-ajax="false"

Sorry it's so complex - that's all I've got.

[baquila]

The AJAX request that gets sent is :

http://www.truckingtruth.compage1/parking.php?tsAddComment=true&parkinglocationid=44&uid=5&comment=This+is+a+comment

The "page1" part is being appended and that's what is causing the problem

[baquila]

The form is in a nested list that basically looks like:

<ul>
  <li>truck stop listing
         <ul>
              <li>View comments</li>
              <li>Leave a comment
                    <ul>
                         <li>
                             <form data-ajax="false"><input type="text"><input type="submit"></form>
                         </li>
                   </ul>
             </li>
       </ul>
    </li>
</ul>

[baquila]

Ok, I created the simplest example possible:

http://www.truckingtruth.com/parking/jquery.html

Load the page, click on "continue to the problem", then click on "click here for the problem" and you'll get an error message in your console:

XMLHttpRequest cannot load http://truckingtruth.compage1/parking.php?test=true. Origin http://truckingtruth.com is not allowed by Access-Control-Allow-Origin.

The structure of the page is:

<body> 

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

        <div data-role="header" data-theme="b">
            <div class="center">Header</div>
        </div><!-- /header -->

        <div data-role="content" class="content">

              <ul data-role="listview">
                 <li><h3>Continue to problem -></h3>
                          <ul data-role="listview">
                              <li><a href="#" class="probButton">Click here for the problem</a></li>
                          </ul>
                 </li>
              </ul>
         </div>

         <div data-role="footer">
            <h3>Footer</h3>
         </div>
</div>
</body>

I simply did a click function with preventDefault on the button and the function was:

$('.probButton').click(function(e) {
                        e.preventDefault();
                        $.getJSON('parking.php', {'test':'true'}, function(data) {

                        });
});

It should not be appending "page1" to the end of "truckingtruth.com" in the getJSON request