Как отобразить данные в div без предв.загрузки

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем wsr, 5 янв 2005.

Статус темы:
Закрыта.
  1. wsr

    wsr Гость

    Имеется дерево каталога товаров.
    Строится на основе php запроса из базы данных mssql + javascript для построения дерева.
    Дерево изначально создается двухуровневое, вида:
    1. Процессоры
    1.1 Athlon
    1.2 Sempron
    1.3 Duron
    1.4 Celeron
    1.5 Pentium
    и т.д.
    Так вот. Как можно реализовать, чтобы по нажатию на подкатегорию, без перезагрузки страницы, создавался еще один блок, с содержимым, полученным по запросу из базы данных, т.е. без предварительной загрузки этих данных?
    Вот мой код на данное время:
    HTML:
    <head><script>
    <!--
    document.onmouseover = doDocumentOnMouseOver ;
    document.onmouseout = doDocumentOnMouseOut ;

    function doDocumentOnMouseOver() {
    var eSrc = window.event.srcElement ;
    if (eSrc.className == "item") {
    window.event.srcElement.className = "highlight";
    }
    }

    function doDocumentOnMouseOut() {
    var eSrc = window.event.srcElement ;
    if (eSrc.className == "highlight") {
    window.event.srcElement.className = "item";
    }
    }

    var bV=parseInt(navigator.appVersion);
    NS4=(document.layers) ? true : false;
    IE4=((document.all)&&(bV>=4)) ? true : false;
    DOM=(!document.layers && !document.all && bV>=4) ? true : false; // A hack to guess if the browser supports the DOM
    capable = (NS4 || IE4 || DOM) ? true : false;

    function expandIt(){return}
    function expandAll(){return}

    isExpanded = false;

    function getIndex(el) {
    ind = null;
    for (i=0; i<document.layers.length; i++) {
    whichEl = document.layers[i];
    if (whichEl.id == el) {
    ind = i;
    break;
    }
    }
    return ind;
    }

    function arrange() {
    nextY = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
    for (i=firstInd+1; i<document.layers.length; i++) {
    whichEl = document.layers[i];
    if (whichEl.visibility != "hide") {
    whichEl.pageY = nextY;
    nextY += whichEl.document.height;
    }
    }
    }

    function initIt(){
    if (NS4) {
    for (i=0; i<document.layers.length; i++) {
    whichEl = document.layers[i];
    if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
    }
    arrange();
    } else if(IE4) {
    tempColl = document.all.tags("DIV");
    for (i=0; i<tempColl.length; i++) {
    if (tempColl(i).className == "child") tempColl(i).style.display = "none";
    }
    } else if(DOM) {
    tempColl = document.getElementsByTagName("DIV");
    for (i=0; i<tempColl.length; i++) {
    if (tempColl(i).className == "child") tempColl(i).style.visibility = "hidden";
    }
    }
    }

    function expandIt(el) {
    if (!capable) return;
    if (IE4) {
    expandIE(el);
    } else if(NS4) {
    expandNS(el);
    } else if(DOM) {
    expandDOM(el);
    }
    }

    function expandIE(el) {
    whichEl = eval(el + "Child");

    // Modified Tobias Ratschiller 01-01-99:
    // event.srcElement obviously only works when clicking directly
    // on the image. Changed that to use the images's ID instead (so
    // you've to provide a valid ID!).

    //whichIm = event.srcElement;
    whichIm = eval(el+"Img");

    if (whichEl.style.display == "none") {
    whichEl.style.display = "block";
    whichIm.src = "images/minus.gif";
    }
    else {
    whichEl.style.display = "none";
    whichIm.src = "images/plus.gif";
    }
    window.event.cancelBubble = true ;
    }

    function expandNS(el) {
    whichEl = eval("document." + el + "Child");
    whichIm = eval("document." + el + "Parent.document.images['imEx']");
    if (whichEl.visibility == "hide") {
    whichEl.visibility = "show";
    whichIm.src = "images/minus.gif";
    }
    else {
    whichEl.visibility = "hide";
    whichIm.src = "images/plus.gif";
    }
    arrange();
    }

    function expandDOM(el) {

    whichEl = document.getElementById(el + "Child");
    whichIm = document.getElementById(el + "Img");

    if (whichEl.style.visibility != "visible") {
    whichEl.style.visibility = "visible";
    whichIm.src = "images/minus.gif";
    } else {
    whichEl.style.visibility = "hidden";
    whichIm.src = "images/plus.gif";
    }

    }

    function showAll() {
    for (i=firstInd; i<document.layers.length; i++) {
    whichEl = document.layers[i];
    whichEl.visibility = "show";
    }
    }

    function expandAll(isBot) {
    // Brian Birtles 7-Jun-00 : This fn might be unnecessary (for phpMyAdmin).
    // My changes are certainly untested.
    newSrc = (isExpanded) ? "images/plus.gif" : "images/minus.gif";

    if (NS4) {
    // TR-02-01-99: Don't need that
    // document.images["imEx"].src = newSrc;
    for (i=firstInd; i<document.layers.length; i++) {
    whichEl = document.layers[i];
    if (whichEl.id.indexOf("Parent") != -1) {
    whichEl.document.images["imEx"].src = newSrc;
    }
    if (whichEl.id.indexOf("Child") != -1) {
    whichEl.visibility = (isExpanded) ? "hide" : "show";
    }
    }

    arrange();
    if (isBot && isExpanded) scrollTo(0,document.layers[firstInd].pageY);
    } else if(IE4) {
    divColl = document.all.tags("DIV");
    for (i=0; i<divColl.length; i++) {
    if (divColl(i).className == "child") {
    divColl(i).style.display = (isExpanded) ? "none" : "block";
    }
    }
    imColl = document.images.item("imEx");
    for (i=0; i<imColl.length; i++) {
    imColl(i).src = newSrc;
    }
    } else if(DOM) {
    divColl = document.getElementsByTagName("DIV");
    for (i=0; i<divColl.length; i++) {
    if (divColl(i).className == "child") {
    divColl(i).style.visibility = (isExpanded) ? "hidden" : "visible";
    }
    }
    imColl = document.getElementsByName("imEx");
    for (i=0; i<imColl.length; i++) {
    imColl(i).src = newSrc;
    }
    }

    isExpanded = !isExpanded;
    }

    /*with (document) {
    if(DOM) {
    // Brian Birtles : This is not the ideal method of doing this
    // but under the 7th June '00 Mozilla build (and many before
    // it) Mozilla did not treat text between <style> tags as
    // style information unless it was written with the one call
    // to write().
    var lstyle = "<style type='text/css'>";
    lstyle += ".child {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration:none; visibility:hidden}";
    lstyle += ".parent {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration:none;}";
    lstyle += ".item { color: #FFFFFF; text-decoration:none; font-size: 8pt;}";
    lstyle += ".highlight { color: #FFFFFF; font-size: 8pt;}";
    lstyle += ".heada { font: 12px/13px; Times; color: #FFFFFF}";
    lstyle += "DIV { color:#FFFFFF; }";
    lstyle += "</style>";
    write(lstyle);
    } else {
    write("<style type='text/css'>");
    if (NS4) {
    write(".parent {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; position:absolute; visibility:hidden; color: white;}");
    write(".child {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt;color: #FFFFFF; position:absolute; visibility:hidden}");
    write(".item { color: darkblue; text-decoration:none;}");
    write(".regular {font-family: Arial,Helvetica,sans-serif; position:absolute; visibility:hidden}");
    write("DIV { color:white; }");
    } else if(IE4) {
    write(".child {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration:none; display:none}");
    write(".parent {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration:none;}");
    write(".item { color: #FFFFFF; text-decoration:none; font-size: 8pt;}");
    write(".highlight { color: #FFFFFF; font-size: 8pt;}");
    write(".heada { font: 12px/13px; Times}");
    write("DIV { color:white; }");
    }
    write("</style>");
    }
    }*/

    onload = initIt;
    //-->
    </script>
    <? $connected_mssql = mssql_connect ( "192,168,1,0:1433", "user", "pass" ) or die ("Could not connect to database: ".mssql_get_last_message());
    mssql_select_db('MY_DB', $connected_mssql);
    $razdel = mssql_query("SELECT * FROM DBO.RAZDELY WHERE (RAZVPRICE='+') ORDER BY RAZDELNAZ");
    //$data1 = mssql_fetch_array($razdel);

    $z=0;
    while($tmp1 = mssql_fetch_array($razdel))
    {
    $data1[$z] = $tmp1;
    $z++;
    }
    for ($ii=0;$ii < $z;$ii++)
    {
    print ("<div id=\"el".$ii."Parent\" class=\"parent\"><a class=\"item\" href=\"\" onClick=\"expandIt('el".$ii."'); return false;\"><img name=\"imEx\" SRC=\"images/plus.gif\" BORDER=0 ALT=\"+\" width=9 height=9 ID=\"el".$ii."Img\"></a><font color=\"black\" class=\"heada\">");
    echo $data1[$ii][1];
    print ("</font></div>");

    $id = $data1[$ii][0];


    $cat = mssql_query("SELECT KATEGORY, KATNAZ, KATPRICE FROM DBO.KATEG WHERE (RAZDEL ='$id') AND (KATPRICE='+') ORDER BY KATNAZ");
    //              $data2 = mssql_fetch_array($cat);

    $z2=0;
    while($tmp2 = mssql_fetch_array($cat))
    {
    $data2[$z2] = $tmp2;
    $z2++;
    }
    print ("<div ID=\"el".$ii."Child\" CLASS=\"child\">");
    for ($i2=0;$i2 < $z2;$i2++)
    {
    print ("<nobr><a href=\"http://\"><img src=\"images/view.gif\" border=0></a><a class=\"item\" href=\"http://\"><font color=\"black\" class=\"heada\">");
    echo $data2[$i2][1];
    print ("</font></a></nobr><br>");
    }
    print ("</div>");
    }

    ?>
     
Загрузка...
Статус темы:
Закрыта.

Поделиться этой страницей