[JS/AJAX]Dynamic table, bij nieuwe 'onmouseover' div legen

[Freemann]

ben bezig met een (ajax) js script wat bij het onmouseover en onmouseout event van een DIV de onderstaande functies uit moet voeren. De bedoeling is dat als men met de cursor over de DIV gaat, dat er een hidden DIV verschijnt welke wordt gevult met data die in de achtergrond word opgehaald.
Er zijn meerdere DIV regels die verschillende data in de verborgen DIV laten zien.

Het script doet tot nu toe het "openen" van de verborgen DIV en het toevoegen van de data die welke wordt toegevoegd door prod_vraag_antwoord_tekst. Zodra ik over DIV1 ga dan laat hij het verborgen div zien met de data die opgehaald word. Als ik over DIV2 ga dan laat hij het verborgen div zien met de oude data van DIV1 en de nieuwe data van DIV2.

Het Probleem:
Ik krijg het niet voorelkaar om de DIV tussentijds te legen....
Als ik dus over DIV1 ga dan moet de div alleen de relevante data laat zien van de betreffende div.
Als ik over DIV2 ga dan wil ik geen data van 1 meer zien. Eigenlijk moet het object worden "gesloopt" aan het begin van de functie. Krijg dit alleen niet voor elkaar.


Hidecontent handelt af:
het verbergen van de DIV

Showcontent handelt af:
- de cursor lokatie
- het XHR object

prod_vraag_antwoord_tekst handelt af:
- het splitsen van de responseText
- het maken van de table
- de table aan de DIV toevoegen


doormiddel van de onderstaande link/div laat ik alles uitvoeren:
<div onmouseover=""ShowContent('oTableContainer',"&rs("prod_id")&")"" onmouseout=""HideContent('oTableContainer')"" class=""inner_bestelling_main"" style=""width:50px;float:left;align:left;background-color:#F2F2F2;height:18px"">"&rs("Prod_aantal")&"</div>

JavaScript:

function HideContent(d) {
    if(d.length < 1) { 
        return; 
    }
    document.getElementById(d).style.display = "none";
}


function ShowContent(d,id) {
    if (!e)
        var e = window.event||window.Event;
    if('undefined'!=typeof e.pageX) {
        mX = e.pageX;
        mY = e.pageY;
    }else {
        mX = e.clientX + document.body.scrollLeft;
        mY = e.clientY + document.body.scrollTop;
    }

    //var Post_value
    xhr = false;
    try{
        // Opera 8.0+, Firefox, Safari
        xhr = new XMLHttpRequest();
    }catch(e){
         // Internet Explorer Browsers
        try{
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e){
            try{
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }catch(e){
                // Something went wrong
                 alert("Your browser broke!");
                 return false;
             }
         }
     }
     
     
    document.getElementById(d).style.display = "block";
    document.getElementById(d).style.top = mY-150;
    document.getElementById(d).style.left = mX-170;

    xhr.onreadystatechange = prod_vraag_antwoord_tekst;
    var ran_unrounded=Math.random()*10000000;
    var ran_number=Math.floor(ran_unrounded); 
    var queryString = "ajax_functies.asp?pagina=get_vragen&prod_id="+id+"&un="+ran_number;
    xhr.open ('GET',  queryString, true);
    xhr.send (null);
}

function prod_vraag_antwoord_tekst() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            //alert(xhr.responseText);
            val = xhr.responseText;
            split_var = xhr.responseText.split(';;');
            array_size = split_var.length-1;

            myCounter=0;
            var oTable = document.createElement("TABLE"); 
            var oTHead = document.createElement("THEAD"); 
            var oTBody = document.createElement("TBODY"); 
            var oTFoot = document.createElement("TFOOT"); 
            var oRow = new Array();
            var oCell = new Array(); 
            
            oTable.appendChild(oTHead); 
            oTable.appendChild(oTBody); 
            oTable.appendChild(oTFoot); 
            
            // Set the table's border width and colors. 
            oTable.border=1; 
            oTable.width=400; 
            oTable.bgColor="#ffffff"; 
            
            var count_row = 1; 
            var count_col = 2;


            while(myCounter<array_size){
                cell_vulling =split_var[myCounter].split('::');
                oRow[myCounter] = document.createElement("TR"); 
                //alert(cell_vulling)
                oCell[0] = document.createElement("TD");
                oCell[1] = document.createElement("TD");
                oCell[0].innerText = cell_vulling[0]; 
                oCell[1].innerText = cell_vulling[1]; 
                oRow[myCounter].appendChild(oCell[0]); 
                oRow[myCounter].appendChild(oCell[1]); 
                oTFoot.appendChild(oRow[myCounter]); 
                myCounter++;
            }
            oTableContainer.appendChild(oTable); 

        } else {
             alert ('Geen vragen..');
        }
    }
}

[r0bert]

JavaScript:

document.getElementById(d).innerHTML = '';

In HideContent?


Ik zie trouwens niet helemaal het voordeel van al de extra requests naast gewoon alles inladen in hidden divs en dan showen/hiden, of het moet om heel veel data gaan.

[ Voor 52% gewijzigd door r0bert op 19-07-2007 23:49 ]

[Freemann]

Thanx!! Eigenlijk te makkelijk voor woorden

Het geen waar ik he in implementeer is een overzicht van bestellingen.
Een bestelling bevat opzich 1 regel en als men op een icon klikt dan ontvouwen zich onder de betreffende regel alle bestelde producten in ieder een aparte regel. Bij het bestellen van de producten kan het verplicht zijn om enkele vragen te beantwoorden uit een picklist. Nu moeten de gebruikers terug kunnen zien wat zei geantwoord hebben op de vragen. Nu kon ik ervoor kiezen om te klikken op de productregel dat daar onder weer een regel ontvouwt of een mouseover die een floating div laat zien. (Nu heb ik voor het laatste gekozen) Maar de gebruiker zal van 80% van zijn bestelde producten weten wat hij geantwoord heeft. Mijn redenering was om niet alle data in te laden voor die 20% maar voor deze 20% een aparte request te doen. Scheelt een boel data wat in 80% van de gevallen verborgen staat en nooit bekeken wordt, maar wel data kost.



Thanx again!