views:

534

answers:

2

I'm searching and displaying results from an xml file using combination of javascript and jquery. The results are displayed as thumbnails which upon clicking should bring up more information in jquery colorbox. The information in the colorbox comes from inline hidden div(#affInfo). I'm trying to append a new div(pWindow) to the hidden div using the onmouseover event defined on the anchor tag in thumbnail. This is not working and the firebug console returns error saying "missing ] after element list showInfo([object HTMLDivElement])"

Please take a look at my code and suggest how can I resolve this error.

<head>
<script type="text/javascript">
$(document).ready(function(){
    //global vars
    var searchBoxes = $(".text");
    var searchBox1 = $("#searchme");

    //Effects for both searchbox
    searchBoxes.focus(function(e){
     $(this).addClass("active");
    });
    searchBoxes.blur(function(e){
     $(this).removeClass("active");
    });

    //Searchbox1, set focus when document is ready
    searchBox1.focus();
    $("#searchme").autocomplete(affiliates);

});
</script>
<script type="text/javascript">
window.onload = loadIndex;

function loadIndex() { // load indexfile
// most current browsers support document.implementation
    if (document.implementation && document.implementation.createDocument) {
     xmlDoc = document.implementation.createDocument("", "", null);
     xmlDoc.load("US_affiliates.xml");
    }
// MSIE uses ActiveX
    else if (window.ActiveXObject) {
     xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
     xmlDoc.async = "false";
     xmlDoc.load("US_affiliates.xml");
    }
}

function showInfo(affText) {
    document.getElementById('affInfo').appendChild(affText);
}

function searchIndex() { // search the index (duh!)
    if (!xmlDoc) {
     loadIndex();
    }
    // get the search term from a form field with id 'searchme'

    var searchterm = document.getElementById("searchme").value;
    var allitems = xmlDoc.getElementsByTagName("Affiliate");
    results = new Array;
    if (searchterm.length < 3) {
     document.getElementById('error').innerHTML = "Enter atleast 3 characters";
    } else {

     for (var i=0;i<allitems.length;i++) {
// see if the XML entry matches the search term,
// and (if so) store it in an array
      var name = allitems[i].lastChild.nodeValue;
      var exp = new RegExp(searchterm,"i");
      if ( name.match(exp) != null) {
       results.push(allitems[i]);
      }
     }
     document.getElementById('error').innerHTML = " ";
       var label=document.getElementById('result'); 
       while( label.hasChildNodes() ) { 
        label.removeChild( label.lastChild ); 
      }
// send the results to another function that displays them to the user
    showResults(results, searchterm);
    }
}
// Write search results to a table
function showResults(results, searchterm) {
    if (results.length > 0) {
     $('#content').triggerTab(2);
     var xy = results.length;
     document.getElementById('error').innerHTML = xy + ' ' + 'results found for' + ' ' + '<strong>' + searchterm + '</strong>';
     var box = document.getElementById('result');

     for(var i=0; i<results.length; i++) {
      var container = document.createElement('div');
      var img = results[i].getAttribute("logo");
      var name = results[i].getAttribute("name");
      var id = results[i].getAttribute("id");
      var ch = results[i].getAttribute("custom_header");
      var cn = results[i].getAttribute("custom_left_nav");
      var xp = results[i].getAttribute("is_xml_partner");
      var type;
      if (img == null){
       ch = "No Co-branding";
      }
      if (cn == null){
       cn = "No Custom Links";
      }
      if (xp != null){
       type = "XML Partner";
      }else
      {
       type = "OEM Partner"
      }
      var icn = document.createElement('div');
      if(ch && cn && xp !== null){
        icn.setAttribute('id', "abc");
      }
       else if(ch && cn !== null){
        icn.setAttribute('id', "ab");
      }
       else if(ch!==null){
        icn.setAttribute('id', "a");
      }
       else if(ch && xp !== null){
        icn.setAttribute('id', "ac");
      }
       else if(cn!== null){
        icn.setAttribute('id', "b");
      }
       else if(cn && xp !== null){
        icn.setAttribute('id', "bc");
      }
       else if(xp!== null){
        icn.setAttribute('id', "c");
      }
      else {
        icn.setAttribute('id', "def");
      }
      var newpara = document.createElement('p');
      newpara.innerHTML = '<span>' + '<strong>' + name + '</strong>' + '<br> ' + '(' + id + ')' + '</span>';
      var newdiv = document.createElement('div');
      var divIdName = 'aff'+i;
      newdiv.setAttribute('id',divIdName);
      var pWindow = document.createElement('div');
      pWindow.setAttribute('id','affdetail');
      pWindow.innerHTML = '<h3>' + 'Customizations' + '</h3>' + '<br/>' + '<span>' + 'Affiliate:' + ' ' + '<strong>' + name + '</strong>' + '</span>' + '<br/>' + '<span>' + 'Type:' + '<strong>' + type + '</strong>' + '</span>' + '<br/>' + '<span>' + 'ID:' + ' ' + '<strong>' + id + '</strong>' + '</span>' + '<br/>' + '<span>' + 'Co-Branding:' + ' ' + '<strong>' +ch + '</strong>' +'</span>' + '<br/>' + '<span>' + 'Custom Left Nav:' + ' ' + '<strong>' + cn + '</strong>' + '</span>' + '<h3>' + 'Packages' + '</h3>' + '<br/>' + '<ul>' + '<li>' + 'Package1' + '</li>' + '<li>'+ 'Package2' + '</li>' + '</ul>';
      newdiv.innerHTML = '<a onClick="' + 'showInfo(' + pWindow + ')' + '"' + ' ' + 'href="#' + '"' + 'class="' + 'pop' + '"' + '>' + 'showpopup' + '</a>';

      container.appendChild(newdiv);
      container.appendChild(icn);
      container.appendChild(newpara);
      box.appendChild(container);
      $(".pop").colorbox({width:"50%", inline:true, href:"#affInfo"});
     }
    } else {
// else tell the user no matches were found
     document.getElementById('error').innerHTML = 'No results found for '+searchterm+'!';
    }

}

</script>
</head>
<body>
<div id="wrapper">

    <div id="content">

        <div id="result">

        </div>
    </div>
</div>
<div class="tempBox">
    <div id="affInfo" style='padding:10px; background:#fff;'>

    </div>
</div>
A: 

You should consider rewriting it only with jQuery, you'd shorten it by 2/3 at least...

If I understood well, the anchor tag is brought in the page dynamically with the thumbnail, and you want that when it appears, a mouseover event on it append a new DIV in some existing DOM element (let's call it myDOMEle). I didn't find any trace of an anchor in your code, but didn't look deeply. Something like $("a").mouseover(function(){ $(myDOMEle).append(myNewContent); }); should work if you call it after each new thumbnail appears.

You can also set it as a callback function to your thumbnail function.

Also, you can use livequery to define a function to apply each time a new A tag - or a new tag with a given class - is inserted in the DOM.

The jquery approach is appending newcontent on each mouseover and besides the content returned is not specific to the thumbnail.
A: 

Guess the mouseover approach is not working. Instead can I modify this jquery code used to bringup the colorbox to point to new div each time.

$(".pop").colorbox({width:"50%", inline:true, href:"#affInfo"});

It currently points to a hidden div(#affInfo) instead of which I wish to point to dynamically generated divs like #affInfo1, #affInfo2 and so on and associate it with onclick event of thumbnail.