Question

I have this code & I’ve tired using JQuery’s appendTo() function to get this widget to display…there is something I’m missing but I’m having trouble pin-pointing it.

Here is the original code, see below:

var theText = new Array();
theText[0] = "David Footitt is absolutely delighted with them and the service he received.<br /><br />Regtransfers are definitely the first port of call whenever I or my colleagues are looking for a special number plate, he said.";
theText[1] = "What was Prakash Patel's experience with Regtransfers?<br /><br />Great service, always keeping us up to date with related plates, transfers done very easily and value for money.";
theText[2] = "4 MBE is one the best investments that I have made in recent years.<br /><br />Thanks to Regtransfers for making it such a simple and straightforward process. It's definitely got me thinking about others for the business.";

var links = new Array();
links[0] = 'http://www.regtransfers.co.uk/number-plates-stories/new51.asp';
links[1] = 'http://www.regtransfers.co.uk/number-plates-stories/oo08cty.asp';
links[2] = 'http://www.regtransfers.co.uk/main/stories/4mbe.asp';

var title = new Array();
title[0] = '<strong>David Footitt</strong><br />(News Transport Ltd)<br />NEW 51';
title[1] = '<strong>Prakash Patel</strong><br />(City Inter-Rent)<br />OO08 CTY';
title[2] = '<strong>Sandeep Patel</strong><br />(Ambe Medical Group)<br />4 MBE';

var images = new Array();
images[0] = '/images_new/rotatingTestimonials/new51.jpg';
images[1] = '/images_new/rotatingTestimonials/oo08cty.jpg';
images[2] = '/images_new/rotatingTestimonials/4mbe.jpg';

var j = 0
var p = theText.length;

var whichImage = Math.round(Math.random()*(p-1));

document.write('<div style="padding:3px; border:1px solid #CCC;"><div style="background-image:url(/images_new/backgrounds/grey_gradient.jpg); background-repeat:repeat-x; text-align:center; font-weight:bold; font-size:90%; padding:5px;">Satisfied Customer</div><p align="center" style="font-size:11px;">' + title[whichImage] + '</p><p align="center" style="font-size:11px;"><img src="' + images[whichImage] + '" alt="Customer Testimonials" style="width:140px" /></p><p align="left" style="font-size:11px;">' + theText[whichImage] + '</p><p align="right" style="font-size:11px;"><a href="' + links[whichImage] + '">read more ...</a></p></div>');

I thought if I change the last line to:

$('<div...long html string with the other variables').appendTo($('#rotate-testimonials'));

it might work. Can anyone tell me where I’m going wrong??

Any help is Greatly Appreciated, Thanks

Answer 1

Fundamentally, it works, but I suspect you wanted to replace the rotate-testimonials content rather than appending (adding) to it. So the last line would be:

$('#rotate-testimonials').html(...long string...);

Live example

Edit: You’ve said that what’s going wrong on your end is that nothing shows up in the DIV#rotate-testimonials. You should have been seeing something, even with your original code, so here are some things to check:

