Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Ajax - get form data from another page/sub-domain

I am not sure if this is possible, but I am guessing so because it was accomplished by this website, using the same service provider (Boost Auto): http://www.richmondautomall.com/

They have a form in the top left, Find The Car You Love, that I believe gets data from this ,">sub-domain page, which is actually hosted by Boost Auto, but is a sub-domain of the main website.

What I need to replicate from that website is:

  1. My main website form is populated by the data on the sub-domain page form

  2. The form values change based on your selection. i.e. if you chose Ford, only Ford models can then be selected.

Some key notes...

  • I have access to fully edit the sub-domain page, despite it being hosted by the service provider, so I can call my own scripts on that page, etc.

  • I do not yet have a full Boost Auto based sub-domain setup on my dev domain, if this is needed I can try to get that going from them.

This is what I have so far, but I don't know if it will be of any help, one because it doesn't work properly and it's way too slow. My test dev site is here: http://nat.mountainairweb.com/about-us/

$.ajax({
url: '<http://nat.mountainairweb.com/rentals/>',
type: 'get',
dataType: 'html',
success: function (response) {
    // on success, read the response and pull out whatever data you need and apply it to your site.          
    var result = response;
    var boostHTML = $('#yomo').html(result); // target form element, content you want to pull in
    $('#input_1_2').html(boostHTML); // destination local tag, being replaced with target content from Boost feed.
},
failure: function () {
    alert("there was an error");
},
error: function(data, status){ alert(status); }

});

User Gravatar

creativelogic

Posted Aug 26 2013 20:53 UTC

$100


  • Assigned To guyisra
  • Solved
  • ajax
    sub-domain
  • 8671 Views

13 Replies


I don't see anywhere on http://www.richmondautomall.com/ where this trick is done.

Actually it seems that http://www.richmondautomall.com/ only redirects to a page once form is submitted, no ajax, no jsonp, nothing.

Whatyou could use in your case is jsonp: a hack to workaround the same origin policy: http://en.wikipedia.org/wiki/Same_origin_policy

In your example, your server side script should return jsonp compliant data: http://www.jquery4u.com/json/jsonp-examples/

You can also do real XHR by sending the correct headers to your browser. Here is a good tutorial to enable CORS: http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-cors

User Gravatar

florian-klein

Posted Aug 27 2013 7:38 UTC

I am not sure I understood what you need, but this is what I figured. First, for some reason, I didn't get jquery loaded on your site.. I used

var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="http://codeorigin.jquery.com/jquery-1.10.2.min.js";
oHead.appendChild( oScript);

check to see if jquery is loaded properly on your end.

Then I managed to get the data from rentals and insert it like so

$.ajax({
url: '/rentals/', 
type: 'get',
dataType: 'html',
success: function (response) {
    // on success, read the response and pull out whatever data you need and apply it to your site.          
    var t=$(response).find("#yomo");
$('#input_1_2').html(t.html());
}});

notice that url is relative and without the < > also, note how I grabbed the selectors from the response using $(response).find("#yomo") This is the way to take a returned html type and use jquery selectors to grab data from it. There are also other ways, but this is the most comfortable for me Then, once I have the node, I just insert the html to input_1_2

Forgive me for not doing the error and failure since is not very interesting for the answer

Let me know if that is what you needed to be done and/or if you need more help

User Gravatar

guyisra

Posted Aug 27 2013 17:48 UTC

Solution

This didn't solve your task? Get your own custom solution.

Also note, that the page you gave as example doesn't use javascript to load information according to the car chosen, but the information exists on the page and it uses

$("#dropDownListMakes").change( .. ) to pick the relevant data from the data that already exists on the page (See the source).

User Gravatar

guyisra

Posted Aug 27 2013 18:49 UTC

Hi, guyisra

Thanks for the info so far. Very helpful...not sure why jQuery wasn't loading for you, if I check the page source it does load, but note as this is a WordPress powered website the jQuery it loads is in noConflict() mode, so that may have been the issue.

I will try your suggestions today, and let you know if I have any follow up questions.

And yes, sorry for some reason I thought the example site I gave was using JS to pull the data, but instead it seems to be some sort of XML feed, or something?? So I still have the problem of how to get the form data for the source form onto my main website, especially if the source site has to end up being sub-domain as then I run into cross-domain Ajax restrictions.

User Gravatar

creativelogic

Posted Aug 27 2013 19:41 UTC

Hi again guyisra,

Your code works nicely, thank you! It's a bit slow to update the form I guess because it has to load the entire /rentals/ page first before it can update right?

But let me explain a bit better what my final end goal is, I can explain it better now thanks to your initial assistance.

So this is the page I ultimately need to pull the form from: http://boost.mountainairweb.com/search.aspx?DealershipID=1807

And I noticed it uses /js/search.js to sort/refresh the relevant data, using the .change jQuery function you mentioned. And I noticed that function utilizes (at the bottom of the HTML) to update the various fields. So I should just be able to use that script if ONLY I can find a way to pull in that UL to my main website right?

User Gravatar

creativelogic

Posted Aug 27 2013 22:40 UTC

Hi,

