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

  • Автор темы wsr
  • Дата начала
Статус
Закрыто для дальнейших ответов.
W
#1
Имеется дерево каталога товаров.
Строится на основе 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>");
}

?>
 
Статус
Закрыто для дальнейших ответов.