Choose Random xml entry once per load with jquery

Question

I am trying to choose from a number of entries in an xml file and show them on a webpage. I can't seem to figure out what I am doing wrong... does anyone have suggestions?

Thank you for your time :-)

    <script type="text/javascript">

    var numLow = 1;
    var numHigh = 3;
    var adjustedHigh = (parseFloat(numLow))+1;
    var numRand = Math.floor(Math.random()*adjustedHigh)+parseFloat(numLow); 

$.ajax({
type: 'GET',
url: '../xml/testad.xml',
dataType: 'xml',
success: function(xml_list) {

var xmlArr = [];

$(xml_list).find('entry').each(function(i) {
  var xml_id = $(this).attr('id');
  if(xml_id == numRand) return; //keep going if this wasn't the right ID

    var xml_name        = $(this).find('name').text();
    var xml_link        = $(this).find('link').text();
    var xml_url         = $(this).find('url').text();
                      // Add matched items to an array
    xmlArr += '<div class="ad"><a href="';
    xmlArr += xml_url;
    xmlArr += '" alt="'
    xmlArr += xml_name;
    xmlArr += '"><img src="';
    xmlArr += xml_link;
    xmlArr += '" /></a></div>';

}); // end each loop

 //Append array to adviewer div (this way is much faster than doing this individually for each item)

    $(xmlArr).appendTo('#adviewer');
    $('#adviewer').show();
}
});
</script>

Above looks like it 'should' work but it doesn't actually select an random entry...

<script type="text/javascript">

var numLow = 1;
var numHigh = 3;
var adjustedHigh = (parseFloat(numLow))+1;
var numRand = Math.floor(Math.random()*adjustedHigh)+parseFloat(numLow);

$.ajax({
type: 'GET',
url: '../xml/testad.xml',
dataType: 'xml',
success: function(xml_list) {

var xmlArr = [];

$(xml_list).find('entry').each(function() {

 var xml_id       = $(this).attr('id');

 var xml_name      = $(this).find('name').text();
 var xml_link   = $(this).find('link').text();
 var xml_url   = $(this).find('url').text();
       // Add matched items to an array
 xmlArr += '<div id=: '
 xmlArr += xml_id;
 xmlArr += '"class="ad"><ahref="';
 xmlArr += xml_url;
 xmlArr += '" title="'
 xmlArr += xml_name;
 xmlArr += '"><img class="ad" src="';
 xmlArr += xml_link;
 xmlArr += '"></a></div>';

 if(id == numRand).appendTo(div +' class="adviewer"');
 }

}); // end each loop

</script>

Answer 1

I think what you're after is something like this:

$(xml_list).find('entry').each(function(i) {
  var xml_id = $(this).attr('id');
  if(i != numRand) return; //keep going if this wasn't the right ID
  var xml_name = $(this).find('name').text(),
      xml_link = $(this).find('link').text(),
      xml_url  = $(this).find('url').text();

  var div = $('<div />' { 'id': xml_id, 'class': 'ad' });
  div.append($('<a />', { 'href': xml_url, 'title': xml_name }));
  div.append($('<img />', {'class': 'ad', 'src': xml_link }));
  div.appendTo('div.adviewer');
}); // end each loop

There are currently a few syntax errors, mainly with this:

if(id == numRand).appendTo(div +' class="adviewer"');

.appendTo() is called on a jQuery object to append to something, the selector for <div class="adviewer"> would look like div.adviewer, like I have above.

The rest of the changes center around switching to the $(html, props) DOM element creation method to property handle encoding and such (if you have a quote in anything for example). Also id is undefined in your question/code...I'm assuming you meant index here, if you didn't then change the if(i != numRand) to be if(xml_id == numRand) instead, that'll compare to the ID from the XML.