Yes, If you could get the #makesData to your site you could use that /js/search.js since its normal js. The thing is that the boost domain doesn't allow cross origin requests are not allowed.

Your options are, as I see it:

  1. If you know the admin of the boost sub-domain you can ask them to allow cross origin requests specific to your sub-domain

  2. Copy-paste #makesData as this data seems mainly static (cars and models and years don't change every day) to your site and use this to populate your form

  3. Alternativly, if you need a more updated list of cars and models you could use http://www.carqueryapi.com/ which also support a wordpress plugin (but if you know that cars and models and years you need you shouldn't really need that)

User Gravatar

guyisra

Posted Aug 28 2013 3:43 UTC

Thanks for the options...they make sense and somewhat what I was thinking.

The end client is a client of Boost so I think #1 sounds best (and hopefully they allow it!). Unfortunately it's really the only option as they models need to reflect the models for they have for sale not necessarily just what models there of that car maker.

So for Option #1, if Boost allows CORS, I just need to GET the element as we did above and I should be rocking?

Thanks for the assistance!

User Gravatar

creativelogic

Posted Aug 28 2013 3:57 UTC

essentially yes - if they allow CORS, it will be the same by using something like

$.ajax({
url: 'http://boost.mountainairweb.com/search.aspx?DealershipID=1807',
type: 'get',
dataType: 'html',
success: function (response) {
    // on success, read the response and pull out whatever data you need and apply it to your site.          
    var t=$(response).find("#makesData");
$('#input_1_2').html(t.html()); //or something else with the data
}})
User Gravatar

guyisra

Posted Aug 28 2013 4:03 UTC

By the way, In case boost admin's can't/won't allow cors there is a way you can still pull #makesData

This is pretty much the last option, since it will be a bit slower, and not really straight forward, but it does work

using http://anyorigin.com/ you could do

$.getJSON('http://anyorigin.com/get?url=http%3A//boost.mountainairweb.com/search.aspx%3FDealershipID%3D1807&callback=?', function(data){
    var res = $(data).find("#makesData");
});

and then use res as you need in your site.

This isn't the best thing, since you depend on a 3rd party website (which if it is down, your site also suffers). So if boost allows cors on your specific subdomain (to limit the cors only to you) this is still better.

User Gravatar

guyisra

Posted Aug 28 2013 4:46 UTC

Thank a ton for the extra idea! It worked when I tried it on AnyOrigin but not when I inserted the code from AnyOrigin. More importantly, see below....

In good news the Boost admin was able to setup CORS, so checking the headers when I visit my test page, the source site seems to be setup for CORS.

Access-Control-Allow-Origin:nat.mountainairweb.com

But you can also see it still errors out. It's frustrating, as issue #2 was solved--I can get the sorting working if I manually pull in #makesData.

So all I need now is a way to get the content of #makesDate onto the main website. Doesn't matter how: Ajax,PHP (cURL), whatever. Just need to get it on there, even if it only refreshes every day or so. Seems like Ajax is the way to go since we've gone this far. But, if there is another though way I can post this as a new question, just let me know?

User Gravatar

creativelogic

Posted Aug 29 2013 0:30 UTC

This is odd..

First, lets try to debug this - the error coming out is

XMLHttpRequest cannot load http://listings2011.boostmotorgroup.com/search.aspx?dealershipID=1807. Origin http://nat.mountainairweb.com is not allowed by Access-Control-Allow-Origin. 

I haven't found in the cors spec whether http:// is required, but since the server specifies Access-Control-Allow-Origin:nat.mountainairweb.com and then returns an error that Origin <http://nat.mountainairweb.com> is not allowed is maybe an indicator that http:// should be included.

Note, I have checked this on my server and there is a difference between nat.mountainairweb.com and <http://nat.mountainairweb.com>

Then try running

$.ajax({
url: 'http://listings2011.boostmotorgroup.com/search.aspx?dealershipID=1807', 
type: 'get',
dataType: 'html',
success: function (response) {
    // on success, read the response and pull out whatever data you need and apply it to your site.          
    var t=$(response).find("#makesData");
$('#input_1_2').html(t.html());
}});

and see if you still get an origin error. if not then great!

If that doesn't help/work, lets try to reduce the problem to try and pinpoint it. For a limited time, ask the boost admin to specify Access-Control-Allow-Origin:"*"

This means that any origin is allowed. This is not a very secure practice, which is why it should be for a short time, just to make sure whether its on their end or your end.

try running the same ajax above and see if you get an error. If you still get an error, we need to dig further. If not, then we need to make sure the cors is setup correctly with your domain

User Gravatar

guyisra

Posted Aug 29 2013 4:25 UTC

I see that the code styling here adds < > to the urls, make sure you remove them before try

User Gravatar

guyisra

Posted Aug 29 2013 4:27 UTC

Yes, I noticed the < > thing being added a while back, that's why my original code snippet had that I guess. I sent a note to the site admin.

Anyway, SUCCESS! With the http:// in it works. Strange as I you are right nothing seems to mention that being need. But all that matters is it works.

I think that wraps this up fully then now that I have both items from my original request completed. Thank you again!

User Gravatar

creativelogic

Posted Aug 29 2013 15:59 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions