Loading image info from external txt file and displaying in html file

I want to have a Javascript function load information for an image from an external text file, and display the image on my WordPress site. I found some code online to load and parse an external text file.

I haven't been successful in getting it to work though.

I set up a separate html test page, but that's not working either.

I'm trying to have the site load that js file, and output the image,开发者_开发技巧 using this code in the mmusic div:

document.write('<a href="' + AdLinkPath[0] + '" target="_blank"><img src="' + AdFilePath[0] + '" width="' + AdWidth[0] + '" height="' + AdHeight[0] + '"/></a>');

I tried the same code in the test.html file, and I haven't been able to get it to work.

Can someone please tell me what I'm doing wrong?

Thanks!

I'm not sure what your specific problem is, but there are certainly a number of things that you could do to improve the overall design.

Firstly, are you sure that this is even something that you want to do in Javascript? It seems like you are modifying a text file on your server to tell your pages which ads to serve. That's alright, but if you have the option, it would be better to do this server side. Just include the appropriate urls to the images before you send the HTML back to the users browser using PHP or a similar language if you have access to do so. This removes complexity from your code, improves page load speed, and properly displays your ads even without proper Javascript support.

If you are going to do this with AJAX, then I would highly recommend using JSON formatted data and some type of library to handle the request for you. Parsing text files presents a number of problems, and formatting data as JSON gives you a cheap way to convert it to a Javascript object. jQuery is one popular choice for doing this: http://api.jquery.com/jQuery.getJSON/

You could format your file more like:

{
    "img": "http://myhost/img/mm.jpg"
    "link": "http://myhost/"
    "width": "192"
    "height": "108"
}

Then you would need to do something like this to update the image field on your page:

$.getJSON("test.js", function(json) {
    $.each(json, function(key, value) {
        //parse the keys and values appropriately in here
    });
});

You also probably don't want to use document.write. This overwrites the entire content of the page. You probably want to select your image element in some way and then change its attributes. You can use jQuery selectors for this. See the section on manipulation for ways to modify the img element once you've selected it.

http://api.jquery.com/category/selectors/

http://api.jquery.com/category/manipulation/

The document.write statement is occurring before the AJAX response is received. If you move that statement directly after the four return statements it should solve your problem.