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>