1. Are you running your code before the div#rotate-testimonials exists in the DOM? E.g., is the script above the div and not wrapped in a ready handler or similar? This is an easy-to-make mistake. The div has to exist before you can write to it, and script is run immediately. In my example above, note that everything is wrapped in a jQuery(function($) { ... }); structure, which isn’t called until the DOM is ready to be manipulated. You can do it that way, or just put your script at the very end of the page, just before your </body> tag.
2. Do you really have a div with id="rotate-testimonials"? E.g., no typos or similar, it’s an id not a name, etc.
3. Do you have only one element or other global object with that name? (Easy way to check: Change the name to “fluglehorn” both in the id="..." in the markup and in the script. If it starts working, that means you have something else also called rotate-testimonials kicking around somewhere. Of course, this assumes you don’t have anything called fluglehorn lying around…

If it’s none of those things, I’m out of ideas, but hopefully comparing what you have with the working version above will help.

---

Off-topic: That said, a bit of refactoring can help make it easier to add entries to the testimonials, etc. Rather than parallel arrays, I’d use an array of objects, with a property for each of the bits of information (text, title, link, image). Also, you can use array and object literal notation (rather than new Array(); and then a bunch of assignments.

Here’s a version that just changes to array literal notation:

var theText = [
  "David Footitt is absolutely delighted with them and the service he received.<br /><br />Regtransfers are definitely the first port of call whenever I or my colleagues are looking for a special number plate, he said.",
  "What was Prakash Patel's experience with Regtransfers?<br /><br />Great service, always keeping us up to date with related plates, transfers done very easily and value for money.",
  "4 MBE is one the best investments that I have made in recent years.<br /><br />Thanks to Regtransfers for making it such a simple and straightforward process. It's definitely got me thinking about others for the business."
  ];

var links = [
  'http://www.regtransfers.co.uk/number-plates-stories/new51.asp',
  'http://www.regtransfers.co.uk/number-plates-stories/oo08cty.asp',
  'http://www.regtransfers.co.uk/main/stories/4mbe.asp'
  ];

var title = [
  '<strong>David Footitt</strong><br />(News Transport Ltd)<br />NEW 51',
  '<strong>Prakash Patel</strong><br />(City Inter-Rent)<br />OO08 CTY',
  '<strong>Sandeep Patel</strong><br />(Ambe Medical Group)<br />4 MBE'
  ];

var images = [
  '/images_new/rotatingTestimonials/new51.jpg',
  '/images_new/rotatingTestimonials/oo08cty.jpg',
  '/images_new/rotatingTestimonials/4mbe.jpg'
  ];

var j = 0
var p = theText.length;

var whichImage = Math.round(Math.random()*(p-1));

$('#rotate-testimonials').html(
  '<div style="padding:3px; border:1px solid #CCC;"><div style="background-image:url(/images_new/backgrounds/grey_gradient.jpg); background-repeat:repeat-x; text-align:center; font-weight:bold; font-size:90%; padding:5px;">Satisfied Customer</div><p align="center" style="font-size:11px;">' + title[whichImage] + '</p><p align="center" style="font-size:11px;"><img src="' + images[whichImage] + '" alt="Customer Testimonials" style="width:140px" /></p><p align="left" style="font-size:11px;">' + theText[whichImage] + '</p><p align="right" style="font-size:11px;"><a href="' + links[whichImage] + '">read more ...</a></p></div>');

Live copy

And here’s a minimally-refactored version that uses an array of objects instead:

var entries = [
    {   text:   "David Footitt is absolutely delighted with them " +
                "and the service he received.<br /><br />Regtransfers " +
                "are definitely the first port of call whenever I or " +
                "my colleagues are looking for a special number plate, he said.",
        link:   "http://www.regtransfers.co.uk/number-plates-stories/new51.asp",
        title:  "<strong>David Footitt</strong><br />(News Transport Ltd)<br />NEW 51",
        image:  "/images_new/rotatingTestimonials/new51.jpg"
    },
    {   text:   "What was Prakash Patel's experience with Regtransfers?<br />" +
                "<br />Great service, always keeping us up to date with related " +
                "plates, transfers done very easily and value for money.",
        link:   "http://www.regtransfers.co.uk/number-plates-stories/oo08cty.asp",
        title:  "<strong>Prakash Patel</strong><br />(City Inter-Rent)<br />OO08 CTY",
        image:  "/images_new/rotatingTestimonials/oo08cty.jpg"
    },
    {   text:   "4 MBE is one the best investments that I have made in recent " +
                "years.<br /><br />Thanks to Regtransfers for making it such a " +
                "simple and straightforward process. It's definitely got me " + 
                "thinking about others for the business.",
        link:   "http://www.regtransfers.co.uk/main/stories/4mbe.asp",
        title:  "<strong>Sandeep Patel</strong><br />(Ambe Medical Group)<br />4 MBE",
        image:  "/images_new/rotatingTestimonials/4mbe.jpg"
    }
];

var j = 0
var p = entries.length;

var whichImage = Math.round(Math.random()*(p-1));

$('#rotate-testimonials').html(
  '<div style="padding:3px; border:1px solid #CCC;"><div style="background-image:url(/images_new/backgrounds/grey_gradient.jpg); background-repeat:repeat-x; text-align:center; font-weight:bold; font-size:90%; padding:5px;">Satisfied Customer</div><p align="center" style="font-size:11px;">' + entries[whichImage].title + '</p><p align="center" style="font-size:11px;"><img src="' + entries[whichImage].image + '" alt="Customer Testimonials" style="width:140px" /></p><p align="left" style="font-size:11px;">' + entries[whichImage].text + '</p><p align="right" style="font-size:11px;"><a href="' + entries[whichImage].link + '">read more ...</a></p></div>');

Live copy

You can go even further than that (and certainly a stylesheet would help that massive string at the end), but you get the idea.