1
Je recherche et affiche les résultats d'un fichier XML en utilisant une combinaison de javascript et de jquery. Les résultats sont affichés sous forme de vignettes qui, en cliquant, devraient faire apparaître plus d'informations dans jquery colorbox. Les informations de la palette de couleurs proviennent de div caché inline (#affInfo). J'essaye d'ajouter une nouvelle div (pWindow) à la div cachée en utilisant l'événement onmouseover défini sur la balise d'ancrage dans la vignette. Cela ne fonctionne pas et la console firebug renvoie l'erreur "missing" après la liste des éléments showInfo ([object HTMLDivElement]) "appendchild on mouseover
Veuillez jeter un coup d'oeil à mon code et suggérer comment résoudre cette erreur.
<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>
Je pense que c'est une mauvaise idée parce que chaque fois que l'événement onmouseover se déclenche, ce qui pourrait être très souvent dans une seule page, une instance de l'élément DOM sera ajoutée à cet élément caché. Quel but essayez-vous d'accomplir avec cela? –
Ce fil aurait également plus d'attention si vous avez ajouté les balises: javascript et jquery –
ajouté les balises comme suggéré par Austin. – RuudKok