Problem reading a page with Ajax loader script

[Spike]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem:

I'm trying to load a page, but I'm not getting any result.

Page trying to load: http://review.bovag.nl/00968600/widgetframe.js

I think the problem is that the page has .js extension, but it returns HTML.

The aim is to get this HTML in my page, like the 'Ferrari' and 'Porsche' pages are doing in the example.

Anyone able to help me out?

[jscheuer1]

Put it in an iframe:

<iframe src="http://review.bovag.nl/00968600/widgetframe.js" width="302" height="79" hspace="0" vspace="0" scrolling="no" frameborder="0"></iframe>

Put that on your page. Or put it in an external file on your domain and fetch that file using the AJAX script.

[Spike]

I wanna avoid the iframe, since I wanna alter the content. (add some CSS)

And since the content is dynamic in the .js, I can't just copy it and place it in my own .html file. I really need to read it again each time.

[jscheuer1]

No matter what you do, if it's not on your domain, you would need server side code to do that. That's because you cannot import cross domain with AJAX. You could access the code in the iframe and do things with that, but again only if it were on your domain.

Regardless of where it is though, you could just take its HTML code and place that on your page or on an external page on your domain:

<div style="background-image:url(http://review.bovag.nl/images/kvbovagwidgetbg.jpg);height:79px;width:300px;">
<div style="position:relative;left:60px;top:27px;width:230px;font-family:\'Lucida Grande\',\'Lucida Sans Unicode\',\'Lucida Sans\',Tahoma,Arial;font-size:11px;line-height:1.3em;color:#000">
Klanten beoordelen ons met een <strong>8,1</strong>.<br />95% beveelt ons aan.
</div>
<a href="http://www.bovag.nl/index.php?pageID=59&catalog=membercars&externalID=00968600" target="_blank" style="line-height:1.3em;position:relative;top:29px;left:60px;font-family:\'Lucida Grande\',\'Lucida Sans Unicode\',\'Lucida Sans\',Tahoma,Arial;font-size:10px;background:url(http://review.bovag.nl/images/bg_submit.png) no-repeat scroll right top transparent;color:#FFFFFF;display:inline-block;height:21px;line-height:20px;overflow:hidden;margin-right:3px;text-decoration:none;width:130px;"><span style="margin-left:5px">Bekijk beoordelingen</span></a>
<a href="http://review.bovag.nl/enquete/00968600/" target="_blank" style="line-height:1.3em;position:relative;top:29px;left:60px;font-family:\'Lucida Grande\',\'Lucida Sans Unicode\',\'Lucida Sans\',Tahoma,Arial;font-size:10px;background:url(http://review.bovag.nl/images/bg_submit.png) no-repeat scroll right top transparent;color:#FFFFFF;display:inline-block;height:21px;line-height:20px;overflow:hidden;text-decoration:none;width:105px;"><span style="margin-left:5px">Beoordeel zelf</span></a>
</div>

Is it on your domain?

If so, you might be able to use a more complex AJAX call. If it's not on your domain, just use the above HTML instead. That will also work even if it is on your domain.

And what style did you have in mind? If all you want is a border and/or background, you could do that with an iframe. If you want to change the style of the tags in its HTML, it would probably be easiest to just use the HTML code.

[Spike]

Sorry missed the notification of a new reply.

This ain't on the same domain, but I might be able to convince them to alter the widget a little.

Is there a specific header I can set on the external file, so it will be available for the ajax loader?

I wanna make some more changes then just the border. (alter bg-image, link images, overall width etc)

[jscheuer1]

Use the HTML code then, no header:

<div style="background-image:url(http://review.bovag.nl/images/kvbovagwidgetbg.jpg);height:79px;width:300px;">
<div style="position:relative;left:60px;top:27px;width:230px;font-family:\'Lucida Grande\',\'Lucida Sans Unicode\',\'Lucida Sans\',Tahoma,Arial;font-size:11px;line-height:1.3em;color:#000">
Klanten beoordelen ons met een <strong>8,1</strong>.<br />95% beveelt ons aan.
</div>
<a href="http://www.bovag.nl/index.php?pageID=59&catalog=membercars&externalID=00968600" target="_blank" style="line-height:1.3em;position:relative;top:29px;left:60px;font-family:\'Lucida Grande\',\'Lucida Sans Unicode\',\'Lucida Sans\',Tahoma,Arial;font-size:10px;background:url(http://review.bovag.nl/images/bg_submit.png) no-repeat scroll right top transparent;color:#FFFFFF;display:inline-block;height:21px;line-height:20px;overflow:hidden;margin-right:3px;text-decoration:none;width:130px;"><span style="margin-left:5px">Bekijk beoordelingen</span></a>
<a href="http://review.bovag.nl/enquete/00968600/" target="_blank" style="line-height:1.3em;position:relative;top:29px;left:60px;font-family:\'Lucida Grande\',\'Lucida Sans Unicode\',\'Lucida Sans\',Tahoma,Arial;font-size:10px;background:url(http://review.bovag.nl/images/bg_submit.png) no-repeat scroll right top transparent;color:#FFFFFF;display:inline-block;height:21px;line-height:20px;overflow:hidden;text-decoration:none;width:105px;"><span style="margin-left:5px">Beoordeel zelf</span></a>
</div>

You can put that right on your page where you want the image to appear, or you may put that and only that in an external file on your domain and fetch it via AJAX.